카카오스타일

#react#TypeScript#Next.js

지그재그에 “포치의 선물가게”를 오픈하며

지그재그 앱 내 포치의 선물가게 게임은 React와 Matter.js 기반으로 개발되었으며, 게임 완성도를 위해 Phaser.js로 전환했습니다. 게임오버 판정 개선과 다양한 기술적 문제 해결 과정을 상세히 공유합니다.

30000분

3월 21일

아키텍처

코드 사례로 보는 Domain-Driven 헥사고날 아키텍처

이 글은 Domain-Driven 헥사고날 아키텍처를 상품상세페이지 서비스에 적용한 사례와 그 장점을 코드 중심으로 소개합니다. 아키텍처는 비즈니스 로직과 외부 의존성을 분리해 유지보수, 확장성, 테스트 용이성을 크게 향상시킵니다.

#Kotlin#Microservice#spring boot

66000분

2월 10일

1년동안의 iOS 모듈화 진행기

안녕하세요! 앱개발팀의 레이몬드입니다. 2024년 한 해동안 모듈화를 경험하면서 느낀점들과 후회하는 것들을 글로 써보고자 합니다. 2023년 초부터 논의해 오던 모듈화를 2024년

#agile#iOS#mobile

46000분

12월 13일

프론트엔드팀의 디자인 시스템 재구축기

안녕하세요, 카카오스타일 지그재그 서비스 FE팀의 제이슨입니다. 2023년 초, 저희 팀은 비즈니스와 더불어 기술적인 개선이 필요하다는 것을 느꼈습니다. 그중에서도 특히 여러 지면

#design#refactoring#컴포넌트

45000분

10월 7일

기타

기획전 애니메이션 모듈 개발

지그재그는 상품 판매를 촉진하기 위해 이벤트나 기획전을 주요 마케팅 수단으로 활용합니다. 기획전은 한정된 기간 동안 고객에게 특정 상품 정보와 추가적인 할인 혜택을

#event#마케팅

11000분

8월 9일

기타

UI 테스트 자동화

테스트를 거치지 않은 소프트웨어는 없습니다. 하지만 많은 기능을 가져 복잡해진 현대의 소프트웨어를 온전히 테스트하는 것은 굉장히 어려운 일입니다. 이러한 테스트

#자동화

16000분

8월 4일

Server Driven UI 호출 구조 개선

카카오스타일에서는 서버 드리븐 UI(Server Driven UI, 이하 SDUI)를 통해 UI의 유연성을 가져가고 있습니다. 서버가 클라이언트 UI를 동적으로 제어하므로써 빌드

#server#A/B test

28000분

6월 28일

웹폰트 최적화를 통한 CDN 비용절감

근래의 많은 기업과 마찬가지로 카카오스타일도 불필요한 비용 낭비가 발생하지 않도록 많은 노력을 기울이고 있습니다. 물론 이전이라고 사용하지 않는 리소스를 방치하며 비용을 낭비한 것

#CDN#최적화

12000분

11월 2일

내가 만든 non-null 변수에서 NullPointerException이 발생할 리가 없어!

안녕하세요, 카카오스타일 전시 UX팀의 샌즈입니다. 모두들 알고 계시듯 null(널)은 값이 없음을 나타냅니다. 그리고 null 값인 객체에 접근하려고 하면 그 유명한 NullPo

6000분

내가 만든 non-null 변수에서 NullPointerException이 발생할 리가 없어!

8월 4일

프론트엔드 테스트 자동화 전략 - 4. 테스트 환경 구성

이전 글에서는 테스트 전략과, 테스트를 작성하는 방법들에 대해서 알아봤습니다. 하지만, 테스트를 실행하는 환경에 대해서는 스토리북을 사용한다고 가정했을 뿐, 구체적인 이야기를 진행

#test#자동화#프레임워크

17000분

8월 4일

프론트엔드 테스트 자동화 전략 - 3. 구현하기

이전 글에서는 제품의 요구사항을 분석하며, 테스트 케이스를 산출하는 방법에 대해 알아봤습니다. 이 글에서는 구체적으로 어떻게 테스트 코드를 작성할 수 있는지에 대해 알아봅니다.

#test#자동화

21000분

8월 4일

프론트엔드 테스트 자동화 전략 - 2. 요구사항 분석

저번 글에서는 프론트엔드의 테스트 자동화에 대해서 소개하고, 테스트 전략에 대해서 간단하게 다뤄봤습니다. 테스트 자동화가 아무리 중요하다고 해도, 테스트 작성을 시작하는 것은 쉽지

#test#자동화

12000분

8월 4일

프론트엔드 테스트 자동화 전략 - 1. 테스트 자동화란?

프론트엔드는 입력/출력이 명확하지 않기 때문에 테스트를 작성하면서 고민해봐야 할 내용이 많습니다. 프론트엔드 관점에 맞춰 테스트 자동화, 테스트의 정의와 방향성에 대해서 다뤄봤습니

#test#자동화

14000분

7월 17일

Storybook의 MSW mock 구조 개선

카카오스타일의 파트너센터 서비스에서는 UI 테스트와 문서화를 위해서 Storybook과 MSW를 사용하고 있습니다. Storybook의 각 스토리마다 MSW GraphQL mock

#GraphQL#MSW#Storybook

15000분

11월 15일

GraphQL 이해하기: (4) 리졸버 인자 - 4. info

GraphQL.js 리졸버의 마지막 인자는 info입니다. info는 현재 처리 중인 질의에 대한 정보가 들어가 있습니다. 보통은 리졸버 구현에 info가 필요하지 않지만 최적화나

#GraphQL#최적화

9000분

11월 15일

GraphQL 이해하기: (4) 리졸버 인자 - 3. context

GraphQL.js 리졸버의 세번째 인자는 context입니다. 이 인자는 온전히 사용자가 설정하는 것으로 매 요청마다 새로 생성되며 같은 요청을 처리하는 리졸버가 상태를 공유하기

7000분

11월 15일

GraphQL 이해하기: (4) 리졸버 인자 - 2. args

GraphQL.js 리졸버의 두번째 인자는 args입니다. 해당 필드에 인자가 주어지면 그 값이 들어옵니다.

7000분

11월 12일

GraphQL 이해하기: (4) 리졸버 인자 - 1. source

GraphQL.js의 리졸버는 네개의 인자를 가지고 있습니다. 그 중 첫번째 인자는 source 입니다.

9000분

11월 9일

GraphQL 이해하기: (3) 리졸버의 이해

GraphQL 스키마를 정의했고, 클라이언트에서 온 요청을 서버가 처리하기 위해 필요한 기술을 알아봤습니다. 이제 클라이언트에서 온 요청에 따라 적절한 데이터를 반환하는 과정이 남