CRA (Create-React-App)
✅ 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구(toolchain)
리액트는 UI 기능만 제공한다. 따라서 개발자가 직접 구축해야하는 것들이 많은데 처음 시작하는 단계에서는 직접 개발환경을 구축하기 어려울 수 있다.
- 이러한 문제를 해결하기 위해 CRA를 사용한다. CRA는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공한다. 하나의 명령어로 리액트 개발환경 구축이 가능하다.
- CRA에는 다양한 패키지가 포함 되어있으며, 개발환경도 구축해준다 이러한 개발환경을 직접 구축할 경우 시간도 오래걸리고 유지보수도 해야한다. CRA는 새로운 기능을 추가하거나 개선했을때 패키지 버전만 올려주면 된다.
CRA - Settings
1. 설치
// 1. [설치할 폴더] 진입
cd [설치할 폴더]
// 2. [프로젝트 명] 설치
npx create-react-app [프로젝트 명]
// 3. [프로젝트 명] 프로젝트 진입
cd [프로젝트 명]
// 4. 로컬 서버 띄우기
npm start
- npm start 입력시 성공 화면
2. CRA 기본 폴더 및 파일 구성
1. node.modules
- CRA를 구성하는 모든 패키지 소스코드가 존재하는 폴더
2. package.json
- CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록되는 파일
dependencies
- 리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인 가능
- 실제 코드는 `node.modules폴더에 존재node.modules 와 package.json에서 이중으로 패키지를 관리하는 이유
- 실제 내가 작성한 코드, 내가 설치한 패키지는 내 로컬에만 존재
- github 에 올릴 때 내가 작성한 코드와 함께
package.json(추가로 설치한 패키지 정보) 넘긴다. - 다른 사람이 그것을 (
pull) 받아서npm install만 입력하면package.json에 기록되어 있는 패키지의 이름과 버전 정보를 확인하여 자동으로 설치한다. - 이때, github 에 올릴 때,
node.modules는 올리면 안 되는데 (불필요한 용량 차지), .gitignore파일에 github 에 올리고 싶지 않은 폴더와 파일을 작성할 수 있다.
scripts- start: 프로젝트를 development mode(개발 모드) 실행을 위한 명령어
- build: 프로젝트 production mode(배포 모드) 실행을 위한 명령어. 서비스 상용화
3. .gitignore
.gitignore파일에 github 에 올리고 싶지 않은 폴더와 파일을 작성할 수 있다.push를 해도.gitignore파일에 작성된 폴더와 파일은 올라가지 않는다.
4. public - index.html
<div id="root"></div>
5. src - index.js
- React의 시작 (Entry Point)
ReactDOM.render( <App /> , document.getElementById('root'))- ReactDOM.render 함수의 인자는 두 개
- 첫 번째 인자는 화면에 보여주고 싶은 컴포넌트
- 두 번째 인자는 화면에 보여주고 싶은 컴포넌트의 위치
- (이름 함부로 수정하면 안 됨)
기타 폴더 구성
1. public 폴더
- index.html
- images - 이미지 파일 관리
- data - mock data 관리
2. src 폴더
- components - 공통 컴포넌트 관리
- assest/images - css에서 background-image로 활용할 이미지 관리
- pages - 페이지 단위의 컴포넌트 폴더로 구성
- styles 폴더
reset.css- css 초기화commom.css- 공통으로 사용하는 css 속성 정의 (ex. font-family)
components vs. pages
- 여러 페이지에서 동시에 사용되는 컴포넌트의 경우 components 폴더에서 관리한다. (ex. Header, Nav, Footer)
- 페이지 컴포넌트의 경우 pages 폴더에서 관리한다.
- 해당 페이지 내에서만 사용하는 컴포넌트의 경우 해당 페이지 폴더 하위에서 관리한다.
상훈