#2. 설치(create-react-app)

npx는 npm이 올라가있는 패키지를 바로 실행해서 설치시켜주는 도구

터미널에 아래와 같이 입력

npx create-react-app voca

이처럼 create-react-app 으로 만들면 폴더구조, 세팅들 다 자동으로 해줌

webpack, barbel 등을 수동으로 설치하고 세팅해서 개발환경 구축하려면 상당한 노력 필요, create-react-app쓰면 쉽게 가능!

npm start로 웹페이지 띄워보자

터미널에 npm start 입력

npm start

node_modules 폴더

프로젝트 실행할 때 사용하는 dependency 모듈들이 모두 모여있음
→ 설치된것들은 package.json에 기록되어있다(dependencies)

node_modules 폴더 지우더라도(프로젝트 못띄움) npm install 하면 다시 설치됨.
(package.json 수정되지 않았으면!)

그래서 깃에 올릴때도 node_modules 폴더는 올리지 않는다.(크기 크고 파일 많기 때문에)

대신 package.json 올려두면 다른 개발자가 동일 개발환경 구축 가능하기 때문에 문제 없음

public 폴더

index.html

• 밑으로 리액트 코드 실행되서 만들어진 돔이 구현됨

src 폴더

대부분 작업 진행됨.
App.test.js 는 이 강좌에서 다루지 않을 거라 삭제!

index.js

import App from ‘./App’;

App.js 구현된 내용이 화면에 출력됨

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

→ id root에 앱을 렌더링 시켜준다

reportWebVitals();

→ 퍼포먼스 관련된 내용인데 강의에서 안다룰거라 삭제

App.js

여기서 무언가 작성하면 바로 브라우저에 반영됨!

→ Hot Module Replacement(HMR)

터미널에서 ctrl+c 누르면 프로젝트 내려감 → npm start로 다시 시작 가능

npm start 같은 명령어는 package.json에 명시되어있음

• start: 개발모드로 프로그램 실행
• build: 실제 배포모드로 만들어주는것
• test:
• eject: 내부 설정파일을 꺼내는것 → webpack이나 barbel 설정 변경하고 싶을때 사용하면 됨!

개발자 모드로 확인해보면 root안에 App이 있음

App.js

class는 자바스크립트 예약어라서 className으로 적어줌
jsx → 자바스크립트 내부에 HTML처럼 작성하는 것