프론트엔드 초기 세팅 · Vue → React 마이그레이션
- 스택 · 디렉터리 구조 · 코딩 컨벤션 선정
- 초기 백오피스 Vue → React 전면 마이그레이션
- Google OAuth 로그인 · 라우트 접근 검사를 HOC로 추출 → 페이지마다 반복되던 검사 제거
- 대용량 파일 파싱을 web worker로 분리 · 메인 스레드 블로킹 해소
- WebGL 3D 뷰어 라이브러리를 포크해 private npm으로 버전 관리
- 컨벤션 · 온보딩 문서화
2021 — 2026
프론트엔드 첫 인원으로 입사 — 2021년부터 지금까지
- Vue 마이그레이션부터 LLM 에이전트 서버까지
- 처음부터 구축한 제품 3개 · 프론트와 백엔드 양쪽
- vN.0.0 카드는 릴리스 · 나머지는 그 사이에 한 일
아래로— 가운데 통과할 때만 열림
모노레포 · 공용 UI 패키지 구성
- yarn Berry 모노레포 구성 · 공용 UI 패키지 분리
- 공용 UI 패키지 Tailwind 도입 · 베이스 컴포넌트부터 구축
- i18n Google Sheets 워크플로우 설계(프로덕트팀 공동) → 이후 전사 표준
v1 기반 구축
- 로그인 · 랩스페이스 · 프로젝트 · 역할 권한 골격
- 3D 뷰어 · 데이터 테이블 · 데이터 등록 · 필터 · 정렬
- socket 실시간 알림 — event-emitter 기반 이벤트 매핑
- OTP 2단계 인증 · IP 접근제어 · 다국어
v1.0.0 출시 — 2월
- 레포 첫 커밋에서 3개월 · rc 27번 거쳐 정식 배포
- Pages → App Router 이동
- 튜토리얼 · 읽을거리를 CMS로 분리 — 콘텐츠를 개발 없이 갱신
- dev · stag · prod 배포 파이프라인 구축
- Radix 래핑 컴포넌트 · Storybook을 Chromatic으로 배포
- socket 재연결 지수 백오프 적용
대용량 렌더링 성능 개선
- 계층 트리 도구 개발 — 목록 · 제출 · 계층도 · 테이블 뷰
- 계층 트리 — 노드 1,000개 넘으면 멈춤 → 라이브러리 포크 · memo화 · 진입 노드만 lazyload
- 데이터 테이블 — 가로·세로 가상화 적용
- 구조 이미지 — SVG element 단위 파싱기 → 영역별 하이라이팅 · 클릭
v2.0.0 출시 — 9월
- 예측 서비스 개발 · 토큰 과금 페이지
- 무료체험 · 약관 동의 · 결제·구독 흐름
- 블로그 CMS 이관 — 발행 주체가 마케팅으로
v3.0.0 출시 — 3월 · 브랜딩 정리
- 기능명을 제품 브랜드 체계로 통일 · 라우트까지 전면 재편
- 회원가입 6단계 분리 — 이메일 · 코드 · 약관 · 정보 입력 2단계 · 랩스페이스
- 3D 뷰어를 독립 라우트로 · 데이터 테이블을 개인용·프로젝트용으로 분리
- 가격 · 기능 소개 페이지 신설
FSD 아키텍처 전환
- 1,787파일 대상 FSD 도입·전환 주도 — features 45 · entities 33 · widgets 16
- 3단계+ 상대경로와 API 생성 타입 직접 import 금지로 경계 강제
- 컨벤션 문서화 → 신규 프로젝트 표준으로 이식 · 팀원 온보딩 교육
개발 도구 교체
- Jest → Vitest · Cypress → Playwright — 관리 안 되던 e2e 정리
- npm → yarn Berry → pnpm 단계적 이전
- 제품 앱 styled-components → Tailwind 전환 · UI 패키지와 스택 통일
결과물 보관함 · 스트리밍 채팅
- 결과물 보관함 · 데이터 테이블 구조를 하나로 통합
- SSE LLM 채팅 신규 구축 — 히스토리 · 파일 업다운 · 마크다운 · KaTeX 수식
- 당시엔 한 제품 안의 기능 · 이후 사내 패키지로 분리
백엔드 API 개발
- 브라우저에서 처리하던 계산을 API로 개발하며 백엔드에 기여 — FastAPI · SQLAlchemy(async)
- 그래프 개수 · 정렬 · 기준값별 색상 산출을 서버로
- 프론트에서 필요한 형태로 응답 설계 — 분석 복제 · 공개 권한
- 서버 PR 리뷰에서 누락된 검증 지적·보강
- 마이그레이션 되돌리기 위험 정리 — 컬럼 삭제는 데이터가 사라져 복구가 안 됨
Admin 서비스 프론트 · 백엔드 개발
- 통계 집계용 공통 필터링을 프론트·백엔드 양쪽에서 개발
- 플랜·사용량 컬럼 추가 UI · 유저 목록·상세 · CSV 내보내기
- NestJS(Fastify 어댑터) · TypeORM 으로 서버 API 개발
LLM 호출 대기열 · 분산 락
- 서버가 여러 대라 로컬 카운터로는 전역 한도를 못 막음 → 인메모리에서 Redis로 승격
- 공급자 RPM·TPM 초과로 요청이 거부됨 → 대기 순번 조회가 필요해 Redis sorted set 대기열로
- 대화별 락(SET NX + TTL)으로 같은 대화의 중복 제출 차단
- RPM·TPM·락 검사를 원자적으로 실행되는 Lua 스크립트 하나로 — 나눠 검사하면 그 사이에 다른 요청이 끼어듦
- 입력 + 최대 출력 토큰으로 선차감 후 응답 완료 시 정산 — 출력 길이를 미리 알 수 없어서
- sorted set 은 장애 복구가 안 돼 MQ로 이전 시도 → 구조가 분리돼 복잡도 상승 · 원복
차트 라이브러리 기능 확장
- 직접 만든 산점도 분석 도구의 후속 — canvas vs svg 비교 후 recharts 유지 · 라벨만 커스터마이즈
- 라벨 좌표를 컨테이너 대비 백분율로 저장 → 컨테이너 폭이 바뀌어도 같은 자리에 복원
- 드래그마다 전체 리렌더 → memo · 지역 상태 분리 · JS 실행 약 80% 감소
- 차트↔테이블 호버 연동을 eventEmitter로 분리
- 캡처마다 수식 웹폰트를 매번 재요청 → 캡처 스코프에서 폰트 재로드 차단 · 5.8s → 2.6s
- 라이브러리 tick 알고리즘이 3~5개로 들쭉날쭉 → 5개 고정 함수 직접 구현
계층 뷰 코드 스플리팅
- 계층 뷰를 dynamic import로 분리 — 라우트 번들 523kB → 22.3kB
- First Load JS 1.22MB → 683kB · 진입 컴파일 50.5s → 2.6s
- 데이터 테이블 조건부 lazyload — 초기 렌더 2.2s → 0.53s
상관관계 분석 · 모달 라우팅
- 상관관계 분석 — 추세선 · 결정계수 · 로그 스케일
- parallel + intercept route로 모달·전체화면 동시 제공 · 모킹으로 기능 7종 선검증
- API 타입 생성기를 훅 · queryKey까지 뽑도록 확장 · TanStack Query v4→v5
빌드 · CI 개선
- CI 빌드 360s 분해 → lint 130s · compile 160s · 회수 빠른 lint부터 교체
- ESLint+Prettier → Biome · 커밋 훅 55.3s → 3.69s (93%)
- import 경계 규칙도 lint로 이관 — 상대경로 · 생성 타입 직접 import 금지
- tsc를 커밋 훅으로 이관 — CI 40~50s를 없앤 대신 검사를 로컬로 옮김
- 앱이 늘어 배포가 서로 묶임 → 앱별 독립 CD 분리
- 원격 빌드 캐시는 도입 시도 후 되돌림 — 컨테이너 안에서 의존성을 설치해 러너 캐시가 무효
문서화 · 코드리뷰 오너
- 온보딩 문서 · 사내 발표 — TanStack Query/Table · CI/CD 구조
- 프론트엔드 모노레포 코드리뷰 오너
- 3D 뷰어 IndexedDB 캐시 폐기 → store TTL 2분으로 · 정합성 버그 반년 누적
분석 플랫폼 신규 구축
- Next.js 앱 세팅부터 SSE 스트리밍 채팅까지 프론트 전체
- 서버는 스키마 · Redis 세션 인증 · 번호 발급(DB sequence) · 업로드 4단계 API
- SSE 스트리밍 채팅 — 단계 경계를 태그로 실어 점진 시각화
- S3 multipart + presigned URL — 최대 10GB · 조각 분할 · 중단 · 재개
- 서버 메모리 경유 복사로 대용량 저장 실패 → 저장소 간 직접 복사 + 백그라운드
테스트 · 계측 도입
- Vitest 커버리지 14.6% → 60.3% · 케이스 243
- Sentry · GA4 · 채널톡 계측을 GTM으로 묶어 연동
- CI 통합 · 변경 감지로 해당 job만 실행
- 전 앱 Next 16 · React 19 일괄 업그레이드
에이전트 채팅 · 사내 패키지화
- 2024년 채팅 UI를 headless 사내 패키지로 분리 — adapter로 스트림 포맷 정규화
- 툴 호출 · reasoning · todo 타임라인을 조합 컴포넌트로
- langgraph 에이전트 서버 · 선택형 입력 위젯의 SSE 이벤트 시퀀스 스펙을 프론트가 작성해 전달
- 만료된 락을 남이 해제함 → 요청마다 소유자 식별자를 붙여 자기 락만 해제
- 모델 응답을 파싱 가능한 계약으로 2번 변경 — 체크박스 → 이모지 → 구조화 태그
- 3D 뷰어 재도입 — 포크 없이 · 로드 실패 시 텍스트 폴백
- 텍스트 미리보기 — Range로 앞 256KB만