§소감

드디어 첫번째 블로그를 완성시켰다! 물론 아직 많이 보완해나갈 것이 많지만, 최소한 기능이 있고, 나만의 웹 페이지를 제작했다는 것의 많은 의의를 두었다. 또한 앞으로 작성할 포스트 글은 이 블로그에 작성할 예정이기 때문에 더 많은 애정을 가지고 임할 수 있을 것 같다😊.

참고로 디자인은 Kent C. Dodds님의 사이트를 많이 참고했다! 개인적으로 블로그가 내 취향이기도 하고, 개발자로서 존경하는 인물 중 한명이다 ㅎㅎ

§사용 기술

§1. Nextjs

요즘 핫한 기술이기도 하고, 백엔드 경험이 없는 나에게는 적격이라 생각했다. 추가로 프로젝트를 진행하면서 백엔드에 대한 대략적인 지식을 얻을 수 있어서 좋았다. 그리고 SSG, ISR, SSR, CSR 등 다양한 렌더링에 대한 개념을 이해하는 데에도 좋은 경험이 되었다.

§2. React

내가 제일 자신있는 기술이다 (React 외길인생..)

§3. Sass

파일을 구조화하기도 쉽고, CSS 작성을 위한 편리한 기능 때문에 작업하는 데에 편안했다. 또한 좀 더 나은 유지보수를 위해 BEM 으로 클래스명을 작성했다.

§사용 기술의 변천사

이 부분에 대해서는 꼭 기록하고 싶었다!

Nextjs를 사용하면, Vercel에서 편리하게 배포할 수 있다. 하지만 개발자의 욕심으로 인해 나는 Nextjs 블로그를 AWS 서버에다가 올리고, 도메인까지도 적용하고 싶었다! 그렇지만 현실적은 문제가 있었는데 그것은 바로 비용이다.

아무리 개인 서버로 사용할 것이지만 EC2 는 내가 예측할 수 없는 금액이 나올 수가 있다. 돈이 넉넉지 않은 나에게는 많이 무서운 존재였다. 이런 겁쟁이인 나를 위해 Amazon Lightsail 이 존재한다. 미리 돈을 지불하고, 그 한도 내에서 서버를 사용하겠다는 느낌이다.

Lightsail에서는 3개의 플랜에는 처음 3개월 무료로 이용할 수 있게 한다.

그래서 최대한 돈을 아끼고자 3.5달러짜리부터 서버를 만들고 프로젝트를 내려받아 빌드를 하는데... 걸려도 너~무 오래 걸린다... 그리고, 중간에 원인을 알 수 없는 에러 메시지로 컴파일은 되는데, ChildProcessWorkder가 초과되었다나?

> Build error occurred
Error: Call retries were exceeded
at ChildProcessWorker.initialize (C:\MyFolder\hj_portfolio\hj-blog\node_modules\next\dist\compiled\jest-worker\index.js:1:11661)
at ChildProcessWorker._onExit (C:\MyFolder\hj_portfolio\hj-blog\node_modules\next\dist\compiled\jest-worker\index.js:1:12599)
at ChildProcess.emit (node:events:527:28)
at ChildProcess.emit (node:domain:475:12)
at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12) {
type: 'WorkerError'
}
[    ] - info Generating static pages (10/11)

처음에는 원인을 모르고 혹시 사양이 낮아서 그럴수도 있으니까 그 다음으로 5달러 플랜, 10달러 플랜 서버를 만들어 똑같이 빌드를 했다. 그리고 드디어 10달러 플랜에서는 성공했다🎉 Nextjs 프로젝트를 빌드하기 위한 최소한의 스펙이었다 싶다. 하지만, 10달러는 최소한의 스펙이지 좋지는 않았다. 어차피 나만의 사이트니까 좀 더 투자를 하자 싶어 20달러짜리 서버 인스턴스를 만들었고, 여기에 현재 도메인을 붙여 블로그를 운영하고 있다!

§1) Prisma + Postgresql

처음에는 다른 사람이 만든 블로그와 기술 스택을 찾아봤는데, Prisma를 많이 사용하고 있었다. 다양한 경험을 하고 싶고, DB 사용의 편의성을 제공하기 때문에 도입하자! 싶었다.

또 개인적으로 블로그 글을 Public 깃허브에 남기고 싶지 않았다.
블로그 글 데이터는 나만이 접근할 수 있도록 하고 싶어, 서버에다가 DB를 설치하고 거기에 블로그 글을 저장하기로 결정했다. 하지만, 서버 사양 문제로 매번 서버를 생성하고 디비를 설치하고, 패스워드를 만들고, 데이터를 옮기는 것도 일이 되었다. 더군다나 디비 사용에 대한 (서버)비용적인 부분이 오로지 나의 몫이 되기 때문에 다시 한 번 좋은가? 생각을 했다.

또한, DB에는 Plain Text로 데이터가 저장되기 때문에, Markdown을 미리보기 하면서 작성할 수 없다는 매우매우 불편한 점이 있었다. 중간마다 저장하면서 작성한다 해도, 파일에다가 직접 작성하는 거랑은 차원이 다른 불편함이다..

결국 기술 스택을 변경하기로 맘 먹었다.

§2) [현재] MDX File

블로그를 잘 운영하기 위해서는 편의성은 매우 중요한 사항이다.
이를 위해 Prisma와 관련된 모듈들을 모두 삭제하고 MDX 파일을 작성하기로 결정했다. 그리고, 이러한 포스트글을 담는 메타데이터를 json 형태로도 따로 관리를 했다 (포스트, 메타데이터를 각각 관리해야 하기 때문에 개인적으로 맘에 안든다) 그래도 확실히 편의성이 많이 증가했고, 어느정도 만족할 수 있었다.

§앞으로는?

실제로 많은 사람들이 템플릿으로 쓰고 있는 Nextjs 프로젝트가 있는데, tailwind-nextjs-starter-blog , 코드를 흘깃흘깃 보니 세상에나 너무 잘 만드신 것 같다..

특히나 SEO는 Nextjs의 metadata만 설정한다고 되는 것이 아니라 들었기에, 이분의 경우 어떻게 만드셨다 보니 짜임새 있게 따로 파일로 만들어 관리하고, 또 메타데이터랑 관련한 유틸 함수를 만들어서 손쉽게 관리할 수 있도록 하고 있었다. SEO 에 관련한 것은 이분의 코드를 많이 참고해서 만들었다.

뿐만아니라 나와 같은 mdx 파일로 포스트를 만드는데, 포스트 메타데이터는 따로 없었다. 그리고 서버사이드에서 포스트를 Synchronous 하게 가져와서 편하게 사용하고 있었다. ContentLayer를 이용하여, 무언가를 하는데 이거는 아직 잘 모른다..

따라서 이 분의 프로젝트를 똑같은 기술 스택으로 클론해서 만들어볼까 한다. 글로벌하게 ⭐로 인정받은 프로젝트를 따라 만드는 것도 하나의 나의 실력을 올리는 데에 많은 도움이 될 것 같다. 또 다양한 기술과 개념을 접할 수 있을 것 같기도 하고, 내 블로그의 부족한 부분도 보완할 수 있을 것 같다. tailwind-nextjs-starter-blog

추가로 포스트를 노션으로도 관리하는 것도 좋은 생각인 것 같다. 관련한 많은 API와 자료도 있고, renderBlock 함수를 이용해서 컴포넌트 커스텀도 가능한 것 같은데 이 부분은 확실하지는 않다.

그리고 나만이 접근 할 수 있는 데이터가 된다. 디자인이나 성능은 이 분꺼가 좋아보였다. nextjs-notion-starter-kit 다만 Nextjs 12버전이라 기술 스택과 로직 위주로 분석해야 할 것 같다.

§TODO:

• 댓글 기능 추가
• 포스트 데이터 별도 관리