173만명의 커뮤니티!! 함께 토론해봐요.
미해결
실무에 바로 적용하는 스토리북과 UI 테스트
강의 잘 듣고 있습니다 ! 강의하시다 보면 타입스크립트에 타입이나 인터페이스 정의하실 때 자동 완성되는 것 같은데.. 어떻게 설정해야하는지 문의드립니다
미해결
실무에 바로 적용하는 스토리북과 UI 테스트
안녕하세요. 좋은 강의 감사합니다. 강의를 듣다 보니 Storybook과 Chromatic이 컴포넌트 검증과 협업에 도움이 된다는 점은 이해할 수 있었습니다. 다만 한 가지 궁금한 점이 생겨 이렇게 메시지를 드립니다. 개인 프로젝트나 소규모 프로젝트에서도 Storybook을 사용하는 것이 적절한지, 아니면 디자인 시스템을 갖추거나 컴포넌트 재사용이 많은 프로젝트에서 주로 사용하는 도구인지 판단 기준이 궁금합니다. 규모, 협업 인원, 유지보수 관점에서 Storybook 도입 여부를 결정할 때 어떤 기준으로 판단하는 것이 좋은지도 알고 싶습니다. 모든 프로젝트에서 Storybook을 사용하는 것이 오히려 관리 비용이 될 수도 있겠다는 생각이 들어, Storybook을 사용하는 것이 효과적인 경우와 굳이 사용하지 않아도 되는 경우를 어떻게 구분하면 좋을지 조언을 듣고 싶습니다. 감사합니다.
미해결
실무에 바로 적용하는 스토리북과 UI 테스트
안녕하세요! 강의 실습 도중 설정 방식과 관련하여 궁금한 점이 생겨 질문 드립니다. 강의에서는 argTypes 안에 onClick: { action: 'clicked' } 를 추가하셨는데, 제가 사용 중인 Storybook 10 버전에서는 argTypes 작성 시 action 이라는 키 자체가 자동 완성(타입 추론)에 나타나지 않습니다. 이와 관련하여 두 가지가 궁금합니다. 타입 추론 문제: argTypes 에서 action 키가 뜨지 않는 것이 Storybook 버전이 올라가면서 바뀐 방식인가요? 아니면 제가 별도의 설정을 놓치고 있는 것인가요? 설정 방식의 차이: 현재 강의에서는 아래 두 가지를 모두 사용하셨습니다. argTypes: { onClick: { action: 'clicked' } } args: { onClick: fn() } 만약 저처럼 argTypes 에서 action 키가 제대로 인식되지 않는 상황이라면, args 에 fn() 만 작성해도 강의 내용처럼 액션 로그를 확인하는 데 문제가 없는 것인지 궁금합니다. action: 'clicked' 를 사용하는 이유: 단순히 이벤트를 연결하는 것 외에 action 이라는 키를 통해 'clicked' 라는 라벨을 따로 지정해주시는 특별한 이유가 있으신가요? 버전 차이 때문인지 제가 타입을 잘못 다루고 있는 것인지 몰라 질문 남깁니다. 답변 부탁드립니다!
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
node -v : 24 vite react.ts storybook 10v --- storybook setup 하고 난 이후 react-vite npm run dev를 실행하니 Failed to load preset: "@storybook/preset.js"■ Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@storybook/preset.js' │ imported from ./node_modules/storybook/dist/_node-chunks/chunk-O7UZQAUS.js │ at Object.getPackageJSONURL (node:internal/modules/package_json_reader:255:9) │ at packageResolve (node:internal/modules/esm/resolve:767:81) │ at moduleResolve (node:internal/modules/esm/resolve:853:18) │ at defaultResolve (node:internal/modules/esm/resolve:983:11) │ at nextResolve (node:internal/modules/esm/hooks:748:28) │ at o (file://./node_modules/@tailwindcss/node/dist/esm-cache.loader.mjs:1:69) │ at nextResolve (node:internal/modules/esm/hooks:748:28) │ at Hooks.resolve (node:internal/modules/esm/hooks:240:30) │ at handleMessage (node:internal/modules/esm/worker:199:24) │ at Immediate.checkForMessages (node:internal/modules/esm/worker:141:28) 이런 에러가 뜹니다. .storybook/main.ts 는 import type { StorybookConfig } from "@storybook/react-vite"; const config: StorybookConfig = { stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"], addons: [ "@chromatic-com/storybook", "@storybook/addon-vitest", "@storybook/addon-a11y", "@storybook/addon-docs", "@storybook/addon-onboarding", ], framework: "@storybook/react-vite", core: { builder: "@storybook/builder-vite", // 👈 The builder enabled here. }, }; export default config; 이렇게 설정해 놓았고, npm install @storybook/builder-vite --save-dev 해놓은 상태입니다. 이유를 찾고싶은데 못찾아 qa 남깁니다.
미해결
2시간으로 끝내는 프론트엔드 테스트 기본기
강사님, 강의 잘 듣고 있습니다. 강의 중 jest에서 한글로 적을 때는 test, 영어로 적을 때는 it으로 적는 게 가독성이 좋다고 설명해주셨는데, 실무 팀에서는 이런 네이밍 컨벤션을 어떻게 정하고 유지하는지, 혹시 Prettier, ESLint 같은 도구로 특정 스타일(예: test만 사용)을 강제하는 경우도 있는지 궁금합니다.
미해결
실무에 바로 적용하는 스토리북과 UI 테스트
강의를 듣고 실무에 어떻게 적용해볼수 있을까 생각하다보니 궁금한 점들이 있어서 질문 남깁니다! 규모가 큰 기업들에서는 Storybook을 어떤 구조로 관리하고 있나요? 소규모 팀에서는 "프로젝트 내부 세팅 후 나중에 분리" vs "처음부터 모노레포" 중 뭐가 더 현실적일까요? (초기 비용 vs 장기 유지보수 고려)
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
만약 회사에서 Next.js로 프로젝트를 진행하고 있다고 가정할 때, storybook은 Next.js 프로젝트 내에서 세팅하는 것보다 아예 다른 프로젝트 디렉토리로 만드는 게 나을 것 같다는 생각이 드는데, 어떻게 생각하시나요?! 왜냐하면 특정 디렉토리 내에서 세팅할 경우 해당 프로젝트에서 기존 서비스와 Storybook 프로젝트가 혼재하여 복잡도를 높이고, (이건 추측이지만) storybook 배포 시 특정 디렉토리를 제외해야 할 것 같다고 생각합니다. 그리고 다른 프로젝트 생성 시 또 다시 storybook을 설치하는 것은 비효율적일 것 같습니다. 그래서 아예 다른 프로젝트 디렉토리에서 리액트로 storybook 을 세팅하고 npm 패키지로 업로드 후 install 하여 사용한다고 생각했는데, 제가 생각한 게 맞을까요?
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
강의 중 스토리북이 테스트를 위한 라이브러리라고 말씀하신 부분이 있는데요, 스토리북 테스트 라이브러리가 yarn pnp와 의존성 간의 충돌이 있는 것으로 보입니다. 혹시 yarn pnp 환경에서 스토리북으로 컴포넌트에 대한 테스트를 진행하고 싶으면 어떻게 진행하면 좋을까요?
미해결
실무에 바로 적용하는 스토리북과 UI 테스트
강의에 있는 커맨드가 사용되지 않아서 이곳 저곳 돌아다니다가 발견했네요 npx @tailwindcss/cli -i ./src/index.css -o ./src/output.css --watch
미해결
실무에 바로 적용하는 스토리북과 UI 테스트
퍼블리셔로 일하고 있는데.. 설정하는 부분이 녹록치 않아 이렇게 질문드립니다. 제가 하고자 하는 것은 라이트,다크 테마시 주요 컬러와 기타 색상등을 변경하려고 하는데요.. css 변수 처리 예는 아래와 같습니다. /* root 라이트테마 기본 변수 */ :root { --text-color: #000; --bg-color: #fff; } /* 다크 테마 기본변수 */ .dark { --text-color: #fff; --bg-color: #000; } 테마 설정은 다음과 같이 진행했습니다. preivew.tsx 에 decorators 배열로 추가함. import { withThemeByClassName } from '@storybook/addon-themes'; 이렇게 하니까 dark 클래스는 잘 붙고 있는데.. 문제는 상단 패널에 기본적으로 레이어로 떠서 클릭할수 있는 라이트,다크테마는 컴포넌트 화면의 배경컬러가 변경되지만 제가 애드온한 것은 토글버튼은 라이트,다크버튼이 나오더라구요.. 근데 문제는 애드온 한것은 클래스만 제어되고 있고 컴포넌트의 배경컬러를 제어하려니까 잘 안되더라구요.. 상단 기본 패널의 테마설정 부분과 애드온 한 부분의 싱크가 안맞는 부분도 있구요.. 이것을 어떤 식으로 처리해야하는지.. 조언을 구하고 싶습니다. 강의 잘 듣고 있습니다. 감사합니다.
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
테일윈드를 안쓰고 스타일 컴포넌트만 사용하는 환경에서는요? 테일윈드로 환경셋팅을 하는게 맞을까요??
미해결
실무에 바로 적용하는 스토리북과 UI 테스트
강의랑 다른 부분 1. tailwind 설치 커맨드 : 커맨드가 간단해졌어요. npm install tailwindcss @tailwindcss/vite 강의랑 다른 부분 2. vite.config.ts : 이제 ***.tsx, ***.jsx 를 일일히 넣지 않아도 됩니다. import { defineConfig } from 'vite' import tailwindcss from '@tailwindcss/vite' export default defineConfig({ plugins: [ tailwindcss(), ], }) 강의랑 다른 부분 3. @import ~ 3줄 @import "tailwindcss"; 한 줄로 초간단해짐.. 강의랑 다른 부분 4. tailwind.config.js : config.js 가 없어졌습니다. (자세한 내용: https://tailwindcss.com/blog/tailwindcss-v4#css-first-configuration ) 대신 index.css 에 아래와 같은 형식으로 theme 을 적용할 수 있습니다. @import 'tailwindcss'; @theme { --color-primary: #1d2745; --color-secondary: #1de5d4; --color-tertiary: #1d2745; --color-white: #ffffff; --color-mono100: #f1f1f1; --color-mono200: #bebebe; --color-mono300: #d6d7d9; --color-error: #d01e1e; --color-social: #395997; }
해결됨
2시간으로 끝내는 프론트엔드 테스트 기본기
안녕하세요 강의 잘 듣고 있습니다 수강하면서 실습을 위해 올려주신 깃헙을 클론해서 각종 라이브러리 설치 후 실행하는데 jest-dom라이브러리를 인식을 못하는 건지 계속 다음 부분에서 오류가 나서 테스트가 실패하네요 클론 후 코드 수정 등은 한 것이 없는데 무엇이 문제일까요?
해결됨
2시간으로 끝내는 프론트엔드 테스트 기본기
Test suite failed to run ReferenceError: TextEncoder is not defined 1 | 2 | import "@testing-library/jest-dom"; > 3 | import * as nock from "nock"; | ^ 4 | import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; 5 | import { 6 | fireEvent, at Object.<anonymous> (node_modules/@mswjs/interceptors/src/utils/bufferUtils.ts:1:17) at Object.<anonymous> (node_modules/@mswjs/interceptors/lib/browser/index.js:4:24) at Object.<anonymous> (node_modules/nock/lib/intercept.js:13:30) at Object.<anonymous> (node_modules/nock/lib/recorder.js:8:44) at Object.<anonymous> (node_modules/nock/lib/back.js:4:18) at Object.<anonymous> (node_modules/nock/index.js:3:14) at Object.<anonymous> (src/__test__/Login.spec.tsx:3:1) ReferenceError: TextEncoder is not defined 에러가 발생합니다. node -v => v18.18.2 노드 버전이랑, util 라이브러리를 사용해 문제를 해결하려 했지만, 잘 되지 않아 질문드립니다.
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
react-toastify를 사용하시는 경우 storybook에서 출력하는데 곤란함을 겪는 분들이 계실 거 같아 자문자답 올려둡니다! package.json "react-toastify": "^10.0.4" "@types/react": "^18.3.12", "@storybook/react": "^8.3.0", .storybook/preview.tsx ( ts가 아닌 tsx ) 17버전 이상이라 import React from 'react'가 안되서 아래와 같이 @jsxImportSource 추가 /** @jsxImportSource react */ import type { Preview } from '@storybook/react'; // react-toastify 관련 import import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; Modal.setAppElement('#storybook-root'); const preview: Preview = { parameters: { actions: { argTypesRegex: '^on[A-Z].*' }, controls: { matchers: { color: /(background|color)$/i, date: /Date$/i, }, }, }, decorators: [ Story => ( <> <Story /> <ToastContainer position="bottom-right" autoClose={3000} hideProgressBar={false} newestOnTop={false} closeOnClick rtl={false} pauseOnFocusLoss draggable pauseOnHover theme="light" /> </> ), ], }; export default preview; tsconfig.json { "compilerOptions": { "jsx": "react-jsx", } }
미해결
2시간으로 끝내는 프론트엔드 테스트 기본기
안녕하세요. 테스트 코드에 관심이 있는 중에 찰떡인 강의 덕분에 집중해서 강의를 정독하고있습니다. mocking 시에 여러 라이브러리들이 존재할텐데, nock 을 선택하신 이유가 궁금합니다. 추가로 다들 비슷하겠지만 라이브러리를 선택하실때 고민하시는 부분들이 어떤 부분들이 있는지 궁금해요. (저는 주로 github 스타,업데이트 및 지원, 사용성, 지금 코드와 적합한가? 정도 보긴합니다..)
미해결
2시간으로 끝내는 프론트엔드 테스트 기본기
Cypress Colud Trial 13 days left라고 뜨는데 유료로 바뀌었나요?
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
개요 react-modal 라이브러리를 사용하고 있다가 Storybook에 등록하여 관리하고 싶어서 작성하는데 아래와 같이 컴포넌트를 작성했다가 스토리북 화면에서에러가 발생하였습니다. 강사님께서는 Modal의 경우 어떤식으로 해서 Storybook을 동작가능하게 하셨는지 궁금합니다. 현재는 Modal.setAppElement('body')로 처리하여 임시로 실행되게 하였으나, 더 좋은 다른 방법이 있을지 질문드립니다. import Modal from 'react-modal'; Modal.setAppElement('#root'); // 모달이 열린 상태에서도 접근성을 보장하기 위해 필요합니다. const BaseModal: React.FC<BaseModalProps> = ({ Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
미해결
실무에 바로 적용하는 스토리북과 UI 테스트
meta 객체의 프로퍼티에서 tsconfig.json에 포함되어 있지 않습니다. 라고 에러가 뜨는데 어떤 설정을 해주어야할까요? tsconfig.json { "files": [], "references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" } ] } tsconfig.app .json { "compilerOptions": { "target": "ES2020", "useDefineForClassFields": true, "lib": ["ES2020", "DOM", "DOM.Iterable"], "module": "ESNext", "skipLibCheck": true, /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, "isolatedModules": true, "moduleDetection": "force", "noEmit": true, "jsx": "react-jsx", /* Linting */ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, }, "include": ["src"] } tsconfig.node.json { "compilerOptions": { "target": "ES2022", "lib": ["ES2023"], "module": "ESNext", "skipLibCheck": true, /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, "isolatedModules": true, "moduleDetection": "force", "noEmit": true, /* Linting */ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, }, "include": ["vite.config.ts"] }
미해결
실무에 바로 적용하는 스토리북과 UI 테스트
안녕하세요 개발자님. vite초기설정할때 "Select a variant" 설정에서 typescript+ SWC대신 typescript를 하는 이유가 뭔가요? 최근에 vite를 사용하면서 검색을 한 결과 보통 react에서 사용하는 babel보다 c로 만들어진 SWC가 더 빨라서 좋다고 들어서 이전에는 typescript + SWC를 선택하여 프로젝트를 하였는데 그냥 typescript를 선택한 이유가 있나요? 현업에서는 주로 어떤걸 선택하나요? 추가로, 현업에서는 보통 번들러를 vite를 사용하나요? 현재 컴퓨터학부에 진학중인 3학년이라 궁금한 점이 많고 현업에선 어떻게 (번들러 등)쓰이는지 궁금하네요! 아는 현업자 선배분께선 보통 vite는 아직 안정하지가 않아서 다른 번들링 방법을 사용하다고 들었는데 개발자님의 생각이 궁금합니다. 말이 길어져서 죄송합니다. 긴 글 읽어주셔서 감사합니다!
