파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 강의를 듣고 정리한 글입니다.

create-react-app

버전마다 생성되는 프로젝트 구성이 달라질 수 있습니다.
기존 프로젝트에 지속적으로 버전 업데이트가 필요합니다.

• create-react-app을 줄여서 cra라고도 한다.
• facebook팀에서 관리한다.
• webpack, babel, eslint등의 기본 설정이 된 리액트 프로젝트 생성
  • 설치: yarn global add create-react-app (버전: 3.0.1)
• 프로젝트 생성하기

  create-react-app --help
  create-react-app <프로젝트-디렉토리>

  참고1 ) 또 다른 CRA 프로젝트 생성 명령

  yarn create react-app <프로젝트-디렉토리>
  npx create-react-app <프로젝트-디렉토리>

  참고2) TypeScript 언어 자원이 들어간 프로젝트

  yarn create react-app <프로젝트-디렉토리> --template typescript
  npx create react-app <프로젝트-디렉토리> --template typescript

• webpack.config.js라는 자바스크립트 파일은 숨겨져 있다. yarn eject명령으로 끄집어 낼 수 있으나, 가급적이면 추천하지 않음 ⇒ 기본 cra만 바꿔주면 최신 세팅으로 자동으로 가져가지만 eject시 그에 대한 유지보수 책임을 져야 한다.

개발서버 구동

---

$ cd <디렉토리>
$ yarn start

구동 결과

⇒ src/App.js 파일을 수정하고, 저장해보세요. 새로고침 없이도 자동으로 UI가 업데이트 됩니다.

빌드해보기

$ yarn build && cd build  # 빌드 && 빌드 디렉토리로 이동
$ python -m http.server  # 파이썬으로 정적 서빙
$ yarn global add serve  # 노드로 정적 서빙