Sinhu Jung Software Engineer
Section

One Book

2024.11 — 2025.01·Frontend EngineerPrivate부산·해운대구·장산 (좌동)
Next.jsTypeScriptSVG SpriteIntersection Observer

프로젝트 핵심 요약

문제에서 결과까지
SVG 관련 용량
약 50% ↓
무한 스크롤·지연 로딩
IO
접근 권한 처리
Middleware
문제
선생님 웹에서 SVG 아이콘 리소스가 크고, 학생 목록의 스크롤과 이미지 로딩을 효율적으로 처리할 필요가 있었습니다.
판단
SVG Sprite로 아이콘 사용 방식을 공통화하고, Intersection Observer로 화면에 필요한 목록과 이미지의 로딩 시점을 조절했습니다.
내 기여
TypeScript·Next.js 화면과 API 연동, 미들웨어 기반 권한 처리를 구현했습니다. SVG를 Sprite로 통합하고 학생 목록의 무한 스크롤·이미지 지연 로딩을 개선했습니다.
결과
SVG 관련 번들 용량을 약 1.2MB에서 600KB로 줄였습니다. 목록과 이미지 요청은 화면 진입 시점에 맞추도록 개선했습니다.

범위와 측정 기준 · 입사지원서 v9의 약 1.2MB → 600KB 기록 기준입니다. SVG 관련 용량의 감소이며 앱 전체 번들이나 로딩 시간 감소율을 뜻하지 않습니다. 압축 방식·반복 측정 조건은 별도 기록이 없습니다.

Overview

TypeScript·Next.js로 선생님 웹의 화면과 API 연동을 구현하고 미들웨어 기반 권한 처리를 적용했습니다. SVG Sprite와 Intersection Observer로 정적 리소스와 학생 목록의 로딩 방식을 개선했습니다.

Background

  • ▸개별 SVG를 사용하는 방식으로 SVG 관련 리소스 용량이 커졌습니다.
  • ▸학생 목록의 무한 스크롤과 이미지 로딩을 화면 진입 시점에 맞출 필요가 있었습니다.
  • ▸선생님 웹의 API 연동과 접근 권한 처리를 구성해야 했습니다.

Architecture

소스로 확인한 데이터 조회 경로와, 이력서에 기록된 에셋 최적화 방식을 별도로 표시했습니다.

검증 근거 · One Book 로컬 소스의 App Router·React Query·Axios·Zustand·useInView를 대조했습니다. Sprite 최적화는 이력서 기준이며 현재 체크아웃에서 해당 구현은 확인하지 못했습니다.

→ 요청 · 전달⇢ 코드 의존성 (점선)→ 빌드 · 배포

학습 화면의 데이터 조회

React Query가 서버 데이터 조회를 관리하고, Zustand는 사용자·선택 상태를 관리합니다.

노드 선택 · Ctrl/⌘ + 휠로 확대 · 드래그로 이동
100%
학습 화면의 데이터 조회. React Query가 서버 데이터 조회를 관리하고, Zustand는 사용자·선택 상태를 관리합니다. 아래에 동일한 연결 관계를 텍스트로 제공합니다.조회 훅queryFnHTTP 요청상태 구독다음 페이지Next.js 화면 — App Router · Client UINext.js 화면App Router · Client UIReact Query — 조회 · 캐시 · 페이지 요청React Query조회 · 캐시 · 페이지 요청Axios 인스턴스 — API 주소 · Bearer 헤더Axios 인스턴스API 주소 · Bearer 헤더Zustand — 사용자 · 선택 상태Zustand사용자 · 선택 상태useInView — 리스트 끝 노출 감지useInView리스트 끝 노출 감지백엔드 REST API — 학습 · 목록 데이터백엔드 REST API학습 · 목록 데이터
  • • 확인한 목록 경로는 브라우저의 공통 Axios 인스턴스를 사용합니다. 모든 API가 Next.js BFF를 경유한다고 표현하지 않았습니다.
  • • 인증 관련 서버 함수와 초기 서버 조회도 존재합니다. 여기서는 목록 조회의 대표 경로를 표시하며, 백엔드 프레임워크·DTO 공유는 확인 범위에 포함되지 않습니다.
연결 관계를 텍스트로 보기
  • Next.js 화면 → React Query · 조회 훅
  • React Query → Axios 인스턴스 · queryFn
  • Axios 인스턴스 → 백엔드 REST API · HTTP 요청
  • Next.js 화면 → Zustand · 상태 구독 (코드 의존성)
  • useInView → React Query · 다음 페이지

에셋 분석과 지연 로딩

빌드 분석 도구, 정적 SVG 참조, 브라우저의 이미지 로딩을 나누어 표시합니다.

노드 선택 · Ctrl/⌘ + 휠로 확대 · 드래그로 이동
100%
에셋 분석과 지연 로딩. 빌드 분석 도구, 정적 SVG 참조, 브라우저의 이미지 로딩을 나누어 표시합니다. 아래에 동일한 연결 관계를 텍스트로 제공합니다.병목 식별통합use 참조로딩 판단리소스 요청Bundle Analyzer — 개발 시 용량 분석Bundle Analyzer개발 시 용량 분석개별 SVG — 중복 리소스 정리개별 SVG중복 리소스 정리SVG Sprite — symbol 묶음SVG Spritesymbol 묶음뷰포트 감지 — 이미지 로딩 시점 판단뷰포트 감지이미지 로딩 시점 판단Lazy Image — native · IO fallbackLazy Imagenative · IO fallback아이콘 UI — use 태그로 symbol 참조아이콘 UIuse 태그로 symbol 참조이미지 리소스 — 필요한 시점에 요청이미지 리소스필요한 시점에 요청
  • • 제공된 이력서의 최적화 방식을 표현했습니다. 약 600KB는 SVG 관련 용량 지표이며 단일 Sprite 파일의 실측 크기로 단정하지 않았습니다.
  • • Bundle Analyzer는 개발·빌드 분석 도구입니다. 사용자가 페이지를 열 때 거치는 서버나 네트워크 단계가 아닙니다.
연결 관계를 텍스트로 보기
  • Bundle Analyzer → 개별 SVG · 병목 식별 (빌드·배포)
  • 개별 SVG → SVG Sprite · 통합 (빌드·배포)
  • 아이콘 UI → SVG Sprite · use 참조 (코드 의존성)
  • 뷰포트 감지 → Lazy Image · 로딩 판단
  • Lazy Image → 이미지 리소스 · 리소스 요청

What I Did

  • ▸TypeScript·Next.js로 화면과 API 연동을 구현했습니다.
  • ▸미들웨어 기반 권한 처리를 적용했습니다.
  • ▸SVG Sprite로 아이콘 사용 방식을 공통화했습니다.
  • ▸Intersection Observer로 학생 목록의 무한 스크롤과 이미지 지연 로딩을 개선했습니다.

Before / After

항목BeforeAfter
SVG 관련 용량약 1.2MB약 600KB (약 50% 감소)
아이콘 구성개별 SVG 사용SVG Sprite로 공통화

Impact

  • ▸SVG 관련 용량을 약 1.2MB → 600KB로 줄였습니다.
  • ▸학생 목록과 이미지가 필요한 시점에 로드되도록 개선했습니다.
  • ▸화면·API 연동과 미들웨어 권한 처리를 함께 구성했습니다.

Tech Stack

Frontend
TypeScriptNext.jsSVG SpriteIntersection Observer
Data / State
REST APIReact QueryAxiosZustand
Service Environment
DockerNginxAWS Lightsail