KUWEB

동아리 소개와 연주회 정보를 사전 렌더링하거나 서버에서 제공해 검색 접근성을 개선했습니다. 별도 Express 서버가 담당하던 데이터 조회와 통계 기록을 Next.js 서버 기능으로 통합해 운영 구조를 단순화했습니다.

Next.js와 TypeScript로 마이그레이션하면서 스타일 작성 방식도 함께 정리했습니다. 기존 styled-components에서는 스타일을 위한 컴포넌트를 별도로 정의했는데, Tailwind는 마크업 안에서 스타일을 바로 확인하고 수정할 수 있다는 점이 편리했습니다. 또 간격이나 색상 같은 값을 정해진 유틸리티 기준으로 적용할 수 있어 스타일의 일관성을 유지하기 좋다고 판단했습니다.

연주회와 연주곡, 월드컵과 후보 목록처럼 함께 조회하는 데이터 단위가 명확해 문서 기반 구조가 적합했습니다. 공개 콘텐츠는 서버, 게임 데이터는 클라이언트에서 조회하고 통계는 서버에서 Firestore 트랜잭션으로 기록했습니다. 별도 RDS 운영 경계를 줄이고 관리형 데이터베이스를 사용하기 위한 선택입니다.

CRA·React 프론트엔드와 Express 백엔드로 분리된 기존 프로젝트의 페이지·컴포넌트·API 흐름을 분석하고 Next.js·TypeScript 기반 구조로 옮기는 과정에 활용했습니다. 기존 기능을 유지하면서 서버·클라이언트의 역할과 데이터 흐름을 재구성하고, 반복적인 코드 변환과 구조 변경 작업의 생산성을 높였습니다.

연주회·게임마다 필요한 데이터와 전달할 값을 명확히 정리하기 위해 도입했습니다. 데이터를 잘못 사용하거나 필요한 값을 빠뜨린 부분을 실행 전에 확인하여 마이그레이션의 실수를 줄이고자 했습니다.

클라이언트에서 직접 처리할 필요가 없는 통계 기록과 데이터 갱신을 Next.js 서버 영역에서 수행하기 위해 사용했습니다. 게임 결과처럼 여러 사용자의 요청이 동시에 들어올 수 있는 데이터는 Firestore 트랜잭션으로 갱신해 읽기와 쓰기를 하나의 작업으로 처리했습니다.

게임 데이터 조회의 로딩·오류 상태와 캐시를 일관되게 관리했습니다. 게임별로 캐시를 구분하고, 변경 빈도가 낮은 후보·문제 데이터는 캐시가 유지되는 동안 불필요한 자동 재조회를 억제했습니다.