- Developing AI machine learning data labeling service 'SUITE' - Attempting various UX optimizations using React 18 current mode, next.js SSG - Implementing testing automation using jest, reaction-testing-library, etc.

더보기

네이버 쇼핑검색서비스개발팀에서 풀스택 인턴으로 근무하며 웹 성능 측정 툴을 개발하였습니다. 당시 네이버 쇼핑의 웹 페이지에 대한 성능 측정은 사내 시스템 및 Google lighthouse 기반의 jenkins를 이용한 비 정기적인 성능측정과 크롬 확장 프로그램 lighthouse를 이용한 일시적인 측정을 이용하고 있었습니다. 원하는 특정 시간대의 웹 페이지 성능측정을 자동화하여 서버에 lighthouse의 성능 측정 리포트를 저장하고 시계열로 조회할 수 있는 시스템을 구축하고자 하였습니다. lighthouse-ci, React.js, Typescript, Express, MongoDB를 이용하여 개발했으며, Agenda 스케줄러를 이용하여 매 시간 성능분석을 실시하는 시스템을 구축했습니다. 서비스 특성상 차트를 이용한 데이터 조회가 잦기 때문에 DOM 업데이트 최적화를 도와줄 React.js를 이용했습니다. 디버깅을 용이하게 할 정적 타입핑 툴로는, 안정성과 생산성의 적절한 trade-off를 이룬 Typescript를 채택했습니다. 또한 데이터베이스에는 MongoDB를 선택하여 JSON 형태로 제공되는 lighthouse 성능 데이터의 관리 용이성을 증가시켰고, 유연한 스키마로 이용자 수요에 따라 측정할 성능 데이터를 추가/제거가 용이하도록 하였습니다. 웹 서비스 특성 상 네트워크 환경에 따라 성능 스코어가 요동칠 수 있기 때문에, 안정성을 위한 중앙값 처리 알고리즘을 구현하였습니다. 또한 성능스코어를 저장하는 과정에서 렌더링 성능을 고려한 차트 데이터 가공 알고리즘을 구현하였습니다. 구현과정에서 리포트 데이터를 조회하는 상세보기 홈페이지에서 렌더링 성능이 시간이 지남에 따라 급격히 저하되는 현상이 발생했습니다. 원인을 파악한 결과, DB로부터 성능측정 결과 리포트 목록을 요청하는 과정에서 도큐먼트의 필드 중 하나의 용량이 너무 커서 로드에 부하가 걸리는 것으로 밝혀졌습니다. 해당 필드의 데이터를 별도의 콜렉션으로 이관하여 요청 시마다 특정필드만 반환하는 것으로 api를 수정하여 렌더링 성능을 정상화할 수 있었습니다. 기획부터 배포까지, 프론트엔드와 백엔드를 아우르며 주도한 경험은 웹 개발자로서의 커리어에 경쟁력을 가져다주었습니다.

더보기