미리보기

MAU 300만 규모의 서비스에서 빠른 이터레이션과 다양한 실험을 하기 위해 재사용성과 변경 용이성을 고려하여 개발을 진행했습니다.

주식 모으기

• 초기 로딩 성능 개선을 위해. CSR로 동작하던 기존 서비스를 React Server Component와 Streaming SSR 환경으로 마이그레이션

  • FCP 1380ms -> 505ms로 63.4% 개선

  • 네트워크 환경이 열악할수록 초기 로딩 속도 개선폭이 선형적으로 증가

• React Server Component를 활용하는 환경에서 Isomorphic한 데이터 패칭, 에러 처리 설계

• 선언적 유저 이벤트 로깅 방식 도입

모바일 디자인 플랫폼에서 근무하며, 디자인 시스템과 디자인 툴을 활용하여 토스 계열사의 150여 명의 프론트엔드 개발자와 50여 명의 프로덕트 디자이너들의 생산성을 높여주기 위한 업무를 하였습니다.

여백 린트

사내 디자이너들이 디자인 시스템을 사용할 때, 컴포넌트 간 여백의 일관성 문제를 해결하기 위해 여백을 시스템화한 여백 린트를 개발했습니다.

• agnostic한 설계를 통해 Framer, Deus(사내 디자인 툴)와 같은 디자인 툴에 코어 로직을 모두 적용 가능하도록 구현

• 여백에 대한 규칙을 특정 인터페이스에 맞게 플러그인 형태로 주입하여, 누구나 손쉽게 추가 및 수정 할 수 있도록 확장성 있게 구현

모바일 디자인 시스템(TDS-Mobile)

• 디자이너들이 코드로 구현된 컴포넌트를 통해 화면을 디자인 할 수 있도록, 사내 디자인 시스템의 컴포넌트들을 Framer의 코드 컴포넌트로 생성하는 작업

다양한 자사 서비스들의 공통 커뮤니티 모듈 개발 및 유지보수하였습니다.

프론트엔드 개발자들의 Event Tracking 및 유저 이벤트 로깅의 불편함을 해결하기 위한 직접 제작한 오픈소스 라이브러리입니다. 제공하는 기능들은 아래와 같습니다.

• type-safe한 선언적 API 제공

• 스키마 정의를 통한 유효한 이벤트 데이터 타입 보장

• 비동기 이벤트 순서 보장 및 배칭 처리 기능 제공

깃허브: https://github.com/offlegacy/event-tracker

npm: https://www.npmjs.com/package/@offlegacy/event-tracker

Tanstack/query (Stars 40K +)

• 비효율적인 기존 코드를 리팩토링 하여, 소스 코드에 기여를 하였습니다.
• PR: https://github.com/TanStack/query/pull/7536

ssi02014/react-query-tutorial(Stars 1.2K +)

• invalidateQueries 기능에 대한 오개념 수정 및 설명을 하였습니다.
• PR: https://github.com/ssi02014/react-query-tutorial/pull/21

ko.react.dev(Stars 600 +)

• 리액트 공식문서 한국어 번역 작업을 하였습니다.
• PR: https://github.com/reactjs/ko.react.dev/pull/779