![[NextJS] 블로그 프로젝트](/_next/image?url=https%3A%2F%2Fwww.notion.so%2Fimage%2Fattachment%253A80e53ee1-31e2-4b82-b998-ddfd86beeb67%253Amain-thumbnail.png%3Ftable%3Dblock%26id%3D2699c76c-6cb4-8057-be0e-cabcc25b00ef%26spaceId%3Db4216657-966f-4c29-ae8c-42f6c4adb66d&w=3840&q=75)
개요
저는 개발을 공부하면서 거의 모든 내용들을 노션에 정리하는 Hard-Notion 유저입니다. Notion을 유료로 사용하면서 다른 블로그를 또 운영하면서 복사 붙여넣기 하는 것이 너무나도 번거로운 일임을 느꼇습니다. 하지만 어떤 블로그 UX도 저의 요구를 모두 만족하는 플랫폼도 없었습니다.
그러던 와중 Notion-API가 있다는 것을 알게 되었고 Notion에 글을 쓰면 바로 저의 블로그 페이지에 연동되는 사이트를 만들게 되었습니다.
블로그 사이트 링크
깃허브 주소
notion-blog-nextjs
chugue • Updated Sep 9, 2025
프로젝트와 관련된 기술블로그
NextJS에 클린아키텍처 적용하기
로버트 C마틴이 말한 클린아키텍처를 읽었을 때, 언젠가 한 번 적용한 프로젝트를 만들어보자라는 생각이 있었습니다. 그리고 특히 프론트엔드 구조에서는 상태 / 외부 데이터 / API / 비지니스 로직등 관리해야되는 레이어가 많았기 때문에, 클린 아키텍처를 적용하기 제격이라 생각했습니다.
클린 아키텍처를 조사하고 공부하고 적용하면서 도전과 지식 그리고 배움에 대해서 블로깅을 해보았습니다.
Notion Api페이지 이미지 렌더링 구현한 방법
1차적으로 개발 했을 때는 MDX라이브러리를 활용해서 구현했었습니다. MDX Remote라이브러리를 노션 공식 API를 사용해서 이미지를 받아야 했는데, 모두 signedURL로 만료기간이 있었습니다. 만료기간 때문에 NextJS의 최고장점인 Static Site Generation을 사용하지 못했기 때문에 개선이 필요 했습니다.
이를 해결하는 과정을 블로그에 정리해 보았습니다.
세션없이 방문자 수 구현하기
세션을 사용하지 않고 어떻게 하면 중복 카운팅을 하지 않고, 진짜 제대로된 카운팅을 할 수 있을까 고민하면서 구현했습니다. 당연하게 생각했던 데이터였지만 제가 원했던 구조는 하루에 한 사용자를 카운팅 하면서 해당 사용자가 어떠한 페이지에 방문했는지 기록을 남겨 각 페이지의 조회수를 카운팅 했었어야 했습니다.
그러한 기능을 구현하는 과정을 블로그에 정리해 보았습니다.
react-notion-x 라이브러리 사용시 gif 짤림 현상 없애기
1차적으로 개발했을 때는 MDX라이브러리로 렌더링을 했었지만, 노션이 제공하는 다양한 기능과 스타일링을 포기할 수 밖에 없었습니다. 그래서 react-notion-x 라이브러리로 프로젝트 의존성을 변경하게 되었고, 해당 라이브러리가 이미지를 관리하는 방식에서 gif가 제대로 나오지 않는 문제가 있었습니다.
해당 문제를 해결하는 과정을 블로그에 담아 보았습니다.
부드러운 Indicator 애니메이션 적용하기
메인 페이지에서 태그를 클릭할 때, 태그가 선택되는 indicator가 너무 단조롭게 변하는 것이 거슬렸습니다. 그러다 GSAP 애니메이션을 공부해서 좀 더 매끄러운 사용자 경험을 적용해보고 싶었습니다.
프로젝트 내에서 여러군데 애니메이션을 적용하였지만, 그 중 한 부분을 다른 사람이 보고 따라하며 적용해 볼 수 있도록 초점을 맞추고 글을 작성하였습니다.