기본 react 프로젝트 생성

[주인장]

1 설치

- npx create-react-app (프로젝트명)

- 이후에 y 눌러 진행 

2 실행

- npm start

- 포트 확인 

3. 실행 시 가끔 발생하는 오류 해결 

a.  npm 에서 network read ECONNRESET이 발생할 때 해결 방법
- npm config set registry http://registry.npmjs.org/
- registry 설정 후, 다시 명령어 실행.

b. Module not found: Error: Can't resolve 'web-vitals’ 에러 발생 해결 방법
- npm install web-vitals --save-dev

4. 주요 소스 파일

- index.html

- index.js

- app.js

5. 실행순서 이해하기
a. 진입점
- create-react-app에서 React 앱의 진입점(entry point)은 src/index.js로 설정되어 있습니다. 이것은 create-react-app이 제공하는 기본 구조에서의 규칙 중 하나입니다.
- 일반적으로 package.json 파일 내부에서 "main" 필드로 진입점을 지정할 수 있습니다. 하지만 create-react-app에서는 대부분의 설정이 내부적으로 이루어지기 때문에 개발자가 직접적으로 "main" 필드를 설정할 필요가 없습니다.

b. 실행 순서
- public/index.html : 브라우저에서 public/index.html 파일이 열리면, 그 안에 있는 <div id="root"></div>는 React 앱이 렌더링될 장소를 제공합니다.
- src/index.js : 그 후, index.js 파일이 실행됩니다. index.js에서는 ReactDOM.render()를 사용하여 App 컴포넌트를 <div id="root"></div>에 렌더링합니다.
ReactDOM.render(<App />, document.getElementById('root')); 이 부분이 앱을 시작하는 지점입니다.
- App.js 컴포넌트 생성 : React는 이후에 App.js 파일에서 정의된 컴포넌트를 생성하고, JSX를 JavaScript로 변환하여 해당 DOM 요소에 렌더링합니다.