소원진

·먼저 Nuxt 2와 3에서 실제로 달라지는 부분부터 정리했습니다. 디렉터리 규칙, 설정 파일 문법, Composition API와 TypeScript 지원 방식처럼 손대야 할 범위를 먼저 알아야 순서를 정할 수 있다고 생각했습니다.

·기존 프로젝트 위에서 하나씩 고치는 대신 Nuxt 3 + TypeScript 새 프로젝트를 만들고 코드를 옮기기로 했습니다. 의존성을 그대로 복사했을 때 호환 문제로 빌드가 깨져, npm-check-updates로 호환 가능한 범위 안에서 먼저 정리했습니다.

·레이아웃과 그 하위부터 옮겨 화면이 뜨는 상태를 먼저 만들었습니다. 그 다음 Vuex는 Pinia로, $axios는 useFetch로 바꾸는 작업을 스토어와 모듈 단위로 이어갔습니다.

·PG사별 연동 차이는 그대로 두고, 결제 전후 flow만 통일하기로 했습니다. 모든 수단이 같은 결제 준비 API를 호출하고 콜백은 하나의 라우트 핸들러가 GET과 POST를 모두 받은 뒤 같은 완료 URL 형식으로 넘기게 했습니다.

·PG 자격증명이 클라이언트에 노출되면 안 되기 때문에 결제 준비 API에서 서버 환경 변수로 주입하도록 했습니다.

·JSON 개별 필드 방식은 FormData를 여러 개 꺼내는 과정에서 간헐적으로 값이 빠져 콜백 에러율이 높았습니다. 누락될 수 있는 값을 먼저 검증하고 예외 처리를 보강해 해당 방식도 안정화했습니다.

·네트워크 탭을 확인해보니 병목은 백엔드 API 하나가 아니라 데이터 수집과 Excel 생성이 브라우저에서 진행되는 구조 자체에 있었습니다. 그래서 수집과 파일 생성을 Next.js API Route로 옮겨 브라우저가 모은 데이터를 다시 서버로 보내는 과정을 없애기로 했습니다.

·50초 넘게 걸리는 작업을 응답만 기다리게 두고 싶지는 않았습니다. 500건씩 청크로 처리하면서 진행률을 SSE로 내려보냈고, 청크 사이에는 setImmediate로 이벤트 루프를 양보해 진행률이 밀리지 않게 했습니다.

·EventSource는 GET으로 고정돼 필터 조건과 취소 처리를 같이 넣기 어려웠습니다. 그래서 수신은 fetch와 ReadableStream으로 만들고 AbortController로 취소를 처리했으며, 완성된 파일은 마지막 이벤트에 담았습니다.