173만명의 커뮤니티!! 함께 토론해봐요.
미해결
실무에 바로 적용하는 스토리북과 UI 테스트
안녕하세요, 일단 이해하기 쉽게 강의 만들어주셔서 감사드린다는 말씀드리고 싶습니다. 현재 next app router에서 진행중인데요, primary라는 스토리를 생성하고, 그 내에 사용하는 Props들을 추가하였습니다. 다만 강의(DefaultTextField 컴포넌트 생성과 스토리 생성 부분)에서는 onIconClick() 이라던지, onChange와 같은 함수들에 대해서는 스토리에 추가를 하지 않아도 에러가 뜨지 않던데, 저는 args 부분에 에러 라인이 그어지더라구요. 혹시 이 이유 알 수 있을까요? 감사합니다!
미해결
스토리북 & 자동화 테스트와 함께 하는 컴포넌트 주도 프론트엔드 개발
강의자료와 발표에서 정말 많은 질문을 다루긴 했는데요. 궁금하신 점을 적어주시면 시간이 되는대로 답변을 해드리려 합니다~
해결됨
2시간으로 끝내는 프론트엔드 테스트 기본기
안녕하세요, 선생님. 강의를 모두 듣고 개인 프로젝트에 적용해보고 있는 중에 궁금한 점이 생겨 질문 남깁니다. 이번 강의에 나온 cypress cloud를 사용해서 테스트 자동화를 해보았는데 문득 cypress가 아니라 cypress cloud를 사용해서 테스트 자동화를 하는 이유가 무엇인지 궁금하더라고요. https://docs.cypress.io/guides/continuous-integration/github-actions 위 문서를 찾아보니 cypress cloud는 테스트를 병렬로 진행해서 속도가 더 빠르다고 하는데 병렬 테스트를 위해 cypress cloud를 사용하는 것인지 궁금합니다. 아니면 뭔가 다른 이유가 있을까요?
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
Tailwind 꿀팁 알려주시면서 사전에 정의한 css들을 nextjs 프로젝트를 사용하면 tailwind를 지원하니 빌드할 때 스타일을 포함 안해도될 것 같다 라고 말씀하신 부분이 잘 이해가 안되어서 질문 드립니다...ㅜㅜ 어떻게 활용할 수 있다는 것인지 궁금합니다!
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
Figma에서 mono100 의 색상코드가 #f1f1f1 이 아닌 #f52c50 으로 설정되어 있습니다. 확인부탁드립니다...!
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
스토리북 자체에 Action 탭 오른쪽에 Visual Test라는 탭이 있는걸 확인했습니다. <Chromatic을 활용한 Visual 테스트> 강의와 같은 내용을 기능인가 해서 여쭤봅니다! 같은 기능인데 좀 더 확인하기 쉽게 탭으로 스토리북에서 제공하고있는건가 해서요..ㅎㅎㅎ
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
NavigationBar 강의를 시청했습니다. 배경색을 작성하지 않으시던데 그렇게 하신 이유가 있으신가요?
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
IconButton의 경우 alt에만 defaultValue를 작성하시던데 iconPath는 작성하지 않으시는 특별한 이유가 있으신가요? 어떤 기준으로 defaultValue 작성 여부를 판단하시는지도 궁금합니다!
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
현재는 public에서 아이콘을 가져오는데 assets에 가져올때는 어떻게 하나요? import type { Meta, StoryObj } from "@storybook/react"; import { IconButton } from "../../components/IconButton"; const meta = { title: "Buttons/IconButton", component: IconButton, parameters: { layout: "centered", }, tags: ["autodocs"], argTypes: { alt: { control: "text", description: "아이콘의 대체 텍스트" }, iconPath: { control: "text", description: "아이콘의 경로", defaultValue: "", }, onClick: { action: "clicked", description: "아이콘 클릭 시 호출되는 함수" }, }, } satisfies Meta<typeof IconButton>; export default meta; type Story = StoryObj<typeof meta>; export const Default: Story = { args: { alt: "아이콘", iconPath: "ic-delete-dark.svg", onClick: () => {}, }, };
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
안녕하세요 강의에 사용된 버전이나 pnpm을 사용하는 등 다른게 진행한 부분이 있습니다만 빌드할때 에러가 나는데 이해가 안되는 부분이 있어 질문드립니다. pakage.json "name": "@twosday/ui", "description": "Design System for twosday", "private": false, "publishConfig": { "access": "public" }, "files": [ "dist" ], "main": "dist/index.umd.js", "module": "dist/index.es.js", "types": "dist/index.d.ts", "exports": { ".": { "import": "./dist/index.es.js", "require": "./dist/index.umd.js", "types": "./dist/index.d.ts" }, "./styles": { "import": "./dist/styles/index.css" } }, "version": "0.0.1", "type": "module", "license": "MIT", import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin"; import svgr from "vite-plugin-svgr"; import path from "path"; import dts from "vite-plugin-dts"; import { viteStaticCopy } from "vite-plugin-static-copy"; // https://vitejs.dev/config/ export default defineConfig({ resolve: { alias: { "@": path.resolve(__dirname, "src"), }, }, plugins: [ react(), vanillaExtractPlugin({ identifiers: ({ hash }) => `css_${hash}`, }), svgr(), dts(), viteStaticCopy({ targets: [{ src: "src/index.css", dest: "" }], }), ], build: { lib: { name: "@twosday/ui", entry: path.resolve(__dirname, "src/index.tsx"), fileName: (format) => `index.${format}.js`, }, rollupOptions: { external: ["react", "react-dom"], output: { globals: { react: "React", "react-dom": "ReactDOM", }, }, }, sourcemap: true, emptyOutDir: true, }, }); grs04@BOOK-NN36R5QM7J MINGW64 ~/Desktop/sideproject/my-story-book (main) $ pnpm build > @twosday/ui@0.0.1 build C:\Users\grs04\Desktop\sideproject\my-story-book > tsc -b && vite build vite v5.3.5 building for production... src/index.tsx:1:38 - error TS6142: Module './component/LoginForm' was resolved to 'C:/Users/grs04/Desktop/sideproject/my-story-book/src/component/LoginForm.tsx', but '--jsx' is not set. 1 export { default as LoginForm } from "./component/LoginForm"; ~~~~~~~~~~~~~~~~~~~~~~~ src/index.tsx:2:35 - error TS6142: Module './component/Button' was resolved to 'C:/Users/grs04/Desktop/sideproject/my-story-book/src/component/Button.tsx', but '--jsx' is not set. 2 export { default as Button } from "./component/Button"; ~~~~~~~~~~~~~~~~~~~~ ✓ 15 modules transformed. [vite:dts] Start generate declaration files... dist/style.css 0.18 kB │ gzip: 0.15 kB dist/index.es.js 22.47 kB │ gzip: 6.77 kB │ map: 67.56 kB [vite:dts] Declaration files built in 589ms. [vite-plugin-static-copy] Copied 1 items. dist/style.css 0.18 kB │ gzip: 0.15 kB dist/index.umd.js 14.88 kB │ gzip: 5.90 kB │ map: 65.89 kB ✓ built in 1.12s vite.config.ts에서 build 에 작성한 부분을 지우고 기본설정으로 하면 잘 되는데 강의처럼 build부분을 작성을 하면 jsx flag를 설정하라고 나오면서 component 폴더에 d.ts 파일들이 생성이 안됩니다.
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
tailwind를 실제로 product에 적용해본 경험이 없어서 질문드립니다. 공통된 스타일은 global.css 로그인 페이지 스타일은 login.css 회원가입 페이지를 스타일을 signup.css로 @layout components를 나눠서 작성했을때 코드 스플릿팅이 되나요? 제대로 테스트를 못해봤지만 login.css 작성한 @layout components 클래스를 signup에서 쓰려면 써지는것 같더라구요 안썻을때 빌드시 코드 스플릿이 되는지 궁금합니다. jit 모드 라는게 있던데 프로젝트가 엄청 커졌을때 해당 기능으로 페이지 별로 어느정도 최적화가 되는지 궁금합니다.
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
Next.js를 사용하는 경우 이미지 최적화를 위해 next/image 에서 제공하는 Image 컴포넌트를 사용합니다! 이를 활용해서, 스토리북 컴포넌트를 만들 경우, React에서 이를 활용할 수 있을지 궁금합니다. 현재, React-Native-Cli에서 프로젝트를 진행하고 있습니다. React-Native-Cli(View, Text, Pressable)와, React, Next에서 모두 활용 가능한, 공용 스토리북 컴포넌트를 현실적으로 만들 수 있는지, 실무에서는 각각 따로 분리해서 개발을 진행하는지 여부가 궁금합니다! 타입스크립트로 만든 스토리북 패키지를, 자바스크립트를 활용한 (타입스크립트를 사용하지 않는) 프로젝트에서 활용가능한지도 궁금합니다! 프로젝트를 진행하면, 스토리북과 함께 한개의 레포지토리로 관리하는 것이 좋은지, 아니면, 따로 분리해서 두개의 레포지토리로 관리하는 것이 좋은지 궁금합니다! 개발 시작시, 먼저 스토리북으로 컴포넌트를 제작 후, 개발을 진행하는 것이 좋은지, 아니면, 개발을 진행해가며, 그때 그떄 공용 컴포넌트로 쓰일 만한 것들을 스토리북으로 만들어나가는 것이 좋은지 강사님의 경험상 괜찮은 방법을 알려주시면 감사하겠습니다!!
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
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가 들어갈 수 있는지 알고 싶습니다.
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
vite로 react + typescript 설치 후 storybook 설치시 위와 같은 에러가 발생하는데 해결방법이 있을까요?
미해결
실무에 바로 적용하는 스토리북과 UI 테스트
안녕하세요 강사님 좋은 강의 잘 듣고 있습니다! 제네릭에 대한 이해를 위해서 따로 문서도 찾아봤는데 궁금증이 해결되지 않아서 질문드립니다. 제네릭 타입을 사용해서 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> ); }
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
강사님 좋은 강의 잘 듣고 있습니다. 혹시 사용하시는 Copilot이 어떤건지 여쭤봐도 되나요?
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
강의를 들으면서 이해하기 어려운 부분 강의를 따라하는데 에러가 발생하는 부분 강의에는 없지만 스토리북에 대해 궁금한 부분 들을 자유롭게 질문으로 올려주세요! 확인하는대로 최대한 빠르게 답변드리겠습니다 이런것도 여기 질문해도 되나요? 강사님 VS Code 테마가 예뻐서 어떤거 쓰시는지 궁금합니다 ☺ 찾아봤는데 비슷한게 안보여서 질문드렸어요
해결됨
2시간으로 끝내는 프론트엔드 테스트 기본기
강의 1분쯤에 jest.config.cjs로 쓰는 것과 package.json에서 작성하는 법 2가지를 알려주셨을 때 전자대로 적용해 실행하니 아래와 같은 에러가 발생했습니다! 이후에 package.json에 작성해서 실행하는 방법으로 변경하니 정상적으로 작동했는데 혹시 이 원인을 알 수 있을까요? modules를 import하지 못한 이유를 잘 모르겠습니다!
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
npm 배포이후 vite 를 사용하지않은 패키지에서 해당 DS npm 을 설치하고 사용하면 위와같은 오류가 나옵니다 먼가 강의대로 하면 Vite 로 이뤄진 패키지만 사용이 가능한걸까요
미해결
2시간으로 끝내는 프론트엔드 테스트 기본기
위 화면처럼 connect ECONNREFUSED::1:54382등 locahost에 접근할 수 없다고 나오면 cypress.config.ts에서 baseurl 설정해야합니다. ( https://parkparkpark.tistory.com/186) import { defineConfig } from "cypress"; export default defineConfig({ e2e: { baseUrl: "http://localhost:3000", setupNodeEvents(on, config) { // implement node event listeners here }, }, });
