개발개발39 [date] Storybook + vanilla extract 스타일 적용하기 컴포넌트에 vanilla extract 스타일을 적용하니까 스토리북에서 이렇게 에러가 발생했다.vanilla extract를 알아먹을 수 있도록 애드온을 설치해주자.. https://storybook.js.org/recipes/@vanilla-extract/css Storybook: Frontend workshop for UI developmentStorybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.storybook.js.org일단.. 2025. 3. 11. [date] monorepo storybook img 경로 지정하기 드디어 레포지토리 세팅을 하고 컴포넌트 개발을 시작해보려고 한다.첫번째는 image file을 선택하는 input 컴포넌트 package/ui/src 경로에서 UI 컴포넌트들을 개발할 것이다.main.ts에 stories 경로를 아래와 같이 지정해두면 스토리 파일의 경로가 src/xxx.stories.tsx 또는 src/ImageInput/xxx.stories.tsx 이던 간에 스토리북이 감지한다.// apps/storybook/.storybook/main.tsconst config: StorybookConfig = { stories: ["../../../packages/ui/src/**/*.stories.@(js|jsx|ts|tsx)"], ...};input.stories.tsx 파일을 아래와 같이 .. 2025. 3. 11. [date] Chromatic 배포하기 설치한 스토리북을 크로매틱으로 배포하는 단계이다. 아래 블로그에 상세히 나와있어 잘 따라갈 수 있었다.참조 블로그 chromatic으로 storybook 배포하기(with pnpm, turborepo, github actions)turborepo 환경에서 chromatic으로 storybook을 배포하는 실습 과정을 그대로 나열한 글입니다.velog.iochromatic 에서 알려주는 명령어는 npx, yarn만 있길래 블로그 참조함! 이미지에 드래그한 요 부분을 놓쳐 루트 디렉토리에서 명령어를 입력했더니 build-storybook 스크립트가 없다는 에러 문구를 만났다.apps/storybook/package.json에는 build-storybook 스크립트가 추가되어있어서 디렉토리 들어가서 해야하나 .. 2025. 3. 6. [date] Storybook 설정하기 turborepo에서 제공하는 가이드가 있지만 디테일이 좀 부족... 하다고 생각했는데? 아니다. 그냥 잘 따라만 하자. 우선, 스토리북을 어디에 설치할 것인가? 모노레포 프로젝트 구조는 아래와 같다/turbo-repo-root /apps /web (Next.js 앱) /admin (Next.js 앱) /packages /ui (공통 UI 컴포넌트)가이드에서는 apps/storybook 디렉토리를 추가하라고 한다. -> 스토리북도 하나의 앱 ! 앱마다 스토리북을 따로 쓸게 아니고 공통 UI로 사용할거라면 packages/ui 디렉토리에 스토리북을 추가해도 된다고 해서그 편이 낫다고 생각해서 설치하면서 포스팅 하고 있었는데설치중에 뭔가 꼬이는거같고,turbo run.. 2025. 3. 6. [date] package.json과 turbo.json 설정하기 eslint config ✅tsconfig 설정 ✅ pnpm-workspace.yaml ✅ package.json의 script 설정 ➡️ turbo.json 셋업 ➡️ package.json 현재 구성되어있는 package.json파일들이다. 최초 생성된 파일에서, 앞선 설정을 하면서 수정된 부분이 조금씩 있다. 터미널에서 turbo run dev 를 입력하면 각 앱의 dev 스크립트를 자동으로 실행하여 각각의 앱의 dev 서버가 작동한다. 코드 원문 ▼더보기// 루트{ "name": "date-project", "private": true, "scripts": { "build": "turbo run build", "dev": "turbo run dev", "lint": "tur.. 2025. 3. 6. [date] pnpm-workspace.yaml 설정하기 eslint config ✅tsconfig 설정 ✅ pnpm-workspace.yaml ➡️ package.json의 script 설정turbo.json 셋업.yaml 확장자는 이전에 GitHub action으로 빌드 에러 검사하고, 스토리북 크로매틱으로 배포할때 workflow? 설정할때 본 적이 있다. YAML 이란 뭘까?'YAML'은 'YAML은 마크업 언어가 아니다(YAML Ain't Markup Language)' 또는 '또 다른 마크업 언어(Yet Another Markup Language)'의 약어사람이 쉽게 이해할 수 있는 데이터 직렬화 언어구성(config) 파일과 서로 다른 시스템 간의 데이터 교환을 비롯한 다양한 애플리케이션에 특히 적합. 간단하고 직관적인 구조로 다양한 도메인에서 .. 2025. 3. 6. 이전 1 2 3 4 ··· 7 다음
