블로그 개발 일지 No.1-cover

블로그 개발 일지 No.1

나만의 블로그를 기획하고 개발해보자

Written by Given at2024.11.15

이런 회고록이나 개발일지는 문어체가 아닌 격식체로 작성하려고 합니다.
안지키고 있으면 댓글로 혼내주세요..

블로그 개발일지 No.1 - 2024-11-15

블로그 개발 이유

세상엔 정말 많은 블로그 플랫폼이 있습니다. 그럼에도 제가 자체적으로 블로그를 개발하려는 이유는 아래와 같습니다.

1. 직접 나만의 블로그를 만들고 싶어요

개발자들에게 기록은 필수적인 작업이라고 생각합니다. 그리고 많은 개발자들은 기록용 블로그 플랫폼을 사용하고 있습니다. 하지만 그런 플랫폼들은 너무 정적이거나 커스텀하기 쉽지 않고 어디까지나 제한이 있습니다. 그래서 나만의 블로그를 만들어 보고 싶었습니다.

2. 동기 부여를 받아버렸어요

개발 중 구글서치를 하다보면 사이트에서 느껴지는.. UI/UX적으로 뭔가 남다른 포스팅 사이트들이 있습니다. 그런 사이트 중 백이면 80은 자체 개발 블로그였습니다. 나머지 20은 티스토리. 동기부여 받은 사이트들은 이 블로그를 개발하는데 많은 영향을 주었습니다.

3. 실력을 업그레이드 하고 싶어요

사실 이전에도 블로그를 만들어 본적이 있습니다. 그러나 당시에는 CMS단에서 동적으로 데이터를 관리하고 노출하는 SSR 방식으로 개발하여 DB와 클라우드에 제한이 있었습니다. (금전적인...)

그래서 디자인도 성능도 업그레이드 하고 싶습니다.

블로그 개발 기술스택

1. Next.JS

Next.js

Next.jsReact 기반의 오픈 소스 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 기본적으로 지원하며, 서버와 클라이언트 사이의 다양한 렌더링 옵션을 제공합니다. Next.jsReact의 기능을 확장하여 개발자가 더 쉽게 성능이 뛰어난 웹 애플리케이션을 만들 수 있도록 도와줍니다.

사용 이유

  • SPASEO에 취약하지만 Next.JS를 사용하면 간단하게 보완할 수 있습니다.
  • Next.JSSSR(Server Side Rendering)뿐만 아니라 블로그 같은 정적 컨텐츠에 알맞은 SSG(Static Site Generation)를 지원합니다.
  • 자동 이미지 최적화!

React 19버젼부터 서버 컴포넌트가 적극적으로 적용된다고 알고있지만 Next 역시 14버젼에서 15로 업그레드가 되었습니다. 해당 프로젝트는 Next.JS 15.0.3 버젼을 사용합니다 (2024-11-15 기준)

SSG(Static Site Generation) 랜더링 방식은 빌드 시 정적 html을 만들기 때문에 서버 요청시 html을 생성하는 SSR(Server Side Rendering)보다 블로그 포스팅 같은 정적 컨텐츠를 다룰 때 효과적입니다.

2. 타입스크립트

typescript

TypeScriptJavaScript의 상위 **집합(superset)**으로, JavaScript에 정적 타입(static typing)과 객체 지향 프로그래밍 기능을 추가한 오픈 소스 프로그래밍 언어입니다. Microsoft가 개발했으며, JavaScript로 컴파일 되는 과정을 거쳐 브라우저와 Node.js에서 실행됩니다.

사용 이유

  • Typescript는 강력한 정적 타입을 지원하여 개발 시 생길 수 있는 오류를 최소화하고 개발 안정성을 높일 수 있습니다.
  • 타입 명시를 잘 활용한다면 유지보수 시 생길 수 있는 오류가 줄어 유지보수성에 좋습니다.
  • Typescript로 만들어진 VS code와 호환이 좋아 리터럴 타입, 객체 프로퍼티를 제시해 주는 등 생산성이 높아집니다.

구현할 기능

## ✨ UI/UX 기능 - [ ] 반응형 디자인 - [ ] theme 변경 - [ ] interaction 컴포넌트 - [ ] 슬라이드 기능 - [ ] toTop button ## 🔥 필수 기능 - [ ] `mdx` 파일 컨텐츠 렌더링 - [ ] 시리즈, 태그 기능 - [ ] 검색 기능 - [ ] `TOC` - [ ] 댓글 기능 - [ ] SEO 최적화 - [ ] open graph - [ ] rss
개발 하면서 추가 될 수 있습니다.

마무리

기획 스케치

간단한 기획 스케치...ㅎㅎ. 디자인은 저랑 안 맞는 것 같습니다.

다음엔 개발하는 과정을 기록하겠습니다.