서버 개발자가 헥사코드를 몰라도 되게 만들기
SDUI를 도입했지만 화면 결정이 코드에 남아 있어 배포 병목이 계속 생겼습니다. 이를 해결하기 위해 화면 구성을 데이터화한 UX Builder와 토큰 기반 운영 구조를 설계했습니다.
#SDUI#server-driven UI#어드민
5600
모든 블로그
대표 인기 포스트코드 사례로 보는 Domain-Driven 헥사고날 아키텍처91 조회91 조회 아키텍처 프론트엔드 프론트엔드 아키텍처 프론트엔드 프론트엔드 프론트엔드 프론트엔드 아키텍처 프론트엔드 백엔드 프론트엔드 프론트엔드 프론트엔드 프론트엔드 프론트엔드 백엔드 백엔드 백엔드 백엔드
카카오스타일
주요 카테고리 Frontend · Backend · Architecture
활동 요약
- 최근 30일
- 0개
- 평균 조회
- 24
- 누적 조회
- 1,486
- 전체 글
- 61개
- 마지막 발행
- 2026. 8. 31.
최신 게시글 (20)
1년 동안의 iOS 모듈화 진행기 - 2. Component 모듈
iOS 공통 UI 컴포넌트를 ZComponent 모듈로 분리한 과정을 공유했습니다. 데모앱과 스냅샷 테스트로 가시성과 QA 범위를 개선했습니다.
#iOS#module#storyboard
3200
지그재그에 “포치의 선물가게”를 오픈하며
지그재그 앱 웹뷰에서 미니게임을 구현하며 Matter.js와 Phaser.js를 조합한 과정을 공유했습니다. 또한 SSR, DPR, 모바일 제스처와 게임오버 판정 문제를 해결한 사례를 정리했습니다.
#React#TypeScript#Next.js
5300
코드 사례로 보는 Domain-Driven 헥사고날 아키텍처
Domain-Driven 헥사고날 아키텍처를 PDP 서비스 코드 사례로 설명했습니다. Port와 Use Case 분리, 애그리거트 모델, 테스트 용이성 등 운영 장점을 다뤘습니다.
#DDD#헥사고날 아키텍처#Kotlin
9100
1년동안의 iOS 모듈화 진행기
1년간 진행한 iOS 모듈화 경험을 돌아보며 느낀 점과 아쉬웠던 점을 정리했습니다. 모듈화 필요성보다 실제 진행 과정의 회고에 초점을 맞췄습니다.
#iOS#module
5700
프론트엔드팀의 디자인 시스템 재구축기
여러 지면에서 따로 관리되던 상품 카드 컴포넌트를 일원화할 필요가 있었습니다. 단순 리팩토링을 넘어 디자인 시스템 재구축으로 통합 관리 기반을 마련했습니다.
#UI/UX#컴포넌트#디자인 시스템
5800
기획전 애니메이션 모듈 개발
기획전과 이벤트를 활용해 상품 판매를 촉진하는 맥락의 애니메이션 모듈 개발 글입니다. 한정 기간 혜택을 전달하는 기획전 구성에 초점이 있습니다.
#module#web
1600
UI 테스트 자동화
UI 테스트 자동화의 필요성을 다룬 글입니다. 복잡해진 현대 소프트웨어를 온전히 테스트하기 어려운 점을 짚었습니다.
#UI/UX#test#자동화
2900
Server Driven UI 호출 구조 개선
서버 드리븐 UI를 통해 유연한 UI 업데이트와 A/B 테스트를 운영한 사례를 소개했습니다. 장기 운영 과정에서 드러난 호출 구조의 문제와 개선 방향을 다뤘습니다.
#UI/UX#A/B 테스트#server
4300
웹폰트 최적화를 통한 CDN 비용절감
웹폰트 최적화를 통해 CDN 비용을 절감한 사례를 소개했습니다. 불필요한 리소스 사용을 줄이기 위한 세밀한 비용 관리가 핵심입니다.
#CDN#웹폰트#최적화
2300
내가 만든 non-null 변수에서 NullPointerException이 발생할 리가 없어!
non-null 변수에서 NPE가 발생한 사례를 공유하는 글입니다. 구체적인 원인과 해결 과정은 본문에 포함되지 않았습니다.
#NullPointerException#null
1400
프론트엔드 테스트 자동화 전략 - 4. 테스트 환경 구성
프론트엔드 테스트 자동화 전략의 연장선에서 테스트 실행 환경 구성 방법을 다뤘습니다. 설정 파일 중심으로 실제 구성 시 참고할 매뉴얼형 내용입니다.
#test#자동화#프레임워크
2600
프론트엔드 테스트 자동화 전략 - 3. 구현하기
프론트엔드 테스트 자동화 전략에서 테스트 케이스를 바탕으로 테스트 코드를 구현하는 방법을 다룹니다. 요구사항 분석 결과를 실제 코드로 옮기는 흐름을 설명합니다.
#test#자동화#JavaScript
3200
프론트엔드 테스트 자동화 전략 - 2. 요구사항 분석
프론트엔드 테스트 자동화를 시작할 때의 어려움과 진입 장벽을 정리했습니다. 프로젝트 상황에 맞는 테스트 작성 방법을 고민한 글입니다.
#test#자동화
2200
프론트엔드 테스트 자동화 전략 - 1. 테스트 자동화란?
프론트엔드 특성상 입력과 출력이 명확하지 않아 테스트 설계에 고민이 필요하다고 다뤘습니다. 테스트 자동화의 의미와 프론트엔드 관점의 방향성을 정리했습니다.
#test#자동화
2200
Storybook의 MSW mock 구조 개선
Storybook 스토리별로 흩어진 MSW GraphQL mock을 한곳으로 모아 관리하는 구조를 제안했습니다. recast 변환 스크립트로 중복과 누락 문제를 줄이는 마이그레이션 과정도 다뤘습니다.
#Storybook#MSW#GraphQL
2400
GraphQL 이해하기: (4) 리졸버 인자 - 4. info
GraphQL.js 리졸버의 마지막 인자인 `info`를 설명합니다. 현재 질의 정보를 담으며, 최적화나 복잡한 연결 처리에 활용할 수 있습니다.
#GraphQL
1400
GraphQL 이해하기: (4) 리졸버 인자 - 3. context
GraphQL.js 리졸버의 세 번째 인자인 context를 설명했습니다. 매 요청마다 생성되며 같은 요청 내 리졸버가 상태를 공유하는 데 사용합니다.
#GraphQL
1300
GraphQL 이해하기: (4) 리졸버 인자 - 2. args
GraphQL.js 리졸버의 두 번째 인자 `args`가 무엇인지 설명했습니다. 필드에 전달된 인자가 리졸버로 넘어오는 기본 동작을 다뤘습니다.
#GraphQL
1500
GraphQL 이해하기: (4) 리졸버 인자 - 1. source
GraphQL.js 리졸버의 네 가지 인자 중 첫 번째인 source를 소개합니다. 리졸버 인자 구조를 이해하기 위한 기초 개념을 다룹니다.
#GraphQL
1500