Create-React-App에 대해 알아보자

 

https://create-react-app.dev/

👆공식 사이트

Create-React-App이 뭘까?

• 여러 패키지를 조합하여 리액트 개발 환경을 구축해준다. (바벨, 웹팩, 테스트, ES6+, CSS 후처리 등)
• 줄여서 cra라고 부르기도 한다.

기본 디렉토리 구조

npx create-react-app cra-test

위 명령어로 프로젝트를 생성하면, 아래와 같은 디렉토리 구조가 생겨난다.

cra-test/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg
    serviceWorker.js

• src 폴더 밑에 있어야 import 가능하다.
• public 폴더
  • index.html이 참조하는 파일들
  • pubic 폴더 밑에 js 파일이나 css 파일을 두고 연결시켜도 되지만, src 폴더 밑에서 import 해야 빌드 시 압축된다.
  • 이미지나 폰트 파일도 src 폴더 밑에서 import 하면 빌드 시 캐싱 해주므로 유리하다.
  • index.html을 직접 수정 가능(title 태그 등)        ※ title을 페이지별로 다르게 하고 싶으면 react-helmet 라이브러리 사용
• serviceWorker.js: 오프라인에서도 잘 동작하는 앱을 만들기 위한 파일이다. (기본적으로 OFF 상태)

CRA 명령어

• npm start
  • 개발 모드로 프로그램 실행
  • 코드 수정 시 화면에 즉시 반영
  • 브라우저에 에러 메시지 출력(클릭 시 에러 발생한 파일이 열림)
• https 환경으로 실행
  • 맥: HTTPS=true npm start
  • 윈도우: set HTTPS=true && npm start
• 빌드: npm run build (압축 및 캐싱)        ※ 이미지는 10kb보다 작으면 문자열 형태로 js에 포함된다.

CRA의 자바스크립트 지원 범위

• ES6: async await, spread 연산자, 타입스크립트 등을 지원한다.
• 폴리필: ES6+에서 추가된 기능(e.g. padStart) 또는 IE 지원을 위해 폴리필 추가가 가능하다. (core-js)

환경변수 사용하기

• 기본 제공 변수: process.env.NODE_ENV 로 접근할 수 있다.
  • npm start로 실행 시: development
  • npm test로 실행 시: test
  • npm run build로 실행 시: production
• 기타 환경 변수: process.env.REACT_APP_ 형태로 접근할 수 있다.
  • 환경별로 .env.development, .env.test, .env.production에 작성한다.
  • 만약 staging과 같은 환경이 추가적으로 필요하다면?
    -> 스크립트 단에서 실행방법을 나누고 cp로 .env에 복사 후 각 환경별로 환경변수를 받고 실행하면 된다. (참고문서)

“scripts”: {
  “start”: “cp ./.env.dev ./.env && react-scripts start”,
  “start:staging”: “cp ./.env.staging ./.env && react-scripts start”,
  “start:production”: “cp ./.env.prod ./.env && react-scripts start”,
}

CSS autoprefixer

• CRA는 최신 CSS 기능에 붙여야 하는 벤더 접두사(-webkit, -ms 등) 대신 붙여준다.