[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 프로젝트주차 3주차 후기

 

3주차에는 지난 컴포넌트의 마무리와 퍼블리싱을 진행했는데, Landing 페이지의 퍼블리싱을 맡게 되었다. 

이번 프로젝트에선 UI 테스트 자동화를 위해서 storybook을 적용했는데, 이것이 약간 어려워 작업속도가 더뎠는데, 만들어 놓고나니 활용도도 높고, 특히 공통 컴포넌트를 만들면 그 코드를 다른 팀원이 사용해야 하기에 storybook을 보고 용례를 짐작할 수 있어 좋았다. 아무래도 이런 것이 없다면 일일히 UI를 써봐야되고 시행착오에 시간이 소요되기에 개발과정이 더 오래 걸리게 되는 것이다. 이번에 스토리북을 사용하면서 조사한 내용를 정리해보려 한다. 

 

1. 스토리북이란

Storybook은 React, Angular, Vue 등의 분리된 UI 컨포넌트를 체계적이고 효율적으로 구축할 수 있는 개발 도구다. UI 컨포넌트 라이브러리의 문서화(documentation)를 위해 사용할 수도 있고 디자인 시스템(Design system)을 개발하기 위한 플랫폼으로 사용할 수도 있다.

 

2. 스토리북 적용하기

npx storybook@latest init으로 설치하고, 거기에 npm install -D chromatic을 추가해서 으로 배포 자동화까지 할 수 있다. 이 부분은 팀원분이 셋팅해주셨기에 편하게 이용하고 있다. 물론 깃허브에 배포한 뒤 확인해도 되지만 개발과정에서 확이하려면 npm run storybook 명령어로 현재 제작중인 컴포넌트의 storybook 또한 확인할 수 있다.

storybook은 Nextjs 기준으로 app폴더 하위에 stories폴더 내부에 작성하며 확장자는 name.stories.ts다. 설정이 따로 필요한 것인지 원래 복수형으로 쓰는 것인지 잘 모르겠지만 실수로 단수형인 story로 쓰면 인식이 안된다. 

 

import { Meta, StoryObj } from "@storybook/react";

import InfoBoxDetail from "@/components/InfoBoxDetail";

const meta: Meta<typeof InfoBoxDetail> = {
  title: "components/InfoBoxDetail",
  tags: ["autodocs"],
  component: InfoBoxDetail,
};

export default meta;

type Story = StoryObj<typeof InfoBoxDetail>;

export const Default: Story = {
  args: {
    text: ["여기에 내용이 들어갑니다."],
    variant: "primary",
  },
};

export const GrayWithMultipleLines: Story = {
  args: {
    text: [
      "첫 번째 줄 텍스트입니다.",
      "두 번째 줄 텍스트입니다.",
      "세 번째 줄 텍스트입니다.",
    ],
    variant: "gray",
  },
};

export const RedWithEmptyContent: Story = {
  args: {
    text: [],
    variant: "red",
  },
};

 

위는 내가 작성한 InfoboxDetail의 스토리 내용이다.

Default

 

GrayWithMultipleLines

RedWithEmptyContent

 

컴포넌트의 코드에서 variant라는 props로 배경이나 글자를 적용하게 했고 기본적인 props별로 분류하는 것이 아니라 여러 상황에 맞춰 테스트하려고 노력했다.

물론 아래 보는 것과 같이 Controls 탭에서 코드 외의 형식으로 자유롭게 테스트할 수 있는 것도 장점이다. 

 

3. Firebase github 로그인 저장 실패

이번주에 github 연동은 지난 주에 정리한 내용으로 성공했지만, firebase 연동에는 실패했다. 많은 강의를 보고 github 소스코드를 찾아 헤맸지만 해결하지 못했다. 내가 본 강의는 1년 전의 강의였는데, 현재와 FirebaseAdapter와 버전이 달랐다. 그때까지만 해도 아직 테스트하는 단계의 코드였던 모양인데, 그 강의를 참고 했을 때 세번째 줄의 코드를 넣었다. 

import { Firestore } from 'firebase-admin/firestore';
import { FirebaseAdapter } from "@next-auth/firebase-adapter";
import * as firestoreFns from "firebase/firestore";

 

아마 내가 겪고 있는 에러인 [auth][error] MissingAdapterMethods: Required adapter methods were missining... 이 에러와 연관된 코드일 것 같은데 도통 해결되지가 않는 것이다. 내가 잘못된 강의를 참고한 것일 수도 있고 버전이 달라졌기 때문일 수도 있다고 생각이 든다. 하지만 Next-auth가 불안정한 것인지, 아직 해결되지 않은 버그인 것인지 모르는 상태로 2일을 고민했지만 해결할 수 없어 다른 팀원 분에게 Firebase/auth 방식으로 하자고 했다. 물론 Nextjs 프로젝트인데 Next-auth를 사용하지 않는 것도 아쉽지만, 프로젝트 기간은 무제한이 아니기에 아쉽지만 포기할 수밖에 없었다. 혹시 해결하신 분 있으시면 댓글을 남겨주셨으면 좋겠다.

 

 

 

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 과정(B-log) 리뷰로 작성 되었습니다.