노션을 CMS(컨텐츠 매니지먼트 시스템)으로 사용하는 방법을 연구했었는데, 이를 강연으로 만들어 파는 것을 보았다.
딱, 내가 구현하고자 했던 것과 동일하다. 작년에 참고 했었던 글들은 대개 Notion as a blog CMS였었다.
notion-blog-nextjs
samuelkraft • Updated Jul 19, 2024
원래는 아래와 같이 Notion을 이용한 Hugo 블로그였는데,
일단 작년에 일부 되는 것까지만 확인하고 중단했었다.
![Video preview](https://i.ytimg.com/vi/N47DmmJV4t4/hqdefault.jpg)
이유는 별도의 서버(node.js로 추측)를 이용해야 하는데, 상용이 아니다보니 중간중간 멈추는 문제.
그리고, 자바 스크립트를 이용해서 글을 fetch해오는 것이 생각보다 쉽지 않았다.(자바 스크립트 문법을 좀 더 공부해야 하는 문제)
그래서 일단 최근에 node.js를 공부해서 서버 구축은 마쳤는데,
그러는 사이 이런 강연을 보게 되었다.
📚사용할 기술 스택
주로 사용할 기술 스택은 다음과 같아요.
html/css
는 기본이겠죠?사용할 기술 스택을 보니, 딱 프론트엔드 공부하기에 제격이었다.
그러다 강연자의 깃허브를 보니 해당 강연자료들을 친철하게 잘 올려놨다.
notion-api-blog
CaesiumY • Updated Jan 12, 2024
내가 하려고 했던 것이 헛된 프로젝트가 아니었음을 알게 되었고,
이 프로젝트를 스스로 완성하게 되면 배우게 되는 기술 스택들이 꽤 매력적으로 구성될 수 있음도 알게 되었다.
더해서, 그동안 netlfy를 간단한 정적 페이지 띄우기에 이용했었는데,
Vercel도 있다는 것을 알게 됨.
- The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
상세 커리큘럼
📰상세 커리큘럼
1회차 – 프로젝트 셋업하기
- 개발 환경 설정하기(VSCode, Extensions)
- 깃허브 레포 만들기
- 노션 시작하기 및 api 등록하기
- 프로젝트에 필요한 패키지들 설치하기
- Vercel에 배포하기
과제) 취업에 도움되는 깃허브 꾸미기
2회차 – Tailwind CSS와 친해지기
- Next.js와 TailwindCSS 기초 설명
- 반응형 디자인 구현하는 법
- 블로그 헤더 만들기
- 헤더 메뉴 만들기
- 푸터 만들기
과제) 블로그 헤드 프로퍼티 추가하기
3회차 – Notion API로 게시글 리스트 가져오기
- 노션에 글 작성하기
- Notion API를 이용해 데이터 가져오기
- 블로그 메인 페이지 만들기
과제) 인터랙티브 애니메이션 추가하기
4회차 – Notion에 적은 문서 내용 보여주기
- 블로그 게시글 상세 페이지 만들기
- 상세 페이지 세부 디자인하기
- 노션 API의 한계와 고쳐 쓰기
- 마법의 가루, ISR
과제) 이미지가 로딩 중임을 알려주기
5회차 – Notion API에 쿼리를 추가해 기타 페이지들 만들기
- 태그별 페이지 만들기
- 페이지네이션 추가하기
- 검색 페이지 만들기
- 서버사이드에서 프리뷰 이미지 추가하기
과제) 중복된 서버 요청 캐싱하기
6회차 – 내 블로그 세상에 공개하기
- 내 프로필 페이지 만들기
- 도메인 구매 및 vercel과 연결하기
- 구글과 네이버 검색 엔진에 등록하기
- 구글 애널리틱스 붙이기
과제) 게시글마다 댓글 시스템 붙이기