Next.js를 사용하는 경우 이미지 최적화를 위해 next/image 에서 제공하는 Image 컴포넌트를 사용합니다! 이를 활용해서, 스토리북 컴포넌트를 만들 경우, React에서 이를 활용할 수 있을지 궁금합니다.현재, React-Native-Cli에서 프로젝트를 진행하고 있습니다. React-Native-Cli(View, Text, Pressable)와, React, Next에서 모두 활용 가능한, 공용 스토리북 컴포넌트를 현실적으로 만들 수 있는지, 실무에서는 각각 따로 분리해서 개발을 진행하는지 여부가 궁금합니다!타입스크립트로 만든 스토리북 패키지를, 자바스크립트를 활용한 (타입스크립트를 사용하지 않는) 프로젝트에서 활용가능한지도 궁금합니다!프로젝트를 진행하면, 스토리북과 함께 한개의 레포지토리로 관리하는 것이 좋은지, 아니면, 따로 분리해서 두개의 레포지토리로 관리하는 것이 좋은지 궁금합니다!개발 시작시, 먼저 스토리북으로 컴포넌트를 제작 후, 개발을 진행하는 것이 좋은지, 아니면, 개발을 진행해가며, 그때 그떄 공용 컴포넌트로 쓰일 만한 것들을 스토리북으로 만들어나가는 것이 좋은지 강사님의 경험상 괜찮은 방법을 알려주시면 감사하겠습니다!!

import type { Meta, StoryObj } from "@storybook/react"; import { fn } from "@storybook/test"; import TagList from "../components/TagList"; // 버튼 컴포넌트의 메타 정보를 나타냄 const meta = { // 경로 title: "List/TagList", component: TagList, parameters: { layout: "centered", }, tags: ["autodocs"], argTypes: { tagList: { control: "array", description: "태그 리스트", docs: ["tag1", "tag2", "tag3"], }, onTagClick: { action: "clicked", description: "버튼 클릭 이벤트", }, }, args: { onTagClick: fn(), }, } satisfies Meta<typeof TagList>; export default meta; type Story = StoryObj<typeof meta>; export const Default: Story = { args: { tagList: ["tag1", "tag2", "tag3"], }, }; 위와 같이 코드를 작성했을 떄, tagList의 control 부분에서 타입 에러가 발생합니다. TS2322: Type "array" is not assignable to type Control | undefined어쨰서 undefined가 들어갈 수 있는지 알고 싶습니다.

vite로 react + typescript 설치 후 storybook 설치시 위와 같은 에러가 발생하는데 해결방법이 있을까요?

안녕하세요 강사님 좋은 강의 잘 듣고 있습니다!제네릭에 대한 이해를 위해서 따로 문서도 찾아봤는데 궁금증이 해결되지 않아서 질문드립니다.제네릭 타입을 사용해서 tagList로 넘어온 아이템이 onTagClick으로 전달된다는것을 보증 해준다고 하셨는데, 제네릭의 어떤 기능으로 이것을 보증해주는지 궁금합니다.그리고 아래처럼 작성한것과 어떤 차이가 있는지 궁금합니다.import { useState } from "react"; import TagButton from "./TagButton"; interface ITagListProps { tagList: string[]; onTagClick: (tag: string) => void; } export default function TagList({ tagList, onTagClick, }: ITagListProps) { const [selectedTag, setSelectedTag] = useState<string>(tagList[0]); return ( <div className="flex gap-x-4" onClick={(event) => { const eventTarget = event.target as HTMLButtonElement; const tag = eventTarget.textContent as string onTagClick(tag) } }> {tagList.map((tag) => ( <TagButton key={tag} isChecked={tag === selectedTag} onClick={() => setSelectedTag(tag)} > {tag} </TagButton> ))} </div> ); }

강사님 좋은 강의 잘 듣고 있습니다.혹시 사용하시는 Copilot이 어떤건지 여쭤봐도 되나요?

강의를 들으면서 이해하기 어려운 부분강의를 따라하는데 에러가 발생하는 부분강의에는 없지만 스토리북에 대해 궁금한 부분들을 자유롭게 질문으로 올려주세요!확인하는대로 최대한 빠르게 답변드리겠습니다 이런것도 여기 질문해도 되나요? 강사님 VS Code 테마가 예뻐서 어떤거 쓰시는지 궁금합니다 ☺ 찾아봤는데 비슷한게 안보여서 질문드렸어요

npm 배포이후 vite 를 사용하지않은 패키지에서 해당 DS npm 을 설치하고 사용하면 위와같은 오류가 나옵니다 먼가 강의대로 하면 Vite 로 이뤄진 패키지만 사용이 가능한걸까요

팀 내 스토리북 도입으로 인해 관련 컨벤션을 정하려고 합니다. 컴포넌트를 수정하게 되면 스토리북도 필수로 같이 수정해야 된다는 룰 말고는 떠오르는게 없는데 혹시 강사님이 사용하시는 컨벤션을 알려주실 수 있나요?

안녕하세요. 이전글에 이어서 Interaction 테스트를 하는 과정에서 발생한 이슈 공유드립니다. [명령어가 다른 문제]확인해보시면 아시겠지만, Interaction 테스트를 위해 강의에서 설치한 명령어와 현재 공식문서에 작성되어있는 명령어가 다릅니다.강의: @storybook/jest, @storybook/testing-library문서: @storybook/test설치항목이 줄어들었지만, 최신화된 공식문서의 내용을 따라가도 정상적으로 동작함을 확인했습니다. [스토리북 실행시 에러 발생]No matching export in "global-externals:@storybook/components스토리북을 실행하면 상단에 작성한 문제가 발생할 수 있는데, 저의 경우에는 .nodemodules 디렉토리를 삭제하고 @storybook/components @storybook/addons먼저 설치한 후 다시 공식문서에서 제공하는 명령어를 통해 설치하여 해결했습니다. 하단의 링크를 참고하시면 됩니다.https://github.com/storybookjs/storybook/issues/24906 (+추가적으로 @storybook/vue3 를 설치해야 Meta, StoryObj를 불러올 수 있습니다.) [스토리북 테스트 실패]LoginForm 컴포넌트와 스토리를 만드는 과정에서 코드를 복사하여 가져올 때, EmptyForm과 FilledForm의 render 부분을 주석처리해야 테스트가 통과됨을 확인했습니다. 

안녕하세요. 제가 강의에서 놓친 부분일 수도 있겠지만, 스토리북 테스트 실패 및 워크플로우 무기한 중단 문제에 대해서 제가 해결한 방법을 공유드립니다. [노드 버전]상단의 이미지처럼 워크플로우가 돌아가면서 노드 버전으로 인해 발생한 문제는 .nvmrc 파일에 작성된 노드버전을 조정하여 해결했습니다. (저의 경우에는 18.18.0) [워크플로우]상단의 이미지는 워크플로우가 다음 단계로 넘어가지 않아 직접 워크플로우를 취소한 화면인데, 이 문제는 워크플로우의 스크립트를 수정하여 해결했습니다.npx wait-on tcp:127.0.0.1:6006 && yarn test-storybook해당 문제는 노드 버전으로 인해 발생된 것으로 보이며, 자세한 내용은 하단의 링크를 통해 확인하실 수 있습니다.https://github.com/storybookjs/test-runner/issues/301 [스토리북 테스트 실패]스토리북 테스트 명령어를 로컬에서 돌릴 경우, 강의를 따라가면서 생성한 스토리들과 컴포넌트에서는 문제가 없었으나,Header, Page, LoggedIn(Smoke-test), LoggedOut(Smoke-test)... 위와 같은 파일들에서 문제가 발생하는데, 해당 파일들을 모두 삭제하여 해결했습니다.

metadata의 argTypes를 작성한 것들을 스토리의 전달 인자에 다 작성하는 걸로 알고 있었는데, 이벤트 핸들러를 작성하지 않아도 되는 이유를 알고 싶습니다. 그리고 왜 저는 이벤트 핸들러를 작성하지 않으면 오류가 나는지 궁금합니다.

강의 초반, 스토리북 설치를 하는데 npx storybook@latest init 명령어를 치면 스토리북이 열리긴 하는데 로딩이 멈추질 않습니다. ㅠㅠ오류 메시지는 아래와 같이 나옵니다.열심히 구글링도 해봤지만 해결책을 찾지 못했습니다.

GeneratedMocks로 생성한 코드들이 많아지면 복잡할 것 같아서 생성되는 파일의 위치를 자동으로 변경해주고 싶은데요,예를들면 현재 코드가 있는 디렉토리에 generated라는 디렉토리 안에다가 생성된 파일을 저장해주고싶어요.어떠한 설정을 해야할까요?