React 7

[React] create-react-app 으로 typescript 프로젝트 시작하기

create-react-app 으로 프로젝트 생성 // create-react-app & cra-template-typescript 설치 npx install -g create-react-app cra-template-typescript // 프로젝트 생성 npx create-react-app "프로젝트명" --template typescript create-react-app 에서 --template 옵션만 typescript로 설정해도 기본적인 라이브러리가 모두 포함된 프로젝트가 생성됩니다. src 내의 파일을 보면 tsx로 생성되어있습니다. ESLint 설정 ESLint 란? ESLint는 자바스크립트를 ES 표준 규격에 맞는지 자동으로 분석해주는 도구입니다. 문법상 오류만 표시되도록 지정할 수도 있..

React 2022.02.18

[React] typescript 프로젝트에 webpack 적용하기

create-react-app 으로 만든 typescript 프로젝트에 webpack 적용하기 필요한 패키지 설치 npm i -D file-loader ts-loader npm i -D webpack webpack-cli html-webpack-plugin webpack-dev-server npm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react npm i -D typescript @babel/preset-typescript ts-loader fork-ts-checker-webpack-plugin npm i -D rimraf webpack 관련 패키지 webpack: Webpack(웹팩) 라이브러리 webpack-cli: Webpac..

React 2022.02.10

CREATE-REACT-APP 환경 변수 설정

React에서 환경변수를 이용해 배포환경과 개발환경을 간단하게 분리하는 방법을 알아보겠습니다. NODE_ENV 환경변수 일반적으로 Node.js에서는 NODE_ENV를 production(배포) / development(개발) 로 구분하여 사용합니다. create-react-app은 실행 명령어에 따라 자동으로 NODE_ENV값이 정해집니다. 실행 명령어 NODE_ENV npm start development npm run build prodection npm test test 때문에 개발자가 따로 설정하더라도 무시되며, 기존에 정해진 값이 들어갑니다. REACT_APP_OOO 환경변수 REACT_APP_ 으로 시작하는 새로운 환경변수를 설정할 수 있습니다. NODE_ENV와 REACT_APP_으로 시작..

React 2021.11.01
728x90
반응형