Frontend

프론트엔드 개발 이야기 (결제정산 개발팀)

2022년 12월 16일

소개

안녕하세요~ 저는 결제정산 개발팀에서 프론트엔드 개발자로 일하고 있는 셰인입니다. 제가 여기어때에 다닌 지 벌써 2년이 넘었는데요. 그동안 저희 팀에서 운영하는 프론트엔드 서비스도 많이 발전해 왔습니다. 이 글을 통해서 저희 서비스가 어떻게 운영되고 있는지 설명드려 보려고 합니다.

서비스 소개

우선 결제정산개발팀이지만 프론트파트는 ‘코어플랫폼개발실’ 내에 프론트엔드 영역도 같이 개발하고 있습니다.

크게 3가지 영역으로 나뉘는데 앱 내 웹서비스, 반응형 웹, 백오피스 부분을 개발하고 있습니다.

서비스 구성

여기어때 앱 내 웹서비스: 앱을 통하여 진입하는 예약페이지, 예약내역, 쿠폰함, 포인트, 회원탈퇴 등 웹뷰
반응형 웹: PC, Mobile 브라우저를 통해 여기어때 웹사이트로 진입하는 예약페이지, 예약내역, 쿠폰함, 포인트, 회원탈퇴 등 웹
백오피스 영역: 사내에서 사용하는 대시보드, CMS(예약, 통지), B2B 서비스 등

B2C 영역으로는 반응형 웹과 앱 내 웹서비스가 있고 나머지는 백오피스 영역에서 사용하는 서비스 입니다.

구조

저희 프로젝트의 구성요소는 크게 모노레포, 컴포넌트 라이브러리, 유틸 라이브러리 이 세 분류로 나누어 설명할 수 있을 것 같습니다.

우선 배경을 설명드리자면 제가 입사 당시에는 저희팀에서는 ‘국내숙소 예약’ 페이지 하나만 앱 내 웹뷰로 서비스하고 있었습니다. 지금은 위에 그림처럼 많은 서비스를 개발해서 운영하고 있습니다. 점점 늘어나는 서비스를 개발하게 되면서 재활용성을 높이는 것에 대해 고민하게 되었고 모노레포를 도입하게 되었습니다.

(1)모노레포

저희는 Yarn Workspace를 통해서 모노레포 환경을 구성해서 개발하고 있는데요. 디렉터리 구성은 아래와 같습니다. (하나의 레파지터리 내에서 여러 프로젝트를 관리한다고 생각하시면 됩니다.)

프로젝트 구조

빨간색 박스 영역 내 디렉터리가 각기 개별 서비스이고 모든 서비스에서 공통으로 사용되는 부분은 yeogi_common을 참조하게 됩니다. 이러한 모노레포 구조는 저희 같이 여러 서비스를 별도로 운영하는 경우에 생산성을 높이는데 매우 유리합니다.

yeogi_common 이라는 디렉토리에는 각 서비스에서 재활용되는 유틸, 정적 파일, 스타일 파일, 컴포넌트들이 있습니다. 처음에는 변경사항을 전체 서비스에 적용하기 편하고 개발 생산성이 올라가서 매우 좋았습니다. 하지만 각 서비스 배포 시점에 항상 yeogi_common내 최신 변경사항이 반영되다 보니 일일이 모든 페이지를 테스트해봐야 하는 부담이 생겼습니다. 똑같은 컴포넌트라도 페이지 구성에 따라 다르게 표현되는 경우가 많아서 일일이 눈으로 확인해야 하는 경우가 많습니다.

Git Submodule을 이용한다던지 다른 방법도 있겠지만 컴포넌트 라이브러리를 만들어서 버져닝하는게 최선의 방법이라고 생각해서 컴포넌트 라이브러리를 만들게 되었습니다.

(2)컴포넌트 라이브러리 ( + Storybook, Chromatic )

Vue, Vite 기반으로 구성된 UI컴포넌트 라이브러리입니다. 팀 내에서 사용하는 모든 웹뷰에서 컴포넌트 재활용하기 위해 사용합니다.

문서화는 Storybook을 사용하고 있고 컴포넌트는 변경사항은 Chromatic(Visual Test + Review)을 통해서 리뷰 후 머지하고 있습니다. 컴포넌트 테스트는 Vitest(Test Runner)를 사용하고 있습니다.

Storybook을 통한 문서화

Chromatic의 Visual Test를 이용해 확인 가능한 변경 부분

(3)유틸 라이브러리

Vue에서 사용하는 Composables, 포멧팅 함수, 유효성 검사 로직, API 재시도, 실패 처리 로직 등 여러 프로젝트에서 재활용되는 유틸들을 공유해서 사용할 수 있도록 구성하였습니다.(테스트 러너로 Vitest를 사용하고 있습니다.)

최근에는 컴포넌트 라이브러리와 유틸 라이브러리를 만들어 사용하기 때문에 별도 레파지터리를 사용해서 프로젝트를 개발하는 경우도 많아졌습니다.(서비스 성격에 맞게 적절히 분리)

모든 프로젝트는 Gitlab CI를 통해서 머지 전에 테스트되도록 구성되어 있습니다.

마치며

서비스가 커짐에 따라 운영에 대한 부담은 늘어났고 테스트 코드에 대한 필요성은 늘어났습니다. 하지만 재활용성이 높아지고 개발 생산성은 높아졌습니다. ( 물론 번거로워진 부분도 존재하긴 합니다 ㅎㅎ; )

저희 팀처럼 여러 서비스를 운영하고 있거나 생산성에 대해서 고민을 하고 계신 분들이라면 우선 모노레포를 사용해 보시길 추천드립니다.

Vite, Vitest 등을 사용하면 개발자 경험이 엄청 좋아집니다.

읽어주셔서 감사합니다.