CRA 없이 React 개발환경 구축하기 (Snowpack편)

어쩌다 보니 시리즈물이 되었는데 이번엔 Snowpack이다. 글 작성하다가 귀찮아서 멈췄었는데 스노우팩 업데이트가 지지부진하더니 지난달부터 공식적으로 새 프로젝트에 사용을 권장하지 않는단다... Vite 출시 이후로 전망이 어둡더만.. 글 좀 미리미리 써둘걸...ㅠㅜ 작성 중인 게 아까우니, 마무리해서 올림.

스노우팩은 번들 없는 개발(ESM을 그대로 사용)이라는 컨셉으로 개발되었다. 개발할 땐 번들링을 하지 않고 빠르게 빌드하고 프로덕션에선 웹팩 같은 번들러로 빌드하자는 컨셉. 따라서 엄밀히 따지면 번들러는 아니다. 홈페이지에선 번개가 치는 프론트엔드 빌드 도구라고 소개하는데 파셀이 생각하는 건 왤까?ㅎㅎ

핫 리로딩에서 전체 코드를 다시 번들링하지 않으므로 매우 빠르게 변경 사항을 반영할 수 있다고 한다.

스노우팩에는 create-react-app과 유사하게 create-snowpack-app라는 게 있다. 물론 이걸 사용하지 않고 진행하겠다.

package.json 생성

일단 적당한 폴더를 만들고 아래 명령어로 package.json 파일을 생성한다.

yarn init -y

리액트 설치

yarn add react react-dom

바벨 설치

yarn add @babel/preset-env @babel/preset-react

웹팩 때와 비슷하다. 다만 아래에서 바벨 플러그인을 설치하면 바벨 코어는 설치 안 해도 되길래 뺐다.

@babel/preset-env - 최신 자바스크립트 문법을 구형 브라우저에서도 작동하도록 변환하거나 폴리필 추가
@babel/preset-react - 리액트의 JSX 문법을 변환

babel.config.json 생성

{
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", { "runtime": "automatic" }]
  ]
}

React 17 이후부턴 "runtime": "automatic" 옵션을 추가해야 한다.

스노우팩 설치

yarn add snowpack

스노우팩 플러그인 설치

yarn add @snowpack/plugin-webpack @snowpack/plugin-babel @snowpack/plugin-react-refresh

@snowpack/plugin-webpack - 빌드 시 웹팩 사용. 롤업 플러그인도 있지만 웹팩을 선택했다.
@snowpack/plugin-babel - 바벨과 연동. 원래 설치하지 않아도 jsx를 변환해 주지만 위의 automatic 옵션을 설정하기 위해선 따로 설치해줘야 한다.
@snowpack/plugin-react-refresh - 리액트 핫리로드 지원

snowpack.config.mjs 생성

/** @type {import("snowpack").SnowpackUserConfig } */
export default {
  mount: {
    public: { url: '/', static: true },
    src: { url: '/dist' },
  },
  plugins: [
    '@snowpack/plugin-react-refresh',
    '@snowpack/plugin-babel',
    '@snowpack/plugin-webpack',
  ],
  devOptions: {
    port: 3000,
  },
  buildOptions: {
    clean: false,
  },
};

홈페이지 설명을 보면 clean을 true로 설정해야 빌드 전에 폴더 정리를 할 거 같은데 실제로는 false로 설정해야 한다. 뭐지...

리액트 컴포넌트 작성

그냥 CRA에서 기본으로 만들어주는 예제 파일을 그대로 복사한다. (src, public 폴더)

단, 예제 소스에서는 web-vitals을 사용하므로 이걸 추가로 설치해야 한다. 그리고 모든 js 파일을 분석하는지 사용하지도 않는 setupTests.js 파일 때문에 오류가 나기 때문에 @testing-library/jest-dom도 설치해야 한다. 아니면 그냥 setupTests.js 파일을 지우자

yarn add web-vitals @testing-library/jest-dom

그리고 파셀과 유사하게 index.html에 index.js를 추가해야 한다.

<script type="module" src="/dist/index.js"></script>

public/index.html 파일을 열고 윗부분을 위에 추가한다.

package.json에 scripts 추가

  "scripts": {
    "start": "snowpack dev",
    "build": "snowpack build"
  }

yarn start - 개발 서버를 실행해 프로젝트를 바로 확인. 주소는 http://localhost:3000/
yarn build - 빌드. 결과물은 build 폴더에 생성

이 글에서는 빌드할 때 웹팩으로 번들링 하도록 세팅했는데 굳이 번들링하지 않더라도 최신 브라우저에서는 잘 동작한다. 그리고 웹팩을 추가한 만큼 웹팩 세부 설정으로 더 커스텀이 가능하지만 그건 그냥 웹팩 편 글을 참고하길 바란다.

다시 한번 말하지만, 현재 스노우팩은 사실상 개발 중단 상태라 사용을 권장하지 않는다. 이렇게 빨리 경쟁에서 져버릴 줄은... 역시 살벌한 자바스크립트의 세계..