📌React

웹과 네이티브 UI를 위한 라이브러리

React를 배워야 하는 이유?

딱히 없음
사람들이 가장 많이 사용함
코딩애플

👉 더 보러가기

SPA (Single Page Application)

하나의 페이지(HTML)로 구성된 어플리케이션

MPA가 가지는 불편함(깜빡거림, 렌더링 속도) 때문에 등장

SPA의 장단점

• 장점
  - 빠른 응답 속도와 부드러운 사용자 경험
  - 효율적인 자원 사용
  - 개발 및 유지보수 용이

• 단점
  - 초기 로딩 시간이 길 수 있음
  - 검색 엔진 최적화(SEO) 어려움
  - 브라우저 뒤로가기 기능 구현 복잡

↔️ MPA(Multi Page Application)

CSR(Client Side Rendering)
웹 페이지의 콘텐츠를 클라이언트(브라우저)에서 렌더링하는 방식

SSR(Server Side Rendering)
웹 페이지의 콘텐츠를 서버에서 렌더링하고, 렌더링된 HTML을 클라이언트(브라우저)에 전달하는 방식

Rendering = 문서 자체를 생성하는 과정
⚠️브라우저 렌더링(시각적인 페이지를 표시하는 단계)과 다름!

대표적인 SPA
React, Vue, Angular

---

개발환경 세팅

기본 전제 : Node.js 설치
=> JS 런타임 환경에서 패키지 관리자를 사용하기 위함

노드 패키지 관리자

❓npm

• node.js 설치 시 자동 설치
• Node Package Manager의 약자
• JS 라이브러리와 애플리케이션을 호스팅하는 레지스트리 역할

❓yarn

• 2016년 Facebook, Google, Tilde와 같은 회사에서 공동 작업으로 개발한 패키지 관리자
• npm과의 호환성이 좋고, 속도나 안정성 측면에서 npm보다 좋음

1. 터미널 환경으로 이동

2. yarn 설치
   npm install -g yarn

3. yarn 설치 여부(버젼) 확인
   yarn -v

4. 프로젝트 생성
   
   

---

참고자료
npm 과 yarn 은 뭐가 다를까 ?