[혼공JS] React 시작하기

2024. 2. 6. 23:45· 프로그래밍 공부/Javascript
목차
  1. 리액트의 특징
  2. 가장 중요한 : SPA (Single Page Application)
  3. React 시작하기 전 설정
  4. FNM 설치 & Node.js 설치 & PNPM설치 
  5. React 시작하기
  6. 추가적인 패키지  (-dev옵션을 붙이자)
  7. 왜 이리 복잡하게 시작하는가?

리액트의 특징

  • 리액트만의 특별한 문법 : 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)

nvm을 시작으로 Node.js 버전을 관리하다 fnm을 알게되었고, 추가로 Volta를 알게되어 세가지 툴의 속도 및 방식에 대해서 간략하게 알아본 정보를 정리해본다.

pozafly.github.io

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

 

pnpm vs npm | pnpm

npm의 flat tree

pnpm.io

 

'프로그래밍 공부 > Javascript' 카테고리의 다른 글

[혼공JS] 리액트 시작하기  (0) 2024.02.07
[혼공JS] 5주차 미션 & 웹 프로젝트 시작  (0) 2024.02.07
[혼공JS] 미니 프로젝트 2 - Todo list  (0) 2024.02.01
[혼공JS] 4주차 미션 & 프로젝트  (0) 2024.01.30
[혼공JS] 자바스크립트 - 콜백? 비동기? ajax & fetch ?  (0) 2024.01.29
  1. 리액트의 특징
  2. 가장 중요한 : SPA (Single Page Application)
  3. React 시작하기 전 설정
  4. FNM 설치 & Node.js 설치 & PNPM설치 
  5. React 시작하기
  6. 추가적인 패키지  (-dev옵션을 붙이자)
  7. 왜 이리 복잡하게 시작하는가?
'프로그래밍 공부/Javascript' 카테고리의 다른 글
  • [혼공JS] 리액트 시작하기
  • [혼공JS] 5주차 미션 & 웹 프로젝트 시작
  • [혼공JS] 미니 프로젝트 2 - Todo list
  • [혼공JS] 4주차 미션 & 프로젝트
공대핫산
공대핫산
공대핫산
공대핫산의 개발블로그
공대핫산
전체
오늘
어제
  • 분류 전체보기 (54)
    • 취업 (0)
      • IT 기업 취업하기 (0)
    • 프로그래밍 공부 (27)
      • HTML,CSS (0)
      • Javascript (25)
      • Python (0)
      • JAVA (0)
      • git (1)
      • SQL (1)
    • 컴퓨터 사이언스 (26)
      • 컴퓨터 구조 & 운영체제 (26)
      • 네트워크 (0)
      • Linux (0)
      • 클라우드컴퓨팅 (0)
      • 알고리즘 & 자료구조 (0)
      • 혼공얄코 (0)

인기 글

태그

  • 깃허브
  • 코딩자율학습단
  • SQLD독학
  • SQL자격증
  • ssh
  • 우분투
  • 혼공단
  • 입문
  • 깃
  • 혼공JS
  • SQLD시험일정
  • SQLD교재
  • 자바스크립트

최근 댓글

hELLO · Designed By 정상우.v4.2.2
공대핫산
[혼공JS] React 시작하기
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.