[React JS] #1 프로젝트 만들기

* 이 강의 내용은 코딩앙마 리액트 강의를 보고 정리한 내용입니다.(link)

 

🪄 프로젝트 시작하기

• 프로젝트 만들기 : npx create-react-app {디렉토리 명}
• 웹 서버 시작하기(웹 페이지 띄우기) : npm start

서버 구동 시 자동으로 http://localhost:3000 주소를 가지는 웹 페이지가 뜨고, src/App.js 파일을 열어 수정 후 저장하면 수정 내용이 즉시 반영된다. (이걸 Hot Module Replacement, HMR이라고 부른다.)

 

📁 디렉토리 구성 알아보기

• node_modules : 프로젝트 실행 시 사용되는 dependancy 모듈들이 모두 모여있는 곳. 여기 설치된 내용들은 package.json안에 기록되어 있다. 이 폴더를 지우면 프로젝트 구동이 안되지만 npm install로 재설치할 수 있다. 이 폴더는 git에서 관리하지 않는다.
• public : 다른 파일은 중요하지 않고, index.html 파일 내부의 root라는 id를 갖는 div 내부에 리액트 코드가 실행되서 만들어진 DOM이 구현된다.
• src : 대부분의 작업은 이 내부에서 진행된다. css, js, test 파일 등이 있다. (테스트는 이 강좌에서 다루지 않을 파일이라 지웠다.)

src/index.js 파일을 열어보면 App.js 파일을 불러오는 부분이 있다. 우리가 서버를 구동시켜서 띄운 화면이 App.js다.

아래 코드를 보면 root라는 아이디를 가지는 엘리먼트에 뭔가 연결시키는 부분이 있다. (아까 index.html에서 본 거!)

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

그리고 파일 하단부에 reportWebVitals() 함수 호출부와 같은 폴더에 있는 관련 js파일을 지운다. (성능 체크를 위한 함수인데 안 쓴다고 한다.)

 

❌ 서버 종료하기

control + C 를 누르면 서버를 종료할 수 있다.

서버를 시작할 때 썼던 npm 명령어의 옵션은 package.json에도 명세되어 있다.

"scripts": {
  "start": "react-scripts start", // 개발 모드로 실행
  "build": "react-scripts build", // 배포 모드로 실행
  "test": "react-scripts test",   // 테스트 모드로 실행
  "eject": "react-scripts eject"  // 내부 설정 파일을 꺼내는 역할(웹팩, 바벨 설정 변경 시)
},

 

🔬 개발자 도구로 html 구조와 js파일을 함께 분석

• Element에서 <div id="root"> 내부에 <div class="App">이 있다. App.js 코드 상으로도 div태그에 className으로 "App"이 할당되어 있다.
• className이란 옵션이 어색할 수 있는데, 자바스크립트 내부에 HTML을 작성하는 문법이다. 이건 다음 포스팅에서 이어서!