CRA 파일 구성

3492 단어 ReactReact

1. 패키지 관리

1) node_modules

: CRA를 구성하는 모든 node package들이 존재하는 폴더. CRA 명령어로 install 시킨 패키지들은 전부 여기에 들어있다.

2) .gitignore

: 이 안에 적혀있는 파일들은 git 관리에서 제외된다. add, commit, push를 해도 github에는 절대 올라가지 않는다.

이는 모든 파일을 github에 올리기에는 용량이 부담스럽기 때문이다. 내가 올릴 때도, 다른 사람이 파일을 받을 때도 한참 걸릴 수 있기 때문. 무려 node_modules도 여기에 이름을 올리고있다. (그 패키지 덩어리를 다 올리겠다는 건 좀...)

대신 package.json이 파일이 이를 보조해준다.

3) package.json

: 우리가 만드는 프로젝트의 모든 정보가 적혀있다. (프로젝트도 크게보면 하나의 패키지이다.)

① dependencies에는 이 프로젝트 패키지가 의존하는 모두 패키지들이 "(이름)": "버전)"의 형태로 적혀있다.

"dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "node-sass": "^4.14.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
}

② CRA 명령어를 통해 dependencies 목록에 이름을 올리고 있는 패키지들을 다운받을 수 있다. 

npm install

③ 새로운 패키지를 다운받았을 때 보통 dependencies 안에도 자동적으로 기록이 되지만 가끔 안 들어가는 것들은 '--save'를 추가해준다.

npm install react-router-dom --save

2. 작업 영역

App.js -> index.js -> index.html

1) index.html

<body>
    <div id="root"></div>
</body>

body에는 오로지 이 내용만 존재. index.js에서 id를 통해 App.js와 같은 타 js 파일 안의 컴포넌트들을 집어넣어준다.

2) index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";


ReactDOM.render(<App />, document.getElementById("root"));

ReactDom은 다른 사람이 이미 많든 패키지 객체로 '.(dot)'을 이용해 render() method를 호출한다.

(+) React와 ReactDom과 같이 import 문구에서 상대경로가 존재하지 않는 경우는 node_modules에서 가져옴을 뜻한다.

3) App.js

create-react-app 명령어로 프로젝트를 처음 생성하면 존재하는 초기 컴포넌트.

컴포넌트 수가 늘어나면 이후 <Routes> 컴포넌트를 생성해 React Router를 적용시킬 예정이다.

4) 파일 구성

node_modules

public //이후에 배포될 실제 파일들(절대 경로 '/')
├ data
├ images
└ index.html

src
├ components //공통 컴포넌트
├ pages //일반 컴포넌트(일단은 페이지 단위, 하위는 기능 단위)
	├ Login
		├ Login.js
		└ Login.scss
	└ Main
		├ Main.js
		└ Main.scss
├ styles
	├ common.scss //공통 css
	└ reset.scss //초기화 css
├ index.js
└ Routes.js

.gitignore

package-lock.json

package.json

README.md
[JS] callback이란?
1806. 부분합

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage