웹 카카오톡의 상태 관리: 바닐라 상태 관리 모듈과 리액트의 조화 / if(kakaoAI)2024
if kakao 카카오 · YouTube
AI 핵심 요약
웹 카카오톡은 기획과 디자인이 정해지지 않은 상태에서 화면에 종속된 개발을 미루고, TypeScript 기반 바닐라 모듈로 비즈니스 로직을 먼저 구현했다. 기능이 늘며 복잡해진 객체 관계는 의존성 주입 컨테이너로 관리하고, 서버 이벤트 처리와 최종 상태 생성은 비즈니스 모듈이 맡도록 계층을 나눴다. 외부 상태를 React에 연결할 때는 `useSyncExternalStore`와 셀렉터 패턴을 활용해 tearing을 방지하고 필요한 부분 상태만 구독하게 했다. 그 결과 비즈니스 로직의 변경과 확장에도 React 컴포넌트 수정이 거의 없었으며, 유연성을 얻는 대신 의존성 제어와 불변성 관리 부담이 커진다는 점을 확인했다.
- 기획과 디자인이 불확실할 때는 화면 구현보다 변경 가능성이 낮은 비즈니스 로직을 먼저 분리해 개발할 수 있다.
- 객체 간 의존성과 생명주기가 복잡해지면 의존성 주입 컨테이너로 생성과 조립 책임을 분리한다.
- 외부 스토어를 React에 연결할 때는 동시성 렌더링의 tearing을 막도록 `useSyncExternalStore`를 사용한다.
- 컴포넌트가 구독한 부분 상태가 바뀔 때만 렌더링하도록 셀렉터 패턴을 적용한다.
- 비즈니스 로직을 직접 관리하면 불변성이나 의존성 제어 부담이 커지므로 구조의 이점과 운영 비용을 함께 고려한다.
소개
웹카카오톡은 복잡한 비즈니스 로직은 vanilla JS 로, 화면을 구성하는 영역은 React 로 분리하여 개발하고 있습니다. 프론트엔드 프로젝트의 비즈니스 영역을 vanilla JS 로 개발하게 된 이유와 개발을 진행하면서 마주했던 경험 및 장단점에 대해 공유합니다. #front-end #vanillajs 카카오에서 프론트엔드 개발을 하고 있는 Felix입니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-38 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
비슷한 학습 자료
컨퍼런스 if kakao
복잡한 흐름 앞에서, 우리가 선택한 건 Funnel / 이었다
컨퍼런스 if kakao
if(kakao)25 복잡한 동선을 가진 웹뷰 서비스에서, 기획자와 개발자가 동일한 흐름을 바라볼 수 있도록 퍼널 중심의 구조화를 설계하고 useFlow로 구현한 경험을 소개합니다. #TECH #Frontend 카카오 비즈니스에서 FE를 담당있는 차재명(max.cha)입니다. 반복되는 불편을 줄이고, 개발자 경험과 팀이 몰입할 수 있는 환경을 만드는 데 관심이 많습니다. 발표자료 보기 📍https://if.kakao.com/2025/session?sessionId=39 if(kakao)25 홈페이지 : https://if.kakao.com/2025 #카카오 #kakao #이프카카오25
프론트엔드
컨퍼런스 if kakao
유명한 Airbnb MVI프레임워크과 슬랙사의 Circuit을 카카오T와 픽커앱에 접목시킨 재미난 개발기와 presentation layer에서 겪었던 상태 관리 프레임워크 적용기를 소개합니다. 카카오T픽커 android 공통개발을 담당하고 있는 Roy입니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-54 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
모바일 앱 개발
컨퍼런스 if kakao
우리는 왜 차트를 쪼갰을까: 복잡한 데이터 시각화에 유연하게 대응하기 / if(kakaoAI)2024
컨퍼런스 if kakao
데이터를 활용하는 분야에서 적절한 시각화는 매우 중요합니다. 하지만 복잡한 요구사항에 대응하기 위해 차트의 깊은 곳까지 들여다보는 일은 때때로 매우 어렵습니다. 디자인 시스템을 조립하듯 쉽게 차트를 만들 수 있다면 어떨까요? 이를 위해 차트의 로직과 UI를 분리하여 정의하고, 새롭게 설계 및 구현한 과정을 공유합니다. #Frontend #데이터 시각화 #의존성 관리 카카오헬스케어에서 데이터 플랫폼을 위한 차트 시스템을 개발하고 있는 Ollie입니다. 유연한 인터페이스 설계와 안정성 높은 코드 작성에 관심이 많습니다. 발표자료 보기 👉 https://speakerdeck.com/kakao/ifkakao24-41 if(kakaoAI)2024에 대한 자세한 정보는 👉 https://if.kakao.com #카카오 #이프카카오 #개발자컨퍼런스 #AI #기술 #개발 #ifkakaoAI2024
프론트엔드
컨퍼런스 if kakao
10년간 카카오톡 메시지 릴레이를 책임져온 C++ 기반 서버를 JVM 기반 언어(JAVA 및 Kotlin)로 포팅하는 이야기를 합니다. 위 프로젝트를 진행하게 된 계기를 소프트웨어 엔지니어링 측면으로 설명하고, 현재까지 진척 상황에 대한 이야기를 공유합니다. #카카오톡 카카오톡 메시징 시스템을 개발 및 운영하는 시리우스 입니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-28 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
백엔드 프로그래밍 언어
컨퍼런스 if kakao
카카오페이 iOS 웹뷰 소개 및 리팩토링 이야기 / if(kakao)2022
컨퍼런스 if kakao
카카오페이는 네이티브와 웹뷰를 적절히 사용하여 높은 수준의 사용자 경험을 주고자 노력하고 있습니다. 네이티브와 웹뷰의 데이터 전달부터 풀스크린 웹뷰, 바텀시트형 웹뷰, 네비게이션 영역 핸들링이 가능한 웹뷰 등 다양한 방식의 웹뷰를 사용하고 있습니다. 본 세션에서는 다양한 시도를 통해 현재 사용중인 웹뷰로 발전하게 된 과정을 소개합니다. 여러 타입의 웹뷰를 핸들링하는 방법과 리팩토링 스토리를 포함하여 페이 서비스의 특성상 카카오페이앱 및 카카오톡앱 2개의 앱을 개발 해야하는 환경에서 어떻게 코드를 관리하는지에 대해 알아봅니다. #iOS #WebView #리팩토링 #WKWebView 카카오페이 사용자에게 더 나은 경험을 주고싶은 iOS 개발자 joey입니다. 카카오톡 내의 카카오페이 서비스와 카카오페이 앱을 개발하고 있습니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-89 if(kakao)2022에 대한 자세한 정보는 👉 h...
웹 개발 모바일 앱 개발
컨퍼런스 if kakao
카카오페이 앱 리빌딩 스토리 / if(kakao)2022
컨퍼런스 if kakao
카카오페이앱을 리빌딩하면서 겪은 과정들을 소개해 드리려고 합니다. #Android 카카오페이 안드로이드 주식 서비스 업무를 맡고 있는 스카일러입니다. 카카오페이 안드로이드 계정 서비스 업무를 맡고 있는 에디입니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-91 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
모바일 앱 개발