복잡한 상태관리도구 Svelte스럽게 만들기 Svelte를+RX를 이용한 Write less code 상태관리 라이브러리 개발이야기 / if(kakao)2022
if kakao 카카오 · YouTube
AI 핵심 요약
카카오워크 캘린더의 복잡도가 커지면서 Svelte 기본 스토어만으로는 데이터 흐름과 상태 변경을 추적하기 어려워, Svelte에 맞는 자체 상태관리 라이브러리를 만들었다. Svelte 스토어의 간결한 문법에 RxJS 연산자를 결합하고, Flux와 MVI에서 영감을 얻어 액션·리듀서 중심의 단방향 아키텍처를 구성했다. 비동기 작업은 Promise와 Observable의 결과를 액션으로 전파해 모듈 간 결합을 낮췄고, 중첩된 서버 데이터는 타입스크립트 스키마 기반의 선택·수정 API로 다루도록 확장했다. 실무 사용을 통해 상태 변경 추적과 디버깅이 수월해졌으며, 복잡한 구조도 계층과 컨벤션을 나누면 문법과 사고를 단순하게 만들 수 있다는 점을 얻었다.
- Svelte 스토어의 간결함에 RxJS의 시간·비동기 연산자를 결합하면 반응형 데이터 흐름을 적은 코드로 구성할 수 있다.
- MVI와 Flux의 단방향 흐름을 바탕으로 액션과 리듀서에 상태 변경을 모으면 변경 이력 추적과 디버깅이 쉬워진다.
- 비동기 작업의 결과를 액션으로 전파하는 푸시 방식은 모듈 간 의존성을 낮추고 기능별 분리를 돕는다.
- 중첩 객체는 경로 기반 선택·수정 API와 타입스크립트 스키마를 활용해 불변성 처리의 복잡도를 줄일 수 있다.
소개
Svelte에 맞는 상태관리 라이브러리를 만들기 위해 각종 상태관리 도구들을 이해하고 공부하면서 알게 된 반응형 프로그래밍과 함수형 사고 그리고 MVI 아키텍쳐에 대해 알아봅니다. Svelte에 Rx 적용을 하고 FLUX 아키텍쳐를 재해석하여 만들어낸 상태관리도구를 소개합니다. 또한 이 라이브러리를 통해 개발하면서 마주쳤던 UI 프로그래밍을 힘들게 하는 비동기 처리, 중첩된 거대한 객체를 다루는 문제들을 어떻게 해결을 했는지 알려드립니다. 실제 파트원들도 사용해보면서 느낀 점 그리고 앞으로 어떤식으로 발전을 해 나야가야할지 느꼈던 인사이트와 로드맵을 공유하고자 합니다. #Svelte #RxJS #상태관리 #함수형프로그래밍 카카오엔터프라이즈 시니어 프론트엔드 개발자 테오입니다. 카카오워크의 캘린더 서비스를 개발하고 있습니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-81 if(kakao)2022에 대한 자세한 정보는 👉 h...
비슷한 학습 자료
컨퍼런스 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
웹카카오톡은 복잡한 비즈니스 로직은 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
[Phocus] 사용자 경험 중심 스벨트 이미지 뷰어 라이브러리 (송가람 Jordan)
컨퍼런스 if kakao
[2024.04.11. 제5회 Kakao Tech Meet 발표] 웹 이미지뷰어 라이브러리 '포커스'의 개발 이야기를 공유합니다. 개발 과정에서 선택한 프레임워크인 '스벨트'에 대한 결정 과정과 개인적인 경험에 대해서 이야기합니다. 그리고 이미지 뷰어를 개발하면서 겪었던 다양한 이슈들과 이를 어떻게 해결해 나갔는지 공유합니다. 웹 페이지 및 라이브러리 개발에 관심 있는 모든 프론트엔드 개발자들에게 추천합니다. #kakaotechmeet #Svelte #ImageViewer #VirtualSlide #library 발표자: 송가람(jordan.song) 카카오의 콘텐츠FE에서 티스토리 서비스를 운영 및 개발하고 있는 조단입니다. 전사 이미지 뷰어 라이브러리 포커스의 프로젝트 리더로 기획 및 개발을 진행하였습니다. 💬 발표자 인터뷰와 비하인드 보러가기: https://tech.kakao.com/2024/04/29/techmeet-image-viewer/ ✨ 카카오테크 톡채...
웹 개발 프론트엔드
컨퍼런스 if kakao
Sentry를 이용한 에러 추적기, React의 선언적 에러 처리 / if(kakao)2022
컨퍼런스 if kakao
카카오페이 프론트엔드에서 선언적 에러처리를 통한 사용자경험과 개발자경험 증대 및 Sentry를 통한 웹뷰환경에서의 에러 추적, 장애 대응, 사용자 경험 개선기 (axios interceptor와 에러바운더리를 이용해 에러핸들링을 개선해 나가고, sentry를 통해 에러데이터를 쌓아 사용자 경험을 개선해나간 스토리로 풀어볼 예정입니다.) #React #Sentry #선언적에러처리 사용자 경험을 소중하게 생각하는 카카오페이 FE개발팀의 클로이, 나나입니다. 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-84 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
프론트엔드 소프트웨어 테스트
컨퍼런스 if kakao
SwiftLayout은 UIKit을 사용하면서 아쉬웠던 부분들을 개선하기 위해 선언적인 구문으로 UIKit을 사용할 수 있도록 도와주는 오픈소스 라이브러리입니다. SwiftLayout의 사용법을 코드와 함께 살펴보며 저희가 라이브러리를 개발하는 과정에서 격은 여러 의미 있었던 경험도 함께 공유하고자 합니다. #iOS #OpenSource 저는 카카오톡을 개발하고 있는 iOS 개발자 aiden 입니다 저는 카카오톡을 개발하고 있는 iOS 개발자 jay 입니다 발표자료 보기 👉https://speakerdeck.com/kakao/ifkakao22-86 if(kakao)2022에 대한 자세한 정보는 👉 https://if.kakao.com if(kakao)2022에 대한 문의는 👉 if@kakaocorp.com #카카오 #이프카카오 #개발자컨퍼런스 #기술 #개발 #ifkakao2022
모바일 앱 개발 프로그래밍 언어
컨퍼런스 if kakao
Preview Web+Mobile @if(kakao)2021
컨퍼런스 if kakao
if (kakao) 2021 컨퍼런스에서 Data 관련 기술 발표 세션을 소개합니다. 1. 이게 진짜 일 리 없어 : 초보 리더가 프로젝트에서 마주치는 어려운 상황들 @effie.seo 올해 6월에 카카오맵 매장관리 서비스를 오픈했습니다. 매장관리 프로젝트 진행 과정을 통해서 카카오맵 FrontEnd 개발자들은 어떻게 협업하는지, 프로젝트에서 마주쳤던 상황들을 대처 하기 위해서 초보 리더인 제가 동료들과 함께 고민하고 시도했던 과정에 대해서 공유해보고자 합니다 2. Next.js와 Typescript를 이용한 프론트엔드 개발기 @jaden.js @luffy.yeon Next.js를 사용한 서버사이드 랜더링, Next.js 환경 Typescript 포팅을 하며 겪은 경험 공유 3. 톡패스워드 크롬 익스텐션 개발기 @felix.lee 입사 후 처음으로 혼자 프로젝트를 설계하면서 고민했던 구조선택과 고민거리에 대한 공유 4. UI 테스트 경험기 @jay.choi 리팩토링에 대한...
프론트엔드 소프트웨어 테스트 애자일 · 협업