02 / 04/교육 · 신규 구축

한양대학교 인터칼리지 - 신규 구축

React 기반 학업계획 설계 서비스의 프론트엔드를 리딩. 공통 컴포넌트 아키텍처 설계부터 성능 최적화, 외부 인증 연동까지 — 서비스 안정성 및 품질과 개발 생산성 향상에 기여했습니다.

ReactTanStack QueryZustandFrontend 리딩성능 최적화
프로젝트 기간
2024.09 — 2025.03
7개월
역할
Frontend Lead
팀 리딩
한양대 인터칼리지 미리보기1
한양대 인터칼리지 미리보기2
프로젝트 개요

한양대학교 학생을 대상으로 한 맞춤형 학업계획 설계 서비스의 프론트엔드 개발을 리딩했습니다. 서비스 전반의 UI 구조 설계와 공통 컴포넌트·커스텀 훅·템플릿 정의를 주도해 팀 개발 효율성을 높였으며, Jira 기반의 이슈 트래킹과 업무 분담을 통해 일정 관리 및 개발 진행 상황을 조율했습니다.

주요 작업 상세
1

사용자 화면 렌더링보다 통계성 API가 먼저 호출되는 구조를 분석, requestIdleCallback 기반 후순위 처리로 전환 → LCP 54% 개선

이슈
  • 페이지 진입 시 사용자 화면 렌더링에 필요한 API보다 통계성 API가 먼저 호출되는 구조
  • 사용자에게 불필요한 통계 API가 렌더링 리소스를 선점하면서 LCP 지연 발생
해결
  • 통계성 API는 사용자가 직접 보는 데이터가 아니므로 렌더링 완료 후 호출해도 무방하다고 판단
  • requestIdleCallback으로 브라우저 유휴 시점에 후순위 처리하도록 전환 → LCP 54% 개선
2

반복되는 UI 컴포넌트를 합성 컴포넌트 패턴으로 추상화하고, 5~6개 페이지에 공통 적용되는 레이아웃을 Slot 패턴으로 구조화 → 중복 컴포넌트 제거 및 레이아웃 확장성 증가

이슈
  • 버튼 종류(링크, 다운로드 등)마다 별도 컴포넌트로 분리되어 있어 중복 코드가 누적되고, 신규 버튼 추가 시 매번 컴포넌트를 새로 만들어야 하는 구조
  • 5~6개 페이지에 게시판 테이블이 별도 구현되어 있어, UI는 동일한데 기능만 다른 컴포넌트가 반복 생성되는 문제
  • 공통 레이아웃(nav, lnb 등)이 각 페이지에 직접 작성되어 구조 파악이 어려운 상태
해결
  • Button 컴포넌트를 합성 컴포넌트 패턴으로 설계해 <Button.Link>, <Button.Download> 형태로 역할을 명시적으로 분리, 신규 타입 추가 시 기존 컴포넌트 수정 없이 확장 가능하도록 구성
  • 게시판 테이블도 동일하게 합성 컴포넌트로 추상화해 UI는 공유하되 페이지별 기능은 조합으로 주입 가능하도록 설계
  • 공통 레이아웃은 Slot 패턴으로 구조화해 nav, lnb 등 영역을 직관적으로 주입할 수 있도록 개선 → 레이아웃 구조를 코드에서 바로 파악 가능
3

외부 라이브러리 전체 import로 인한 빌드 용량 초과 이슈를 Tree Shaking 적용으로 해결 → 빌드 용량 75% 감소

이슈
  • 외부 라이브러리를 전체 import하는 구조로 인해 빌드 용량이 4GB를 초과
  • Docker 배포 시 용량 한계로 빌드 에러 발생
해결
  • Webpack config에 usedExports: true 설정으로 실제 사용되는 모듈만 번들에 포함되도록 Tree Shaking 적용
  • 빌드 용량 75% 감소, Docker 배포 정상화
4

Client Component 전환 과정에서 모든 상태가 쿠키에 저장되던 구조를 개선, 인증 스토어와 일반 스토어를 분리하여 불필요한 쿠키 전송 제거 → 팀 전체 공유 및 적용

이슈
  • 초기 SSR 기반 설계로 Zustand persist가 모든 상태를 쿠키에 저장하도록 설정
  • 이후 Client Component로 전환했음에도 기존 구조가 그대로 유지
  • 불필요한 상태까지 쿠키에 누적되어 HTTP 헤더 용량 초과 → 네트워크 전송 속도 저하
해결
  • 쿠키 저장이 필요한 인증 상태와 일반 상태를 별도 스토어로 분리
  • Zustand createStore의 persist storage 설정을 스토어 목적에 맞게 각각 적용 (인증 → 쿠키 / 일반 → 로컬스토리지)
  • 불필요한 쿠키 전송 제거 → 네트워크 최적화
  • 개선 사항 팀 전체 공유 및 적용
주요 구현
  • →Input, Button 등 공통 컴포넌트 부터 게시판 템플릿 컴포넌트를 계층적으로 설계, 재사용성과 일관성을 고려하여 팀 전체 적용
  • →SSO 통합 로그인 및 PASS 본인인증 연동 구현
팀 리딩 / 협업
  • →공통 기능(게시판 필터 등)의 페이지별 동작 불일치를 개발 단계에서 선제 발견하고 기획과 협의하여 기능 동작 표준화
  • →기획 요구사항 불명확으로 인한 개발 이슈 발생 시 기획과 직접 협의하여 요구사항 정리 및 개발 방향 조율
  • →openapi-typescript 팀 도입시 가이드 작성 및 온보딩 주도
Next Project
커머스 플랫폼 · 프로모션 운영 제작