토스 프론트엔드 챕터를 소개합니다!

안녕하세요. 토스 프론트엔드 챕터 블로그에 오신 것을 환영합니다. 앞으로 토스팀에서 프론트엔드 개발을 하면서 생기는 이야기들을 정리하여 블로그로 전해드리려고 합니다.

토스 프론트엔드 챕터는?

토스에서는 같은 일을 하는 사람들을 모아서 챕터라고 합니다. 프론트엔드 챕터는 JavaScript, HTML, CSS를 이용하여 웹 프론트엔드 제품을 만드는 직군을 가리키는 말입니다.

토스의 프론트엔드 개발자들은 ‘사일로’라고 하는 목적 조직에서 각자 독립적으로 일하고 있습니다. 각각의 사일로는 토스에서 하나의 제품을 전담하며, 작은 스타트업처럼 독립적으로 일합니다. 예를 들어, 송금을 담당하는 사일로는 송금 사일로, 결제를 담당하는 사일로는 결제 사일로입니다.

사일로는 기본적으로 프로덕트 오너, 디자이너, 서버 개발자, 프론트엔드 개발자, 데이터 분석가 1명씩으로 구성됩니다. 사일로에서 프론트엔드 개발자는 다른 직군의 동료들과 가까운 자리에서 밀접하게 협업하면서, 주어진 반기별 OKR(목표)를 달성하기 위해 꾸준히 제품 개선에 참여하고 있습니다.

→ 토스의 첫인상을 책임지는 사람들, 프론트엔드 개발자를 만나다

함께 협업하기

각 사일로에서 독립적으로 일하는 프론트엔드 개발자들이지만, 하나의 팀처럼 같이 협업하고 있습니다. 예를 들어서,

1. 함께 라이브러리를 개발하고 있습니다. UI 컴포넌트, 비동기 처리와 같이 프론트엔드 개발을 하면서 꼭 필요한 것들이 모두 라이브러리화되어 있습니다. 서비스를 개발하다가 적절히 추상화된 코드 조각이 생기면 라이브러리에 꾸준히 반영하고 있습니다.
2. 서로 코드를 리뷰합니다. 라이브러리 개발과 서비스 개발 모두에서 코드 리뷰가 의무화되어 있습니다. 코드 리뷰를 주고받으면서 더 나은 설계에 대해 토론하고, 새로운 기술 채택에 대해 의견을 나누고 있습니다.
3. 챕터 위클리에 참여합니다. 주기적으로 모든 프론트엔드 개발자들이 모여서 그동안 있었던 개발 업무를 주제로 이야기합니다. 챕터 위클리에서는 돌아가면서 “Tech Talk” 라고 하는 작은 발표를 열고 있는데, 개발 노하우나 새로운 기술 토픽을 소개합니다.

그 이외에도 비정기적으로 기술 스터디를 열기도 합니다. 서로 자리가 떨어져 있어도 슬랙 채널이나 각자의 자리에서 활발하게 소통합니다.

프론트엔드 챕터가 사용하는 기술

React, TypeScript, Next.js가 토스 프론트엔드 챕터가 다루는 기술의 핵심을 이루고 있습니다.

• React: 토스 웹 페이지는 대부분 React로 구성되어 있습니다. 제품의 성격에 따라 React Suspense와 같은 실험적인 기술을 적극적으로 도입하고는 합니다.
• TypeScript: 토스에서는 모든 코드를 TypeScript로 작성합니다. 사람의 실수를 줄이고, 빌드 시간에 미리 오류를 찾아냄으로써 웹 서비스를 안정적으로 운영하는 데에 큰 도움이 되고 있습니다.
• Next.js: 토스 사용자들에게 더 빠른 웹을 보여주기 위해 적극적으로 SSR와 Static Export를 활용하고 있습니다.

그 이외에 아래 기술을 보조적으로 사용하고 있어요.

• Yarn Berry: 토스에서 의존성을 관리하기 위해 사용하는 패키지 매니저입니다. NPM보다 엄격히 package.json을 관리함으로써 개발자의 실수를 더 빨리 발견할 수 있도록 해 줍니다. NPM보다 모듈을 로드하는 속도가 빠릅니다. (홈페이지)
• Emotion: CSS를 다루기 위해 emotion 라이브러리를 사용하고 있습니다. CSS Prop으로 생산적으로 스타일을 다룰 수 있습니다. 서버 사이드 렌더링을 했을 때 첫 렌더에 포함되는 Critical CSS만을 HTML에 포함해줌으로써 더 빠르게 화면을 보여줄 수 있도록 도와주기도 합니다.
• React Query, SWR: 비동기를 다루는 상황에서 대부분 사용하고 있는 라이브러리입니다. 선언적으로 비동기 자원을 관리하고 캐싱할 수 있습니다.

Tech Talks

토스에서는 모든 프론트엔드 챕터 구성원이 모이는 챕터 위클리에서 Tech Talk라고 하는 작은 발표를 열고 있습니다. 발표의 주제는 서비스 개발을 할 때의 꿀팁부터 React Suspense 소개까지 다양합니다. 2019년부터 지금까지 총 90개 이상의 크고 작은 발표가 있었습니다.

토스 FE 블로그의 아티클은 위클리에서 있었던 Tech Talk의 내용을 간단히 정리한 것입니다.

기술 블로그에서 공개된 내용보다 더 좋은 발표를 듣고 싶다면, 그리고 저희와 함께 웹 서비스의 문제를 풀어가고 싶다면, 언제든 토스팀에 지원해주세요. 모든 단계에서 최대한 빠르고 솔직하게 피드백을 드리겠습니다.