React: CRA

1. CRA(create-react-app)

React 개발 환경을 쉽게 구축해주는 도구.

 

💻 CRA를 통해 자동으로 구축되는 요소:

• webpack: 모듈 번들러
• babel: JSX를 JavaScript로 컴파일
• jest: 기능 테스트
• eslint: 코드 교정 및 스타일 맞추기(형상관리)
• polyfill: 구형 브라우저에서 지원하지 않는 문법(기능) 지원
• HMR(Hot Module Replacement): reload 없이 변경사항 반영
• CSS 후처리: sass 사용시 CSS 컴파일, 구형 브라우저에는  Vendor 접두사(perfix) 필요

※ 단점: webpack, babel, eslint 등 설정 변경하기 어려움.(설정을 변경할 경우 eject)

 

 

2. CRA 사용

 

npx create-react-app 프로젝트폴더명

 

🌟 CRA는 서버사이드 렌더링(SSR)을 지원하지 않는다

CRA에 eject하여 webpack과 babel을 설정하면 서버사이드 렌더링을 구현할 수는 있으나 효율적이지는 않으므로

서버사이드 렌더링이 필요하면 SSR을 기본적으로 제공하는 Next.js를 사용하는 것을 권장.

 

 

3. CRA scripts

 

🌟package.json

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

 

1) start

- React 개발 서버 구동.

- 기본 http로 실행

 

✍🏻 https 실행 원하는 경우

• CMD

set HTTPS=true && npm start

• Power Shell

($env:HTTPS = "true") -and (npm start)

• Linux, MacOS

HTTPS=true npm start

 

2) build

- 실제 서버 배포시 사용.

- 빌드시 정적파일 생성(/build 파일)

- 서버에 별도의 애플리케이션 실행 없음

 

3) test

- 테스트 실행

- 기본으로 존재하는 App.test.hs 파일 테스트 실행.

- 파일이름.test.js, 파일이름.spec.js 형식 테스트 파일이면 인식 가능하여 테스트실행됨.

 

4) eject

- react-scripts를 사용하지 않고 모든 설정파일 추출

- CRA를 기본으로 직접 개발 환경 설정 및 구축하고 싶을 경우 사용

- 한 번 실행하면 되돌릴 수 없음

 

 

4. 환경변수

 

1) NODE_ENV 환경변수

CRA에서 기본적으로 가지고 있는 환경변수, 실행 명령어에 따라 자동으로 NODE_ENV 값이 정해짐.

process.env.NODE_ENV

(1) 개발 환경: development

npm start로 실행할 경우

 

(2) 테스트 환경: test

npm test로 실행할 경우

 

(3) 배포 환경: production

npm run build로 실행할 경우

 

 

2) 새로운 환경변수 설정

React 환경 변수명은 생성시 REACT_APP_ 으로 시작.