상세 컨텐츠

본문 제목

[개발자 포트폴리오] 프로젝트 개요, 기술 스택 및 선정 이유, 핵심 기능

Project/포트폴리오(NextJS + Notion API)

by yooputer 2025. 6. 2. 10:21

본문

프로젝트 배경

어느덧 개발자로 일하게 된지 만 2년이 되었다. 

내가 여태까지 했던 일을 기록하고 정리하고 싶어졌다. 

그래서 나에 대한 소개와 프로젝트 경험, 내가 배운 것들을 보여주는 웹페이지를 만들어보기로 했다. 


기술 선정

기술을 선택할 때 가장 고심했던 분야는 '배포'이다. 

왜냐면 배포는 돈이 들기 때문이다. 

 

접속자가 몇명일지도 모르는 토이 프로젝트때문에 한달에 몇만원씩 AWS에 갖다바치고 싶지 않았다. 

사실 포트폴리오는 정적인 사이트이기 때문에 별도의 데이터베이스와 백엔드 서버를 구축하지 않아도 상관없어서 이정도 비용은 안나오겠지만, AWS에서는 고정 IP를 할당받는것 조차 돈이기 때문에 이번에는 AWS 말고 다른 플랫폼을 이용해보기로 했다. 

 

AWS 외의 다른 배포플랫폼 중 프론트엔드 배포에 최적화된 Vercel이 눈에 띄었고, 합리적인 무료 플랜, Next.JS에 특화 등의 이유로 Vercel을 선택하게 되었다. 

 

배포 플랫폼으로 Vercel을 선택했으니 프론트엔드 프레임워크로는 NextJS를 선택했다. 

앞서 말했듯 Vercel은 NextJS에 최적화되어 있는데, 그 이유는 NextJS를 만든 사람들이 Vercel을 만들었기 때문! 

 

NextJS는 한번도 경험해본적 없으나 Vercel+NextJS의 궁합이 궁금했고,

리액트 기반 SSR(Server Side Rendering)이 궁금하여 이번 기회에 한번 사용해보려 한다. 


백엔드 서버를 대신하는 노션API

포트폴리오 사이트는 정적인 사이트이기 때문에 DB와 백엔드 서버가 없어도 구현할 수 있다. 

하지만 프론트엔드로만 포트폴리오의 내용을 수정하려면 수정할때마다 재배포해야하는 것은 불가피하다. 

 

그래서 나는 백엔드 서버의 역할을 수행하지만 돈은 들지 않는 무언가가 없을까 고민했다. 

그러다 노션API를 알게 되었다. 

 

노션 API를 사용하면 내 노션 페이지에 있는 내용을 조회하거나 수정 등을 할 수 있게 된다. 

노션에 나의 포트폴리오 내용을 작성하고 그 내용을 노션 API로 조회하여 화면에 뿌려주면 

포트폴리오의 내용을 수정하여도 프론트엔드 서버를 재배포하지 않아도 된다! 

그리고 포트폴리오의 내용은 노션으로 관리하면 되니 내용 수정이 더 용이해진다. 


그래서 최종적으로 선정된 기술들은 다음과 같다. 


핵심 기능

내가 만들고 싶은 포트폴리오의 핵심 기능은 다음과 같다. 

  1. 소개 페이지
    • 자기소개
    • 학력, 경력, skill, 자격증, 수상내역
    • 내가 좋은 개발자가 되기 위해 하는 노력들
    • 나의 추구미
  2. 프로젝트 페이지
    • 업무 관련 프로젝트
    • 토이 프로젝트
  3. 학습 페이지
    • 내가 학습한 내용
  4. 성장경험 페이지
    • 개발자로서 어떻게 성장해왔는지

 

관련글 더보기