카
카카오헤어샵
November 1, 20231회
카카오헤어샵 vanilla-extract 도입기 - 카카오헤어샵 마크업 내재화 이야기
간단 소개
카카오헤어샵 프론트엔드팀의 마크업 내재화 과정과 vanilla-extract 도입을 통한 스타일 시스템 개선 경험 공유.
AI Summary
- 마크업 내재화 배경 및 목표
- 외부 마크업 개발의 한계: 기술 스택 불일치, 스타일 관리의 어려움, 커뮤니케이션 비용 증가.
- 문제 해결을 위해 프론트엔드 개발팀은 마크업 내재화를 결정하고, 점진적인 디자인 시스템 구축을 목표로 설정.
- Vanilla-extract 도입 과정 및 효과
- Module.css를 활용하여 화면 단위 스타일을 분리하고, 디자인팀과 협업하여 공통 테마 정의.
- Vanilla-extract를 선택한 이유: Zero-runtime으로 인한 성능 우위, 다양한 패키지 활용 가능성, 타입스크립트 지원.
- 합성 컴포넌트 형태로 재사용 가능한 공통 컴포넌트 제작하여 작업 시간 단축 및 코드 가독성 향상.
Next Feeds
헤어샵 백엔드 개발자 코드 리뷰 - 단일책임원칙 편 - 지극히 주관적인 저스틴 코드 리뷰 방법 - 1
카카오헤어샵 개발팀 저스틴의 단일 책임 원칙 기반 코드 리뷰 방법과 중요성을 소개합니다.
코드 리뷰단일 책임 원칙객체지향카카오헤어샵개발자
2023. 11. 1.
카카오헤어샵
AWS Node Auto Scaler Karpenter 도입기
AWS EKS 환경에서 Karpenter를 도입하여 노드 프로비저닝 속도 향상 및 비용 최적화를 달성한 경험 공유.
KarpenterEKSCluster AutoscalerAuto ScalingBin-Packing
2023. 11. 1.
비브로스
Web을 위한 gRPC Stub과 Runtime 생성하기 - Feat. Buf & kubernetes
뱅크샐러드 웹팀은 gRPC-Gateway 환경에서 @bufbuild/protoplugin을 활용, HTTP 클라이언트 코드 자동 생성을 통해 개발 생산성을 향상시키고 인프라 부하를 감소시켰습니다.
gRPCBufkubernetes코드 자동 생성프론트엔드 개발
2023. 10. 31.
뱅크샐러드
W CARE 서비스 프론트엔드를 TDD로 개발해본 후기
올리브영 W CARE 서비스 프론트엔드 개발에 TDD를 적용한 경험 공유 및 장점, 개선 방향을 제시합니다.
TDD프론트엔드W CARE월경 이벤트테스트 전략
2023. 10. 30.
올리브영
킁킁!킁! 어디서 사기 냄새 안나요? : FDS 시스템에 AI 적용하기
카카오뱅크 FDS 시스템에 AI를 적용한 여정을 소개하며, Rule 기반 시스템의 한계를 극복하고 AI 기반 시스템의 장점을 설명합니다.
FDSAIMLFlinkFeature Store
2023. 10. 30.
카카오뱅크
키친보드 안드로이드 앱 Jetpack Compose 도입기
키친보드 안드로이드 앱에 Jetpack Compose를 도입하며 겪은 경험과 팁을 공유합니다. XML의 한계 극복, Compose의 장단점, 그리고 실질적인 도입 전략을 제시합니다.
Jetpack ComposeAndroidUI 개발MVI 패턴Modifier
2023. 10. 30.
스포카