Snowpack으로 리액트 프로젝트 빌드하기

스노우팩(Snowpack)은 요즘 새로 떠오르고 있는 프론트엔드 빌드 툴이죠. 빌드를 개발 환경과 프로덕션 환경으로 나눠, 각각의 환경에 최적화된 빌드 방법을 가져가는 게 특징입니다.

개발 환경에서는 언번들 개발(unbundled development)로 빠른 개발을 지원하고, 빌드는 예전 방식대로 처리하여 둘 모두의 장점을 살리고 있죠.

Snowpack으로 간단하게 리액트 프로젝트를 하나 만들어 볼까요?

우선 프로젝트 디렉터리를 만들고 필요한 패키지를 설치합니다.

$ mkdir snowpack-demo && cd snowpack-demo
$ npm init
$ npm i react react-dom
$ npm i -D snowpack

패키지 설치가 끝났으면, package.json 파일을 열어 snowpack 명령을 scripts 항목에 추가합니다. ( snowpack dev는 개발 서버를 실행하는 명령이고, snowpack build는 프로덕션 환경을 빌드하는 명령입니다)

{
  "name": "snowpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "snowpack dev",
    "build": "snowpack build"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "devDependencies": {
    "snowpack": "^2.10.1"
  }
}

프로젝트 디렉터리 환경도 간단하게 구성하겠습니다. 퍼블릭 파일들이 들어갈 public 디렉터리와 자바스크립트 파일들이 들어갈 src 디렉터리를 추가했습니다.

$ tree -L 1
.
├── node_modules
├── package-lock.json
├── package.json
├── public
└── src

3 directories, 2 files

마지막으로, 프로젝트 루트 디렉터리에 snowpack.config.json 파일을 하나 추가하고, 아래와 같이 방금 우리가 만든 디렉터리들을 맵핑(마운팅)시켜 줍니다.

{
  "mount": {
    "public": "/",
    "src": "/dist"
  }
}

※ Snowpack 설정에 관한 자세한 내용은 Snowpack 문서를 참조하세요!

이제 public 디렉터리 내에 index.html 파일을 하나 추가합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Snowpack Demo</title>
</head>
<body>
      <h1>Hello, Snowpack!</h1>
</body>
</html>

이제 터미널에서 npm start 명령을 실행하면, snowpack dev 명령이 실행되어 개발 서버가 구동됩니다.

브라우저에서 http://localhost:8080 URL로 접속하면 아래와 같이 “Hello, Snowpack!”이 표시될 것입니다.

이제 src 디렉터리 아래에 index.jsx 파일을 하나 추가해 보겠습니다.

// index.jsx
import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <h1>Hello, Snowpack!</h1>,
  document.getElementById("root")
)

그런 다음, 좀전에 만들었던 public/index.html 파일을 열어 다음과 같이 약간 수정하겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Snowpack Demo</title>
</head>
<body>
      <div id="root"></div>
      <script type="module" src="/dist/index.js"></script>
</body>
</html>

방금 만든 src/index.jsx 파일을 로드하도록 코드를 추가했습니다. <script> 태그에 type=“module” 속성을 추가하여 ESM(ES Module)로 로드하고 있음에 유의하세요!

재밌는 점은, Snowpack이 우리가 설치한 패키지들을 ESM 방식의 모듈로 풀어서 참조한다는 점입니다. 실제로 소스코드를 확인해 보면, 앞서 우리가 작성한 index.jsx 파일이 실제로는 다음과 같이 처리되어 실행되는 것을 알 수 있습니다.

import React from "/web_modules/react.js";
import ReactDOM from "/web_modules/react-dom.js";
ReactDOM.render(/* @__PURE__ */
React.createElement("h1", null, "Hello, Snowpack!"), document.getElementById("root"));

react와 react-dom 모듈이 표준 ESM 방식으로 변환되어 import 되고 있습니다. 이런 식으로 개발 환경에서는 별도의 번들러(bundler) 없이, 언번들된 개발(unbundled development)이 되는 것이죠!

물론 빌드 시점에서는 기존의 번들러 방식으로 빌드를 처리하면 됩니다. 예를 들어, Webpack을 번들러로 사용하여 빌드한다면 다음과 같이 하면 되겠죠.

우선 필요한 플러그인을 하나 추가합니다.

$ npm i -D @snowpack/plugin-webpack

그런 다음 snowpack.config.json 파일을 열어 다음과 같이 plugins값에 추가해 줍니다.

{
  "mount": {
    "public": "/",
    "src": "/dist"
  },
  "plugins": [["@snowpack/plugin-webpack", {}]]
}

이제 터미널에서 빌드 스크립트(snowpack build)를 실행하면, 프로젝트 폴더 내에 build 디렉터리가 생성될 것입니다.

이런 식으로, 개발 환경에서는 최신 자바스크립트(ESNext)의 진보한 기능들을 백분 활용하여 빠른 개발 환경을 가져 가면서, 배포(프로덕션) 시에는 기존의 번들러 방식을 그대로 따름으로써 개발 속도와 배포 안정성이라는 “두마리 토끼”를 다 잡게 되는 셈이죠!

이 글을 쓰는 현재 Snowpack의 최신 버전은 2.7 버전이며, 다음과 같은 라이브러리와 도구들을 지원한다고 나와 있네요.

아마 시간이 지나면서 좀더 풍성한 생태계가 구성되지 않을까 생각해 봅니다.

한번 써 보세요!!

Snowpack으로 리액트 프로젝트 빌드하기

이 글 공유하기:

관련 글