개발의 올바르지 않은 용례

우아한형제들의 기술 공유 컨퍼런스인 우아콘 2023이 11월 15일 삼성역 그랜드 인터컨티넨탈 서울 파르나스 5층에서 열렸습니다. 그동안 유튜브 생중계를 통해 진행되었던 우아콘의 첫 오프라인 컨퍼런스였는데, 그래서인지 당일 현장에서도 엄청나게 많은 사람들이 모인 풍경을 볼 수 있었습니다.
 
 
 
 
특히 컨퍼런스 시작 시간인 10시가 지나서도 입장 대기 줄이 길게 늘어졌었는데, 얼마나 많은 분들이 참여해주셨는지 가늠할 수 있었던 장면이 아닐까 싶습니다. 요즘 핫하게 쓰이고 있는 개발 기술들이나 배달이라는 도메인, 나아가 우아한형제들이라는 회사 자체에 관심 있으신 분들이라면 그냥 놓치기 아까운 빅 이벤트인만큼 더욱 뜨거운 관심을 보여주신것 같습니다.
 
이번 우아콘에 대한 더 자세한 소개는 배민다움에서 확인하실 수 있습니다!
한 번의 배달을 위해 필요한 모든 기술들, 우아콘 2023 - 배민다움 today
 
저도 이번 우아콘의 세션인 "프론트엔드 모킹 환경에 감칠맛 더하기" 의 발표자 류현승님의 초대를 받아 다녀올 수 있었습니다. 이 자리를 빌어서 다시 한 번 감사드리고, 정말 고생 많으셨습니다 :)
 
그냥 보기에도 흥미로운 세션들이 많아서 이것저것 바쁘게 들었는데, 몇몇 세션들만 간단하게 정리해봅니다.
 
 
오프닝노트 / 키노트 
 
오전 10시, 우아한형제들의 CEO를 맡고 계시는 이국환님의 오프닝노트로 우아콘이 시작되었습니다.
약간은 긴장하신듯한 모습으로 이번 우아콘이 갖는 의의와 준비된 세션들을 간단히 설명해주셨습니다.
 
곧바로 송재하 CTO님과 이기호 CPO님의 키노트가 이어졌습니다. 
지금까지 우아한형제들이 어떻게 달려왔고, 앞으로는 어떤 방향을 향해 나아갈지 소개해주셨습니다.
 
 
 
프론트엔드 모킹 환경에 감칠맛 더하기
 
 
 
이번 우아콘에 초대해주셨던 코어웹프론트개발팀의 류현승님이 준비하신 세션입니다.
 
프론트엔드 환경에서 모킹(Mocking)이 필요한 이유와 함께, 현승님께서 이와 관련된 문제들을 어떻게 풀어내었는지 공유해주시는 시간이었습니다. 아래부터는 발표 내용의 요약입니다.
 
모킹이 필요한 이유는 크게 세 가지입니다.
 
서버 의존성이 감소하여, 개발 지속성을 보장받을 수 있다.
서버에서 API가 개발되지 않았더라도 모킹된 API를 통해 프론트에서 개발을 지속해 나갈 수 있다.
개발 일정의 변동으로부터 생기는 영향을 최소화 할 수 있다.
API 스펙을 사전에 검증할 수 있다.
잘못된 API로부터 생기는 문제들을 사전에 방지할 수 있다.
독립적인 테스트가 가능하다.
다양한 상황에서의 테스트 범위를 확보할 수 있다.
 
또한 현승님이 속한 코어웹프론트개발팀은 기능 조직으로, 단순한 작업을 하더라도 타 부서와의 커뮤니케이션 이슈가 생기면 개발이 늦어지는 경우가 존재합니다. 또한 다루는 도메인이 복잡하게 얽혀있어 팀에 처음 들어온 개발자가 내용을 완전하게 파악하기 쉽지 않고, 혹시나 장애가 생긴다면 앱을 이용하는 고객과 사장님 모두에게 큰 문제가 될 수 있어 섣불리 건드릴 수 없는 특성을 갖고 있습니다.
 
다행히도, 팀에서는 이미 높은 테스트 커버리지와 함께 다양한 테스트 기법들을 도입하여 이러한 영향을 최소화시킨 상태라고 합니다. 하지만 그 테스트들 덕분에, API를 호출하는 케이스는 자연히 증가하게 됩니다.
 
기존의 프로젝트는 AXIOS 내부 동작을 변경하여 모킹 환경을 구성하였습니다.
이 방식의 단점은 다음과 같습니다.
 
AXIOS 라이브러리에 종속적이다.
외부 라이브러리는 모킹할 수 없다.
실제로 네트워크 요청이 발생하는 것이 아니므로, 브라우저 레벨의 개발자 도구에서 트래킹이 불가능하다.
 
이러한 대안으로 MSW : Mock Service Worker를 이용하게 되었습니다.
하지만 MSW에도 그냥 사용하기에는 단점이 있는데,
 
모킹 동작을 변경하려면 코드 레벨의 제어가 필요하다.
갈수록 늘어나는 목 데이터에 따라 관리 측면의 부담이 증가한다.
 
그렇다면 이 문제점들을 해결하기 위해서는 새로운 것들이 하나 필요한데,
그래서 새롭게 라이브러리를 하나 만들게 되었습니다.
 
바로 이 세션에서 소개하는 MSG (Mock Service GUI) 입니다.
 
MSG의 가장 큰 특징으로는 코드 레벨의 변경없이 브라우저에서 곧바로 GUI를 조작하여 테스트 할 모킹 API를 변경할 수 있고, 이를 통해 목 데이터의 관리를 완화할 수 있습니다.
 
여기에 이 라이브러리를 사용해 본 팀원들의 피드백을 바탕으로 단순히 API 하나하나가 아닌, 하나의 시나리오처럼 여러 API를 동시에 받아올 수 있는 프로파일 기능을 추가하였고, API의 응답값들을 체크하여 실제 데이터와 정합성을 확인하는 기능 또한 추가하였습니다. 또한 전체 설정을 변경할 필요가 없도록 개인 설정을 프로젝트의 설정과 분리하여 나만의 모킹 환경을 구성할 수 있도록 하였습니다.
 
핵심 기능은 완성되었고, 남은건 DX에 관련된 작업들입니다.
 
여기서 주목할만한 점은 타입 힌트인데, 타입스크립트의 타입 힌트를 통해 IDE에서 필요한 API가 자동완성 될 수 있도록 하는, MSG가 제공하는 가장 큰 편의성 중 하나입니다.
 
다만 현승님을 비롯한 팀원들은 라이브러리 개발자들이 아니기에, 라이브러리의 신뢰성을 유지하기 위해 별도의 독립된 라이브러리로 내는 것이 아닌 어느정도의 신뢰성을 보장 받을 수 있는 MSW 위에서 돌아갈 수 있도록 하였습니다.
 
 
사실 라이브러리를 개발하고 있다는 사실은 우아콘 훨씬 이전부터 현승님과 잡담하며 알고있었던 내용이라, 이번 발표 내용은 개인적으로 이해하기 훨씬 쉬웠습니다. 그래서인지 적고 나니 유독 내용이 길어졌네요. 최종적으로는 오픈소스로 공개할 로드맵도 있다니 어서 개인 프로젝트에서 사용해 볼 날이 왔으면 좋겠습니다.
 
 
 
프론트엔드 상태관리 실전 편 with React Query & Zustand
 
 
 
다음은 배민근님의 프론트엔드 상태관리 실전 편 React Query & Zustand 세션입니다.
민근님은 이전에도 우아한형제들의 기술 블로그와 우아한테크세미나에서 비슷한 주제를 다루셨던적이 있었기 때문에, 이번 발표 내용에 익숙하신 분들도 계셨을 것 같습니다.
 
민근님의 다른 발표나 아티클은 아래 링크를 참고해주세요.
Store에서 비동기 통신 분리하기 (feat. React Query) - 우아한기술블로그
[LIVE] React Query와 상태관리 :: 2월 우아한테크세미나
 
이번에는 '실전 편' 이라는 이름에 맞게 여러가지 예제를 준비해주셔서 이해하기도 쉬웠고, 흥미로웠습니다.
 
아래는 발표 내용 요약입니다.
 
 
프론트엔드에서 Redux는 오랜 시간 사랑받았고 충분히 좋은 도구이지만, 사용하기 위해서 너무 많은 코드들이 필요하여 관리하기 어려움을 느끼는 경우가 많고 일부는 MobX로 전환하시는 분들도 계셨습니다. 민근님 또한 Redux를 사용하시면서 상태 관리에 불편함을 느끼셨다고 하네요.
 
 
store가 너무 크고 복잡하다...
Redux와 MobX가 정말 비동기 통신에 적합한 도구일까?
 
 
이에 비동기 작업들을 위해 다른 도구를 도입해야 할 필요성을 느끼셨고, Redux 대신 React Query(현재의 이름은 Tanstack Query)를 도입하시게 되었습니다.
 
React Query를 도입하며 store의 복잡도는 많이 사라지게 되었습니다. Redux의 비대한 코드량에서 벗어나 서버 데이터들을 관리하기는 쉬워졌지만, 이제는 컴포넌트가 복잡해 보이기 시작했습니다.
 
이러한 컴포넌트의 복잡성을 해소하기 위해서는 새로운 상태 관리 라이브러리를 도입할 필요가 있었고, 현재도 많이 사용되고 있는 Zustand 가 그 대안이 되었습니다.
 
두 라이브러리를 도입할 당시의 상황을 살펴보면,
 
API 호출시 Polling을 구현한다고 했을때,
Redux의 경우) Redux Action 선언 → state 추가 → reducer 대응 → redux-saga 폴링 구현 → 컴포넌트와 연결
React Query의 경우) query 선언 → 컴포넌트와 연결
store를 구현한다고 했을때,
Redux의 경우) Redux store 및 state 선언 → action 선언 → reducer 구현 → provider 연결 → 컴포넌트와 연결
Zustand의 경우) store에 모두 구현 → 컴포넌트에서 호출
 
이렇듯 redux와 두 라이브러리를 비교해보았을때 React Query와 Zustand를 사용하는 편이 훨씬 편하고, 덜 복잡한 과정을 통해 구현할 수 있었습니다. 따라서 client의 상태는 Zustand가, server의 상태는 React Query가 관리하도록 하여 안정적인 구조를 만들 수 있게 됩니다.
 
당시 민근님이 계시던 팀적인 상황을 생각해본다면, 외부 상태관리 도구의 의존도가 낮은 팀 내 코드들과, 전역 상태를 최소화하는 팀의 방향성에 적합하기도 했고 팀 내의 도메인들이 서버와 유기적으로 얽혀있으면서도 비동기 호출 전략이 요구되는 상황이었기에 해당 역할을 수행하기에 적합한 이유도 있었다고 하네요.
 
비슷한 상태 관리 라이브러리들(jotai, recoil...)이 많은데 하필 두 라이브러리를 선택한 이유는, 당시 npm trend 자료를 봤을때 이 둘의 사용량이 가장 많았기 때문이라고 합니다. 역시 시장의 선택은 웬만해선 틀리지 않죠  
 
 
 
먼저 이번 세션은 현재 프로젝트에서 Redux를 통해 상태를 관리하고 계신 분들을 대상으로 진행된다는 느낌을 받았습니다. 또한 현재 민근님이 차용한 방식이 어느 상황에서나 반드시 옳은 방법은 아니며, 상황에 따라 "이런 것들도 고려해보시면 좋겠다" 정도로 말씀해주셨습니다.
 
민근님이 실제 프로젝트에서 사용하시는 코드들의 일부를 통해 설명해주시기도 하셨는데, 각 라이브러리가 공식 문서에서 권장하는 형태를 따라가셨던 것과 팀 내 표준 개발 환경으로 코드의 역할에 따라 page > component > business > store > utility 계층으로 나누어 관리하시던 부분이 기억에 남네요. 이러한 레이어 아키텍쳐들의 설명을 듣고 있으니 저도 빨리 제 프로젝트에 적용해보고 싶은 욕구가 들었습니다.
 
 
 
Preview Deployment: 베타 환경 멀티버스 체험기
 
 
 
 
(조명을 세게 받으셔서 말 그대로 빛나시는 요욱님...)
요욱님이 준비하신 세션은 Preview Deployment: 베타 환경 멀티버스 체험기 입니다.
 
새로운 기능 개발, 수정 등의 작업 후 Merge를 진행하기 전, Preview Deployment라는 과정을 거쳐 테스트를 진행해야하는데 이전까지는 한 번에 하나의 테스트 배포 환경만 존재하여 여러 기능들의 패치가 있을 경우 일정 안에 테스트하기가 어려운 상황이었습니다.
 
이러한 문제를 해결하고자 자동으로 여러 버전의 사전 배포를 진행할 수 있도록 인프라를 구성하고, 이때 맞닥뜨린 문제점들을 해결하는 과정을 조리있게 잘 설명해주셨습니다. 정말 좋은 예시들을 많이 들어주셨지만, 기억에 남던 부분 하나만 소개해보자면 각 사전 배포마다 주소가 달라야 하는데, 이때 생기는 주소들에 대해 인증서가 모두 커버하지 못하는 문제 등이 있었습니다. 이를 주소의 형태를 변경하여 해결하셨던 케이스가 있었는데, 해결 방법이 간단하면서도 추가적으로 생길 문제없이 깔끔히 해결하셨던 부분이 인상적이었네요.
 
해당 세션의 연사인 요욱님께서 발표를 흡인력있게 잘하셔서 정말 흥미롭게 들었던 시간이었습니다.
 
다만 오후 시간으로 갈수록 집중력이 떨어진 탓인지 발표 내용 필기를 깜빡하여 자세한 요약은 적지 못했는데...  
공식 채널에 다시보기가 올라오면 꼭 영상으로 시청해주시면 감사하겠습니다 :)
 
 
 
 
이번 우아콘에는 세션 뿐 아니라 부스들도 마련되어 있었습니다. 인재풀을 등록하면 선착순으로 뽑기 이벤트에 참여할 수 있는 이벤트 부스와, 참여자 모두에게 특별한 기념품을 지급해주는 부스, 우아한형제들에서 만든 배달로봇 딜리(Dilly)가 시연되고 있는 트랙도 볼 수 있었습니다.
 
 
 
 
따로 휴게 공간이 마련된 점도 좋았습니다. 급격히 체력이 떨어져 오후시간은 대부분 휴게 공간이나 연사와의 네트워킹 장소에서 편하게 쉬었다가 점 찍어뒀던 세션 들으러 이동하는 과정의 반복이었네요.
 
 
 
 
나름 빈백도 있고, 멀티탭도 마련되어 있어서 휴식 하시는 분들 외에도 틈틈히 회사 업무를 보시던 분들도 많으셨습니다. 역시 개발자는 전기와 인터넷만 있다면 어디에서도 일할 수 있는 직업이다 싶었습니다.
 
그러고보니 개발자 컨퍼런스에 굿즈가 빠질 수 없겠죠.
 
 
 
최고개발자 되는 부적, 버그가 안나는 부-적, "탈출" 키캡, 개발자 금뱃지... 특색있고 귀여운 굿즈들이 많아서 정말 재밌었습니다. 특히 부적은 카드 케이스에 넣어 달고 다니고 싶을 정도로 짱이에요  
 
아무튼 즐거운 시간이었습니다.
 
 
 
돌아다니면서 우아한테크코스에서 함께 공부했던 크루들도 만나고, 멋진 세션들도 듣고, 우형 개발자와의 커피챗... 은 멀리서 보고(용기가 부족했습니다 요창님 ㅠㅠ) 정신없지만 즐거운 하루였습니다. 다음 컨퍼런스에는 학생이 아닌 당당한 현업 개발자로 참여하고 싶다는 작은 목표도 생겼네요. 올해 말 ~ 내년 상반기까지 열심히 달려서 이뤄봐야겠습니다!  
 
그럼 이상으로 우아콘 2023 후기를 마칩니다.
 
끗.

우아콘 2023 후기

댓글