스토리북 env 설정 trouble shooting

1. 상황 설명

처음에 나이스 API의 학교 검색 기능을 사용하려 api key를 발급받고

평소처럼. env.local 파일에 해당 api key를 넣었습니다.

page.tsx에서의 console.log는 잘 찍혔지만

storybook에서도 console.log로 잘 되는지 api key를 테스트해보니 undefined가 반환되는 에러가 생기고 말았습니다.

처음에는 사소한 버그인 줄 알고 storybook 재시작과 기기 자체를 재시동 하기도 해 보았습니다.

하지만 그런 사소한 버그가 아니란 것을 깨닫고 바로 구글링을 시작했습니다.

2. 첫 번째 해결방법

첫번째 해결방법은 Next.js환경에서는 환경변수를 저장할 때 항상 앞에 NEXT_PUBLIC을 붙여주어야 합니다.

마침 내가 설정한 환경 변수에는 NEXT_PUBLIC이 붙여져있지 않았기 때문에 붙이면 잘 될 줄 알았습니다.

하지만 계속되는 undefined에러 때문에 다른 방법을 찾아 적용시켰습니다.

3. 두 번째 해결방법

두번째 해결방법은 storybook의 main.ts를 수정해서 하는 방법이었습니다.

해당 방법이 있다는 것을 알고 공식문서를 참고하여 수정해 보니,

이러한 코드가 나왔습니다.

import type { StorybookConfig } from "@storybook/nextjs";
import path from "path";

const config: StorybookConfig = {
  stories: [
    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
    "../../../apps/client/src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)",
    "../../../apps/admin/src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)",
    "../../../packages/shared/src/components/**/*.stories.@(js|jsx|mjs|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-onboarding",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {
      nextConfigPath: "../../admin/next.config.js",
    },
  },
  webpackFinal: async (config) => {
    if (config.resolve?.alias) config.resolve.alias["@"] = path?.resolve(__dirname, "../src/");
    return config;
  },
  staticDirs: ["../../admin/public", "../../client/public"],
  babel: async (config) => ({
    ...config,
    presets: [
      [
        "next/babel",
        {
          "preset-react": {
            runtime: "automatic",
            importSource: "@emotion/react",
          },
        },
      ],
    ],
  }),
  env: (config) => ({
    ...config,
    NEXT_PUBLIC_NEIS_API_KEY: "my api key",
  }),
};
export default config;

근데 이런 식으로 하면 storybook의 main.ts가 github에 노출이 될 때

env를 사용하는 것이 의미가 있나 싶었습니다.

그래서 확인해 보니 실제로 storybook의 main.ts는 github에 올라와져 있어서 이 방법도 결국 성공하지 못했습니다.

4. 세 번째 해결방법

다른 방법이 계속 실패하자 아는 개발자분에게 조언을 구해보니,

storybook 패키지 자체에. env파일을 추가해 보면 해결이 될 것이다라는 말을 해주셨습니다.

말씀해 주신 대로. env파일에 제 환경변수를 넣어, 실행시켜 보니 정말 잘 작동이 되었습니다.

5. 마무리

이번이 벌써 두 번째로 트러블 슈팅을 블로그에 적었는데, 트러블 슈팅을 적을수록 그 문제에 대한 해결방법이

명확하게 기억이 나고, 더욱 기억 속에 남는 계기가 되는 것 같습니다.

재균의 FE일지