[TIL] 2023/09/11

Today I Learned

Vite

• 프랑스어로 빠르다(Quick)를 의미하는 vite!(그만큼 빠르다를 강조하고 싶었나보다).
• 특정 프레임워크에 종속된 것이 아니고 React, Vanilla, Svelte 등 프론트엔드 개발 어디서든 사용할 수 있다.
• vite는 크게 2가지 역할을 한다.
  • Dev Server : 개발 환경에서 HMR 과 같은 기능을 제공하는 개발용 서버 기능
  • Production 배포를 위한 소스코드 번들링 기능
    ** 기존엔 Webpack이 이런 역할을 해줬는데, 한층 더 업그레이드 된게 vite라고 생각하면 될 것 같다.
• vite는 여러가지 템플릿을 제공하는데, 예를 들어, vite + react 조합의 프로젝트를 만들고 싶다면,
  npm create vite my-react-vite-app --template react 이런식으로 해주면 된다. 만약 react와 ts를 섞은(그리고 vite) 프로젝트를 만들고 싶다면, npm create vite my-react-ts-vite-app --template react-ts 이렇게 해주면 된다.
• react-vite-admin - React, Recoil, React Query, React Hooks, TypeScript, Axios. 이런식으로 여러개의 조합을 바탕으로 만들놓은 템플릿도 있다고 한다. 템플릿을 모아놓은 깃허브 주소는 여기를 참고하면 된다(여기). 이렇게 아예 템플릿으로 만들어놓은걸 사용하면 초기 보일러 플레이트 작업을 알아서 해준다는 장점이 있다.
  • 직접 해봤는데 일단 다운받는데 속도가 오래 걸린다(react-vite-admin 기준).
  • 꽤나 방대한(?) 프로젝트이고, recoil 등의 legacy 코드를 통해 프로젝트 구조 설정 등을 배울 수 있을 것 같다. 뭔가를 배운다는 입장에서도 좋은듯.
• 아래의 이미지로 알 수 있듯이 vite의 가장 큰 특징으로는 Dev Server 속도가 있다. vite는 Dev Server에서 Native ESM을 사용하여 소스를 제공한다. ESM이란 ES6에서 도입됐고, import/export를 사용하여 모듈을 동적으로 로드할 수 있는 동적 모듈 시스템이다. 기존에 Webpack 같은 번들 기반 방식에서는 모든 소스코드가 빌드돼서 한번에 번들링된 형태로 서비스를 제공했다면, vite에서는 번들링이 필요가 없다. 단지, 브라우저에서 필요한 모듈의 소스코드를 import 할 때 이것을 전달만 하면 된다.
  또한 vite는 개발시에 내용이 자주 빠뀌지 않을 dependencies 모듈을 사전 번들링하는데, esbuild를 사용한다. 이 때, esbuild는 GO언어로 만들어졌으며, 다른 JS 기반의 번들러보다 10-100배 빠른 속도를 가지고 있는 번들러이다. 이러한 특징을 가진 vite는 서버 구동 속도와 HMR 속도가 굉장히 빠르다.
  • 실제로 vite로 서버를 구동해보면 이전처럼 소스코드를 빌드하는 시간이 거의 없이 바로 실행이 된다. 프로젝트를 하다보면 알 수 있지만, 플젝의 규모가 커지면 dev server 구동 속도가 매우 느려지기 때문에 기다리는 시간이 꽤나 길다. 하지만, vite를 쓰면 이러한 시간이 크게 단축되므로 이러한 이점만으로도 vite를 쓸 이유가 충분한 것으로 보인다.
  • HMR(Hot Module Replacement) : 옛날에 핫 리로드와 같은 것으로, 개발하면서 소스코드를 수정하면 vite는 수정된 모듈과 관련된 부분만 교체하고 브라우저에 전달한다. Native ESM을 사용하기 때문에 플젝의 사이즈가 크더라도 HMR 시간에 영향을 주지 않아서 매우 빠르게 진행된다.

Array.from

• Array.from 으로 이터러블과 유사 배열 객체를 배열로 변환할 수 있다. 본래 스프레드 문법을 써도 유사 배열 객체는(이터러블이 아닌) 배열로 바꿀 수 없다.

  const arrayLike = {
  	0: 1,
  	1: 2,
  	2: 3,
  	length: 3
  }
  
  const arr = [...arrayLike];
  console.log(arr); // VM181:8 Uncaught TypeError: arrayLike is not iterable at <anonymous>:8:17

  하지만 Array.from을 쓰면 가능해진다.

  const arr = Array.from(arrayLike);
  console.log(arr); // [1, 2, 3]a

  • Array.from 활용

    Array.from(
      {length: 10}, // 유사 배열 객체
      () => Array(10).fill(0) // 각각의 배열의 요소에 적용할 함수
    );

    Array.from(
      "yongki", // 유사 배열 객체
      () => "I"// 각각의 배열의 요소에 적용할 함수
    ); // ['I', 'I', 'I', 'I', 'I', 'I']

    아래는 1~100까지 숫자로 채워진 배열을 만든다.

    Array.from(
      { length : 100 }, // 유사 배열 객체
      (_, idx) => idx+1// 각각의 배열의 요소에 적용할 함수
    );