Email | [email protected]
Github | **https://github.com/heum2**
5년차 프론트엔드 개발자로, 복잡한 기술 문제를 실용적으로 해결하는 것을 즐깁니다.
2만 건 데이터 렌더링 성능 95% 개선, 이미지 최적화로 로드 속도 87.5% 개선한 경험이 있습니다.
Next.js, TypeScript, React Query를 활용한 모던 프론트엔드 개발과 성능 최적화에 강점이 있습니다.
성능 최적화와 사용자 경험 개선에 관심이 많으며, 가독성과 유지보수성을 고려한 코드 작성을 지향합니다.
기술 블로그를 운영하며 문제 해결 과정을 공유하고 있습니다.
2024.07 - 현재
**만권당 - 전자책 플랫폼 웹/백오피스 개발** (2025.01 - 현재)
사용 기술: Next.js(App Router), React Query, TypeScript, Styled Components, Tailwind
성능 최적화
- 이미지 로딩 성능 개선: 메인 페이지에 다수의 전자책 표지 이미지가 동시 로딩되어 초기 로딩 시간이 길어지는 문제를 Intersection Observer 기반 lazy loading으로 해결. 리소스 요청량 22.6% 감소, 초기 로드 속도 87.5% 개선
핵심 기능 개발
- 구독 관리, 쿠폰 시스템, 이벤트 페이지 등 비즈니스 로직 구현
- 3D 북 시각화, 룰렛 게임 등 인터랙티브 UI 구현
UX 개선
- Next.js 14 App Router 뒤로가기 동작 개선: 새 탭에서 URL 직접 접근 후 뒤로가기 시 빈 화면이 나타나는 문제 해결. App Router에서 지원하지 않는 router.events 대신 SessionStorage를 활용한 진입 경로 추적으로 메인 페이지 리다이렉션 구현 (블로그)
- Layout Shift 이슈 대응:
- 모달 오픈 시 스크롤바 사라짐으로 인한 화면 떨림 현상을 스크롤바 width만큼 padding-right 추가로 해결
- 이미지 로딩 전 영역 미확보로 인한 레이아웃 변경을 스켈레톤 UI로 해결 (블로그)
- Pull to refresh, 모바일 키보드 대응, 모달 스크롤 처리 등 크로스플랫폼 모바일 웹 최적화
백오피스 개선
- 폼 검증 시스템 구축: React Hook Form + Zod 기반 타입 안전 폼 검증 시스템 도입으로 런타임 에러 감소
- 엑셀 다운로드 안정성 개선: 중복된 다운로드 로직을 공통 모듈로 리팩토링하여 유지보수성 향상
- URL 쿼리스트링 타입 안전성 확보: nuqs 도입으로 검색 파라미터 오류 사전 방지 및 유지보수성 향상
**알라딘 백오피스 웹 리뉴얼 개발** (2024.07 - 2024.12) (계약직)
사용 기술: Next.js(App Router), React Query, MUI, TypeScript, React Hook Form, Zod
성능 최적화
- 대용량 데이터 렌더링 성능 개선: 레거시 시스템에서 2만 건의 상품 데이터를 한 번에 전달하는 제약 상황에서, 전체 데이터를 DOM에 렌더링하여 발생하는 화면 버벅임 문제를 가상 스크롤 기법으로 해결. 렌더링 성능 95% 개선