✅ 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구(toolchain)
리액트는 UI 기능만 제공한다. 따라서 개발자가 직접 구축해야하는 것들이 많은데 처음 시작하는 단계에서는 직접 개발환경을 구축하기 어려울 수 있다.
// 1. [설치할 폴더] 진입
cd [설치할 폴더]
// 2. [프로젝트 명] 설치
npx create-react-app [프로젝트 명]
// 3. [프로젝트 명] 프로젝트 진입
cd [프로젝트 명]
// 4. 로컬 서버 띄우기
npm start
1. node.modules
2. package.json
dependencies
node.modules 와 package.json에서 이중으로 패키지를 관리하는 이유
- 실제 내가 작성한 코드, 내가 설치한 패키지는 내 로컬에만 존재
- github 에 올릴 때 내가 작성한 코드와 함께
package.json
(추가로 설치한 패키지 정보) 넘긴다.- 다른 사람이 그것을 (
pull
) 받아서npm install
만 입력하면package.json
에 기록되어 있는 패키지의 이름과 버전 정보를 확인하여 자동으로 설치한다.- 이때, github 에 올릴 때,
node.modules
는 올리면 안 되는데 (불필요한 용량 차지),.gitignore
파일에 github 에 올리고 싶지 않은 폴더와 파일을 작성할 수 있다.
scripts
3. .gitignore
.gitignore
파일에 github 에 올리고 싶지 않은 폴더와 파일을 작성할 수 있다.push
를 해도 .gitignore
파일에 작성된 폴더와 파일은 올라가지 않는다.4. public - index.html
<div id="root"></div>
5. src - index.js
ReactDOM.render( <App /> , document.getElementById('root'))
1. public 폴더
2. src 폴더
reset.css
- css 초기화commom.css
- 공통으로 사용하는 css 속성 정의 (ex. font-family)components vs. pages
- 여러 페이지에서 동시에 사용되는 컴포넌트의 경우 components 폴더에서 관리한다. (ex. Header, Nav, Footer)
- 페이지 컴포넌트의 경우 pages 폴더에서 관리한다.
- 해당 페이지 내에서만 사용하는 컴포넌트의 경우 해당 페이지 폴더 하위에서 관리한다.