[혼공JS] React 시작하기

리액트의 특징

• 리액트만의 특별한 문법 : JSX 를 사용함
• 단방향 데이터 바인딩 
• 가상 돔 
• 선언형 프로그래밍
• 컴포넌트 기반

가장 중요한 : SPA (Single Page Application)

단 하나의 페이지에서 페이지 새로 고침없이 데이터만을 변경 가능함!

 

React 시작하기 전 설정

우선 Node.js 구성을 좀더 새로운 방식으로 진행하고싶었습니다. (아무것도 모르지만 일단 도전)
버전관리 - FNM  -- 기존 NVM 보다 빠른 속도
패키지 관리 - PNPM -- 기존 NPM 보다 디스크 공간 절약
Node 버전 - LTS 버전
번들러 - Vite -- 기존의 웹펙보다 빠른 속도

FNM 설치 & Node.js 설치 & PNPM설치 

https://github.com/Schniz/fnm
https://pnpm.io/ko/installation

$curl -fsSL https://fnm.vercel.app/install | bash
$source /home/han/.bashrc
$eval "$(fnm env --use-on-cd)"
$fnm install
$node -v
$curl -fsSL https://get.pnpm.io/install.sh | sh -

최신 LTS버전으로 설치가 됨을 알 수있다.

물론 다른 버전으로 설치할 수 도 있지만 그냥 최신 LTS로 설치하자

 

React 시작하기

vscode로 프로젝트 폴더에 가서 pnpm create vite를 해보자

pnpm create vite
✔ Project name: … frontend
✔ Select a framework: › React
✔ Select a variant: › JavaScript + SWC
  cd frontend
  pnpm install
  pnpm run dev

 

리액트 첫페이지 시작

 

추가적인 패키지  (-dev옵션을 붙이자)

pnpm install -dev eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-html eslint-config-prettier

eslint는 문법적인 오류등을 파악해 표시를 달아주는 도구이다.
prettier는 세미콜론, 줄바꿈, 들여쓰기 등의 스타일을 교정해주는 도구이다.
eslint-config-airbnb-base는 Airbnb의 스타일 가이드를 .eslintrc.json에 확장해주는 플러그인이다.
eslint-plugin-import는 ES6+ import/export를 지원해주는 플러그인이다.
eslint-plugin-html은 HTML파일에 포함된 인라인 자바스크립트를 지원해주는 플러그인이다.
eslint-config-prettier는 eslint 설정 중에서 prettier와 충돌하는 부분을 비활성화 한다.

 

dev 옵션을 붙이는 이유?

개발환경에서만 eslint와 prettier가 필요한것이지 배포하는 환경에선 필요없는 패키지이기에 -dev를 붙인다

---

왜 이리 복잡하게 시작하는가?

앞서 말했지만 좀더 책이나 메타의 튜토리얼에서 처럼 정해진 방식으로 시작하기 보단 

내 스스로 도구들이나 빌드툴을 정해가면서 시작하고 싶었습니다.

추가로 Next.js도 학습했으면 좋겠지만 아직 대부분의 취업 시장에선 React를 더 선호하니 React를 공부하겠습니다.

 

 

https://pozafly.github.io/node/node-version-manager/

노드 버전 매니저 툴 비교기(nvm & fnm & Volta)

https://pnpm.io/ko/pnpm-vs-npm

pnpm vs npm | pnpm