토스증권에 웹 프론트엔드 계약직으로 참여하여 국내원장 백오피스의 기능 개발 및 개선 작업을 진행했습니다. 백오피스 내 여러 화면을 구현하는 것이 주된 목표였으며, 리스트 최적화 및 빌드 최적화, 페이지의 기능 개선 등을 진행했습니다. [기술 스택] TypeScript, React, Tanstack Query v4, ky, Radix UI, jotai [프로젝트] - 윈도잉을 통한 UI 렌더링 최적화 2열 테이블에서 8천 개 데이터를 무한 스크롤로 처리할 때, 대량 데이터 렌더링으로 인한 성능 저하 문제가 발생했습니다. 스크롤을 통해 데이터가 계속 로드되면서 DOM 요소가 누적되어 렌더링 부하가 증가하는 원인을 파악하고, React Virtuoso 라이브러리의 가상화(윈도잉) 기법을 적용하여 뷰포트에 보이는 요소만 렌더링하도록 최적화한 결과, 전체 데이터 스크롤 시간을 3.2배 단축했습니다. - 빌드 최적화 배포 시 이미지 생성부터 빌드까지 7-8분이 소요되어 개발 효율성이 저하되는 문제가 있었습니다. Webpack의 optimization 기능 중 splitChunks를 적용해 번들 크기를 최적화한 결과, 빌드 용량 감소와 함께 배포 시간이 3배 이상 단축되었습니다. -테스트 코드 도입 후 중복 코드 정리 프로젝트에서 사용되는 유틸 함수들의 예외 케이스가 계속 증가해 관리를 위해 테스트 코드 라이브러리인 Vitest를 도입했습니다. 각 유틸 함수별 테스트 케이스를 작성하는 과정에서 중복되는 로직과 테스트 내용을 발견하여 유틸 코드를 통합·정리한 결과, 중복 코드를 40% 감소시켰고, 네거티브 테스트 케이스를 포함한 다양한 엣지 케이스를 추가하여 코드 안정성을 크게 향상시켰습니다. - ATS 주식 주문 기능 개선 대체거래소 추가로 인한 업무 과포화 상황에서 기능 개선 업무를 대행했습니다. 마감 기한이 정해져 있고, 테스트 기간이 짧은 상황이라 빠른 피드백을 위해 완료된 기능을 테스트 브랜치에 지속 배포하며 서버 개발자 및 PM과 실시간 테스트 및 논의를 진행한 결과, 예상 기간보다 1개월 단축된 2개월 만에 개선 작업을 완료하고 라이브 배포했습니다.

더보기

명풍 중고 거래 플랫폼을 개발하는 PAP Corp.에서 프론트엔드 개발로 참여했습니다. 판매자를 위한 'CHIC 파트너 어드민'의 초기 단계 개발에 참여했으며, 커머스 앱인 'CHIC' 내의 각종 기능 구현 및 개선 작업을 담당했습니다. 그 밖에도 PR 라벨링이나 어드민 프로젝트 문서화 등의 팀 내 개발 문화 개선을 위해 노력했습니다.

더보기