프론트엔드 개발자로서, 나를 소개할 수 있는 웹페이지 하나는 있어야지.. 가 포트폴리오 제작의 시작이었습니다. 그렇게 시작해서, 그러면 어떻게 보여줘야할까? UI는? Data의 관리는?? 등등의 요소들을 설계해 가고, 구현해 가며 배포도 하고, 리팩토링 과정을 거쳐 회고를 쓰게 되었습니다.
1. 설계: 제약을 기회로 바꾸는 아키텍처
처음에는 단순한 정적 페이지를 생각했지만, 포트폴리오가 추가 됨에 따라 이걸 그때 그때 마크다운 파일을 만들어서 추가 하기 보다는 웹에서 바로 CRUD가 가능하게 만들고자 했고, ServerLess 방식을 한번도 써보지는 않았기에 Serveless 방식으로 가고 데이터는 깃허브 API와 연동해서 하고자 했습니다.
-
DB 없는 데이터 관리: 별도의 DB 서버를 운영하는 대신, 소스 코드가 관리되는 GitHub 레포지토리를 데이터 저장소로 활용하기로 했습니다.
-
보안 전략: 관리자 인증을 위해 Edge Runtime에서도 가볍고 안전한 jose 라이브러리와 httpOnly 쿠키 기반의 JWT 인증 체계를 설계했습니다.
2. 구현: Next.js 15의 기능을 극대화하다
최신 프레임워크인 Next.js 15의 기능을 적극적으로 활용하여 핵심 기능을 구현했습니다.
-
GitHub API 연동 (CRUD): Octokit을 사용해 관리자 페이지에서 프로젝트를 추가, 수정, 삭제하면 이를 트리거로 깃허브 API가 동작하여 커밋되고 그러면 자연스럽게 배포 되도록 구현했습니다.
-
Server Actions & Middleware: 폼 제출 시 서버 액션을 통해 보안을 유지하며 데이터를 처리하고, 미들웨어를 사용하여 인증되지 않은 사용자의 관리자 페이지 접근을 원천 차단했습니다.
3. 배포: CI/CD 자동화와 안정성 확보
Vercel을 통해 실제 운영 환경에 서비스를 올리며 배포 프로세스를 익혔습니다.
-
자동 재배포: GitHub 메인 브랜치와 연동하여 푸시 즉시 빌드 및 배포가 이뤄지는 환경을 구축했습니다.
-
도메인 및 환경 변수: 커스텀 도메인을 적용했으며, 로컬과 배포 환경의 환경 변수 차이로 발생하는 런타임 에러를 해결하며 배포 안정성을 높였습니다.
4. 리팩토링: '동작'을 넘어 '효율'로
기능 구현 이후, 코드의 품질과 성능을 높이는 작업을 진행했습니다.
-
모듈화: 중복되던 Write/Edit 로직을 PortfolioForm으로 통합하고, 복잡한 이미지 업로드 로직을 별도의 모듈로 분리하여 재사용성을 높였습니다.
-
SSG, ISR 도입: 요청마다 API를 호출하는 대신 빌드 시점에 정적 HTML을 생성하는 SSG(Static Site Generation) 를 적용하여 로딩 속도를 개선했습니다. 그리고 벨로그 게시물을 보는 경우 일정 주기로 API를 새로 받아오는 ISR을 도입해서 속도를 개선 하면서도, 데이터의 최신화를 하려고 했습니다.
5. 배운 점 및 후기 (Retrospective)
✅ 배운 점: "내 컴퓨터에서는 되는데" 의 위험성
이번 프로젝트를 통해 로컬 환경과 실제 서버(Vercel) 환경의 차이를 뼈저리게 배웠습니다. 특히 서버리스 환경의 Read-Only 파일 시스템 제약을 GitHub API로 우회하며 해결한 경험은, 프레임워크와 인프라에 대한 이해도가 얼마나 중요한지 깨닫게 해주었습니다.
✅ 느낀 점: 기록은 성장의 이정표
매 단계 삽질의 기록을 벨로그에 남기며 개발했습니다. 당시에는 고통스러웠던 버그들이 문서화되면서 나만의 지식 자산이 되었고, 문제를 객관적으로 바라보는 힘을 길러주었습니다. 개발자로서 "왜 이 기술을 써야 하는가?"에 대해 끊임없이 자문하며 근거 있는 코드를 짜려고 노력한 시간이었습니다.
✅ 후기: 마침표가 아닌 쉼표
'ItsMe'는 저에게 단순한 포트폴리오 그 이상입니다. 최신 기술을 마음껏 테스트하고 적용해 볼 수 있었던 거대한 실험실이었습니다. 여기서 얻은 문제 해결 능력과 설계 감각을 바탕으로, 앞으로 실무에서도 비즈니스 가치를 가장 효율적으로 창출해 내는 개발자가 되고 싶습니다.
끝!
