Nx에서 Bun 더 잘 사용하기: Nx 18 -> 21 마이그레이션
Nx와 Bun 조합을 Nx 18에서 21.4 이상으로 마이그레이션하며 lock file 감지·파싱 문제를 해결했습니다. Bun의 텍스트 lock file 전환으로 CI와 빌드 효율, 도구 호환성을 함께 개선했습니다.
#Nx#Bun#webpack
100
모든 블로그
대표 인기 포스트Claude Code를 활용한 예측 가능한 바이브 코딩 전략370 조회370 조회 프론트엔드 프론트엔드
프론트엔드
프론트엔드
프론트엔드 프론트엔드 프론트엔드 프론트엔드
프론트엔드 프론트엔드
프론트엔드 프론트엔드
프론트엔드 프론트엔드
프론트엔드 프론트엔드 프론트엔드 프론트엔드
마켓컬리
주요 카테고리 백엔드 · AI · 아키텍처
활동 요약
- 최근 30일
- 3개
- 평균 조회
- 27
- 누적 조회
- 6,328
- 전체 글
- 236개
- 마지막 발행
- 2026. 11. 9.
마켓컬리 기술 블로그 글 (25)
디자인 컴포넌트 라이브러리를 ‘실제 사용 방식’에 맞게 다시 설계한 이야기
Kitchen의 빌드·패키지 구조를 실제 사용 방식에 맞게 다시 설계했습니다. ESM 전환과 단일 패키지화로 트리셰이킹과 DX를 개선했습니다.
#React#ESM#번들링
12800
디자인 컴포넌트 라이브러리를 ‘실제 사용 방식’에 맞게 다시 설계한 이야기
React 디자인 컴포넌트 라이브러리를 ESM과 단일 패키지 구조로 재설계했습니다. 트리셰이킹 적용으로 번들 크기와 빌드 시간을 크게 줄이고 DX를 개선했습니다.
#React#ESM#tree-shaking
300
빌드가 터졌다: 5년 된 CMS 프로젝트의 Webpack4 → Vite 전환
Webpack 4 기반 CMS의 OOM 문제를 순환 참조와 구조적 한계 관점에서 분석했습니다. Vite 전환으로 빌드 시간·번들 크기·개발 서버 시작 속도를 크게 개선했습니다.
#Webpack#Vite#React
400
빌드가 터졌다: 5년 된 CMS 프로젝트의 Webpack4 → Vite 전환
5년 된 CMS의 Webpack4 빌드가 CI에서 OOM으로 무너져 Vite로 전환했습니다. 전환 후 빌드와 개발 서버가 크게 빨라지고 설정도 단순해졌습니다.
#Webpack#Vite#React
8400
핀테크그룹의 GraphQL 기반 BFF와 프론트엔드 활용기
GraphQL 기반 BFF의 역할과 프론트엔드 활용 사례를 설명했습니다. Apollo Client 캐싱 문제와 BFF 도입 시 고려할 점도 함께 정리했습니다.
#GraphQL#BFF#Apollo Client
13500
핀테크그룹의 GraphQL 기반 BFF와 프론트엔드 활용기
MSA 환경의 복잡도를 줄이기 위한 GraphQL 기반 BFF 구조와 프론트엔드 활용 방식을 소개했습니다. Apollo 캐시 키 충돌 해결과 BFF 도입에 따른 운영 복잡도도 함께 짚었습니다.
#GraphQL#BFF#NestJS
200
퀵메뉴로 비즈니스 널리 알리기 (feat. 전지적 디자이너 시점)
홈 화면 퀵메뉴를 스와이프형 구조와 솔리드 아이콘으로 설계해 신규 서비스 진입을 유도했습니다. 컬리멤버스에는 혜택을 강조한 모션 아이콘을 적용해 가입률 상승 요인을 검증했습니다.
#UI/UX#mobile#모션
100
퀵메뉴로 비즈니스 널리 알리기 (feat. 전지적 디자이너 시점)
컬리 홈 화면에 퀵메뉴를 도입해 신규 비즈니스와 이벤트 진입을 높이는 디자인 과정을 소개했습니다. 아이콘 스타일과 모션을 개선해 멤버십 가입율 상승 요인까지 검증했습니다.
#UI/UX#모션#아이콘
2900
뷰티컬리에서 <나의 컬리 스타일>이 갖는 의미
뷰티 개인화를 위한 프로필 입력을 첫 방문·재방문 상태에 맞춰 단계형과 목록형으로 설계했습니다. 개인정보 동의 흐름을 검토하고, 진입률과 추천 이용 확대를 위한 개선 방향을 제시했습니다.
#UI/UX#프로필#개인화
200
뷰티컬리에서 <나의 컬리 스타일>이 갖는 의미
뷰티컬리의 <나의 컬리 스타일>은 사용자를 더 잘 이해해 맞춤 추천을 강화하기 위한 프로필 기능으로 소개했습니다. 첫 진입과 재방문에 따라 화면 구조를 다르게 설계하고, 동의 프로세스는 협업과 실험으로 개선했습니다.
#UI/UX#개인화#A/B test
4000
뷰티 필터를 개발하며 얻은 새로운 경험
뷰티 상품 탐색 경험 개선을 위해 웹 필터를 확장하고 React Query를 도입했습니다. URL 상태 저장과 서버 상태 동기화로 탐색 편의성과 데이터 최신성을 높였습니다.
#React#React Query#Redux
300
뷰티 필터를 개발하며 얻은 새로운 경험
뷰티 필터 프로젝트에서 React Query로 서버 상태 관리를 전환하고 필터 경험을 웹으로 확장했습니다. 고객 탐색 경험 개선과 API 호출 감소, 팀 문화 강화까지 이어졌습니다.
#React Query#redux#웹 개발
3500
우당탕탕 beauty 풀한, 컬리 앱 서비스 런칭기
iOS에서 site 전환 구조와 공통 구좌 모델링으로 뷰티 컬리 출시를 지원했습니다. 오픈 후 서비스 상태 관리와 이벤트 처리로 로딩을 개선하고 유입 UI를 데이터로 검증했습니다.
#iOS#API#UI/UX
200
우당탕탕 beauty 풀한, 컬리 앱 서비스 런칭기
컬리 앱에서 뷰티 컬리 런칭 과정과 전환 구조 개선 사례를 공유했습니다. 초기 오픈과 이후 전환율 개선까지 협업과 데이터 기반 대응이 중심이었습니다.
#iOS#API#refactoring
2500
후기 개선 프로젝트가 끝이 아닌 시작인 이유
컬리 후기 서비스의 탐색 UX와 레거시 문제를 개선한 Phase 1 사례를 소개했습니다. 초기 정리, 협업 커뮤니케이션, 단계적 로드맵 수립이 핵심이었습니다.
#UI/UX#성능#데이터 분석
3000
Kurly Design Principle
컬리 프로덕트 디자인 원칙 5가지를 소개하며 일관된 판단 기준을 제시했습니다. 사용자 공감과 논리를 바탕으로 단순하고 신뢰감 있는 경험을 지향했습니다.
#UI/UX#design
2900
새로운 컬리몰 NX를 소개합니다.
고도몰 기반 컬리몰을 Next.js 기반 NX로 전환하며 상품·주문·회원 서비스를 재구축했습니다. SSR, Lint, 빌드 캐시, PR 성능 테스트로 성능과 코드 품질을 개선했습니다.
#Next.js#React#TypeScript
200