Gallery view
Search
Inside AB180 인터뷰의 네 번째 주인공은 '에어브릿지 프론트엔드 팀' 입니다.
에어브릿지는 하루 기준 300만 대의 모바일 디바이스와 약 3,000만 개의 쿠키 데이터를 분석하고 있는 기여도분석 서비스(기여도분석 서비스가 궁금하시다면 » 모바일앱 마케팅에 어트리뷰션 툴을 사용해야 하는 이유) 입니다. 총 20명이 넘는 개발팀이 함께 일하고 있으며, 프론트엔드팀은 에어브릿지의 대시보드, 랜딩페이지, 이용가이드 등을 개발하고 있습니다.
대시보드는 일반적인 B2C 서비스에 비해서 다루는 정보량과 그 안에 들어가야할 인터렉션의 종류가 무궁무진합니다. 그렇기에 프론트엔드 개발자로서는 도전해야 할 과제의 난이도가 높고, 하드트레이닝을 통해서 개인의 성장 또한 가져갈 수 있는 환경이죠.

본 글에서는 에어브릿지의 프론트엔드 팀이 어떻게 일하고 있는지 기술스택, 테스팅, 로그 수집 및 모니터링, CI/CD, 협업, 코드리뷰 및 회고, B2B 대시보드 개발 특이성 – 7가지 분야로 나누어 아주 상세히 소개해드릴 예정입니다. 들려드리고 싶은 이야기가 아~~주 많으니, 현재 프론트엔드 개발자이시거나 프론트엔드 개발에 관심이 있으시다면 아주 흥미롭게 살펴볼 수 있으실거에요 

1. 기술스택

에어브릿지는 많은 모던 Web Application들과 같이 JavaScript(ESNext)를 언어로 사용하며, UI 구성을 위한 라이브러리로 React를 사용하고 있습니다.
Vue.js 등 많은 최신 기술들이 있음에도 React를 선택한 이유는, 크게 생태계적인 측면과 에어브릿지의 기술적 요구사항 때문입니다.
개발 생태계의 경우, 기술을 활용하는 것에 있어서 (1) 얼마나 많은 개발자들이 Active하게 논의하는지, (2) 얼마나 많은 오픈소스 프로젝트 들이나 라이브러리들이 제공되고 있는지의 2가지 요소로 이뤄져 있습니다. 사용자 경험을 극대화하기 위해 React 커뮤니티가 새로운 방법론들을 제시하는 것이 좋았습니다.
기술적 요구사항의 경우, 에어브릿지는 애널리틱스 대시보드의 특성상 데이터의 양이 많고, 화면이 많이 변화합니다. 약 3년 전 Meteor를 통해 MVP를 개발한 후, AngularJS 등을 대안으로 검토한 바가 있습니다.
그러나 AngularJS의 2-way binding의 경우 (그리고 Meteor의 경우 심지어 DB까지 클라이언트와 동기화) 빠르게 Web App을 개발하는 것에는 적당하지만, 많은 데이터가 들어올 경우 성능의 문제가 발생하는 것을 여러 차례 경험하게 되었습니다.단방향 흐름으로 데이터를 제어하고, 많은 데이터를 빠르게 DOM에 매핑, 업데이트할 수 있다는 측면에서 React를 선택하였습니다.

Inside AB180 : 에어브릿지 프론트엔드는 이렇게 일한다