OLEA? Storybook을 활용한 올리브영의 디자인 시스템!
올리브영은 BO 공통화를 위해 Vue와 Ant Design Vue, Storybook 기반 디자인 시스템 OLEA를 구축했습니다. GitHub Packages 배포로 내부 개발자들이 일관된 컴포넌트를 쉽게 재사용하도록 만들었습니다.
#Vue.js#Storybook
9000
국내 IT 기업 기술 블로그 최신 글
새로운 기술 블로그가 추가되었어요
필터 1
디자인 시스템, 디자인과 코드의 간극 줄이기
디자인 시스템, 디자인과 코드의 간극 줄이기
디자인 시스템에서 Figma와 코드 간 간극이 커지며 커뮤니케이션 비용과 개발 피로도가 늘어나는 문제를 다뤘습니다. Figma 규약 정비와 Plugin API 기반 도구로 명세 검증과 코드 변환을 자동화하는 방안을 소개했습니다.
#디자인 시스템#Figma
3300
웹 컴포넌트로 프레임워크 마이그레이션 준비하기
웹 컴포넌트로 프레임워크 마이그레이션 준비하기
Vue2에서 React로 점진적 마이그레이션할 때 웹 컴포넌트를 도입한 사례를 소개했습니다. 프레임워크별 UI 중복 구현을 줄이고 디자인 일관성과 유지보수 효율을 높였습니다.
#웹 컴포넌트#Vue.js
3000
여러 프레임워크에서 사용할 수 있는 라이브러리 만들기
Framework Agnostic 개념을 바탕으로 코어와 어댑터를 분리하는 라이브러리 설계 방식을 소개했습니다. Tanstack Query와 계산기 예시로 프레임워크 독립성과 통합 구조를 설명했습니다.
#JavaScript#TypeScript
3900
Vue3, Composition API와 Pinia를 이용한 상태관리 (2)
Vue3 Composition API와 Pinia를 실제 서비스에 적용한 사례를 다루었습니다. 인재풀 화면에서의 적용 결과와 느낀 점을 함께 정리했습니다.
#Vue.js#Pinia
2500
React + TypeScript 전환기 (Feat. msw)
사람인 채용달력 모바일 서비스를 React와 TypeScript로 전환한 사례를 다뤘습니다. 기존 Vue 기반 경험에서 FE 분리 전환 과정과 MSW 활용 맥락을 소개했습니다.
#React#TypeScript
4000
상품 조회 25% 향상시킨 온스타일 상세페이지 개편 비하인드
온스타일 상품 상세페이지를 정보 구조와 개발 프레임워크까지 함께 개편했습니다. 그 결과 고객당 조회 페이지 수가 25% 늘고 클릭과 주문 지표도 개선했습니다.
#Vue.js#backbone.js
3900
쿠팡 파트너스
개발자를 위한 서적을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발서적#프로그래밍
ffmpeg.wasm
브라우저에서 ffmpeg를 실행하는 ffmpeg.wasm의 개념과 샘플 코드를 소개했습니다. 네이티브 ffmpeg보다 느리지만 서버 없이 처리할 수 있다는 장점을 확인했습니다.
#ffmpeg#WebAssembly
2100
쏘카의 웹 팀에 관하여
쏘카 웹 팀의 역할과 협업 방식, 온보딩과 배포 프로세스를 소개한 글입니다. React 중심의 웹뷰 개발과 기술 도입 방식도 함께 정리했습니다.
#React#Next.js
2900
쏘카의 웹 팀에 관하여
쏘카 웹 팀의 조직 구조와 웹 뷰·백오피스 중심 개발 업무를 소개했습니다. 스프린트, QA·QC, 배포와 React 기반 기술 선택 방식을 설명합니다.
#React#Next.js
000
모노레포 이렇게 좋은데 왜 안써요?
여러 레포지토리로 분산된 프론트엔드 서비스를 모노레포로 통합한 사례를 소개했습니다. 공통 컨벤션과 패키지 공유로 생산성과 유지보수성이 크게 향상되었습니다.
#모노레포#yarn
4400
리다이렉트 서버와 FCM 푸시 연동
리다이렉트 서버와 FCM 푸시 연동
푸시 클릭·노출 통계를 위해 리다이렉트 서버와 FCM 푸시를 연동하고 로그 적재 구조를 설계했습니다. 웹 푸시 노출은 아이콘 이미지 응답을 활용해 수집하는 방식으로 보완했습니다.
#FCM#DynamoDB
900
Vue3, Composition API와 Pinia를 이용한 상태관리 (1)
Vue3 프로젝트에서 Composition API와 Pinia를 활용한 상태관리 경험을 공유했습니다. 인재풀 프로젝트 개편을 계기로 실무 적용 흐름과 도입 포인트를 정리했습니다.
#Vue.js#Pinia
2000
Vue 기능을 활용한 Transition 적용기
Vue Transition으로 버튼과 입력 영역의 등장·퇴장 애니메이션을 자연스럽게 구현한 경험을 소개했습니다. `v-if` 전환, `opacity` 조정, `mode="out-in"` 적용 과정을 정리했습니다.
#Vue.js#JavaScript
2900