.png)
제가 개인적으로 너무 좋아하는 회사 중 한 곳인 토스팀에서 온라인으로 개발자 컨퍼런스를 진행하고 있습니다.
그래서 공유를 하고자 하는데요, 굉장히 유익하기 때문에 한 번 보시면 좋을 것 같아서 포스팅하게 되었습니다🙂
공지
날짜: 4/28 (수) ~ 4/30 (금), 총 3일
일시: 저녁 7시
참여방법: 온라인
링크: SLASH21
컨퍼런스 첫 날
첫 날에 진행되는 세션입니다. 아직 세션이 공개 중이니 서둘러서 확인하시면 좋을 것 같습니다.
오프닝
온라인 컨퍼런스 세션을 들어보기 전에 토스에서 제공하는 오프닝 영상이 따로 구별되어 있었는데요, 토스 테스놀로지 헤드 이형석님께서는 지금까지 일을 해 오면서 가장 기억에 남는 순간이 바로 사용자의 불편을 기술적으로 해결해 온 순간들 이라고 합니다.
과거, 간편 송금 서비스만을 제공하던 토스와는 달리 현재는 여러가지 서비스를 제공하는 플랫폼으로 진화했다고 하는데 그 과정이 어땠을까요? 그 과정 중 하나의 세션을 소개하겠습니다.
Django MVC프로젝트가 Micro-frontend React로
토스팀에서 Internal Platform Team의 풀스택 개발자로 일을 하고 계시는 조유성님께서 진행한 세션이 개인적으로 굉장히 좋았는데요, 토스팀에서는 기본적으로 진행했던 프로젝트가 있었다고 해요.
바로 Django MVC프로젝트입니다. 그러나 일을 하면서 기술적인 한계를 느꼈고, 이를 Micro-frontend Rect로 탈바꿈하는 과정을 들려주셨습니다.
도입된 과정
- 토스에서 제공하는 서비스가 다양해짐에 따라 자연스럽게 구현 사항이 많아짐
- 이로인해 사용자의 요청에 따라 동적으로 변화하는 기능을 구현했음
- 그러나, jQuery, Django Formset만으로는 부족하다는 판단을 함
- 따라서 각자 판단에 따라 UX상 필요한 페이지에 부분적으로 React 적용함
- 새로운 기술을 도입하는 시기였기 때문
- 적은 비용으로 빠르게 진행하고자 했기 때문
도입한 이유와 후기
- CRA의 도움을 받아 쉽게 개발을 하고 싶었으나 마음같이 되지 않음
- 특히, webpack, Babel, ESLint 등 빌드 툴의 설정이 완전한 SPA가 아니라 Django와 같이 썼을 때 완벽히 진행되진 않았음
- 긴 시간동안 CRA에서 제공하는 설정을 하나하나 이해한 다음, 다시 필요한 패치를 적용
- 장기적인 관점에서 from scratch가 낫겠다는 생각을 함
프론트엔드 빌드 시간을 효과적으로 단축한 방법
- 마이크로 프론트엔드 아키텍처를 사용
- 기존의 거대한 소스코드를 분리하고 각각 빌드함
- 패키지는 인스라, 라이브러리, 서비스로 구별
- 이를 통해 의존성 탈출, 빌드 속도 최적화, 소스 코드부터 빌드 설정까지 격리 가능
마이크로 프론트엔드 아키텍쳐를 도입하고 난 뒤 개발자들은..
- 화면상에서 부분별로 담당하는 개발자가 자율과 책임에 따라 독자적으로 기술적인 결정을 내릴 수 있게 됨
- 불필요한 소통 시간을 크게 줄임
빌드 시간을 줄이는 가장 좋은 방법은.. 빌드를 하지 않는 것
- 마이크로 프론트엔드 아키텍쳐가 도입되고 나서 빌드 속도 문제도 해결할 수 있었음
- 이는 결국 '빌드 자체를 하지 않는 것'
- 소스 코드가 바뀌지 않았다면, 이전에 빌드 결과물을 재사용
- 흔히 incremental build라고 불림
- 토스팀에서는 zero-build라고 부름
React와 Django로 개발하기 위한 좋은 도구
- 마이크로 프론트엔드(개인적 추천)
- Zero-build™️(긴 빌드시간 해결)
후기
기존에 모놀리식 Django 프로젝트에서 많은 어려움들을 해결하고 사용자에게 다가가고자 했던 개발자들에게 감사함을 느끼며, 프론트엔드 개발자가 되려고 준비하고 있는 저에게 이러한 스토리는 굉장히 유익한 시간이었습니다.
긴 시간동안 힘들었을 개발자들이 수평적인 토스팀에서 애자일 방식의 문화를 벗어나지 않고 상호존중으로 미래를 위해 나아가려는 모습을 배워야 할 것이고, 좀 더 나를 다듬어야겠다는 생각을 했습니다.
오늘 포스팅은 여기까지 입니다.
개인적으로는 너무 재밌는 시간이었는데 혹시 관심이 있으신 분들은 찾아보시면 좋을 것 같습니다. 그럼 다음 포스팅에서 뵙겠습니다.🙌 🙂
