728x90 반응형 Storybook7 [Next] Next13 이후로 MSW 사용하기 (3) - Storybook에서 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 next13 이후로 msw 사용하기 마지막인 storybook에서 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 관련 글 [React] MSW로 API Mocking 하기 (1) - MSW란? [React] MSW로 API Mocking 하기 (4) - Storybook에서 사용하기 이전 글 [Next] Next13 이후로 MSW 사용하기 (1) - Browser 환경 설정 [Next] Next13 이후로 MSW 사용하기 (2) - Node 환경 설정 들어가기에 앞서 들어가기에 앞서 storybook에 msw를 적용하기 위해서는 2가지 환경이 설정되어 있어야 합니다. storybook 사용 환경 msw browser 사용 환경 storybook 사용 환.. 2024. 1. 9. [Next] Storybook으로 UI 컴포넌트 문서화하기 (4) - Figma 연동하기 안녕하세요. J4J입니다. 이번 포스팅은 storybook으로 UI 컴포넌트 문서화하기 마지막인 figma 연동하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [Next] Storybook으로 UI 컴포넌트 문서화하기 (1) - 기본 설정 [Next] Storybook으로 UI 컴포넌트 문서화하기 (2) - Tailwind 적용 [Next] Storybook으로 UI 컴포넌트 문서화하기 (3) - Path Alias 사용 Figma 연동하는 이유 일반적으로 개발되는 서비스 및 storybook에 표현되는 다양한 컴포넌트 UI들은 개발자가 직접 디자인을 하여 구현된 것이 아닌 디자이너와 협업을 통해 만들어진 결과물일 것입니다. 그러다 보니 자연스럽게 행해지는 플로우는 디자이너가 figma와 .. 2024. 1. 1. [Next] Storybook으로 UI 컴포넌트 문서화하기 (3) - Path Alias 사용 안녕하세요. J4J입니다. 이번 포스팅은 storybook으로 UI 컴포넌트 문서화하기 세 번째인 path alias 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [Next] Storybook으로 UI 컴포넌트 문서화하기 (1) - 기본 설정 [Next] Storybook으로 UI 컴포넌트 문서화하기 (2) - Tailwind 적용 Path Alias 사용 예시 많은 분들이 path alias를 사용하는 이유가 import를 통해 모듈을 로드할 때 상대 경로보다는 절대 경로를 이용하기 위해서 일 것입니다. 그래서 일반적인 페이지를 개발할 때 path alias를 활용한 절대 경로를 자연스럽게 많이 사용하고 계실 거고 심지어 설정이 잘 되어 있다면 자동 완성을 사용할 때도 절대 경로를.. 2023. 12. 28. [Next] Storybook으로 UI 컴포넌트 문서화하기 (2) - Tailwind 적용 안녕하세요. J4J입니다. 이번 포스팅은 storybook으로 UI 컴포넌트 문서화하기 두 번째인 tailwind 적용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [Next] Storybook으로 UI 컴포넌트 문서화하기 (1) - 기본 설정 Tailwind 사용 예시 프로젝트 개발을 할 때 tailwind를 사용하시던 분들이 storybook을 처음 도입을 하게 되면 제일 먼저 당황하는 부분은 storybook에 css가 적용되지 않는 현상입니다. 서버를 구동하여 확인할 수 있었던 다양한 컴포넌트들의 디자인들이 storybook에서는 올바르게 보이지 않아 설정에 의문을 품게 됩니다. 예를 들어 다음과 같이 tailwind를 사용하여 새로운 버튼을 만들어 보겠습니다. import { M.. 2023. 12. 26. [Next] Storybook으로 UI 컴포넌트 문서화하기 (1) - 기본 설정 안녕하세요. J4J입니다. 이번 포스팅은 storybook으로 UI 컴포넌트 문서화하기 첫 번째인 기본 설정에 대해 적어보는 시간을 가져보려고 합니다. Storybook이란? storybook은 react, next, vue 등의 FE 개발자들이 많이 사용하는 다양한 기술 스택에서 활용할 수 있는 UI 컴포넌트 문서화 오픈 소스 도구입니다. storybook을 BE 입장에서 가장 대표적으로 비교해 볼 수 있는 것은 swagger가 될 수 있습니다. API 산출물을 swagger를 통해 확인할 수 있는 것처럼 서비스 개발을 위해 만들어진 다양한 컴포넌트 및 페이지들의 산출물을 확인할 수 있도록 도와주는 것이 storybook입니다. Storybook 공식 문서를 확인해 보면 storybook을 사용했을 때.. 2023. 12. 25. [React] MSW로 API Mocking 하기 (4) - Storybook에서 사용하기 안녕하세요. J4J입니다. 이번 포스팅은 MSW API Mocking 하기 네 번째인 Storybook에서 사용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전 글 [React] MSW로 API Mocking 하기 (1) - MSW란? [React] MSW로 API Mocking 하기 (2) - Browser 환경에서 사용하기 [React] MSW로 API Mocking 하기 (3) - Node 환경에서 사용하기 설정 방법 Storybook에 MSW를 적용하기 위해서는 Storybook을 사용할 수 있는 환경과 MSW Browser 환경 설정이 되어 있어야 합니다. 만약 각 환경 구축이 필요하신 경우 다음 글들을 참고해 주시면 됩니다. [React] Storybook으로 컴포넌트 문서화하기 [R.. 2023. 10. 16. [React] Storybook으로 컴포넌트 문서화하기 안녕하세요. J4J입니다. 이번 포스팅은 Storybook으로 컴포넌트 문서화하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Storybook이란? Storybook은 제목에서 보이듯이 개발할 때 사용되는 여러 컴포넌트들을 문서화할 수 있는 오픈 소스 도구입니다. 여러 협업되는 과정에서 사용될 수 있는 공통 컴포넌트들부터 시작하여 페이지들도 독립적으로 구축할 수 있기 때문에 개발자들이 개발된 컴포넌트 코드들을 사용하고자 할 때 Storybook을 참고하여 더 편리하게 사용할 수 있게 도와줍니다. 또한 일반 문서들처럼 단순히 Storybook에 등록할 때 설정한 값에 맞게만 보이는 것이 아니고 radio, text 등을 이용해 각 컴포넌트에서 전달받을 수 있는 props도 실시간으로 변경도 할 수 있.. 2022. 5. 14. 이전 1 다음 728x90 반응형
