PROJECT INFO

NFC 태깅을 통한 교내 자습시간 출석 체크 서비스.

해당 동아리의 부장을 맡아 서비스를 실제 운영한 경험이 있음.

교실별 학생 출석 현황 조회, 결석 처리, 인정결 처리 등 학생 관리 기능 포함.

출석 기록 조정 및 엑셀 파일 저장 기능 제공.

Next.js의 SSR과 @tanstack/react-query의 useSuspenseQuery를 사용하여 데이터를 페칭하고 Suspense를 이용하여 UI를 스트리밍함.

CONTRIBUTIONS

팀의 프로젝트 성공을 위해 발표, 사용 도우미, 오류 응대, 피드백 수집, 실사용을 위한 선생님과의 조율에 참여하였습니다.

서비스 완성 후, 교직원 회의에 참여하여 선생님용 서비스의 사용 방법을 발표한 경험이 있습니다.

실사용 확정 후, 1·2학년 학생들을 대상으로 회원가입 및 출석 체크 방법을 발표한 경험이 있습니다.

구글 폼을 사용해 피드백을 수집하고, 스프레드시트를 팀원들과 공유하며 서비스를 유지보수 하였습니다.

not-found.tsx, error.tsx와 같은 예약 파일을 사용하여 기능 구현에 사용한 코드의 양을 줄였습니다.

에러, UI 스트리밍 등 프레임워크 자체 동작을 적극 사용하여 직접 구현한 동일 기능에 비해 엣지 케이스를 줄였습니다.

기존에 제작한 디자인 시스템을 사용하여 공통 컴포넌트 제작 시간을 줄이고, 빠르게 UI를 빌드할 수 있었습니다.

LLM을 사용하지 않고도 두 웹 각각의 출시를 개발 시작 14일 차에 완료했으며, 총 16일 차에 두 서비스를 모두 출시하였습니다.

백엔드 API에서 발급한 jwt를 쿠키로 변환하기 위해 BFF를 구축했습니다.

백엔드 API에서 직접 쿠키를 발급하면 앱에서 사용할 수 없어 웹에서만 쿠키를 사용하도록 BFF 구조를 사용했습니다.

TROUBLE SHOOTINGS

컴포넌트 단위 GET 요청을 useSuspenseQuery 기반으로 마이그레이션 하여 문제를 해결 했습니다.

기존에는 SSR을 활용해 데이터를 페칭했지만, 데이터 최신화를 위해 router.refresh()를 사용하면 페이지 내 모든 SSR 데이터가 다시 요청되는 비효율이 있었습니다.

이를 useSuspenseQuery로 전환하여 Suspense의 fallback UI는 유지하면서도, 쿼리 인밸리데이션을 통해 필요한 데이터만 선택적으로 갱신하도록 개선했습니다.

AWS EC2 + Docker Compose 배포로 캐시 문제를 해결하였습니다.

Cache-Control 헤더의 부재로 실제 사용자와 일치하지 않는 정보가 포함된 HTML이 Netlify에 캐시되어 사용자들에게 해당 HTML이 전송되는 문제가 발생했습니다.

이를 통해 클라우드단의 캐시가 없는 AWS EC2와 Docker Compose를 이용하여 웹을 새롭게 배포하고 Github Action으로 CI/CD를 구축하였습니다.

semver 라이브러리를 직접 설치하여 빌드 오류를 해결하였습니다.

Netlify 빌드 환경에서 npm 호이스팅 비결정성과 빌드 캐시 누적으로 인해 간접 의존성 패키지인 semver의 모듈 경로를 찾지 못하는 오류가 간헐적으로 발생하였지만, 빠르게 문제를 해결하여 정상적으로 배포하였습니다.