create-react-app(CRA) 정리

✏️ create-react-app이란?

React앱을 간편하게 만들 수 있도록 자동으로 빌드해 주는 Boiler Plate이다

복잡한 초반세팅 없이 간단하게 React 프로젝트를 구성할 수 있다

create-react-app를  축약해 CRA이라고도 부른다

✏️ create-react-app 장점

개발자들이 많이 사용하는 라이브러리 등이 대부분 세팅되어 있어서 이후  필요한 라이브러리만 추가로 설치해 주면 된다

✏️ create-react-app 단점

웹팩(Webpack), 바벨(Babel),  린트(Eslint) 등 세부 설정이 package.json 안에 숨겨져 있어 구성요소들을 세부 설정이나 수정하기 위해서는 *eject 하여 숨겨진 설정들을 밖으로 꺼내야 한다는 것이 익숙하지 않으면 다소 힘들고 어렵다는 점이다

---

✏️ npx로 CRA 설치

 ※ npm로 CRA 설치할 때는... node.js 필요

- React

npx create-react-app 폴더이름 

- React + Typescript

npx create-react-app 폴더이름 --template typescript

- React + Next.js + Typescript

npx create-next-app@latest --typescript

---

🔥 npm과 npx 차이 

1. npm 

자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자
npm은 node package manager의 줄임말로, 말 그대로 노드에서의 패키지 관리자이다

 npm을 통해 Node.js를 설치하면 npx도 함께 제공돼서 Node.js를 설치하면 npm과 npx를 사용할 수 있다

2. npx

npx는 execute npm package binaries의 줄임말로, npm에 속해 있는 npm 패키지 실행 도구이다
여기서 npx가 패키지 실행 도구라는 것이 npm과의 큰 차이점이자 장점이다
npx는 create-react-app이라는 프로그램을 일회성으로 딱 한 번 설치하고 지우는 프로그램이기 때문에, 컴퓨터 공간을 낭비하지 않고, 실행할 때마다 다운을 새로 받기 때문에 항상 최신상태이다

---

🔥  CRA 설치 후 초기 파일

1. node_modules 

node.js의 패키지 구성요소 중 하나로 외부 모듈을 저장하는 폴더이다 (npm으로 install 된 패키지 저장하는 폴더)

이 폴더에는 프로젝트가 동작하고 개발되는데 필요한 라이브러리, 도구, 설치된 외부 모듈 등이 저장되어 있어 매우 큰 용량을 차지한다 그래서 협업을 위해 프로젝트를 공유할 때는. gitignore 파일에 반드시 명시해 공유하는 파일의 용량을 줄여야 한다

 ※. gitignore : github에 올리지 않을 폴더나 파일들을 정리해 놓음

 

2. package.json 

프로젝트의 설정 및 의존성 패키지 정보를 포함하는 JSON 형식의 파일이다

프로젝트의 이름, 버전, 스크립트, 의존성 패키지등의 정보를 정의한다

 

3. package-lock.json

패키지 의존성 트리의 정확한 버전과 구조를 기록하는 파일이다 

package.json의 부족한 정보를 도와주는 파일이다

 

4. public

public 폴더 안의 파일은 Webpack이 후처리 하지 않고, 빌드 폴더에 그대로 복사된다

• favicon.ico :  웹 사이트의 아이콘
• index.html : 홈 화면에 표시되는 html로, 페이지 템플릿

5. src

src는 source code의 줄임말이다

js, css 등의 코드를 저장하는 폴더이며 이 폴더 내부의 파일은 프로젝트 빌드 시 Webpack으로 처리된다

• App.css : App.js 안의 컴포넌트들에 대한 css 파일
• App.js : CRA가 제공하는 기본 예제가 들어있는 파일
• index.css : index.js 안의 컴포넌트들에 대한 css 파일
• index.js : App.js 안의 App 컴포넌트와 public/index.html을 연결해 주는 역할을 하는 파일

---

 

※ Reference

https://www.incodom.kr/ReactJS/Create-React-App