CRA은 무엇인가??
CLI (터미널 커맨드 라인) 으로 우리가 빠르게 리액트 작업을 할 수 있게 도와주는 패키지이다.
여기에는 기본적으로 babel,webpack의 설정들이 들어가있어서 개발 환경의 시간을 아낄수 있다.
npx create-react-app myapp기본적으로는 위에 코드로 명령어를 실행하여 myapp이라는 리액트 폴더가 만들어 진다.
나는 매번 npx create react app 을 하기 귀찮아서,..
그냥
npm i -g create-react-app 혹은
npm install --global create-react-app으로 컴퓨터에 설치를 하여 작업할때 create-react-app myapp(폴더이름) 을 하여 작업을 진행한다..
리액트 폴더 구조가 어떻게 되있는가?
Node_modules
- 위에서 말한것처럼 관련 패키지가 있는것들이다.
Public
- 화면에 실제로 출력되는 화면 파일이다.
- 리액트로 우리가 따로 설정을 안하였지만.. 웹펙은 public 을 바라보게 하고있다.
- 안에 index.html이 잇는데 우리가 코드를 짜서 DOM을 아래 div에 출력하는것이다.
<div id="root"></div>- manifest.json 은 무엇인가? 아직 사용해보지 않았지만..PWA(Progressive web app) 를 사용하게 도와주는것이라고 한다.... PWA는 추후? 한번 해볼까한다.
- robots.txt 는 자세히는 모르지만 크롤링? 뭐 그런거 관련 이라고 얼핏 들은것 같다...
Src
-
우리들이 작업을 할때 코드들을 저장하는 공간이다. 여기에는 component,fonts,styles등등 본인의 구조에 따라 다양하게 들어간다.
-
App.test (테스팅)
-
Css는 Css
-
Service Worker 는 PWA 관련으로 오프라인에도 앱을 실행 할수 있게 해주는것? 이라고 알고있다..
-
Index.js 가 우리의 코드를 DOM에 render (출력) 해주는것이다
아래 코드로 보면 위에서 말한것처럼 root라는 id를 통해 DOM을 접근하여 우리의 앱을 실행한다.
ReactDOM.render(
<React.StrictMode>
<App/>
</React.StrictMode>,
document.getElementById("root")
)
Package.json
{
"name": "more_hooks",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
위에서 보면 일단 dependencies 가 우리가 프로젝트를 진행하면서 사용할 패키지들이다.
Dependencies
- test 실행해야하니까 jest가 들어가있고.
- react (우리가 사용할 버전들)
- react-dom(DOM에 접근해야하니까 react dom에 의존)
- react scripts ( dependencies 바로 아래 scripts 실행하게 해줘야하니까)
scripts
우리가 리액트를 실행할때 npm start, npm build 등등 실행한다. 이것은 아래의 기능들을 실행하기 위해 사용된다.
- start= 리액트 실행
- build = 배포용
- test = jest 를 실행하여 테스트용
- eject = 1회 용으로 사용가능, babel,webpack을 직접 설정 하고자 하면 쓰는것.
eslintConfig
- linter 라고 스타일, 에러 ,버그 같은것들 잡게 도와주는것인데 기본적으로 react 만의 lint 가 깔려있고.. 다양한 extension(예: prettier,eslint)등등도 있다.
browserlist
- 브라우저와 호환성을 위한것들이다.
.gitignore
우리가 작업을 하면 git으로 버전관리를 하고..github이라는 저장소에 git을 올려놓는데 올렸을때 불필요한것들 (올려지면 안되는것들) 을 설정하는곳이다...
node_modules 는 항상들어간다..node_module안에 우리들의 패키지들이 많기때문에 무겁고..용량?도 많이차지한다고 한다.
그래서 항상 프로젝트를 시작할때 npm install을 하는것이다..
