2025년 12월 30일
1년 동안의 iOS 모듈화 진행기 - 2. Component 모듈
iOS 공통 UI 컴포넌트를 ZComponent 모듈로 분리한 과정을 공유했습니다. 데모앱과 스냅샷 테스트로 가시성과 QA 범위를 개선했습니다.
#iOS#module#storyboard
2100
모든 블로그
대표 인기 포스트코드 사례로 보는 Domain-Driven 헥사고날 아키텍처75 조회75 조회 프론트엔드 프론트엔드 아키텍처 프론트엔드 프론트엔드 기타 기타 기타 기타 기타 기타 기타 기타 기타 기타 기타 기타 기타 기타 기타
카카오스타일
주요 카테고리 Frontend · Architecture
활동 요약
- 최근 30일
- 0개
- 평균 조회
- 19
- 누적 조회
- 1,158
- 전체 글
- 60개
- 마지막 발행
- 2025. 12. 30.
최신 게시글 (20)
2025년 11월 23일
지그재그에 “포치의 선물가게”를 오픈하며
지그재그 앱 웹뷰에서 미니게임을 구현하며 Matter.js와 Phaser.js를 조합한 과정을 공유했습니다. 또한 SSR, DPR, 모바일 제스처와 게임오버 판정 문제를 해결한 사례를 정리했습니다.
#React#TypeScript#Next.js
4200
2025년 3월 21일
코드 사례로 보는 Domain-Driven 헥사고날 아키텍처
Domain-Driven 헥사고날 아키텍처를 PDP 서비스 코드 사례로 설명했습니다. Port와 Use Case 분리, 애그리거트 모델, 테스트 용이성 등 운영 장점을 다뤘습니다.
#DDD#헥사고날 아키텍처#Kotlin
7500
2025년 2월 10일
1년동안의 iOS 모듈화 진행기
1년간 진행한 iOS 모듈화 경험을 돌아보며 느낀 점과 아쉬웠던 점을 정리했습니다. 모듈화 필요성보다 실제 진행 과정의 회고에 초점을 맞췄습니다.
#iOS#module
5100
2024년 12월 13일
프론트엔드팀의 디자인 시스템 재구축기
여러 지면에서 따로 관리되던 상품 카드 컴포넌트를 일원화할 필요가 있었습니다. 단순 리팩토링을 넘어 디자인 시스템 재구축으로 통합 관리 기반을 마련했습니다.
#UI/UX#컴포넌트#design system
5000
2024년 10월 7일
기획전 애니메이션 모듈 개발
지그재그는 상품 판매를 촉진하기 위해 이벤트나 기획전을 주요 마케팅 수단으로 활용합니다. 기획전은 한정된 기간 동안 고객에게 특정 상품 정보와 추가적인 할인 혜택을
1200
2024년 8월 9일
UI 테스트 자동화
테스트를 거치지 않은 소프트웨어는 없습니다. 하지만 많은 기능을 가져 복잡해진 현대의 소프트웨어를 온전히 테스트하는 것은 굉장히 어려운 일입니다. 이러한 테스트
2500
2024년 8월 4일
Server Driven UI 호출 구조 개선
카카오스타일에서는 서버 드리븐 UI(Server Driven UI, 이하 SDUI)를 통해 UI의 유연성을 가져가고 있습니다. 서버가 클라이언트 UI를 동적으로 제어하므로써 빌드
3500
2024년 6월 28일
웹폰트 최적화를 통한 CDN 비용절감
근래의 많은 기업과 마찬가지로 카카오스타일도 불필요한 비용 낭비가 발생하지 않도록 많은 노력을 기울이고 있습니다. 물론 이전이라고 사용하지 않는 리소스를 방치하며 비용을 낭비한 것
1700
2023년 11월 2일
내가 만든 non-null 변수에서 NullPointerException이 발생할 리가 없어!
안녕하세요, 카카오스타일 전시 UX팀의 샌즈입니다. 모두들 알고 계시듯 null(널)은 값이 없음을 나타냅니다. 그리고 null 값인 객체에 접근하려고 하면 그 유명한 NullPo
800
2023년 8월 4일
프론트엔드 테스트 자동화 전략 - 4. 테스트 환경 구성
이전 글에서는 테스트 전략과, 테스트를 작성하는 방법들에 대해서 알아봤습니다. 하지만, 테스트를 실행하는 환경에 대해서는 스토리북을 사용한다고 가정했을 뿐, 구체적인 이야기를 진행
2300
2023년 8월 4일
프론트엔드 테스트 자동화 전략 - 3. 구현하기
이전 글에서는 제품의 요구사항을 분석하며, 테스트 케이스를 산출하는 방법에 대해 알아봤습니다. 이 글에서는 구체적으로 어떻게 테스트 코드를 작성할 수 있는지에 대해 알아봅니다.
2800
2023년 8월 4일
프론트엔드 테스트 자동화 전략 - 2. 요구사항 분석
저번 글에서는 프론트엔드의 테스트 자동화에 대해서 소개하고, 테스트 전략에 대해서 간단하게 다뤄봤습니다. 테스트 자동화가 아무리 중요하다고 해도, 테스트 작성을 시작하는 것은 쉽지
2000
2023년 8월 4일
프론트엔드 테스트 자동화 전략 - 1. 테스트 자동화란?
프론트엔드는 입력/출력이 명확하지 않기 때문에 테스트를 작성하면서 고민해봐야 할 내용이 많습니다. 프론트엔드 관점에 맞춰 테스트 자동화, 테스트의 정의와 방향성에 대해서 다뤄봤습니
2000
2023년 7월 17일
Storybook의 MSW mock 구조 개선
카카오스타일의 파트너센터 서비스에서는 UI 테스트와 문서화를 위해서 Storybook과 MSW를 사용하고 있습니다. Storybook의 각 스토리마다 MSW GraphQL mock
1900
2022년 11월 15일
GraphQL 이해하기: (4) 리졸버 인자 - 4. info
GraphQL.js 리졸버의 마지막 인자는 info입니다. info는 현재 처리 중인 질의에 대한 정보가 들어가 있습니다. 보통은 리졸버 구현에 info가 필요하지 않지만 최적화나
1000
2022년 11월 15일
GraphQL 이해하기: (4) 리졸버 인자 - 3. context
GraphQL.js 리졸버의 세번째 인자는 context입니다. 이 인자는 온전히 사용자가 설정하는 것으로 매 요청마다 새로 생성되며 같은 요청을 처리하는 리졸버가 상태를 공유하기
800
2022년 11월 15일
GraphQL 이해하기: (4) 리졸버 인자 - 2. args
GraphQL.js 리졸버의 두번째 인자는 args입니다. 해당 필드에 인자가 주어지면 그 값이 들어옵니다.
900
2022년 11월 12일
GraphQL 이해하기: (4) 리졸버 인자 - 1. source
GraphQL.js의 리졸버는 네개의 인자를 가지고 있습니다. 그 중 첫번째 인자는 source 입니다.
1000
2022년 11월 9일
GraphQL 이해하기: (3) 리졸버의 이해
GraphQL 스키마를 정의했고, 클라이언트에서 온 요청을 서버가 처리하기 위해 필요한 기술을 알아봤습니다. 이제 클라이언트에서 온 요청에 따라 적절한 데이터를 반환하는 과정이 남
1100