2022년 10월 30일, 그러니까 개발 관련 지식이 거의 없었던 시절의 기록이다. 지금은 이런저런 편의성 때문에 다시 티스토리로 돌아왔지만 다시 정적 사이트 생성기를 이용한 블로그 만들기를 시도하고 있다. 지금 시점에서 보면 얼마나 우당탕탕 좌충우돌했는지 재미있는 (..) 기록.
사건의 발단
카카오 서버 문제로 티스토리가 며칠간 제대로 표시가 안 되는 오류가 있었다. 티스토리가 그들에게 얼마나 뒷전인지 깨닫고 ㅠㅠ 지금까지 마크다운 문제로 소소하게 불편했기에 이참에 티스토리를 탈출하여 다른 곳에 블로그를 만들고자 하는 결심을 하게 되었다.
그러다가 정말 우연히 react-notion-x로 직접 만들었다고 써있는 태호님의 페이지 https://taeho.io/ 를 보고 감동했다.
“노션을 웹페이지로 (oopy를 사용하지 않고도) 직접 만들 수 있단 말야?! 개발자 최고다👏😭”
그렇게 이것저것 찾아보다가 우연히 어느 오픈소스를 이용해서 블로그를 만든 Hanmil Lee 님의 Notion 블로그 만들때 참고했던 것들 을 보고 이건 운명이다!를 외치며 조사에 들어갔다.
그러다가 알게된 것이 바로 nextjs notion starter kit 다.
Next.js Notion Starter Kit
특징
- Next.js 프레임워크로 개발되었고, Vercel을 통해 쉽게 배포할 수 있도록 구성되어 있다고 한다.
감동적인 점
- 속도가 엄청나게 빨랐다. 정적으로 처리하기 때문이라고 한다.
- 노션을 그대로 쓸 수 있다니 최고야!
그래서 뭘 해야할까?
- This project requires a recent version of Node.js (we recommend >= 16).
- 일단 위에 이렇게 써 있어서 노드 16버전을 설치했다.
- 🔗 REF https://offbyone.tistory.com/m/441
- 포크와 클론도 했다.
- site.config.ts도 바꿨다.
npm install- Node Package Manager 즉 노드 패키지 매니저를 인스톨하라는 뜻이라고 한다.
- 노드에서 사용하는 모듈들을 패키지로 만들어 관리배포를 하는 거라고. 즉 다른 사람이 잘 만들어놓은 모듈들을 설치하여 사용 가능하다. 아무튼 요새는 노드만 설치하면 인스톨은 자동으로 된다고 한다. 그렇게 뭐가 뭔지 모르는 상태로 package.json도 디폴트값으로 만들어줬다. 아무 일도 일어나지 않았다.
- 그래서 Next.js 개념정돈 알아야하지 않을까.. 하고 개념정도는 훑어보긴 했다. 하지만 그 이후의 과정에 대해서는! 전혀 알 수 없었다!
- 뭐가 뭔지 모르겠어서 일단 vercel이라는 것에 돌진했다. 그리고 놀랍게도 그것은 성공하였다. 리액트랑 노드까지 배워와야 하는 건가 하고 잠깐 좌절했었는데 한순간으로 끝났다.
Vercel이란
nextjs를 이용하여 Notion 에 올린 것을 알아서 코드로 바꿔서 사이트로 배포할 수 있게 해준다고 한다.
🎊
아무튼 그렇게 배포 성공! 이제 내 입맛대로 꾸미기만 하면 된다.
🛠️ 고치고 해결하고
⭕ 해결한 문제들
1. Vercel - Push 후 새로고침해도 반영 안되는 문제
갑자기 새로고침해도 바뀌는게 없어 ㅠㅠ 왜 이러지 ㅠㅠ 했더니 알고보니 vercel에서 deploy 에러가 떴던 거였다. 얼른 관련 지식들을 조금이라도 공부하고 싶어졌다.. 일단 redeploy 하니까 됐다.
아무 이유 없는 에러도 있는 법이라는 사실을 배웠다!
2. GitHub : Fork해온 원 Repo에서 업뎃이 되면 받아보고 싶다
⭐ 답은 fetch였다!
Remote 설정 - clone 후에는 origin 이라는 remote 가 생성되는데 이건 내가 Fork 한 프로젝트이다.
pull 로 변경 내역을 받으면 원본 프로젝트에서 받는게 아니라 Fork 된 내 프로젝트의 변경내역을 받게 된다. 원본의 변경 내역을 파악하고 내 저장소에 반영해서 원 저자와 중복 작업을 하거나 원 저자의 예전 소스를 수정하는 일이 없도록 원본 저장소의 정보를 추가하자.
⭐ fork는 변경내역 확인만! pull은 수정!
💡 여기서 유념할 점 : 보통 작업 중인 워크스테이션에 최소 세 개 이상의 프로젝트 복사본이 존재한다는 것.
- 사용자의 커밋 기록이 있는 사용자의 저장소 (즉, 이미 저장이 된 저장소)
- 편집 및 작성 중이지만 사용자 저장소에 아직 커밋되지 않은 복사본
- 원격 저장소의 로컬에 "캐시된 (cached)" 복사본 (복제된 원본일 가능성 多)
git fetch를 사용하면 마지막 pull 이후 원격 저장소 또는 브랜치에 적용된 변경 사항을 확인할 수 있다.
🤔 만일 원격 저장소에 변경 사항이 존재하는 상황에서 pull을 바로 실행하면
⚠️ 현재 브랜치와 작업 복사본의 파일이 변경되는 동시에 새로 작업한 내용이 손실되는 일이 생길 수 있다.
💡 따라서 fetch로 변경 사항을 먼저 확인한 후 pull을 실행하는 방법이 보다 안전하다!
그렇게 하고 fetch한다음, 문제가 없으면 merge 하면 끝!
지금은 단순히 궁금했던 거라 원본 저장소의 수정이 없었지만 하는 방법을 알았으니 다음에 유용하게 써먹자!
3. 폰트 스포카산스 지정하기
스포카 공식 홈페이지 참조
스포카 한 산스 네오를 웹폰트로 사용하시려면 두 가지 방법이 있습니다.
스타일 시트에 아래의 코드를 넣거나,@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);
혹은 HTML의 <head> 태그 안에 아래의 코드를 넣어주세요.
<link href='//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css' rel='stylesheet' type='text/css'>
그후 <style> 태그 안에 font-family를 설정해주세요.
{ font-family: 'Spoqa Han Sans Neo', 'sans-serif'; }
웹폰트로 사용할 때 위 방법을 사용하시면 무료로 서브되는 버전이기에 불러오는 속도가 느릴 수 있습니다. 가능하면 직접 서브해서 사용하길 추천합니다. 조금 더 자세히 알고싶다면 “스포카 한 산스 웹폰트로 사용하기” 포스트을 참조하세요.
내부에서 테스트해 본 결과 폰트를 불러오는 시간이 짧게는 2초에서 길게는 20초 이상 걸리기도 했습니다.
그러나 나도 어차피 깃헙에 올려서 쓸 예정이었기에 그냥 스포카에서 주는대로 썼다.
그리고 폰트가 들어있는 부분을 알기 위해 폴더를 전부 탐색했다.. 🔥
- pages/_document.tsx에서 <link href='//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css' rel='stylesheet' type='text/css'> 추가
- styles/global.css, styles_module,css 에 있는 font-family에 'Spoqa Han Sans Neo' 추가.
그런데 일본어에 스포카 폰트가 제대로 적용되지 않는 문제가 자꾸 발생했다.
🤔 의외로 아주 원시적인 방식으로.. 해결했는데
폰트패밀리에서 스포카, 산세리프 말고 다 지워버리니 그제서야 제대로 작동했다.
왜지..? 모르겠다.. 역시 처음부터 내가 다 만든 걸 쓰고싶다는 생각이 들었다.. 흑흑
이것때문에 노토산스KR JP 이렇게도 놔보고 JP KR 이렇게도 놔보고 별 짓 다했고 html lang도 없앴으나.. (이건 별로 의미 없었던 것 같기도?) 결론은 나머지 폰트를 날린다. 였다.
4. 파비콘 변경
site.config.ts의 defaultPageIcon:'파비콘주소'를 수정해준다.
그리고 파비콘이 있는 경로를 찾아 네개의 파일을 올렸다. 네개가 있었으므로.. 다른 사람들 보니까 안드로이드 전용도 있는 것 같았다 멋져! 하지만 어케 설정하는지 모르므로 일단 있는 거나 수정해서 쓰도록 하자
5. hr의 margin수정
너무 광활하여 styles/notion.css 에서 .notion-hr 을 margin: 2px 0; 로 바꿔주었다. 2em이니 광활했던 거였다..
6. 인용 기울기 없애기
styles/notion.css 에서 quote 라고 검색하니 바로 나와서 이탤릭을 없애주었다.
⏸️ 일단 보류
1. 영일한 제목 slug 없이
이건 걍 slug 열심히 쓰는 게 낫지 싶었다,,
사유는 아래 REF에 나온대로 다른 NPM이랑 일원화를 시켜야 하는데 내가 아직 구조를 몰라ㅠㅠ 뭐 주소 예쁘게.. 지정해주자..
https://firejune.io/Next.js-+-Notion-포트폴리오-사이트
2. 신택스 하이라이팅이 너무 쨍해서 바꾸고 싶다
노션 디폴트 스타일 비슷하게 보고싶은데 이것저것 건드려봤으나 실패했다.. 신택스 하이라이팅 안 할거면 필요없다고 주석 달려있는 css를 없애봤는데.. 아무일도 일어나지 않았다.
💡 https://prismjs.com/ prism이 뭔가 했더니 이거랑 관련이 있었다!
Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in millions of websites, including some of those you visit daily.
❓ 필요한가?
- 모바일 사이즈에서 검색 버튼 보이기
이거 주석처리해주기@media only screen and (max-width: 600px) { .notion-search-button { display: none !important; } }- notion.css에서
- 깃헙공유버튼 없애기가 뭘까 (뭔버튼일까..)
// import { GitHubShareButton } from './GitHubShareButton’
이 둘을 주석처리{/* <GitHubShareButton /> */}components/NotionPage.tsx에서
- 글고보니 셋팅에 커버 주소 뭘까
- → 따로 글에서 아이콘과 커버를 설정하지 않아도 나올 수 있게 디폴트 설정하는 거였다!!
- 💡 교훈 : 설명서를 잘 읽자
⚡반전
그리고 이것을 수정하기 전에 나는 이 은혜로운 분의 깃허브와 운명적인 만남을 하게 되는데..!
😍 https://github.com/2skydev/Notion-Next.js-blog-starter-kit/
Next.js + Notion Blog Starter Kit
자세한 동작 방식은 몇번을 읽어봐도 잘 모르겠다! 앞으로 알아가도록 하자!
이미 앞에서 삽질을 많이 했으므로 설정 자체는 간단했다. 무엇보다 엄청나게 자세히 설명해 놓으셔서 감사했다 😂
💡 알게된 것들
- 아이콘이나 헤더는 직접 저장→업로드 하지 않으면 안 나온다.
- 추측 : next.config였나? 그 파일에서 도메인들을 넣어주는 게 있었는데 거기 들어가지 않으면.. 자동으로 값을 가져와주지 않는건가?!
- css에서 색상 등의 기본값을 root로 다 지정해 주는 듯하다. 그래서 그 색을
var(값이름)이렇게 넣으면 되는 것 같다. 하나하나 바꾸지 않아도 된다니 멋지다 최신 css 최고다.. 나는 화석이었던 것이다.- 예를 들어 포인트 색상은
--primary-color이것만 바꿔주면 된다!
- 예를 들어 포인트 색상은
- tsx 파일 건드리면 vercel에서 빌드할 때 웹팩 에러가 난다.
- 웹팩이.. 어떻게 됐다는데 잘 모르겠어서 일단 repo를 아예 삭제하고 다시 포크하여 차근차근 해보았다. 하필이면 우다다 커밋하고 한번에 푸쉬한거라서 뭐가 문제인지도 잘 모르겠었다.
- 💡 1커밋 1푸쉬를 하자는 교훈을 얻었다
- 일본 쪽 사이트 검색해보니 오히려 일어 타이틀 비선호 / 영어숫자 slug 지정 선호였다.
- slug 속성을 텍스트로 만들어주면 그대로 적용 가능하다.
- img 속성도 갤러리 미리보기 이미지로 지정 가능하다 (크기 맞춤-안함 옵션도 가능)
- 이미지 포지션 지정은 반영되지 않는다.
- 기본 emoji가 아니라 내가 업로드한 아이콘이 들어간
페이지는 노출되지 않는 것 같다. - bg-color의 var값은
custom/notion.scss에 정의되어 있다. - header의 blur 설정은 custom 디렉토리가 아니라 그냥 notion.css 에 있다.
- rgba 안에 var값 넣고 alpha값 주는 거 왜인지 모르겠는데 반영이 안 된다.. 스택 오버플로우 검색 결과로는 될 수도 있다고 했는데 ㅠㅠ 그래서 차선책으로 추천한 해당 값을 var값으로 지정해주는 방식을 택해야 했다.
- 디폴트테마를 다크테마로 바꾸려고 했는데 왜인지 바뀌지 않길래 한참 삽질하다 깨달은 것 → 쿠키를 지우면 적용된다. 허망하다.
