SSUPORT
모두의 특별장학금, 가장 든든한 서포터. 특별장학금 신청 과정을 디지털로 전환하여 서류 제출부터 평가까지 편리하게 관리하는 숭실대학교 특별장학금 전용 웹 서비스.
주요 기여
여러 앱이 공유하는 코드의 일관성 문제를 모노레포·공용 패키지 7개·FSD 도메인 설계로 풀고, 파일 미리보기 3종 뷰어를 직접 구현했습니다.
여러 앱(ssuport-apply, ssuport-grading)이 공용 디자인 시스템·타입·유틸을 공유해야 하는 구조에서, 일관된 개발 환경과 도메인 경계가 필요했습니다. 초기 프론트엔드 2명에서 이후 1명이 합류하는 구조라 컨벤션을 사전에 강제하는 장치도 필요했습니다.
학생이 특별장학금을 온라인으로 신청하고, 업로드한 파일을 브라우저에서 미리보고, 신청 내역을 관리할 수 있는 웹앱을 모노레포 기반으로 구축하는 것.
pnpm workspace 기반 모노레포에 공용 패키지 7개(analytics, api, config, constants, types, ui, utils)를 분리하고, Lefthook으로 prettier·eslint·type-check·build를 커밋/푸시 단계에서 자동 검증했습니다. FSD 레이어를 엄격 적용해 공지사항 도메인 40개 파일을 4개 레이어로 재배치. 파일 미리보기는 pdfjs-dist(PDF), URL.createObjectURL(이미지), xlsx(스프레드시트) 3종 뷰어를 구현하고, useRef + WeakMap 캐싱으로 document 재생성을 방지했습니다. Mixpanel + GA4 이원화 분석 패키지를 공용으로 설계했습니다.
1) 파일 미리보기에서 STEP 컴포넌트 리렌더링마다 PDF document 객체가 재생성되는 성능 문제, 2) 페이지네이션 상태가 로컬 state라 상세→목록 복귀 시 유실, 3) FSD 레이어 규칙 위반(ProfileCard→LogoutButton 직접 import), 4) Mixpanel 미초기화 상태 런타임 에러.
useMemo 대신 useRef + WeakMap 캐싱으로 전환하여 파일 객체 단위 재사용 + GC 친화적 메모리 관리. 페이지네이션을 useSearchParams 기반 URL 쿼리스트링으로 끌어올려 브라우저 히스토리와 자연스럽게 동작하도록 개선. FSD 위반은 action prop(ReactNode) 주입 패턴으로 전환. Mixpanel에 initialized 플래그 + import.meta.env.DEV 체크로 에러 방어.
초기에 공용 패키지 경계를 명확히 그어두면 이후 도메인이 늘어날 때 의존 방향이 자연스럽게 정렬된다는 걸 체감했습니다. React의 useMemo가 모든 캐싱 상황에 맞는 건 아니라는 점도 배웠고, '언제 캐시를 버려야 하느냐'를 기준으로 자료구조를 고르는 시각을 갖게 되었습니다.