pinia란

pinia란

Pinia는 Composition API 기반에서 동작하는 상태 관리자이다 여태까지 Vue에서 사용되던 가장 보편적이고 유명한 상태 관리자는 Vuex였습니다. 그런데 Vue의 개발자, Even You는 본인의 트위터에서 Vuex 5와 Pinia는 사실상 완전 동일한 프로젝트로 생각해야 한다고 말한 바 있습니다.

Vuex 5에서 원하던 기능들의 대부분을 이미 Pinia에서 지원하고 있었기에, Vuex 프로젝트를 유지하는 대신 Pinia를 공식적으로 지원한다고 Pinia의 공식 문서에 적혀 있습니다.

번들링이란?

브라우저에서 ESM(ES Modules)을 지원하기 전까지는 자바스크립트 모듈화를 네이티브 레벨에서 진행할 수 없었다. 따라서 개발자들은 웹팩, Rollup, Parcel과 같은 도구를 이용하여 번들링(Bundling)이라는 우회적인 방법을 사용해야 했다

[ESM이란]

• ESM : 모듈화 문법인 import, export를 별도의 도구 없이 브라우저 자체에서 소화해 낼 수 있는 모듈 방식을 의미한다 만약 아래와 같은 코드를 웹팩과 같은 번들러 없이 브라우저에서 실행하면 에러가 발생한다

  // app.js
  import { sum } from './math.js';
  console.log(sum(10, 20));
  <script src="./app.js"></script>
  

  하지만, 이제는 script 태그에 아래와 같이 type=”module” 속성을 추가하면 정상 동작하는 것을 볼 수 있다

  <script type="module" src="./app.js"></script>
  

  이렇게 브라우저에서 import와 export를 소화할 수 있는 능력이 바로 ESM이다

Vite의 특징

비트는 로컬에서 개발할 때 번들링을 하지 않고 ESM 방식을 사용하기 때문에 로컬 서버 구동 속도가 매우 빠르다 500개 정도 되는 모듈을 갖고 있는 웹 서비스를 웹팩 데브 서버 (opens new window)와 비트로 비교해 본다면 실행 시간이 20 ~ 30배 이상 차이가 난다. 웹팩 데브 서버는 처음 로컬 서버를 시작할 때 관련 있는 모듈들을 번들링 해서 메모리에 적재하는 시간이 필요하기 때문에 당연히 어느 정도의 시간이 필요하지만 비트는 번들링을 하지 않고 바로 서버를 실행하기 때문에 명령어를 실행함과 동시에 서버가 바로 구동된다