프론트엔드 모킹 환경에 감칠맛 더하기 #우아콘2023 #우아한형제들
우아콘 2023 우아한형제들 · YouTube
AI 핵심 요약
서버와 프론트엔드가 병렬로 개발하고 장애에 민감한 도메인을 테스트하려면 API 모킹이 필요했지만, 기존 Axios Mock Adapter 방식은 Axios를 거치지 않는 요청을 처리하지 못하고 모킹 변경에도 코드 수정이 필요했습니다. 팀은 MSW로 전환해 브라우저 네트워크 요청과 테스트 환경을 함께 모킹하고, API별 응답 프리셋과 여러 API를 묶는 프로파일을 제공하는 Mock Service GUI(MSG)를 만들었습니다. GUI에서 상황별 응답을 바꾸고 실제 API 응답과 프리셋의 차이를 확인하게 했으며, 테스트 코드에는 TypeScript 자동 완성을 더해 모킹 정보를 찾고 작성하는 부담을 줄였습니다. 모킹 도구 자체뿐 아니라 데이터 관리와 테스트 코드의 사용성까지 개선해야 개발 흐름에 자연스럽게 자리 잡는다는 점을 보여줍니다.
- Axios 호출만 가로채는 방식은 브라우저의 네트워크 요청을 폭넓게 모킹하기 어려우므로, fetch와 XMLHttpRequest까지 다루는 MSW를 활용할 수 있습니다.
- API별 응답 프리셋과 여러 API를 묶는 프로파일을 두면 코드 수정 없이 화면에서 상황별 모킹을 전환할 수 있습니다.
- 실제 API 응답과 모킹 프리셋을 비교해 차이를 보여주면 개발 중 목 데이터가 오래된 상태로 남는 문제를 발견하기 쉽습니다.
- 테스트 코드에는 TypeScript 제네릭과 리터럴 타입을 활용해 HTTP 메소드에 맞는 API 경로를 자동 완성으로 안내할 수 있습니다.
소개
[WOOWACON2023 세션 다시보기] 👉 세션 설명 프론트엔드에서 모킹 환경을 어떻게 더 유연하고, 적극적으로 활용할 수 있을까요? 모킹 환경의 개선부터 MSG(Mock Service GUI) 개발까지의 여정을 소개하며, 개발자 경험을 어떻게 향상시키고 테스트 환경에 자연스럽게 녹여낼 수 있었는지에 대한 방법과 경험들을 공유합니다.ㅤ ㅤ 👉 발표자 소개 코어웹프론트개발팀 류현승 우아한테크코스 4기를 수료하고, 우아한형제들의 주문/회원 도메인을 중심으로 개발하며 열심히 배우고 있는 신입 웹프론트엔드 개발자입니다. 개발을 단순히 완성하는 도구에 그치지 않고, 잘 활용하여 사용자와 함께 일하는 팀원에게 좋은 경험을 주는 것에 큰 의미를 두고 있습니다. 👍 추천 대상 프론트엔드 API 모킹 환경을 어떻게 활용하고 개선할 수 있을지 고민인 분 🙋🏻♀️ 세션에 대해 궁금한 점이 있다면 dev_relations@woowahan.com 으로 문의주시기 바랍니다.
비슷한 학습 자료
컨퍼런스 우아콘 2023
프론트엔드 개발의 미래, Module Federation의 적용 #우아콘2023 #우아한형제들
컨퍼런스 우아콘 2023
[WOOWACON2023 세션 다시보기] 👉 세션 설명 점차 비대해져가는 프론트엔드 애플리케이션에 지치셨나요? MSA 백엔드에 대응하는 모놀리식 프론트엔드에 싫증이 났을까요? 복잡한 의존성으로 인해 지쳐만 가는 프론트엔드 엔지니어들에게 보다 간단하게 Module Federation을 이용한 Microfrontend 적용에 대해 이야기해 보고자 합니다.ㅤ ㅤ 👉 발표자 소개 배민커머스웹프론트개발팀 박세문 15년 정도를 소프트웨어 엔지니어로 지내오고 있습니다. 현재는 배민커머스웹프론트 개발팀에서 프론트엔드 개발 및 아키텍처 설계와 같은 업무들을 진행하고 있습니다. 다양한 필드, 다양한 분야에서의 경험을 바탕으로 프론트엔드 업무를 보다 잘할 수 있는 방법에 대해서 늘 고민하고 또 고민하는 고민이 많은 엔지니어입니다. 👍 추천 대상 마이크로프론트엔드 도입을 고려 중인 프론트엔드 개발자 🙋🏻♀️ 세션에 대해 궁금한 점이 있다면 dev_relations@woowahan....
프론트엔드 풀스택
컨퍼런스 우아콘 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 으로 문의주시기 바랍니다.
프론트엔드 백엔드 풀스택
컨퍼런스 우아콘 2023
이벤트 스토밍 인 액션: 이벤트 스토밍 소개와 적용 방법 #우아콘2023 #우아한형제들
컨퍼런스 우아콘 2023
[WOOWACON2023 세션 다시보기] 👉 세션 설명 지난 3년간 이벤트 스토밍 워크숍 퍼실리테이터로서 우아한형제들의 다양한 팀과 도메인에 참여하면서 느꼈던 점, 워크숍을 넘어선 실제 개발 문화와 코드 구현에 대한 이야기를 나누고자 합니다.ㅤ ㅤ 👉 발표자 소개 클라이언트교육팀 박재성(Jason) 좋은 코드에 관심이 많으며, 1년이 지나도 10년이 지나도 변화에 대응할 수 있는 코드를 추구합니다. 어떻게 하면 도메인을 깊이 이해하고 더 나은 소프트웨어를 개발할 수 있을지 여러분과 공유하고 싶고, 항상 고민하고 있습니다. 👍 추천 대상 - 이벤트 스토밍이 소프트웨어 개발 프로세스의 일부로 매력적인 아이디어라고 생각하는 분 - 도메인 주도 설계에 대한 기본적인 이해와 바운디드 컨텍스트, 애그리거트, 도메인 이벤트가 무엇인지 아는 분 - 지금은 무엇인지 모르겠으나 나중을 위해 미리 듣는 분 🙋🏻♀️ 세션에 대해 궁금한 점이 있다면 dev_relations@woow...
개발 · 프로그래밍 기타 애자일 · 협업
컨퍼런스 우아콘 2023
지속 가능한 인수 테스트 주도 개발 #우아콘2023 #우아한형제들
컨퍼런스 우아콘 2023
[WOOWACON2023 세션 다시보기] 👉 세션 설명 인수 테스트 주도 개발, 줄여서 ATDD에 대해 들어보셨나요? 간단히 말하면, ATDD는 소프트웨어를 개발하기 전에 그 기능이 제대로 작동하는지 검증하기 위한 '인수 테스트'를 먼저 작성하는 개발 방법론입니다. 팀원들과 함께 인수 테스트의 검증 기준을 정하면서 모두가 같은 목표를 향해 작업할 수 있도록 도와줍니다. 이 방식은 효과적인 개발을 도와주지만, 실제로 적용하고 유지하기는 쉽지 않습니다. 이번 세션에서는 이 방법론을 지속적으로 사용하기 위한 팁과 경험을 공유합니다.ㅤ ㅤ 👉 발표자 소개 서버교육팀 류성현 우아한테크코스에서 공감과 신뢰를 바탕으로 교육하는 개발자입니다. 미래의 소프트웨어 장인들이 성장할 수 있는 환경을 만들고 있습니다. 👍 추천 대상 인수 테스트 주도 개발에 관심이 있거나 효과적인 개발 프로세스에 관심이 있는 분 🙋🏻♀️ 세션에 대해 궁금한 점이 있다면 dev_relations@woo...
소프트웨어 테스트 TDD