CRA 설치 방법
1.Node.js홈페이지에서 Node.js 설치 (NTS 버전으로 설치)
2.Node js와npm이 설치가 되며, 잘 설치가 되었는지 확인하려면
터미널에npm -v,node -v로 확인 가능
3.VSCode 속 터미널 실행(VSCode 실행 후 cmd+jor 터미널에서CRA설치하고싶은 폴더로 이동하여npx create-react-app 폴더명실행
4. 실행 후,npm start하면 해당 폴더에 개발환경 세팅 완료
리액트 개발환경을 세팅하면 node_modules, public, src 폴더 +
package-lock.json, package.json, .gitignore 파일이 기본적으로 생김
폴더 구조
node_modules: npm 라이브러리가 모두 들어있는 파일로, 깃헙에 올릴때는 안올려야함 (.gitignore활용)
2.public: 리액트를 웹페이지에 보여 줄 수 있도록 HTML파일이 존재하는 곳 (그 외 파일도 있음)public폴더 내index.html파일은 리액트 앱을 보여 줄 수 있게 해주는html파일이며,<body>태그 안에<div id="root"></div>태그에 리액트에서 만든컴포넌트들이 쌓이게 됨(변경할수는 있음)
그렇다면
<div id="root"></div>안에 컴포넌트를 넣을 수 있는 파일은 어디 있을까?
3. src(source) : index.html파일 안을 채워 줄 수 있는 대부분의 파일들이 들어있는 폴더 (ex : index.css / index.js 등)
index.js:index.html에 진입 할 수 있게 해주는 파일index.js파일 속ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root')위의 문구가
index.html파일의root라는 ID 를 불러오며,
<App />이리액트를 통해 만든 사용자 정의 태그. 즉, 컴포넌트
이다.<App />:src폴더 속App.js를 불러옴불러오는 이유는
index.js폴더에import App from './App';명령어가 들어가 있기 때문.
"('./App.js(js생략가능)'에서 App를 불러온다"
