FDC: 프론트엔드 다이빙 클럽 참가 후기

허민(허브)·2024년 3월 3일

‘프론트엔드 다이빙 클럽’ 다섯 번째 모임의 후기를 적어보고자 합니다.

프론트엔드 다이빙 클럽이란?

프론트엔드에 관한 딥한 이야기를 나눌 수 있는 오프라인 커뮤니티입니다.

시험을 보거나 인터뷰를 보아야 하는 것은 아니고, 다양한 회사에서 프론트엔드 개발자들이 일하는 방법을 나누고 싶은 사람이면 누구나 참여할 수 있는 모임이라고 적혀 있어 부담 없이 참가 신청을 하였습니다.

신청서 작성

다섯 번째 모임은 프론트엔드 개발 환경 개선하기가 주제였습니다. 그래서 신청서에 작성된 내용도 개발 환경과 관련된 이야기였습니다.

질문1: 프론트엔드 개발환경의 수준을 높일 수 있는 요소들은 뭐가 있을까요? (e.g. 테스팅 환경), 길지 않고 간단하게 답변해주세요.

질문2: 최근에 개선해본 프론트엔드 개발환경을 소개해주세요, 길지 않고 간단하게 답변해주세요.

위 질문에 대해서 저는 간단히 적어달라 해서 한두 줄 정도로 답변을 했습니다. 개발환경 수준을 높일 수 있는 요소들에 대해서는 최근 재미있게 읽었던 배달의 민족의 웹프론트개발팀에서 배민 커머스 어드민을 개발하는 방법 에서 대화형 CLI를 통해 보일러 플레이트와 코드 제너레이터를 구성한 내용에 대해 짧게 적었습니다.

최근 개선해본 프론트엔드 개발 환경에서는 inquirer.js 를 활용한 대화형 CLI 구축에 대한 내용을 짧게 적었습니다.

자기소개

프다클 모임의 첫 시작은 자기소개였습니다. 다른 분들께서는 간단히 소속과 이름 정도만 이야기해주셨지만 저는 프다클 모임을 통해서 많은 분들과 커넥션을 이어가고 싶어서 조금 부끄럽지만 길게 적어보았습니다. 글또에서 했던 자기소개가 큰 도움이 되었습ㄴ디ㅏ.

오프라인 모임

모임은 한국 타이어 7층 토스 라운지에서 진행이 되었어요. 1층에서 귀여운 수달 배너가 있어서 쉽게 찾을 수 있었고 출석체크 하고 올라갔습니다.

모임은 아래와 같은 타임으로 진행이 되었습니다.

7:00~7:20 밥먹으며 소그룹 프리토킹 (20분)

7:20~7:30 프론트엔드 다이빙클럽 소개 (10분)
- 7:30~7:45 정석호(토스): 200여개 서비스 모노레포의 파이프라인 최적화

> 🤿 모노레포에서 수십개의 서비스를 배포하는 파이프라인으로 인해 고통받는 분들을 위한 발표
40GB 레포의 파이프라인을 어떻게 최적화해서 시간을 아낄수 있었는지 소개합니다.

7:45~7:50 발표1 모닥불 질의응답 (5분)
7:50~8:05 아일랜드 프리토킹 (15분 조별토론)
8:05~8:10 쉬는시간 (5분 깜짝 아이스크림 타임)
- 8:15~8:30 김태균(스마트푸드네트웍스): 안전하면서 생산성이 높고 추적가능하며 모니터링 가능한 API 호출

🤿 외부 코드로 부터 독립적인 프론트엔드 코드를 안정하게 작성하고 싶은 분들을 위한 발표
API 문서를 기반 code generating된 sdk를 개발한 경험을 나눕니다.

8:30~8:35 발표2 모닥불 질의응답 (5분)
8:35~8:50 아일랜드 토크 (15분 조별토론)

자리에 도착하니 간단한 식사들과 굿즈, 제 명찰이 있었습니다. 귀엽게 생긴 수달이 맘에 들었습니다.

석호님께서 말씀해주신 발표에서는 토스 코어의 거대한 모노레포 서비스를 배포하고 운영하는 과정에서 필요한 파이프라인들의 최적화를 다뤄주셨어요.

200여개 서비스 모노레포의 파이프라인 최적화 - 정석호(토스)

내용정리

Job 병렬로 돌리기 (w/ CircleCI)
독립된 컴퓨팅 환경에서 병렬로 돌리기 위해 CircleCI의 Dynamic configuration 을 사용한 게 인상 깊었습니다. 저희 회사에서는 CircleCI를 사용하진 않지만 중요하게 배웠던 점은 변경된 서비스만 잘 골라내기, 독립된 컴퓨팅 리소스를 Job마다 할당하기, 최대 동시 실행 러너 수를 잘 제한하기입니다.
git checkout 시간 줄이기
SLASH 22 - 잃어버린 개발자의 시간을 찾아서: 매일 하루를 아끼는 DevOps 이야기에서 daily Docker base Image 에 대한 이야기를 조금 더 자세히 해주셨습니다.쉽게 말하면 스케줄링을 통해 매일 한 번 미리 도커 이미지로 구워두고 미리 말아둔 이미지로 러너를 실행하는 거였습니다.
SSR 배포 시간 줄이기
이 내용도 위 발표에서 다룬 내용을 조금 더 자세히 해주셨습니다. Automatically Copying Traced Files 을 통해서 node_modules 를 다 복사하는게 아닌 런타임에 필요한 소스만 뽑아내는 방식입니다. next.js 를 쓰면 standalone 을 적용하면 되지만 toss 에서는 yarn pnp를 쓰고 있기 때문에 이를 유사하게 동작하도록 만든 내용을 설명해 주셨습니다. 결과적으로 도커 이미지가 가벼워지면서 pod가 뜨는 시간이 짧아졌다는 내용이였습니다.

소감

현재 저희 팀은 규모가 작은 신사업 부서이지만 차후 서비스가 발전했을 때 고려해 볼 수 있는 견문을 넓힐 수 있어서 좋았습니다.

이전 재직 기업에서 next.js standalone 적용 및 pnpm 마이그레이션 과정을 진행하며 CI/CD 를 건드려야하는 일이 많았는데 이 과정에서 큰 기업은 어떻게 일을 하는지 궁금해서 아래와 같이 질문을 남겼습니다.

이 과정에서 배운 점은 영향 범위를 고려하여 업무 시간대와 환경을 분리하여 작업한다는 점이 인상적이었습니다. 또한 라이브 머지 후 모니터링 툴을 도입하고 있다는 것도 잘 배울 수 있었습니다.

아일랜드 프리토킹

해당 발표가 끝난 후 저희는 간단히 각자의 기업에서 개발 환경 최적화를 위해 무엇을 노력하고 있는지 대화를 나눠보았습니다. 저희는 유틸, 에셋, 다자인 시스템 등을 모노레포로 분리하는지? npm 라이브러리로 분리하는지? 에 대한 이야기를 나누었습니다. npm repository 에 배포하면 로컬에서 확인이 어려운데 라프텔은 yalc이라는 서비스를 통해 개발자가 로컬에서 라이브러리 테스트할 수 있는 환경 구축을 하였다는 점이 인상 깊었습니다.

웹프론트엔드, 안전하고 생산성 높으며 추적가능하고 모니터링 가능한 API 호출하기 - 김태균(스마트푸드네트웍스)

내용정리

제목이 매우 화려하지만 개인적으로 정리하자면 아래와 같았습니다.
1. swagger 문서를 이용한 코드 제너레이터를 통한 API 호출 함수 작성하기
2. 추상화된 하나의 객체(mapper)를 통해서만 비즈니스 로직을 거치게 하여 로깅을 쉽게 하자.

소감

연사님께서 일하시는 회사에서는 서버의 변경사항이나 잠수함패치가 약간 많으신 것 같다는 느낌이 들었다.

그래서 변경에 기민하게 반응하고, 유연하게 대응할 수 있는 코드와 아키텍쳐를 회사 조직과 서비스에 맞게 잘 구성하였다는 것을 느낄 수 있었습니다.

아일랜드 프리토킹

모니터링 툴에 대한 이야기와 코드 제너레이터에 대한 이야기를 나누었다. 프론트는 대부분의 기업이 runtime 에서 sentry나 bugsnag 를 활용하여 에러로깅을 하고 있었다. 이 때 재밌는 건 우리 테이블 퍼실리테이터 의진님이 말씀해주신 pagerduty라는 서비스는 에러 나면 전화해주는 기능도 있다는 점이 재미있었다.

대부분의 기업이 api는 swagger json 파일을 이용해 code generating 을 해서 쓰고 있었다는 점이 인상 깊었다. (open api generator)