이 블로그는 어떻게 만들어졌을까.

개인 블로그를 찾아서 배포가 하고 싶어졌다.

그리고 찾게된 좋은 템플릿이 이 블로그의 코드들이다.

그런데 node, md, 쥐뿔도 모르는 나는 궁금해졌다. 이 블로그의 포스트 데이터는 어디에 어떻게 저장이되고, 어떻게 읽어지는 것일까??

거대한 숲으로

잡소리 주의

고기가 먹고싶다.

갑자기 왠 헛소리냐고 할 것이다. 맞다 헛소리다.

고기를 먹는데 젓가락이 어떻게 만들어졌고 프라이팬이 어떻게 주물되었는지 알 필요가 있을까? 우리가 알아야 하는 것은 그저 이 젓가락은 고기를 드는 도구, 가스버너와 프라이팬의 상호작용 그리고 적당한 굽기 일 것이다.

고기 구워먹는 것을 더 좋아한다면 더 좋은 주물 프라이팬을 사용할 수도 있고 고기에 대해 더 깊은 지식을 탐구할 수도 있을 것이다.

필자가 학습할 때 선호하는 방식이다.

잡 소리 끝

데이터는 어디에

이 블로그의 거대한 숲에서 시작하자.

디렉토리들을 구경하다 보면 포스트의 내용은 /data/blog 폴더에 mdx, md 파일들로 저장되어 있다. 직관적으로 해당 디렉토리에 mdx, md 파일로 저장하면 포스팅을 할 수 있다는 것을 알 수 있다.

md 파일이야 너무 잘 안다. 마크다운아닌가

mdx . ??

mdx 는 markdown 언어에 JSX 요소를 가미한 녀석이다. 마크다운에 html 요소를 사용할 수 있듯이 JSX component 를 사용할 수 있다.

어디에서

자 데이터가 어디에서 왔는지 확인했으니, 이제 어디에서 데이터를 읽는지 한 번 살펴보자.

Next.js 에서는 /pages 안에 폴더구조가 곧 url 의 구조이다.

루트디렉토리에서부터 보자면 /pages/blog 안의 파일이름은 ‘host’/blog/파일이름 에 대응된다. 예를 들어 /pages/blog/abcde.js 파일은 ‘host’/blog/abcde 라는 url 에 대응된다.

자 이제 보자!! /pages/blog/[…slug].js …??

당황하지말자. slug 라는 뜻은 민달팽이라고 나온다…

다음 포스트에서 이어가겠다…