PROJECT INFO

인적 사항, 기술 스택, 프로젝트, 블로그 등을 유연하게 관리하기 위한 포트폴리오 사이트.

항상 최신의 포트폴리오를 사람들에게 제공하기 위해 제작함.

테마 설정, 다양한 형태로 시각화된 인적 사항, 내용을 강조할 수 있는 애니메이션 포함.

노션 페이지 변경 시 캐시된 페이지 자동 재검증 기능 포함.

Notion API를 사용해 자체 콘텐츠 관리 기능을 대체함.

ISR을 통해 느린 Notion API 응답 속도에 대응, 웹 페이지 응답 속도 최적화.

CONTRIBUTIONS

Notion API를 사용하여 Notion 페이지의 내용을 포트폴리오의 콘텐츠로 사용할 수 있는 구조를 구축하였습니다.

블로그, 프로젝트 글 작성 부분에서 Notion과 비슷한 수준의 UX를 원했지만, 기술적, 시간적 측면에서 한계에 부딪혀 외부 서비스를 사용하였습니다.

Notion의 DataSource 페이지를 생성한 후 API키에 접근 권한을 부여하여 Next.js에서 페이지 내용을 요청할 수 있도록 구현하였습니다.

Rich Text Editor에 대응하기 위하여 요소 이름을 UI 컴포넌트로 변환하는 기능을 구현하였습니다.

@notionhq/client 라이브러리를 사용하여 타입 안정성 및 DX를 향상시켰습니다.

Notion API의 느린 응답 속도에 대응하기 위해 ISR을 활용해 페이지를 캐싱하였습니다.

ISR이 작동하지 않는 개발 환경에서 5.14초, 배포 환경에서는 0.7초로 웹 번들의 kb당 응답 시간을 76.5% 단축하였습니다.

웹 내의 콘텐츠는 자주 수정되지 않고, 사용자에게 실시간 수준의 데이터 갱신을 제공할 필요가 없으므로 ISR 전략을 사용하기에 적절한 상황이었습니다.

블로그의 '좋아요', '조회수' 기능 구현을 위하여 사용자를 식별할 수 있는 UUID 발급 기능을 구현하였습니다.

페이지 접속 시 쿠키 존재 여부에 따라 쿠키를 발급하고, MongoDB에 저장하도록 구현하였습니다.

'좋아요' 객체에 UUID와 Notion 페이지 ID를 함께 기록하여 사용자가 자신의 '좋아요' 표시 여부를 확인할 수 있게 하였습니다.

TROUBLE SHOOTINGS

Webhook 수신 시에만 캐시를 만료시키는 On-demand ISR 구조를 도입해 문제를 해결하였습니다.

페이지 데이터가 변경되는 경우가 적어 일정 주기마다 의미 없이 캐시를 갱신해 주는 구조가 서버 자원을 낭비하고 있었습니다.

ISR 주기를 10년으로 설정해 사실상 갱신하지 않도록 한 후, Webhook이 생성 또는 수정 플래그를 보낼 때 revalidatePath를 사용하여 대상 페이지의 캐시를 갱신하도록 구현하였습니다.

캐시 갱신 직후 서버에서 페이지를 요청하여 캐시를 생성하도록 수정하여 문제를 해결하였습니다.

Next.js의 revalidatePath는 캐시를 만료시킬 뿐 새로운 캐시를 생성하지 않기 때문에 캐시 갱신 과정에서 fetch를 사용해 만료 후 첫 요청을 보내 실제 사용자들은 반드시 캐싱된 페이지를 받도록 구현하였습니다.

홈 서버와 브라우저 확장 프로그램을 개발하여 문제를 해결하였습니다.

Notion에 직접 업로드한 파일은 만료 시간을 가지고 있어 갱신 해주어야 하지만, ISR로 인해 파일이 갱신되지 않는 문제가 발생하였습니다.

콘텐츠를 작성하면서 간단하게 파일을 업로드 할 수 있는 브라우저 확장을 개발하여 문제를 해결했습니다.