올리브영 서비스에 사용되는 컴포넌트를 모아놓은 그곳!
올리브영 서비스용 디자인 시스템을 Storybook과 Emotion으로 구축한 과정을 소개했습니다. 전역 스타일, 상태별 컴포넌트 문서화, 패키지 배포와 서비스 적용 방법을 다뤘습니다.
#React#TypeScript
4700
국내 IT 기업 기술 블로그 최신 글
새로운 기술 블로그가 추가되었어요
필터 1
OLEA? Storybook을 활용한 올리브영의 디자인 시스템!
올리브영은 BO 공통화를 위해 Vue와 Ant Design Vue, Storybook 기반 디자인 시스템 OLEA를 구축했습니다. GitHub Packages 배포로 내부 개발자들이 일관된 컴포넌트를 쉽게 재사용하도록 만들었습니다.
#Vue.js#Storybook
9000
쏘카플랜 개편기
쏘카플랜 개편의 촉박한 일정과 QA 이슈 대응 경험을 정리했습니다. 조기 추상화보다 안정화 후 리팩토링과 점진적 개선을 제안합니다.
#React#Next.js
000
쏘카플랜 개편기
쏘카플랜 개편 과정에서 프론트엔드 일정 추정과 QA 대응, 레거시 개선 경험을 정리했습니다. 코로케이션과 WET 원칙으로 복잡한 화면과 도메인 로직을 단계적으로 분리했습니다.
#React#Next.js
4200
deFign : 네이버 페이의 디자인 시스템을 정의하다
네이버페이는 공통 UI와 디자인 토큰을 기반으로 디자인 시스템 deFign을 구축했습니다.\n컴포넌트 표준화와 스토리북, 인터페이스 조율로 일관성과 개발 효율을 높였습니다.
#디자인 시스템#Figma
11400
BackstopJS 적용 후기 (Visual Regression Test)
BackstopJS와 스토리북으로 Organism 단위 시각적 회귀 테스트를 구축했습니다. Jenkins·PR 봇 자동화로 결과 확인과 기준 이미지 갱신을 관리했습니다.
#BackstopJS#visual regression test
000
쿠팡 파트너스
개발자를 위한 서적을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발서적#프로그래밍
BackstopJS 적용 후기 (Visual Regression Test)
BackstopJS 적용 후기 (Visual Regression Test)
BackstopJS를 스토리북 기반 시각적 회귀 테스트로 운영하며 사이드이펙트 탐지와 문서화를 함께 얻은 사례를 소개했습니다. 또한 PR 코멘트와 develop 머지 후 approve 자동화로 테스트 운영 부담을 줄였습니다.
#BackstopJS#Visual Regression Test
3100
프론트엔드 테스트 자동화 전략 - 4. 테스트 환경 구성
프론트엔드 테스트 자동화 전략의 연장선에서 테스트 실행 환경 구성 방법을 다뤘습니다. 설정 파일 중심으로 실제 구성 시 참고할 매뉴얼형 내용입니다.
#test#자동화
2600
Storybook의 MSW mock 구조 개선
Storybook 스토리별로 흩어진 MSW GraphQL mock을 한곳으로 모아 관리하는 구조를 제안했습니다. recast 변환 스크립트로 중복과 누락 문제를 줄이는 마이그레이션 과정도 다뤘습니다.
#Storybook#MSW
2400
스토리북 함께 사용해보기
스토리북을 함께 사용해보며 활용 경험을 소개했습니다. 스토리북의 매력을 짧게 짚어보는 내용입니다.
#Storybook
1700
시각적 회귀 테스트 BackstopJS 적용하기 (Visual Regression Test)
BackstopJS와 Storybook으로 공통 컴포넌트의 시각적 회귀 테스트를 구축했습니다. Docker와 PR 프리뷰 리포트로 환경 차이와 UI 변경 검토를 관리했습니다.
#BackstopJS#Storybook
000
시각적 회귀 테스트 BackstopJS 적용하기 (Visual Regression Test)
시각적 회귀 테스트 BackstopJS 적용하기 (Visual Regression Test)
BackstopJS로 시각적 회귀 테스트를 구축한 경험을 정리했습니다. 스토리북과 Docker를 함께 사용해 UI 변경 검증과 운영 안정성을 높였습니다.
#BackstopJS#Docker
5000
신입 웹프론트엔드 개발자 2개월 차 후기
신입 웹프론트엔드 개발자 2개월 차 후기
2개월 온보딩에서 Next.js 렌더링, 모노레포, Storybook의 동작과 활용 방식을 학습했습니다.\n빌드·배포·협업 흐름을 경험하고 온보딩 문서화와 과제 구성 개선점을 제안했습니다.
#Next.js#SSG
3800
스토리북 작성을 통해 얻게 되는 리팩토링 효과
스토리북의 독립 렌더링 과정에서 컴포넌트의 책임 과다와 환경 의존성을 발견했습니다. 표현·데이터·레이아웃을 분리해 재사용성과 검증 가능성을 높였습니다.
#Storybook#React
000