env-cmd를 사용하지 않고도 process.env.REACT_APP_API_URL과 같은 방식으로 환경 변수에 접근할 수 있습니다. 리액트 프로젝트에서 .env 파일을 사용할 때, REACT_APP_ 접두사를 붙인 변수는 자동으로 리액트 애플리케이션에서 인식되는 환경 변수로 설정됩니다. 이러한 접두사를 붙이면 .env 파일에서 정의한 변수를 process.env를 통해 접근할 수 있습니다. 따라서, env-cmd -f .env 명령어를 사용하지 않고도 process.env.REACT_APP_API_URL과 같은 방식으로 .env 파일에 정의된 환경 변수에 접근할 수 있습니다. 이는 Create React App과 같은 도구에서 기본적으로 지원하는 동작입니다. env-cmd는 더 복잡한 환경 변수 관리..

env-cmd 설치 후 console.log(process.env.API_URL); // "https://api.example.com" console.log(process.env.API_KEY); // "abc123" process는 Node.js에서 제공되는 전역 객체입니다. 이 객체를 통해 현재 실행 중인 프로세스에 대한 정보와 제어를 할 수 있습니다. Node.js는 단일 스레드 기반의 비동기 이벤트 주도 아키텍처를 가지고 있으며, process 객체는 이벤트 루프와 관련된 정보를 제공하고 프로세스 수준의 작업을 수행하는 데 사용됩니다. process.env 속성을 통해 환경 변수에 접근할 수 있으며, process.argv를 통해 커맨드 라인 인수에 접근할 수도 있습니다. 환경 변수를 사용하는 경..

craco-less와 @craco/craco는 둘 다 JavaScript 기반의 도구입니다. 이들은 React 프로젝트에서 사용되는 Craco라는 도구의 일부입니다. Craco는 Create React App (CRA)의 설정을 커스터마이즈하기 위한 도구로 사용됩니다. CRA는 React 애플리케이션을 쉽게 생성하기 위한 툴체인입니다. 하지만 CRA는 내부적으로 설정을 커스터마이즈하기에는 제한이 있습니다. 이런 경우에 Craco를 사용하면 CRA의 설정을 직접 변경하고 확장할 수 있습니다. craco-less는 Craco의 플러그인 중 하나로, Less (CSS 전처리기)를 React 프로젝트에서 사용할 수 있도록 도와줍니다. Less는 CSS에 변수, 함수, mixin 등을 사용할 수 있게 해주는 기능..

cra 로 리액트 만들면 있는 reportWebVitals() reportWebVitals은 React 애플리케이션의 성능 측정을 위한 도구입니다. 이 도구는 개발자가 애플리케이션의 성능 지표를 측정하고 모니터링할 수 있도록 도와줍니다. React 애플리케이션은 사용자 경험을 개선하기 위해 성능을 최적화해야 합니다. reportWebVitals는 애플리케이션의 성능을 측정하는 데 사용되는 핵심 지표인 LCP(Largest Contentful Paint), FID(First Input Delay), CLS(Cumulative Layout Shift)와 같은 지표를 추적합니다. LCP(Largest Contentful Paint): 사용자가 페이지를 로드했을 때 가장 큰 콘텐츠가 화면에 표시되는 시간을 측정..

useImperativeHandle과 forwardRef는 React에서 자식 컴포넌트의 메서드나 속성을 부모 컴포넌트에서 직접 접근할 수 있도록 해주는 기능입니다. forwardRef는 React 컴포넌트를 정의할 때 사용되는 함수로, 부모 컴포넌트가 자식 컴포넌트의 ref 속성을 통해 자식 컴포넌트의 인스턴스에 접근할 수 있게 합니다. forwardRef 함수를 사용하면 부모 컴포넌트에서 자식 컴포넌트의 메서드를 호출하거나 속성에 접근할 수 있습니다. useImperativeHandle은 함수형 컴포넌트 내에서 사용되는 Hook입니다. 이 Hook은 부모 컴포넌트에서 자식 컴포넌트의 특정 함수나 값을 직접적으로 호출하거나 사용할 수 있도록 합니다. useImperativeHandle을 사용하여 자식 ..

난 준적이 없는 배경색이 들어가 있어서 style={isFunction(onRowClick) ? { cursor: 'pointer' } : { cursor: 'auto' }} className={index === selectedIndex ? 'table_tr_selected' : '' } >>>>>> style={ isFunction(onRowClick) ? { cursor: 'pointer', ...(index === selectedIndex ? { backgroundColor: '#3c8dbc', color: 'white' } : {}) } : { cursor: 'auto', ...(index === selectedIndex ? { backgroundColor: '#3c8dbc', color: 'wh..

**은 파이썬에서 사용되는 "딕셔너리 언패킹" 연산자입니다. 딕셔너리 언패킹은 딕셔너리의 키-값 쌍을 개별 인자로 전달하는 데 사용됩니다. 일반적으로 딕셔너리 언패킹은 함수 호출 시 인자 전달에서 사용됩니다. render 함수에서도 이 원리가 적용됩니다. render 함수는 세 번째 인자로 딕셔너리 형태의 컨텍스트 데이터를 받습니다. 딕셔너리 언패킹을 사용하면 해당 딕셔너리의 키-값 쌍이 개별 인자로 전달되어 함수 호출 시 컨텍스트 데이터로 사용됩니다. 즉, 위의 코드에서 **kwargs는 딕셔너리 형태의 kwargs 변수를 언패킹하여, 해당 딕셔너리의 키-값 쌍이 render 함수의 세 번째 인자로 전달됩니다. 이를 통해 템플릿에서 추가적인 컨텍스트 데이터로 활용할 수 있습니다. 딕셔너리 언패킹은 파이..

일반적으로, 속성 이름을 나타내는 데에는 첫 번째 예제인 { asd: "asd" }의 방식을 선호합니다. 이는 객체 리터럴의 단축 문법으로, 코드를 더 간결하게 만들어 줍니다. 또한, 유효한 식별자로 구성된 속성 이름은 따옴표 없이 사용할 수 있으므로 코드를 작성할 때 불필요한 따옴표를 생략할 수 있습니다. 두 번째 예제인 { "asd": "asd" }의 방식은 모든 문자열을 속성 이름으로 사용할 수 있기 때문에 더 유연합니다. 이를 통해 공백이나 특수 문자를 포함하는 속성 이름을 지정할 수 있습니다. 또한, 예약어와 충돌하는 경우에도 따옴표를 사용하여 속성 이름을 지정할 수 있습니다. 따라서, 속성 이름에 제약이 없거나 특수한 경우가 아니라면 첫 번째 예제의 방식을 더 일반적으로 사용합니다. 이는 코드..