아토믹 디자인을 활용한 디자인 시스템 도입기
카카오페이지 웹의 UI 파편화와 컴포넌트 설계 기준 부재를 아토믹 디자인으로 개선했습니다.\n단위 구분의 주관성은 UI 모델링·코드 리뷰·compound 컴포넌트로 보완했습니다.
#React#디자인 시스템
000
국내 IT 기업 기술 블로그 최신 글
새로운 기술 블로그가 추가되었어요
필터 1
아토믹 디자인을 활용한 디자인 시스템 도입기
아토믹 디자인을 활용한 디자인 시스템 도입기
카카오페이지 웹의 UI 파편화와 컴포넌트 설계 기준 부재를 아토믹 디자인으로 개선했습니다.\n컨텍스트 기반 분류, Storybook·Figma 연계, 외부 스타일 주입 원칙을 적용했습니다.
#React#디자인 시스템
2600
![UI 라이브러리 개발 [기술 블로그]](https://miro.medium.com/v2/resize:fit:896/1*-xQJps9YOvD5TRn6cqWs4g.png)
UI 라이브러리 개발 [기술 블로그]
디자인 시스템 부재로 생긴 스타일 불일치와 소통 비용을 React UI 라이브러리로 개선했습니다.\nStorybook·자동화 테스트·ESM/CJS 빌드로 검증과 호환성을 강화했습니다.
#React#TypeScript
3400
MSW 모킹 코드 재사용하기 feat. Storybook, Jest
Storybook 스토리의 MSW 핸들러를 Custom Render로 Jest 테스트에서 재사용했습니다. 테스트 간 핸들러 초기화와 Node.js 절대 경로 문제 해결 방법도 소개합니다.
#MSW#Storybook
000
MSW 모킹 코드 재사용하기 feat. Storybook, Jest
MSW 모킹 코드 재사용하기 feat. Storybook, Jest
Storybook 스토리에 선언한 MSW 핸들러를 Custom Render로 Jest 테스트에서 재사용했습니다. 테스트 후 핸들러 초기화와 Node.js 절대 URL 처리 방법도 소개합니다.
#MSW#Storybook
2600
StoryBook을
React 컴포넌트의 다양한 초기 상태를 Storybook 스토리로 분리해 한 번에 확인하는 방식을 소개했습니다.\nUI 협업과 QA에 유용하지만 엣지 케이스 작성·유지 비용과 디자인 협업이 필요합니다.
#Storybook#React
2000
쿠팡 파트너스
개발자를 위한 서적을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발서적#프로그래밍
화해팀 입사 3개월차, 프론트엔드 기술 기반 다지기
프론트엔드 플랫폼의 공통 개발 기반을 OKR로 설정하고 Git·lint 규칙을 정비했습니다.\nMonorepo와 Storybook을 도입해 공통 로직 및 컴포넌트 공유를 강화했습니다.
#React#TypeScript
000