미리보기

신규 사업 AIDT 개발

AI 디지털 교과서라는 신규 사업 개발팀에 소속되어 "수업" 기능을 개발하였습니다.

교과서 필기 기능 제공

• Tldraw 라이브러리를 사용하여 커스텀 필기 툴바 구현

• 태블릿 화면에서는 필기 대지 위에서 스크롤할 수 없는 이슈가 있어 가상 스크롤 바 구현

  • 현재 화면 높이와 스크롤 높이로 스크롤 가능 범위를 계산

  • radix-slider 컴포넌트를 커스텀 하여 슬라이더를 움직일 때 마다 화면 스크롤 위치가 조정되는 Programmatic scroll 로직을 구현함

• 교과서 콘텐츠의 글자크기를 변경할 때마다 필기 크기도 변경되도록 확대/축소 리사이징 로직 구현

트러블 슈팅

타이머 렌더 시간 95% 개선

• 문제점

  • 데이터를 요청하는 쿼리에 타이머 로직이 있어 1초가 지날때마다
    쿼리를 호출하는 모든 컴포넌트에서 리렌더가 발생하였습니다.

• 해결 방법

  • 1초가 지날때마다 타이머만 리렌더 될 수 있도록 타이머 컴포넌트를 생성하여 타이머 로직을 분리하였습니다.

  • 쿼리에서 데이터 요청이 완료되었을 때 trigger를 실행시켜 그때 타이머가 0초로 리셋 되도록 개선하였습니다.

• 개선

  • 1초마다 전체 컴포넌트가 렌더되어 렌더 시간이 19.2ms이 걸리던 것을 0.9ms로 개선하여 95% 성능을 향상시켰습니다.

  • 타이머 로직을 컴포넌트로 분리하였기 때문에 다른 곳에서 재사용하여 코드 중복을 줄였습니다.

항해 취업 리부트 코스에서 이력서 코치로 활동한 경험이 있습니다.
취업 준비생 13명을 담당하여 이력서 피드백을 정리하였습니다.

항해 플러스 프론트엔드 2기 코스에 참여하여 팀장 역할을 맡았습니다.
20개의 과제 중 17번 Best Practice로 선정되었습니다.