개인적으로 조그마한 흥미로운 앱을 만들고 있는 inpiniti 입니다.
앱을 만들던 중에, storybook 에서 component 를 미리 만들어 두고, 이를 활용해보고 싶다는 생각이 들었습니다.

조금 더 귀찮은 작업이겠지만, 그래도 시도해보고 싶었습니다.

하지만 제가 그랬듯, 세팅에서 다른 분들도 온갖 에러를 격게 될 것이라고 확신합니다. 그래서 그 에러를 해결해 나가는 과정을 이렇게 블로그에 작성을 하고자 합니다.

사실 이미 nuxt3 + tailwind + fontawesome 으로 세팅은 해둔 상태였고, 이는 공식문서만 보더라도 크게 어렵지 않게 세팅이 될것입니다.

문제는 storybook을 공식문서보고 했을때, tailwind 등이 제대로 연동이 되지 않고, nuxt3의 api등도 제대로 사용이 불가능하다는 점 때문에 세팅에 시간을 소모하게 됩니다.

일단 저는 story book 설치를 위해 아래와 같이 명령을 내렸습니다.

1. storybook 설치

npx storybook@latest init --type vue3 --builder vite

하지만 그리고 npm run storybook 으로 실행했는데, 에러가 반겨주었습니다.

[Error] Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'

tailwind 모듈을 찾을수 없다는 에러인데, 코파일럿에게 물어보았더니, tailwind를 설치하라고 합니다.

코파일럿이 이야기 해주는 대부분이 잘 안될때가 많습니다.

결국 구글신에게 물어보기로 하였고, 중국인의 어떠한 글을 발견하였고, 저는 그 글을 통하여 어느정도 해결을 할수 있었습니다.

2. postcss.config.js 를 만들어야 tailwindcss 로드를 할수 있다.

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

3. Tailwind CSS를 정의한 CSS 파일을 로드도 해줘야 한다.

.storybook/preview.js

import "../assets/css/main.css";
...

제가 느끼기에 preview.js 가 거의 index.js 파일쯤 되지 싶습니다.

이렇게만 해도 tailwind 는 연동이 됩니다. 오~~ 드뎌 끝...

이라고 생각했지만, fontawesome 의 아이콘은 보이지 않습니다.

4. .storybook/preview.js 에 추가 설정

import { library } from "@fortawesome/fontawesome-svg-core";
import { fas } from "@fortawesome/free-solid-svg-icons";

library.add(fas);

이젠 되겠지 하였지만, 이번에는 nuxt의 함수들에서 에러가 발생합니다.

가령 아래와 같은 것들이 에러가 나서 테스트가 불가능하였습니다.

const test = ref('');

이런 간단한 변수조차도 선언할수 없다니...

5. useAPI 를 자동으로 가져오게 하기 위한 라이브러리 설치

npm i -D unplugin-auto-import

6. 자동 임포트되는 함수 등을 읽을 수 있도록 하기 위한 라이브러리 설치

npm i -D unplugin-vue-components

7. vite.config.ts 에 위 라이브러리 설정

vite.config.ts도 만들어주고 아래 코드를 복사하여 붙여 넣습니다.

import { URL, fileURLToPath } from "node:url";
import { defineConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue", "vue-router"],
      dirs: ["./composables"], // Point to your composables directory that is auto-imported
      vueTemplate: true,
    }),
    Components({
      dirs: ["./components/"], // Point to your components directory that is auto-imported
      dts: true,
      directoryAsNamespace: true,
    }),
  ],
  resolve: {
    alias: {
      "~": fileURLToPath(new URL("../hex-blog-src/", import.meta.url)),
      // Add any other aliases you use in your code base
      // https://nuxt.com/docs/api/configuration/nuxt-config/#alias
    },
  },
});

이제 정말로 끝입니다.

지금보니 fontawesome 아이콘이 나오지 않네요. ui가 나오는것만 보고 감격했었는데, fontawesome 부분은 추후에 작성을 하도록 하겠습니다.