PNPM + React + Vite + TypeScript 적용하기

임홍원·2024년 3월 13일

CRA를 권장하지 않는다?

https://github.com/reactjs/react.dev/pull/5487#issue-1551949585

위 링크의 내용을 한글로 번역하면 다음과 같다.

Create React App은 특히 신규 개발자들에게 권장할 만한 기술은 아닙니다.

교육자로서 저는 CRA의 지속적인 권장으로 인해 새로운 리액트 개발자들이 불필요한 문제에 부딪히는 수많은 문제에 직면합니다. 저는 이 문제에 대해 트윗했고 많은 개발자의 수많은 동의를 보며 놀랐습니다.

저는 여기에 만든 이 PR 변경에 대한 것은 크게 중요하지 않으며, 새로 만드는 베타 문서에서 권장하는 기술에 대한 토론을 희망해 이 PR을 엽니다.

위의 결정에는 여러가지 이유가 있다.

1. 성능 문제

예: CRA를 사용하여 앱을 구축할 때 다른 최신 도구들에 비해 더 긴 로딩 시간이 걸릴 수 있습니다. 특히 큰 프로젝트에서는 복잡한 모듈 번들링으로 인해 개발 서버의 시작 시간이 늘어날 수 있습니다.

2. 무거운 설정

예: CRA를 처음 설치할 때 많은 개발자들은 다양한 설정과 플러그인을 직접 추가하여 원하는 환경을 만들어야 할 수 있습니다. 예를 들면, TypeScript나 특정 CSS 프레임워크와 같은 추가 도구나 라이브러리를 설정하는 것이 복잡해질 수 있습니다.

3. 오래된 종속성

예: CRA를 설치하거나 업데이트할 때, 사용 중인 특정 라이브러리나 플러그인이 최신 버전이 아닌 경우 경고 메시지가 출력될 수 있습니다. 이러한 경고는 보안 문제나 호환성 문제를 야기할 수 있어 개발자들이 추가적인 조치를 취해야 할 수 있습니다.

그렇다면 CRA대신 무엇을 사용해야 할까?

Vite

Vite는 프론트엔드 개발을 위한 툴이다.
Vue에 종속되어 있는 툴이 아니라 React, Vanilla, Svelte 등 프론트엔드 개발 어디서든 사용될 수 있다.

Vite는 크게 2가지 역할을 한다.

Dev Server : 개발 환경에서 HMR과 같은 기능을 제공하는 개발용 서버 기능
Build : Production 배포를 위한 소스코드 번들링 기능

기존의 Vue CLI도 같은 역할을 한다. Vue CLI는 Webpack을 기반으로 한다. 프론트엔드 개발을 해봤다면 Webpack은 들어봤을 것이다. Webpack은 모듈번들링을 하는 빌드 툴이면서 Dev Server 기능을 제공해주고 있다.
Vite는 기존의 이런 빌드 툴들을 한층 더 업그레이한 버전이라고 보면 된다.

Vite 특징

Vite는 로컬에서 개발할때, 번들링을 하지않고 ESM 방식을 사용하기 때문에 로컬 서버 구동 속도가 매우 빠르다. 수백 개의 모듈을 갖고 있는 웹 서비스를 웹팩과 비트로 비교한다면 실행시간이 수십 배 이상 차이가 난다.

웹팩은 처음 로컬 서버를 시작할 때 관련있는 모듈들을 번들링해서 메모리에 적재하는 시간이 필요하기 때문에, 당연히 시간이 필요하다. 반면 비트는 번들링을 하지 않고 바로 서버를 실행하기 때문에 명령어를 실행함과 동시에 서버가 구동된다.

우리는 이제 Vite를 알아봤으니 PNPM으로 넘어가보자

PNPM

pnpm 은 2017년에 Zoltan Kochan이라는 개발자가 내놓은 패키지 매니저로 "performant npm"의 약자이기도 하다.
기존의 npm 과 yarn 의 비효율을 개선하여 만든 패키지 매니저이다.

기존 노드 패키지 매니저의 문제점

npm 으로 여러 프로젝트를 관리하다보면, 여러 프로젝트에서 모두 같은 의존성을 사용하는 경우가 있다. 이를테면 react 프로젝트 100개가 로컬에 있을 수 있다. 이 때, 기존의 npm 이나 yarn 으로 프로젝트를 관리하는 경우에는 100개의 프로젝트 내부의 node_modules 디렉토리에 각각 리액트 라이브러리를 모두 설치한다. 결과적으로 로컬 하드 디스크에는 실질적으로 똑같은 파일이 100 copy 가 설치되는 것이다.

pnpm의 문제 해결

pnpm 은 content addressable file store 라는 것을 이용해 문제를 해결한다. 단순하게 파일 이름으로 해당 파일을 접근하는 것이 아니라 git 에서 커밋에 hash id 를 부여하듯 각각의 의존성 파일에 hash id 를 부여하고 관리한다. 이 과정에서 중복되는 패키지는 동일한 hash id 를 얻게 된다.
pnpm 은 홈디렉토리의 글로벌 저장소인 ~/.pnpm-store 에 모든 패키지를 저장하는 저장소를 두고, 중첩된 패키지는 단 한번만 설치한다. 중복된 의존성에서 같은 패키지를 사용하는 경우에는 파일을 중복으로 설치하는 대신 이 주소를 이용하여 hard link 를 만들어 연결해준다.
결과적으로 single source of truth 가 이루어지며 상당한 디스크 공간을 절약할 수 있다.

Vite와 PNPM까지 알아보았으니 이제 환경을 구성해보자!

PNPM 설치

npm 사용

npm install -g pnpm

Homebrew 사용

brew install pnpm

Vite 사용하기

# npm 7+, '--'를 반드시 붙여주세요
npm create vite@latest my-vue-app -- --template vue

# pnpm
pnpm create vite my-vue-app --template vue


--template에는 vanilla, react, react-ts등 여러가지가 들어간다.
하지만 우리는 Typescript를 사용할 것이기 때문에 react-ts를 넣어준다.