프론트엔드 상태관리 실전 편 with React Query & Zustand #우아콘2023 #우아한형제들
우아콘 2023 우아한형제들 · YouTube
AI 핵심 요약
Redux와 MobX를 사용하던 팀은 스토어 코드에서 API 호출과 원격 상태 관리가 큰 비중을 차지하고, 컴포넌트에도 비즈니스 로직이 쌓이는 문제를 겪었다. API 상태는 캐싱·동기화·폴링 기능을 제공하는 React Query로 분리하고, 남은 클라이언트 전역 상태는 간결한 사용성과 적은 보일러플레이트를 고려해 Zustand로 관리했다. 또한 페이지·컴포넌트·훅·서비스·스토어로 책임을 나누는 레이어 아키텍처를 적용해 컴포넌트의 복잡도를 낮추고 유지보수성을 높였다. 다만 도구 선택이 목적이 되어서는 안 되며, 로컬 상태를 포함해 상태의 특성과 팀의 문제에 맞춰 관리 방식을 결정해야 한다.
- API 응답과 로딩·에러 같은 원격 데이터 상태는 React Query로 관리하면 캐싱, 동기화, 폴링을 직접 구현하는 부담을 줄일 수 있다.
- 전역 상태 도구는 남은 클라이언트 상태의 규모와 복잡도에 맞춰 선택하고, Zustand가 모든 대규모 스토어에 적합하다고 가정하지 않는다.
- 컴포넌트에 비즈니스 로직이 몰리면 훅·서비스·스토어 등으로 책임을 나눠 읽기 쉽고 변경하기 쉬운 구조를 만든다.
- 모든 상태를 전역화하지 말고, 범위가 좁은 UI 상태는 React 로컬 상태로 유지한다.
소개
[WOOWACON2023 세션 다시보기] 👉 세션 설명 프론트엔드의 거대한 담론 중 하나인 상태관리, 어떻게 하면 잘할 수 있을까요? UI/UX의 중요성과 함께 성장한 프론트엔 프로덕트는 과거에 비해 많은 상태를 가지게 되었습니다. 프론트엔드 상태관리 분야에서 주목할 만한 시도 중 하나는 상태를 특성에 따라 Client State와 Server State로 나눠 알맞게 관리하자는 것인데요. 이번 발표에서는 FE 상태관리에 대해 우리는 어떤 고민을 했고 React Query, Zustand를 이용해 어떻게 풀었는지 프로덕트와 함께 이야기해 보고자 합니다.ㅤ ㅤ 👉 발표자 소개 코어웹프론트개발팀 배민근 서비스의 시작과 끝을 담당하는 프론트엔드 개발자로서 배민 앱을 통해 5년째 고객분들과 매일 맞닿고 있습니다. 현재는 코어웹프론트개발팀에서 훌륭한 동료분들과 함께 코어 프론트엔드 프로덕트들을 함께 개발/운영하고 있습니다. 입사했을 때 마음가짐처럼 어제보다 오늘 조금 더 나은 프로...
비슷한 학습 자료
컨퍼런스 우아콘 2023
프론트엔드 개발의 미래, Module Federation의 적용 #우아콘2023 #우아한형제들
컨퍼런스 우아콘 2023
[WOOWACON2023 세션 다시보기] 👉 세션 설명 점차 비대해져가는 프론트엔드 애플리케이션에 지치셨나요? MSA 백엔드에 대응하는 모놀리식 프론트엔드에 싫증이 났을까요? 복잡한 의존성으로 인해 지쳐만 가는 프론트엔드 엔지니어들에게 보다 간단하게 Module Federation을 이용한 Microfrontend 적용에 대해 이야기해 보고자 합니다.ㅤ ㅤ 👉 발표자 소개 배민커머스웹프론트개발팀 박세문 15년 정도를 소프트웨어 엔지니어로 지내오고 있습니다. 현재는 배민커머스웹프론트 개발팀에서 프론트엔드 개발 및 아키텍처 설계와 같은 업무들을 진행하고 있습니다. 다양한 필드, 다양한 분야에서의 경험을 바탕으로 프론트엔드 업무를 보다 잘할 수 있는 방법에 대해서 늘 고민하고 또 고민하는 고민이 많은 엔지니어입니다. 👍 추천 대상 마이크로프론트엔드 도입을 고려 중인 프론트엔드 개발자 🙋🏻♀️ 세션에 대해 궁금한 점이 있다면 dev_relations@woowahan....
프론트엔드 풀스택
컨퍼런스 우아콘 2023
프론트엔드 모킹 환경에 감칠맛 더하기 #우아콘2023 #우아한형제들
컨퍼런스 우아콘 2023
[WOOWACON2023 세션 다시보기] 👉 세션 설명 프론트엔드에서 모킹 환경을 어떻게 더 유연하고, 적극적으로 활용할 수 있을까요? 모킹 환경의 개선부터 MSG(Mock Service GUI) 개발까지의 여정을 소개하며, 개발자 경험을 어떻게 향상시키고 테스트 환경에 자연스럽게 녹여낼 수 있었는지에 대한 방법과 경험들을 공유합니다.ㅤ ㅤ 👉 발표자 소개 코어웹프론트개발팀 류현승 우아한테크코스 4기를 수료하고, 우아한형제들의 주문/회원 도메인을 중심으로 개발하며 열심히 배우고 있는 신입 웹프론트엔드 개발자입니다. 개발을 단순히 완성하는 도구에 그치지 않고, 잘 활용하여 사용자와 함께 일하는 팀원에게 좋은 경험을 주는 것에 큰 의미를 두고 있습니다. 👍 추천 대상 프론트엔드 API 모킹 환경을 어떻게 활용하고 개선할 수 있을지 고민인 분 🙋🏻♀️ 세션에 대해 궁금한 점이 있다면 dev_relations@woowahan.com 으로 문의주시기 바랍니다.
프론트엔드 소프트웨어 테스트
컨퍼런스 우아콘 2023
[WOOWACON2023 세션 다시보기] 👉 세션 설명 네! 배민도 React Native 해요! 라이더의 안전한 배달을 위해 쉼없이 달려온 배민커넥트앱의 과거와 현재, 그리고 더 나은 앱을 위한 고민까지. 전사 유일의 React Native 프로덕트를 가꾸어 나가는 웹개발자들의 이야기를 들려드립니다.ㅤ ㅤ 👉 발표자 소개 라이더서비스팀 박지성 배민커넥트앱과, 이를 지탱하는 백오피스들의 프론트엔드 개발을 담당하고 있습니다. 지금처럼, 앞으로도 나보다 더 나은 사람들과 지금보다 더 나은 프로덕트를 만들어나가고 싶습니다. 👍 추천 대상 React Native 개발에 관심이 있거나, 이제 막 React Native 개발을 시작한 웹프론트엔드 개발자 🙋🏻♀️ 세션에 대해 궁금한 점이 있다면 dev_relations@woowahan.com 으로 문의주시기 바랍니다.
모바일 앱 개발
컨퍼런스 우아콘 2023
Preview Deployment: 베타 환경 멀티버스 체험기 #우아콘2023 #우아한형제들
컨퍼런스 우아콘 2023
[WOOWACON2023 세션 다시보기] 👉 세션 설명 큰 힘에는 큰 책임이 따르듯, 큰 팀에는 많은 과제들이 있기 마련이죠. 배민커머스웹프론트개발팀 플랫폼 파트의 이야기입니다. 동시에 여러 가지 과제를 수행하는 팀에게 베타 배포 환경 하나는 너무 가혹합니다. 다급한 목소리로 외치는 "베타 배포 지금 이 브랜치로 나가도 되나요?" 소리가 여기까지 들리는군요. 이들을 구하기 위해 멀티버스 구축 여정에 합류한 n개월 차 새내기 개발자는 과연 무엇을 보고 배웠을까요?ㅤ ㅤ 👉 발표자 소개 배민커머스웹프론트개발팀 김요욱보고 배우는 것이 많아서 하루하루가 즐거운 개발자. 좋은 사람들과 일하는 것에 매일 감사한 마음을 가지고 있습니다. 👍 추천 대상 베타 배포 환경이 몇 개만 더 있었으면 좋겠다고 생각해 본 개발자 직접 배포 인프라 작업을 통해서 생산성을 향상시켜 보고 싶은 프론트엔드 개발자 🙋🏻♀️ 세션에 대해 궁금한 점이 있다면 dev_relations@woowa...
프론트엔드 데브옵스 · 인프라
컨퍼런스 우아콘 2023
[WOOWACON2023 세션 다시보기] 👉 세션 설명 우아한공방으로 새롭게 단장한 디자인 시스템의 계층 구조와 이를 컴포넌트로 빚어낸 과정을 소개합니다. 그리고 컴포넌트 구현에 집중하기 위해 어떤 개발 환경을 갖췄는지, 운영 과정에서 정답이 없는 문제들을 어떻게 다뤄왔는지 공유드릴게요. 앞으로 더 확장해 나갈 디자인 시스템의 미래도 엿볼 수 있어요. ㅤ 👉 발표자 소개 배민커머스웹프론트개발팀 마광휘 배민커머스웹프론트개발팀에서 23명의 엔지니어가 조화롭게 좋은 프로덕트를 만들 수 있도록 팀 문화 고민과 시스템 아키텍처링을 진행하고 있는 챙김이 입니다. 최근에는 배민 전사의 웹 프론트 미래를 그리고 있어요. 배민커머스웹프론트개발팀 이상현 지속 가능한 디자인 시스템을 만들어나가는 프론트엔드 개발자입니다. 👍 추천 대상 - 사내 디자인 시스템을 운영하는 개발자 - 확장 가능하고 유연한 React UI 컴포넌트 구현에 관심 있는 분 🙋🏻♀️ 세션에 대해 궁금한 점이 ...
프론트엔드 UI/UX
컨퍼런스 우아콘 2023
웹프론트 개발자들을 위한 '우아한스펙트럼' 서비스 제작기 #우아콘2023 #우아한형제들
컨퍼런스 우아콘 2023
[WOOWACON2023 세션 다시보기] 👉 세션 설명 배달의민족 웹프론트엔드 개발자들의 기술 공유 플랫폼 '우아한스펙트럼'을 소개합니다. 기획부터 서버, DB, 프론트 모두 프론트엔드 개발자 6명이서 만든, 눈물 없이 들을 수 없는 스토리ㅤ 👉 발표자 소개 셀러웹프론트개발팀 송지은 사회생활 3개월 차 리더가 된 프론트엔드 개발자 사실 본업은 사장님을 위해서라면 어디든 달려가는 배민셀프서비스 개발자 👍 추천 대상 - 우아한형제들 웹프론트개발자들의 기술 공유 방식이 궁금한 개발자 - 사내 사이드 프로젝트를 잘 운영하고 싶은 개발자 🙋🏻♀️ 세션에 대해 궁금한 점이 있다면 dev_relations@woowahan.com 으로 문의주시기 바랍니다.
프론트엔드 백엔드 풀스택