[React] 리액트 설치 및 개발환경 설정(프로젝트 생성)

1. Node.js 설치

리액트를 사용하려면 Node.js가 설치되어야 함. 필요한 버전으로 다운로드하면 되지만 안전/안정성을 위해 LTS 버전 추천
(with npm으로 설치 시 별도로 npm 설치 안 해도 됨)

https://nodejs.org/en/download

Node.js — Download Node.js®

명령 프롬프트에서 아래 명령어로 버전 확인했을 때 설치한 버전 정보가 나온다면 잘 설치된 것

//노드 버전 확인
node -v

//npm 버전 확인
npm -v

2. React 실행 및 프로젝트 생성

터미널(cmd/명령 프롬프트)에서 다음 명령어로 리액트 프로젝트 생성
** CRA(create-react-app 은 동작은 하지만 공식적인 지원은 종료되었다고 함... vite를 이용해서 생성하는 방법도 있으니 때에 따라 선택해서 만들면 될 듯

*** CRA는 기본적으로 웹팩(webpack)을 통해 번들링함, express 서버 사용 > 파일이 많아지면 무거워지고 번들링할 때 오래걸림
Vite는 esbuild를 사용해서 번들링함, Koa 서버 사용 > esbuild는 go 언어로 작성돼서 속도가 빠르고 번들링할 때 변경된 부분만 새롭게 번들링함, Koa 서버는 작아서 필요 리소스도 작음

// CRA를 통한 프로젝트 생성
// 프로젝트폴더명 자리에 원하는 프로젝트 폴더 명 입력
npx create-react-app 프로젝트폴더명

// 새로 생성된 프로젝트 디렉터리로 이동
cd 프로젝트폴더명

// 리액트 프로젝트가 잘 생성됐는지 실행 테스트
// 리액트는 기본으로 3000번 포트에서 열림(http://localhost:3000)
npm start

// Vite를 통한 프로젝트 생성

//vite 설치
npm create vite@latest

// 프로젝트 이름을 물어보는 프롬프트에 프로젝트 이름 입력
? Project name : 프로젝트 이름

//프레임 워크 선택 > react
// 선택지가 vanilla부터 others까지 다양한데 원하는 거 선택하면 됨
? Select a framework : > React

//언어 선택
// 선택지가 TS부터 JS, Remix까지 다양한데 원하는 거 선택하면 됨
? Select a variant: > JavaScript

// 다음 명령어를 입력하고 dev 서버 실행
// CRA와 다르게 기본 포트가 5173임
cd 프로젝트 폴더명
npm install
npm run dev

3. 리액트 버전 확인 및 보안 정책 관련

// 리액트 전역 설치 여부 확인
npm list -g react

// 프로젝트 파일 내에서 버전 확인 시
// 프로젝트 루트 디렉토리/package.json
"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

// 리액트가 설치된 프로젝트의 버전 확인
// 리액트가 설치된 프로젝트 디렉토리에서 명령어 실행
npm list react

// VSCode에서 스크립트 실행 오류 날 때 or 보안 정책 미리 확인
1. powershell을 관리자로 실행
2. Get-ExecutionPolicy 로 보안정책 확인
3. 결과가 Restricted 로 출력되면 Set-ExecutionPolicy RemoteSigned 명령어로 
RemoteSigned로 보안 정책 변경
4. 이후 질문에는 y로 대답