[Portfolly] Vite+TS+StyledComponents+Twin+Storybook 환경 설치

개요

Portfolly 프로젝트는 Vite를 사용하여 프로젝트를 빌드했습니다. CRA 보다 훨씬 최적화된 빌드로 속도가 엄청 빠르길래 선택하게 되었습니다. (차세대 빌드 도구를 종류별로 비교한 자료인데 읽기 좋습니다) 그런데 Vite의 경우 번들러로 webpack을 사용하지 않아 여러 라이브러리를 설치하는 데에 있어 자잘한 문제가 발생했습니다.

 

일단 최대한 현재 시점에서 돌아가는 버전을 찾아 기초 구조화 작업을 끝낸 상태입니다.

 

결론적으로 빌드 환경 및 프로젝트에 설치한 라이브러리는 아래와 같습니다.

 

• Vite
• TypeScript
• Styled-components
• TailwindCSS
• twin.macro
• react-icons
• Axios
• Redux-toolkit
• React-query
• MSW
• Storybook
• React-router-dom

 

 

React 프로젝트 빌드 with Vite

> npm create vite@latest
> npm install

• Select a framework: React 를 선택한다.
• Select a variant: React + TypeScript 를 선택한다.
• 프로젝트 폴더가 생성되면 해당 폴더로 들어가 npm install 한다.

vite와 cra의 작은 차이점이라면 프로젝트를 실행할 때 기본 명령어가 npm run dev 라는 점 입니다.

(+ Vite에서는 환경변수에 import.meta.env.* 와 같이 접근하고, 바벨 등 라이브러리는 process.env 와 같이 접근합니다)

 

 

CSS 도구 설치

1. styled-components

css-in-js에 익숙하기도 하고, 디자인 토큰을 props로 전달하여 컴포넌트를 재사용하는 데 편리해서 설치했습니다.

> npm install styled-components@latest
> npm install -D @types/styled-components

 

 

2. TailwindCSS

온전히 편안함+호기심에 선택했습니다. 꼭 사용할 필요는 없지만... 다수의 팀원들이 선호하고 또, 처음 사용하는 분도 도전해보고 싶다 하셔서 사용하기로 했습니다.

> npm install -D tailwindcss postcss autoprefixer
> npx tailwindcss init -p

• 첫 번째 명령어로 tailwindCSS와 의존성을 설치합니다.
• 두 번째 명령어로 tailwind.config.js 와 postcss.config.js 설정 파일을 생성합니다.
• postcss.config.js 파일은 CSS 후처리기 입니다. CSS 작성을 더 편하게 만들어주는 javascript 도구(플러그인)이며 JS를 이용하여 CSS를 변경합니다. 이번 프로젝트에서는 .css 파일에 바로 tailwind를 사용하지 않고, CSS-in-JS 형식으로 작성할 것이기 때문에 큰 의미는 없을 것 같습니다.
• tailwind.config.js 파일에서 모든 템플릿 파일 경로를 설정합니다.

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

content 옵션에 Tailwind를 사용할 모든 경로를 기입합니다. 이렇게 하면 Tailwind를 사용하지 않는 파일은 트리 셰이킹(tree-shaking)되어 빌드 크기를 줄여줍니다.

 

어떤 블로그에서는 content 옵션이 아닌 purge 옵션에 위 설정을 하는데, 찾아보니 버전 3 부터 content로 바뀌었다고 합니다. 아래 게시물을 참고하였습니다.

 

https://github.com/tailwindlabs/tailwindcss/discussions/6019

warn - The `purge`/`content` options have changed in Tailwind CSS v3.0. · tailwindlabs/tailwindcss · Discussion #6019

 

🎁참고: Install TailwindCSS with Vite

 

 

3. react-icons

여러가지 아이콘을 가져다 쓰기 위해 설치했습니다.

npm install react-icons --save

 

 

 

4. twin.macro

tailwind와 css-in-js 스타일 엔진을 함께 사용할 수 있게 해주는 라이브러리 입니다. styled-components와 twailwindCSS를 동시에 사용하기 위해 설치했습니다.

npm install --save-dev twin.macro @babel/plugin-transform-react-jsx babel-plugin-macros

• @babel/plugin-transcorm-react-jsx - JSX(JavaScript+XML)를 React 함수 호출로 전환하는 바벨 플러그인. JSX 컴파일이 자동으로 이뤄진다.
• babel-plugin-macros - Babel 플러그인을 별도의 설정 없이 사용할 수 있게 해준다. 이미 존재하는 수많은 Babel 플러그인들이 매크로로 구현될 수 있다.

위 설치 명령어를 보면 babel 이라는 키워드가 있습니다.

 

알다시피 babel은 JS 코드 컴파일러 입니다.

 

원래 ECMAScript로 작성된 코드를 옛날 환경에서 실행할 수 있도록 만든 컴파일러였으나, 이제는 다양한 라이브러리&프레임워크를 위한 컴파일 타임 최적화에도 관여합니다. 언어의 문법 확장+코드 변환(transformations)까지 이뤄내는 것입니다.

 

일단은, 우리가 React에서 JSX를 사용하기 때문에(정확히는 TypeScript를 사용하므로 TSX) 브라우저가 이해하지 못 하는 JSX를 JS로 변환하기 위해 바벨 같은 컴파일러가 필요합니다.

 

그렇다면 babel plugin은 무엇인지 궁금해집니다.

 

Babel은 플러그인을 사용하여 커스텀하게 변환 작업을 설정 할 수 있습니다.

 

그런데 프로젝트 마다 어떤 플러그인이 설치되어 있는지 확인하기 어려울 수도 있고, 플러그인 삽입 순서에 따라 충돌 에러가 발생하는 경우가 있습니다.

 

이러한 문제를 해결하기 위해 나타는 게 macros 입니다. Babel Macros는 바벨 설정 없이 Babel transforms를 실행시킵니다.

 

즉 macros는 무설정(zero-config)를 제공합니다. 사용자가 babel 플러그인을 추가할 필요 없이 라이브러리에 대한 표준 인터페이스를 정의할 수 있습니다.

 

babel에 babel-plugins-macros를 설치하면, 매크로는 macro.js 또는 .macro로 끝나는 부분을 찾아 변합니다. '.macro' 로 끝나는 파일을 import할 경우 이를 바로 코드베이스(codebase)에 적용하는 것입니다.

 

이로써 별도의 플러그인을 설치하지 않고도 사용자 코드베이스에서 바로 macro에 해당하는 코드 변환을 이룹니다.

 

이번 프로젝트는 twin.macro 를 사용하여 styled-components와 tailwindCSS를 동시에 쓸 예정입니다. 그러려면 babelMacro 설정을 통해 twin.macro가 내부적으로 styled-components를 사용할 수 있게 연결해야 합니다. (연결 안 하면 자동으로 emotion이 사용된다고 인식합니다)

 

이를 babelMacro로 아주 간편하게 설정할 수 있으며, 이 때문에 babel-plugin-macros를 설치하는 겁니다.

 

설치 후 package.json 파일에 아래와 같이 코드를 추가하면 twin.macro가 styled-components를 사용하게 됩니다.

"babelMacros": {
    "twin": {
      "preset": "styled-components",
      "config": "tailwind.config.js",
      "hasSuggestions": true
    }
  },

 

이제 아래와 같이 twin.macro에서 styled 를 가져와 사용할 수 있게 됩니다!

import {styled} from "twin.macro"

 

만약 위와 같은 방법으로 했는데 ts에러로 twin.macro에서 styled를 불러올 수 없을 땐, 이 링크를 그대로 따라해보시길 바랍니다.

 

Vite 프로젝트에서의 바벨 매크로를 지원해주는 용도인 vite-plugin-babel-macros 라는 게 있다는데, 어떤 블로그에선 babel-plugin-macros 만 사용하길래 일단 두 가지 모두 설치해봤습니다.

 

 

🎁참고: Twin + Vite + TypeScript

🎁참고: Babel의 macro 에 대하여

🎁참고: babel-plugin-macros에 대하여

🎁참고: twin.macro 설치하기

 

 

Axios

코드 가독성이 가장 좋아서 선택했습니다.

npm install axios

 

react-router-dom

기본적인 라우팅에 필요해서 설치했습니다.

> npm install react-router-dom @types/react-router-dom
> npm install --save @types/react @types/react-dom

 

 

상태 관리 도구 설치

1. Redux-toolkit

로그인 정보 등을 전역 상태로 관리하게 될 것 같아 사용했습니다.

npm install @reduxjs/toolkit react-redux

 

2. react-query

본 프로젝트에선 사용하지 않고, 따로 fork 해서 제 개인 연습용으로 공부하기 위해 설치했습니다.

npm i @tanstack/react-query

 

MSW

모킹 서버와 더미 데이터로 임시 테스트를 하기 위해 설치했습니다.

npm install msw --save-dev

 

 

Storybook

> npx storybook@latest init
> npm install @storybook/builder-vite --save-dev

• npm install @storybook/builder-vite --save-dev - Storybook은 Webpack 기반의 프레임워크이기 때문에 Vite builder를 따로 설치한다.

builder를 설치한 뒤 설정해야하는 몇가지 옵션은 아래 참고 링크에서 도움을 받았습니다.

 

🎁참고: Storybook for Vite

 

 

 

이상 초기 세팅은 위와 같은 과정을 통해 마쳤고, 구현 중 문제가 발생할 시 추가 수정할 예정입니다.

 

 

 

+ 아래 더 정리가 잘 된 블로그가 있긴 합니다.

 

🎁참고: React + Vite + TailwindCSS + twin.macro + storybook + svg imporst

🎁참고: Node, Express, Vite, React, tailwindCSS, twin.macro, styled-components 설치하기