React - CRA

React CRA 내용 메모, Vue-CLI 의 create 와 같이 기본 셋팅을 쉽게 해주는 도구

설치 주요 라이브러리 확인하기

• react, react-dom: React 를 사용하기 위한 기본 라이브러리
• react-scripts: create-react-app, 해당 라이브러리에 기본적인 라이브러리가 다 들어가 있다.
• web-vitals: Google 사이트 성능 측정 라이브러리
• 그 외 테스트 유틸

script

생성되는 기본 실행 스크립트는 eject 가 있는게 Vue-CLI 랑 다른 점이였던거 같다. 지옥문이라는 eject .. 시험 삼아 동작해봤는데 진짜.. 라이브러리랑 설정이 엄청나게 밖으로 나온다.

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

• start: 개발모드 동작
• build: 프로덕션 빌드
• test: 테스트
• eject: cra 탈출

기타

빌드한 프로덕션을 돌릴경우 CRA 는 아래와 같이 권장한다.
그렇지만 그냥 nginx 나 다른 웹서버로 돌리는 것이 더 좋을 것 같다. 참고만 하자.

npm install -g serve

# -s option 어떤 라우팅으로 요청해도 index.html 로 응답하도록 함, spa에 유용
serve -s build