프론트엔드 개발자 박성수 포트폴리오

▸ 대학 소프트웨어 동아리에서 여러 프로젝트와 다양한 구성원으로 이루어진 팀들로 인한 혼선을 없애기 위해 Trello, Slack, Github 등 동아리 내 일정 공유 및 소통체계를 도입했습니다.

▸ 구성원끼리의 개발 언어 능력 차이, 프로젝트 이해도 차이를 좁히기 위하여 작품 및 개발 세미나를 정기적으로 진행했습니다.

▸ 이를 바탕으로 여러 프로젝트들을 효율적으로 완성시켜 다양한 공모전에서 수상한 경험이 있습니다.

▸ 컴포넌트 추가 과정을 간소화하고 사용자에게는 원하는 항목만 표시하는 기능을 제공하기 위해 Atomic Design을 기반에 둔 파일 구조를 도입한 경험이 있습니다.

▸ 자주 사용하는 기능들을 커스텀훅, 유틸함수로 분리하고 불필요한 로직이 동작하지 않도록 세분화하여 DX와 UX를 향상시키기위해 노력하고 있습니다.

▸ Framer-Motion과 Intersection-Observer를 조합하여 비가시영역의 렌더링을 제거해 프레임 드랍을 개선하고 컴포넌트 마운트시 부드럽게 나타나도록 구현

▸ BFF 서버 cron 캐싱으로 사용자 요청시 데이터 응답 및 로딩속도 평균 50% 이상 개선

▸ 평균 5회 이상의 사용자 입력 이벤트를 debounce 처리하여 렌더링 연산 최소 80% 이상 감소

▸ Three.js canvas에서 frameloop 및 invalidate 전략 적용으로 애니메이션 idle 상태에서 CPU 및 GPU의 불필요한 연산 제거

▸ ISR을 적용해 독서기록 홈페이지 메인 페이지의 초기 접속 시간 73% 단축 [1.5s -> 0.4s]

▸ Atomic Design을 기반에 둔 파일 구조로 컴포넌트 추가 과정 간소화

▸ BFF 서버를 통해 FE의 요구사항에 맞는 데이터로 가공하여 제공

▸ 사용자 데이터 관련 Redux 로직을 커스텀 훅으로 분리하여 관련 컴포넌트에서 상태 관리 로직 제거

▸ accessToken 기반의 API요청 로직을 커스텀 훅으로 구현하여 빠르게 사용할 수 있도록 개선

▸ Github Actions와 Vercel을 통해 테스트 코드 실행, Lighthouse CI를 포함한 CI/CD 구현