당근 테크 밋업 후기
이번 당근 테크 밋업 당첨 결과때 단체로 가짜 당첨 통보를 받는 이런 저런 우여곡절이 있었지만, 나는 운이 좋게 붙어가지고 이번에 처음으로 당근 테크 밋업에 갈 수 있었습니다.
인프콘같이 한 IT 회사에서 열어서 진행하는 컨퍼런스라서 당근이라는 회사의 문화와 또 어떻게 일하고 있는지 조금이나마 엿볼 수 있을 거 같아서 들뜬 마음에 갔습니다.
물론 같이 갈 사람이 없어서 조금 외롭기는 했어요 ㅋㅋ....
시간표
| 오전 | 오후 |
|---|---|
 |  |
위와 같이 첫 세션 시작하기 전에 오전에 먼저 네트워킹을 운영했었습니다.
모든 운영은 당근 어플 내 동네생활과 채팅을 통해서 공지되고 운영되었어요.
그리고 네트워킹을 하나의 토픽을 가지고 자유롭게 이야기 나눌 수 있도록 선착순으로 약간 티켓팅 처럼 할 수 있었습니다.
| 동네생활 | 네트워킹 |
|---|---|
 |  |
네트워킹에서는 당근에서 근무하고 계시는 프론트엔드분을 중심으로, 사실상 프리토크 식으로 자유롭게 물어보고 답하는 시간이였어요. 사실상 토픽보다.. 당근은 어떻게하고 있는지 물어보는 시간(?)
프레임워크부터 플랫폼까지: 당근 웹뷰 플랫폼
웹뷰 개발에서 다양한 문제를 해결하기 위해 당근에서는 어떻게 해결해 나가셨는지 말해주셨어요. 브릿지 SDK, 웹 프레임워크, 그리고 배포 플랫폼을 유기적으로 통합하는 시스템을 구축했다는 내용이였는데... 요약해보자면
- 브릿지 SDK 자동 생성
기존에는 네이티브 개발자와 웹뷰 개발자가 협의하여 브릿지를 구현해야 했고, 이 과정에서 소통 비용이 큼. 당근마켓은 이를 개선하기 위해 브릿지 SDK와 테스트용 웹뷰를 자동으로 생성하는 시스템을 도입. 개발자는 JSON 스키마만 수정하면 CLI 명령어로 SDK 변경점에 대해 PR이 자동으로 생성되고, 네이티브 개발자 분들이 승인하면 배포.
당근마켓은 스택플로우라는 웹뷰 프레임워크를 통해 모바일 친화적인 라우팅 시스템을 도입.
기존 URL 기반 라우팅의 복잡성을 줄이고, Activity라는 개념을 도입해 직관적이고 간결한 라우팅을 제공.
이를 통해 웹뷰 개발을 모바일 개발처럼 느낄 수 있도록 개선.
- Warp 배포 플랫폼
당근마켓은 다양한 배포 플랫폼 (vercel, aws etc...)을 경험한 후, 자체 배포 플랫폼인 Warp를 구축.
Warp는 AWS S3와 CloudFront를 기반으로 하며, 버전 관리, 프리뷰 배포, 롤백 등의 기능을 제공.
플러그인 기능을 통해 프론트엔드 정책도 관리
프론트엔드에게 배포플랫폼이란
이 세션에서는 기초적이지만 프론트엔드 개발자들이 놓치기 쉽고 항상 인지히고 있어야하는 배포 과정에 필요한 지식들을 잡아주시는 시간이였습니다. 아래 목차를 발표 자료로 좀 더 시각적으로 이해하기 쉽게, 기승전결이 완벽했던 세션이였고 재밌었어요.
- HTML 파일 배포 과정
- 정적 웹사이트와 동적 웹사이트
- 싱글 페이지 애플리케이션(SPA)
- AJAX와 비동기 데이터 처리
- 캐싱과 성능 최적화
결론 - 웹사이트 배포는 단순히 파일을 서버에 올리는 것이 아니라, 캐싱 정책, CDN 활용, AJAX 등을 통해 성능을 최적화하는 것이 중요합니다. 이러한 최적화 전략을 통해 웹사이트 성능을 개선하고 사용자 경험을 높일 수 있다.
내 타입스크립트 코드가 이렇게 느릴 리 없어!
타입스크립트가 느려질 수 있는 이유는 여러가지지만 (ex 비대한 코드베이스, IDE 확장프로그램 etc...), 이때 타입스크립트 타입 추론으로도 느려질 수 있는데 이때 최적화를 통해 개선한 경험을 공유해주시는 세션이였습니다.
--extendedDiagnostics
- Typescript 컴파일러가 컴파일 중 소요한 시간을 출력해주는 옵션
- 각 페이즈 별로 소요된 시간을 알 수 있다
--generateTrace
- Typescript 4.1 부터 도입된 성능 관련 CLI옵션 내 타입스크립트 코드가 이렇게 느릴 리 없어
- 컴파일에 소요된 시간 중 오래 걸리는 부분을 쉽게 식별할 수 있도록 trace.json 파일을 출력해준다
- 컴파일러가 인식한 타입의 목록을 types.json 파일로 출력해준다
- Typescript 팀에서 제공하는 npm 패키지
- CLI로 trace를 분석하여 빠르게 hot spot 식별 가능
- Google에서 제공하는 event trace 분석 도구(chrome://tracing 의 후속 프로젝트)
- GUI로 보다 상세한 분석이 가능
아래와 같은 디버깅 CLI & Tool을 사용해서 직접 데모와 캡쳐본으로 어떻게 디버깅이 나오고 해결해 주셨습니다. 굉장히 인상적이였어요. 타입스크립트 측에서 컴파일이 되기 쉬운 코드 가이드도 한번 짚어주셨습니다.
아이콘, 브랜딩 에셋까지 디자인시스템으로
1. 아이콘 관리 및 자동화:
당근에서는 다양한 플랫폼(iOS, Android, 웹)에서 서로 다른 포맷의 아이콘을 하는데, 피그마 플러그인을 만들어서 통해 아이콘 데이터를 추출하고, 이를 자동으로 변환 및 배포하는 워크플로우를 구축. 연결된 피그마 에셋이 변경이 되고 플러그인을 통해 Push를 하면 포맷에 맞게 아셋들이 코드적으로 생성되고 개발자가 PR을 승인함으로써 재 배포.
2. 브랜딩 에셋 관리 시스템 구축:
당근의 브랜딩 에셋을 효율적으로 관리하기 위해 Sanity CMS를 도입하고, Cloudflare와의 연동을 통해 대역폭 문제를 해결. Sanity는 어드민 도구로, 에셋 관리의 자동화 및 동기화를 제공하며, Cloudflare는 에셋을 유저에게 빠르게 전달하는 역할.
당근에서 디자인시스템 브랜딩 에셋, 아이콘 관리를 어떻게 워크플로우를 개선하였는가에 대한 경험을 공유해주셨습니다. 현재 회사에서 디자인시스템을 구축하려고 생각하는 와중에 많은 인사이트를 가져가는 정말 맛있는 세션이였습니다.
후기
위에 오전 세션 외에도 오후에 세션도 굉장히 좋은 내용이였는데, 웹뷰와 밀접하게 연결되어 있는 부분도 있고, graphQL 관련해서 제가 접해보지 못한 부분이 많아서 정리는 힘들 것 같습니다.
당근을 비롯해서 Toss 같은 큰 기업들은 보면 본인들에게 맞지 않는다면 과감히 새로 만들어내는게 정말 대단한 것 같습니다.
감사하게도 발표자료는 올려두셨더라구요. 관심있으시면 한번 보셔도 정말 좋을 것 같구 다음에 유튜브에 영상 업데이트도 할 예정이라고 합니다.