(클론코딩) Next.js로 나만의 포트폴리오 사이트 만들기
유투브에서 최근 Next.js에 대한 장점이나 향후 성장세를 긍정적으로 평가하는 영상이 많아졌다. '개발하는정대리'라는 채널에서 올라온 Next.js 포트폴리오 사이트를 개발하고 배포까지하는 영상을 시청하게 되면서 이번 기회에 Next.js 찍먹을 시도해보았다.
개발하는정대리_Next.js 나만의 포트폴리오 사이트 만들기 (개발하는 김에 배포까지)
1. 환경
스택 설명
- Next.js: React 기반의 프레임워크로, 서버 사이드 렌더링(SSR)을 지원하여 초기 로딩 속도를 개선할 수 있다.
- Notion API: Notion API를 활용하여 Notion DB 데이터를 가져와 사이트에 반영할 수 있다.
- Tailwind CSS: CSS 프레임워크로, 인라인 코딩 스타일로 생산성을 높여줍니다. (다만 인라인 코드가 좀 더러워진다..)
- Lottie Animation: Adobe After Effects에서 제작한 애니메이션을 JSON 형태로 변환하여 웹에서 사용할 수 있게 해주는 라이브러리.
- Vercel Deploy: 배포 툴로, 무료로 Git 연동을 통해 자동 배포가 가능.
2. 삽질
가이드 영상에서 Next.js 부분이 그렇게 어렵지 않았지만, TailwindCSS 세팅과 Notion API 연동 부분에서 많은 시간을 헤맸다.
2-1. TailwindCSS 세팅
CSS가 적용 안 될 경우
// 기존 코드
@tailwind base;
@tailwind components;
@tailwind utilities;
// 안될 경우
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
autoprefixer 에러 날 경우
Error: Cannot find module 'autoprefixer' 가 뜬다면,
npm install -D autoprefixer
2-2. Notion API 세팅
Intergration
내가 생성한 DB와 API 통신을 위해 API KEY를 API 가이드페이지를 통해 생성해야한다. 키를 생성받은 것 까진 쉬웠는데 노션 페이지에서 공유 설정하는 부분이 영상에서 나온 화면이 지금 UI와 달라 해멨다.
다행히 댓글에 설명이 있었다.
integration 위치
1. 맨 끝에 있는 ... 클릭
2. 맨 아래에 conntections 클릭
3. add conntections
4. my-integrations 에 있는 본인 이름 찾아 연결
(주의) DB는 open as pull page로 해야 나온다!
버젼 이슈
.properties 파일에 버젼을 입력하는데 버젼일자에 따른 오류 이슈가 있었다. 해당 영상 댓글페이지에서 이 부분이 사람들로 인해 많이 언급이 되어있어 금방 해결했다. 역시 세팅시 무언가 안되면 버전 호환 이슈를(dependency) 가급적 빨리 확인하는 것이 좋다.
API KEY는 절대 공백을 허용하지 말 것!
.env.local파일에 NOTION_TOKEN과 NOTION_DATABASE_ID를 입력해야한다. 근데 똑같이 구현했는데도 API 통신이 안됐다. (undefined) 시간을 들여 하나하나 봤더니 어처구니 없는 이유였다.
(X) key = 키값;
(O) key=키값;
공백이 있어 API KEY를 제대로 읽어들이지 못했던 것이다. 저장시 자동정렬 기능으로 바로 바뀐 탓에 뒤늦게 해당 사실을 인지했고 자동정렬 기능을 끄고서야 연동을 할 수 있었다.
3. 구현결과
gh-pages로 github 저장소를 정적사이트로만 배포한 게 다였는데, 이번에 vercel로 github 저장소를 서버와 결합해 데이터 처리가 가능한 동적 사이트로 배포까지하는 경험이 좋았다. 한편 Notion API는 보고 생각했던 것보다 응용이 내겐 좀 어려웠다. 그리고 속도면에서도 데이터를 긁어오는데 꽤 느린것 같다. 그래도 데이터를 관리하는 측면에서는 서버에 DB를 설치하고 연동할 필요없이 Notion API를 사용하는 것이 편리했다. 다음에 Next.js로 사이드프로젝트를 하게 되면 이번 스택을 기준으로 구성환경을 정하고 진행해야겠다.
