CRA(Create React App) 실습

CRA

CRA는 Create React App의 약자로서, 공식문서에서 CRA가 스스로를 소개하는 문구는 "Set up modern web app by running one command"이다.
이 말처럼, 명령어 하나만으로 리액트 개발환경을 구축할 수 있다. 좀 더 정확히 CRA에 대해 알아보자면 CRA는 React를 이용해 웹 애플리케이션을 개발하기 위해서 필요한 도구들을 모아놓은 "툴체인" 중 하나이다.

*툴체인이란? 여러가지 도구(Tool) 등을 연결해둔 것

툴체인이 왜 필요할까?

1. React는 UI를 구축하기 위한 자바스크립트 라이브러리이기 때문에 UI 이외의 많은 기능들을 구축하기 위해서는 다른 패키지들과 조합을 해서 사용해야 한다.
2. 그런데 필요한 패키지들을 모두 다운받고, 도구들끼리 서로 호환성을 맞춰주고, 필요한 환경설정을 하는 일은 숙련자에게도 꽤 번거롭고 초심자에게는 어려운 작업이다.
3. 이러한 이유들로 인해서 React 사용자들은 리액트와 필요한 도구들을 미리 조합해서 설정해둔 '툴체인'을 만들어두고 이를 사용해서 개발 환경을 구축하는 방식을 활용하고 있다.

추천 툴체인

• React를 배우고 있거나 아니면 새로운 싱글 페이지 앱을 만들고 싶다면 Create React App -> CRA!!🤩
• 서버 렌더링 Node.js 웹사이트를 만들고 있다면 Next.js
• 고정적인 콘텐츠 지향적 웹사이트를 만들고 있다면 Gatsby
• 컴포넌트 라이브러리 혹은 이미 있는 코드 베이스에 통합을 한다면 더 유연한 툴체인

React 공식문서

CRA 시작하기

0. CRA를 활용하기 위해서는 Node와 NPM이 설치되어야 한다.

1. 터미널에서 프로젝트를 시작하고자 하는 폴더에 진입해준다.
   혹은 VS Code를 실행해서 해당 폴더를 오픈해준다.

2. 터미널을 얼어 pwd 로 현재 경로를 확인한다.
   이 경로가 내가 프로젝트를 설치할 폴더다.

3. npx creat-react-app [프로젝트명] 명령어를 실행한다.
   *npx라는 명령어는 npm에서 제공하는 명령어로, 해당 패키지를 실행하겠다는 의미다. npx를 활용하면 내 PC에 Create-React-App을 다운받지 않고 바로 실행해서 사용할 수 있다.

4. 계속 진행하겠냐는 질문에 y를 입력하면 'Created Git Commit, Success, Created-my-first-react-app 등의 메세지와 함께 설치가 완료된다. 그리고 실행할 수 있는 여러 스크립트들을 보여주고 아래의 명령어를 타이핑해서 시작해보라고 제안한다.

5. 현재 위치에 어떤 폴더들이 생겼는지 확인해보기 위해 ls 명령어를 입력해보면 자신이 생성한 프로젝트 이름으로 새로운 폴더가 생성되어 있는 것을 확인할 수 있다.

6. 위의 제안처럼 설치된 폴더로 이동(cd [폴더명])해서 npm start 명령어를 실행한다.

7. 제어를 허용하겠냐는 메시지가 뜨고 허용을 누르면 리액트 애플리케이션이 실행되고, 리액트 로고가 돌아가고 있는 화면이 실행된다.

8. 이렇게 creat-react-app 툴체인을 이용해서 간단하게 리액트로 프로젝트 개발 환경을 구성한 것을 확인할 수 있다. => CRA 설치 완료 🍀

9. 실행된 로컬 서버를 종료하기 위해서는 터미널에서 ctrl(command) + C 키를 입력하면 서버가 종료된다.

CRA 구조 확인하기

1. 상위폴더 React 실습이 아닌, 방금 본인이 생성한 폴더를 VS Code로 다시 연다.

2. 기본적으로 생성된 폴더구조를 확인할 수 있다. 아래 사진과 같아야 한다. 각 폴더와 파일이 무슨 역할을 하는지 알아보자!
   

⚙️node_modules - .gitignore - package.json 의 상관관계

• node_modules : npm으로 설치한 패키지들이 실제로 저장되는 폴더
  • node_modules 폴더를 열어보면, 많은 폴더들이 내부에 있다. CRA가 프로젝트 환경을 구성하면서 필요한 수많은 패키지들은 다운받아줬다.
• .gitignore : 버전관리 시스템인 git에서 사용하는 특별한 파일로, 이 파일 안에 기록된 파일들이나 폴더들은 git으로 관리되고 있지 않는다.
  • 그래서 굳이 git으로 버전관리를 할 필요없는 파일이나 폴더들은 이곳에 기입해두면 git에서 추적하지 않게 된다.
  • CRA를 이용할 때는 명시적으로 git init 등의 명령을 실행할 필요가 없다.
• package.json : 만들고 있는 어플리케이션에 대한 정보가 기록 된 파일
  • CRA 외 추가로 설치된 라이브러리/패키지 정보가 이 파일에 기록된다.

🤔 여기서 한가지 의문점이 들 수 있다.
node_modules 에는 이 프로젝트를 구동하기 위해서 필요한 여러가지 패키지들이 저장되어 있고, gitignore에 등록한 파일이나 폴더 등은 git에도 업로드되지 않는다고 했는데, 그렇다면 우리가 github에 올라간 레파지토리를 clone 받았을 때는 node_modules 폴더가 없을 것이다.

=> node_modules 폴더가 없는 이유는 git commit 시 node_modules 폴더가 빠졌기 때문이다. git commit 시 폴더가 포함되어 commit 되길 바란다면 주석처리 또는 삭제하면 된다.

=> 혹은 $npm i 를 입력해 node_modules 를 설치해준다.
이 때, package-lock.json 설정 파일을 참고해 node_modules 폴더가 생성이 된다. (package-lock.json 파일이 존재하지 않을 경우 package.json 참고)

• package.json 파일과 package-lock.json 파일에는 버전 정보와 의존성 정보 등이 기재되어 있다.
• package.json, node_modules 수정이 되면 package-lock.json 파일도 업데이트가 된다.

🪄 하지만 package-lock.json 파일에는 보다 정확한 버전 정보가 있기 때문에 git commit 시 같이 commit하는걸 권장한다.