React[Creating Project] - Create React App

01.Create React App

• Create React App은 줄여서 CRA라고 부릅니다.
• 페이스북에서 제공하는 오픈소스로써 리액트 프로젝트 생성 뿐만 아니라 개발에 필요한 여러가지 기능들을 제공 해줍니다.
• CRA 바로가기

02.React App 생성

$ npx create-react-app tic-tac-toc

• 터미널에 해당 명령어를 입력하여 tic-tac-toc 이라는 이름의 react-app을 생성합니다.
• npx: npm 5.2.0 이상부터 함께 설치된 커맨드라인 명령어
• npx는 라이브러리를 현재 최신 버전의 라이브러리를 확인하고 실행해주는 명령어입니다.

03.Package.json 파일 구조 이해하기

"dependencies": {
   "@testing-library/jest-dom": "^5.16.4",
   "@testing-library/react": "^13.2.0",
   "@testing-library/user-event": "^13.5.0",
   "react": "^18.1.0",
   "react-dom": "^18.1.0",
   "react-scripts": "5.0.1",
   "web-vitals": "^2.1.4"
 },

• 골뱅이 기호로 시작하는 모듈 (@testing-library/jest-dom, @testing library/react, "@testing-library/user-event)들은 모두 Testing 작업을 도와주는 모듈입니다.
• react와 react-dom은 react를 사용하는데 반드시 필요한 핵심 모듈입니다.
• react-scripts는 create-react-app의 개발모드 실행 및 배포할 파일을 생성 해주는 모듈입니다.
• react-scripts의 버전은 create-react-app의 버전과 같습니다.
• web-vitals은 구글에서 사이트 경험을 측정하고 개선 해주는 모듈입니다.

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

• scripts에는 create-react-app에서 사용할 수 있는 명령어가 있습니다.
• 해당 명령어들은 모두 react-scripts의 (start, build, test, eject) 작업들을 실행 시켜주는 명령어 입니다.

04.개발 모드 실행

$ npm start

• 해당 명령어는 개발 모드로 로컬에서 열 수 있도록 하는 CLI명령어 입니다.
• 개발 모드에서는 소스코드 수정시 웹 브라우저에 실시간 반영됩니다.

05.배포 버전으로 빌드하기

$ npm run build

• 개발자가 작업한 소스코드를 컴파일을 진행하게 하는 명령어입니다.
• 터미널에 해당 명렁어를 입력하면 빌드가 진행되고 배포 버전으로 파일들이 만들어집니다.
• Project 폴더 바로 아래 build 라는 폴더가 만들어지고, 그 안에 Production 배포를 위한 파일들이 생성되게 됩니다.

$ npm install serve -g
$ serve -s build

• 위의 명령어는 serve라는 패키지를 전역으로 설치합니다.
• serve라는 명령어를 -s 옵션으로 build 폴더를 지정하여 실행합니다.
• -s 옵션은 어떤 라우팅으로 요청해도 index.html을 응답하도록 합니다.

06.테스트

$ npm test

• create-react-app에서는 Jest를 기반으로 test code들을 작성할 수 있습니다.
• npm test를 통해 Jest로 test code가 실행이 되게 됩니다.

07.npm run eject

$ npm run eject

• 해당 명령어는 create-react-app에서 코드를 작성하다가 더이상 이를 통해 관리받지 않겠다고 하는 명령어입니다.
• 이는 프로젝트 환경 설정을 커스터마이즈하기 위해 create-react-app에서 제공하지 않는 범위의 변경 사항을 eject하여 처리하려는 목적으로 사용하게 됩니다.
• 현업에서 대부분의 경우 CRA의 범위에서 해결하려고 하기 때문에 자주 사용되지는 않는 명령어라 할 수 있습니다.