안녕하세요, 프론트엔드 개발자
김서영 입니다.

바닐라 JS로 분산 운영되던 레거시 사이트 8개를 단일 React SPA로 통합. FE 2명 중 아키텍처 · 공용 위젯 · 권한 시스템 설계를 담당.

• 역할 — FE 아키텍처 설계 · 기술 선정 · 공용 위젯 · 권한 시스템 · 동적 폼 검증 스키마 (전체 6명 / FE 2명)
• 규모 — 29개 페이지 · 80개 이상 라우트 · 평일 일 평균 약 270명 · 월 약 570명 사용
• 무거운 라이브러리 분리 · 이미지 최적화로 초기 번들 −70%, Lighthouse 성능 75 → 95
• 29개 페이지 중 24개가 공용 테이블 위젯 1개를 사용 · 공통 UI 컴포넌트 40여 종 · 위젯 28종 · 공통 훅 20종
• 라우트 · 메뉴 · 버튼 3계층이 단일 룰셋 공유, 서버 필드 메타데이터로 폼 · 컬럼 · Zod 스키마를 런타임 생성

29개 페이지로 커진 통합 플랫폼을, 기능 개발을 멈추지 않고 단계적으로 더 안전한 구조로 개선하는 작업 (진행 중)

• TypeScript 전환 — 도입 설계 문서 · 팀 TS 가이드 작성, 공용 레이어부터 점진 전환 → 도입 후 신규 파일 80%, shared 레이어 **72%**가 TS
• 권한 서버 전환 — FE에만 있던 권한 정의를 BE로 옮기고 FE는 서버 응답으로 화면만 제어. 기능 단위 · 대상 데이터 단위 두 함수로 판정 통일, 정의되지 않은 값은 거부(fail closed), 7단계 교체 (진행 중)
• 테스트 · 검증 — 권한 판정 로직 Vitest 단위 테스트 38건, MR마다 저장소 전체 lint · 타입 검사 · 테스트를 실행하고 통과를 머지 조건으로 설정 (2026.10 도입)

백엔드도 프레임워크도 없는 환경에서 바닐라 JS와 jQuery만으로 2년간 테스트 플랫폼을 구축·개편·운영. 여기서 겪은 구조적 한계가 2025년 통합 플랫폼 설계의 기준이 됐다.

• 역할 — 팀 FE 2명 중 대시보드 구축 · UI 개편 · 자동화를 1인 담당 (BE 없음, Parse Server 직접 조회)
• 2023 — 고객사 요청 현황 대시보드 구축: Chart.js 차트 27개 · 기간/프로젝트별 통계 · 조건부 스타일 Excel 추출
• 2024 상반기 — 테스트 생성 → 결과 모니터링 흐름 UI 전면 개편, 조건부 필드 폼 · 대량 결과 그리드
• 2024 하반기 — 결과 입력 자동화('이전 티켓 불러오기' · 일괄 입력), 고객사 맞춤 리포트 자동 발송 운영

진행했거나 진행 중인 프로젝트를 정리하려고 만든 사이트. 정적 데이터 기반 블로그로 시작해 Sanity 기반 포트폴리오로 전환했고, 사이트 안의 관리자 페이지에서 글을 직접 작성·수정하면 저장 즉시 공개 페이지에 반영된다.

• 역할 — 설계 · 개발 · 운영 (개인 프로젝트)
• 렌더링 — 글이 적고 가끔만 바뀌는 사이트라 SSR에서 ISR(60초)로 전환, 관리자 저장 시 revalidatePath로 즉시 갱신
• 콘텐츠 — Sanity HTTP API를 fetch로 직접 호출(조회 · mutation · 이미지 업로드), 쓰기 토큰은 서버 모듈에서만 사용
• 관리자 — 프로젝트 작성 · 수정 · 삭제, 정렬 순서 일괄 저장, 이미지 업로드, 마크다운 Write/Preview 에디터
• 인증 — 비밀번호로 서명한 로그인 쿠키(HMAC), 쓰기 API는 서버에서 로그인 여부 검사
• metadata · Open Graph · sitemap · robots 설정, class 기반 다크 모드
• 배포 — Vercel + GitHub 연동