📖 React App 생성 및 구동

1. Node.js 패키지 생성

터미널에 npm create vite@latest 입력
➡️ 생성할 프로젝트명 입력 ➡️ 사용할 프레임 워크 선택 (React) ➡️ 사용할 버전 선택 (JaveScript)

1-1. 생성된 파일 확인

1. Public : svg, png, jpg 같은 이미지 파일이나 폰트, 정적 파일들을 저장하는 폴더
2. Src : 실제로 작성하게될 React나 JavaScript 코드를 저장하는 폴더
   a. [파일명].jsx : React 코드가 작성되는 공간으로 React에서 사용되는 특수한 확장자
   b. assets : 이미지나 폰트 등의 정적 파일을 저장할 수 있는 공간
3. ESLint : 개발자들 사이에서 코드 스타일을 통일하는데 도움을 주는 도구
4. .gitignore : 올리면 안되는 파일을 명시하는 파일
5. index.html : React 앱의 기본 틀 역할을 하는 HTML 코드가 담긴 파일
6. vite.config.js : React 앱을 만들 때 사용한 vite라는 도구의 옵션을 설정하는 파일

---

1-2. node_modules

package.json 안에 있는 라이브러리를 설치해야한다.
❓ package.json : 프로젝트의 의존성 목록과 메타데이터가 기록된 파일

npm install or npm i ➡️ node_modules 파일이 생성

1-3. node_moudles 주의할 점

1. 커밋 금지 : 일반적으로 매우 큰 파일들이 포함 될 수 있으므로 커밋을 하지않는 것이 좋다.
2. 디렉토리 크기 : 설치된 패키지 수에 따가 용량이 크고 많은 파일과 폴더가 생성되면 프로젝트 용량도 커질 수 있다.

---

2. React App 가동

npm run [실행 명령어]

→ React App 접속 주소를 알려준다. (Web Server 가 포함되어 있어서 서버를 가동시킬 수 있다.)
→ h 입력 후 엔터 하면 명령어들을 알려준다.
→ 실행 명령어는 packge.json “Scripts” 영역에서 확인 가능하다.\

2-1. React App 가동 중지

터미널에 q 를 입력하고 Enter 하면된다.

2-2. 이외의 터미널에 사용되는 명령어

• r + enter : 서버를 재시작
• u + enter : 서버주소
• o + enter : 브라우저 실행
• c + enter : 터미널 초기화 (서버가 종료되지 않음)