React - Install (create-react-app)

React 설치 전 선행

• nodejs 설치
• VS code 설치

commands

package.json 파일에 명시되어있음

• npm start: Starts the development server / 개발모드로 프로그램 실행

npm start 

• npm run build: Bundles the app into static files for productio / 실제 배포모드로 만듦

npm run build

• npm test: Starts the test runner

npm test

• npm run eject: Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back / 내부 설정 파일 꺼내는 역할 (웹페이지나 바벨 설정 변경 시 사용)

npm run eject

React 프로젝트

1. terminal 실행

npx create-react-app 프로젝트명 

2. npm start

• localhost에서 실행되는 것 확인 가능
  

3. react 프로젝트 폴더 내부

node_modules

• 프로젝트를 실행할 때 사용되는 dependency 모듈들의 집합
• 삭제되더라도 npm install 만 해주면 됨
  (단 package.json 이 수정되지 않았다는 가정 하에)
• 따라서 깃에 올릴 때도 이 파일은 올리지 않음 (크기 크고, 파일 개수 많음)
  
  
  package.json
• node_modules 에 설치된 것들이 package.json 파일에 기록
• 깃에 이 파일을 올려두면 다른 개발자가 동일한 환경 구축 가능
  
  
  index.html

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

• div 밑으로 코드가 실행되어서 만들어진 돔이 구현됨
  
  
  src 폴더
• 대부분의 작업이 src 내부에서 진행
  
  
  index.js

import App from './App';

• npm start 했을 때 보이는 화면이 App.js 에 구현된 내용

const root = ReactDOM.createRoot(document.getElementById('root'));

• id 루트에 앱을 랜더링 시켜줌
  
  
  App.js
• Hot Module Replacement (HMR)
  • 코드 작성, 수정 시 브라우저에 바로 반영