[DAY1] 프로젝트 리뉴얼

1. Vite를 사용해 프로젝트를 생성한다.

npm init vite

 

1-1. Vite란?

새로운 프런드엔드 툴이다. Vue 창시자 에반 유가 만들었으며 현재는 Vue, React, Svelte 등 여러 프레임워크에서도 사용 가능하다. Vite(비트)는 자바스크립트 네이티브 모듈을 기반으로 한 데브 서버이다. 현대 프런트엔드 개발 생태계는 웹팩을 중심으로 개발 환경이 구축되어 있다. Vite는 웹팩을 사용했을 때보다 더 빠르게 개발하고 배포할 수 있다.

 

자바스크립트 네이티브 모듈인 ESM이 등장하기 전까지는 자바스크립트 언어 레벨에서의 모듈화 방식은 없었다. require.js 같은 모듈 로더나 IIFE를 사용하지 않으면 모듈화가 불가능 했다. 커뮤니티 레벨의 라이브러리를 사용하다가 자바스크립트 언어에 모듈화 문법(import, export)이 들어왔다.

 

비트는 로컬에서 개발할 때 번들링을 하지 않고 ESM 방식을 사용하기 때문에 로컬 서버 구동 속도가 굉장히 빠르다.

 

번들링이란?

모듈화 문법을 이용하여 여러 개의 파일을 하나로 합쳐주거나 의미 있는 단위로 묶어주는 것

 

ESM이란?

모듈화 문법인 import, export를 별도의 도구 없이 브라우저 자체에서 소화해낼 수 있는 모듈 방식 script 태그에 type="module" 속성을 추가하여 사용한다.

 

자세한 내용은 아래 참고

https://joshua1988.github.io/vue-camp/vite/intro.html#vite%E1%84%85%E1%85%A1%E1%86%AB

Introduction | Cracking Vue.js

---

2. React Router DOM

React Router DOM을 사용하면 웹 앱에서 동적 라우팅을 구현할 수 있다. 라우팅이 실행 중인 외부의 구성에서 처리되는 기존 라우팅 아키텍처와 달리 React Router DOM은 앱 및 플랫폼의 요구 사항에 따라 컴포넌트 기반 라우팅을 용이하게 한다.