[React] - React 개발 환경 설정

Node.js

 `Node.js`는 브라우저 밖에서도 JavaScript를 실행할 수 있도록 하는 런타임 환경이다. 오픈 소스 JavaScript 엔진인 크롬 V8을 기반으로 동작한다. Single Thread의 non-blocking I/O 이벤트 기반 비동기 방식이다. 이는 코드가 실행될 때, 작업이 오래 걸리는 코드를 만나면 해당 코드의 실행이 끝나기를 기다리지 않고 넘어가고 시간이 지나 해당 코드 실행이 완료되면 그때 결과를 따로 받아서 처리한다는 것이다.

NOTE!
기존에는 브라우저에서만 JavaScript를 사용할 수 있었으나, `Node.js`를 통해서 로컬 PC에서도 사용할 수 있게 되었다.

NPM(Node Package Manager)

`Node.js`와 떨어질 수 없는 것이 바로 NPM인데, 이는 JavaScript를 위한 패키지 관리자이다. `npm`을 통해 공개된 JavaScript 라이브러리들을 쉽게 설치해서 사용할 수 있다. 기본적으로 Node.js는 npm을 포함하고 있다. (Node.js 설치 시 npm은 자동으로 같이 설치된다.)

Node.js 설치

 `React`를 사용하기 위해서는 `Node.js` 설치가 필수적인데, Node.js 설치는 아래의 공식 사이트에서 설치 가능하다. 

https://nodejs.org/ko

Node.js — 어디서든 JavaScript를 실행하세요

LTS 버전으로 자신의 환경에 맞게 설치하면 된다. 그리고 터미널에서 `Node.js`가 잘 설치되었는지 확인하면 된다.

# 설치 확인
$ node --version
$ npm --version

# 실행 확인
$ node
> console.log('test');
> exit

create-react-app 프로젝트 생성

 `create-react-app`은 대표적인 React 기반 프로젝트 생성 도구이다. 그러나...

WARNING!
`create-react-app`을 사용한 프로젝트 생성은 더 이상 추천하지 않는다.

 `create-react-app`은 2022년 4월 이후로 업데이트가 전혀 없으며, React 공식 문서에서도 사라지면서 사실상 폐기(deprecated) 수순을 밟고 있다. 그럼에도 `create-react-app`을 통한 프로젝트 생성하는 방법 정도는 간단하게 알아두자

# 1. CRA를 이용하여 프로젝트 생성
npx create-react-app 프로젝트명
cd 프로젝트명

# 2. 생성한 프로젝트 실행
npm run start # (localhost:3000)

# 3. 실행 종료
Ctrl + C

---

Vite 프로젝트 생성

 `Vite`는 차세대 개발 빌드 도구로서, Vue, React, Svelte 등을 지원한다. Webpack이 아닌 ESBuild 시스템에 의해 빌드된다. 매우 빠른 속도를 보여주기에 React 웹 개발 시 create-react-app이 아닌 `Vite`를 쓰는 것을 추천한다.

# 1. 프로젝트 생성
npm create vite@latest 프로젝트명 --template react

# 2. 패키지 설치
npm install

# 3. 프로젝트 실행
npm run dev

---

Vite 프로젝트 구조

 Vite 프로젝트를 생성하게 되면, 미리 세팅된 폴더 구조를 확인할 수 있는데 그 중 중요한 파일들만 알아보도록 하곘다.

• `package.json`: 프로젝트에 대한 정보를(의존성, 스크립트)를 담고 있는 파일
• `vite.config.js`: Vite의 설정 파일
• `main.jsx` : 프로젝트의 시작점, React DOM에 의해 안에 있는 코드들이 렌더링된다.
• `App.jsx` : 실제 화면에 그려질 UI를 컴포넌트 형태로 코드를 짠다.
• `index.css` : 전역 스타일에 대한 명시를 하는 CSS 파일
• `App.css` : 앱 컴포넌트 스타일에 대한 명시를 하는 CSS 파일
• `src/ 폴더`: 프로젝트의 소스 코드를 담는 폴더
• `public/ 폴더`: 이미지, favicon, 폰트 등 정적 파일를 담는 폴더

---

Eslint, Prettier

 `Eslint`는 문법 및 코드 스타일을 검사해주는 도구이다. ESlint를 사용할 때 장점은 다음과 같다.

• 문법적인 오류를 사전에 발견할 수 있다.
• 현업에서 통일된 코드 스타일을 유지할 수 있도록 도와준다.

`Prettier`는 자동으로 코드를 정해진 규칙에 맞게 고쳐주는 도구이다. `prettierrc.json`에서 아래와 같이 규칙을 정의할 수 있다. 이외에도 여러 규칙이 있으니 각자의 코드 컨벤션에 따라 지정하여 클린한 코딩 스타일을 유지하자

{
  "trailingComma": "all", // 모든 가능한 위치에 쉼표를 추가한다.
  "singleQuote": true, // 작은 따옴표 (')를 사용한다.
  "tabWidth": 2, // 들여쓰기를 스페이스 2칸으로 설정한다.
  "semi": true //문장의 끝에 세미콜론(;)을 강제한다.
}

---