개발 환경 준비하기

🏹 1. node.js 다운로드

node.js 공식 웹 사이트에 접속해 14.4.0 버전 다운로드
64비트 윈도우 운영체제인 경우 node-v14.4.0-x64.msi 다운로드

---

🏹 2. node.js 설치

다운로드한 파일을 실행해 node.js 설치
설치 도중 다음 화면에서는 체크 표시를 하지 않고 [Next] 클릭

---

🏹 3. node.js 및 npm 설치 확인

Window + R을 누른 후 cmd를 입력해 명령 프롬프트 실행
→ node -v, npm -v 명령어로 설치된 node.js와 npm의 버전 확인

• npm (node package manager) : node.js와 react.js에서 사용하는
  대부분의 패키지를 설치할 수 있는 자바스크립트 패키지 관리 도구로,
  node.js와 함께 설치된다.
  

---

🏹 4. react 프로젝트의 워크스페이스로 사용할 폴더 생성

cmd 창에서 cd 명령어를 이용해 생성한 폴더 경로로 이동

• cd (change directory) : 현재 디렉토리 이름을 보여주거나 바꿈
  

---

🏹 5. yarn 설치

npm install -g yarn 명령어로 yarn 설치
→ yarn -v 명령어로 설치된 yarn의 버전 확인

• yarn : 페이스북에서 만든 자바스크립트 패키지 관리 도구
  npm에 비해 캐싱, 보안, 신뢰성 등이 개선됨
  

---

🏹 6. create-react-app 설치

npm install -g create-react-app 명령어로 create-react-app 설치

→ create-react-app client 명령어로 'client' 프로젝트 생성

→ cd client 명령어로 client 경로로 이동
→ dir 명령어로 현재 위치에 package.json, node_modules 등의
    파일과 폴더가 생성된 것을 확인

• dir : 현재 디렉토리에 있는 파일과 하위 디렉토리 목록 확인
  

---

🏹 7. react 서버 실행

client 경로에서 yarn start 명령어로 react 서버 실행

크롬 웹 브라우저에서 http://localhost:3000/ url을 열면
다음과 같은 화면을 확인할 수 있다.

---

🏹 8. react 서버 실행

src 폴더의 index.js 파일을 열어
<React.StrictMode>, </React.StrictMode> 태그 삭제

• Strict 모드 : 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구
  생명주기 함수를 여러 번 실행하는 원인이 되므로 사용하지 않는다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();