나만 없어 블로그
🙃 들어가며
‘나만의 블로그를 만들고 싶다’라는 열망은, 나에게 오랫동안 내 마음속에 있었다. 여러 플랫폼을 거치면서 블로그를 운영해왔고, 그래서 지금까지 내 블로그의 변천사와 제일 최근에 새롭게 만든 블로그의 제작기를 한 번 기록해보려고 한다.
나에게 블로그는 복기 수단이다. 바쁘게 흘러가는 일상 속에서 블로그에 글을 쓰며 나의 활동, 배움, 생각을 정리하는 시간을 가질 수 있었다. 요즘 흔히 개발 블로그 없는 개발자가 없다고는 하지만, 취업 목적보다는 정말 내가 꿈꾸는 개발자가 되기 위한, 자아성찰 도구가 블로그라고 생각했다. 다만 이상과 달리 꾸준한 운영에는 실패했다. 하하하.
🙃 블로그 플랫폼 변천사
첫 번째 시도. 티스토리
가장 처음은 티스토리였다. 조회수 통계 등 다양한 기능을 자체적으로 제공해 글쓰기에만 집중할 수 있다는 장점이 있었다.
하지만 ‘나만의’ 무언가를 티스토리 내에서 구현하기에는 한계가 있다고 느꼈다.
두 번째 시도. Next.js + Github API
그래서 다음으로 시도한 것이 바로 내가 직접 블로그를 만드는 것이었다. Next.js + Github API를 사용하여 블로그를 만들었다. 동작 방식은 쉽게 말해서 다음과 같다. (https://docs.github.com/ko/rest?apiVersion=2022-11-28)
// 출처 : https://github.com/gitdagray/next-js-course/blob/main/next12/lib/posts.ts
/**
* GitHub 저장소에서 MDX 형식의 블로그 포스트를 가져와 파싱하는 함수
*
* @param fileName - 가져올 MDX 파일의 이름
* @returns 파싱된 블로그 포스트 객체 또는 undefined
*/
export async function getPostByName(fileName: string): Promise<BlogPost | undefined> {
// GitHub Raw Content URL로 MDX 파일 요청
const res = await fetch(`https://raw.githubusercontent.com/gitdagray/test-blogposts/main/${fileName}`, {
headers: {
Accept: 'application/vnd.github+json', // GitHub API 응답 형식 지정
Authorization: `Bearer ${process.env.GITHUB_TOKEN}`, // GitHub 인증 토큰
'X-GitHub-Api-Version': '2022-11-28', // GitHub API 버전 명시
}
})
// 요청 실패시 undefined 반환
if (!res.ok) return undefined
// 응답 텍스트(MDX 내용) 추출
const rawMDX = await res.text()
// 파일이 없는 경우 undefined 반환
if (rawMDX === '404: Not Found') return undefined
// MDX 컨텐츠 파싱
const { frontmatter, content } = await compileMDX<{ title: string, date: string, tags: string[] }>({
source: rawMDX,
components: {
Video, // MDX 내 사용될 커스텀 비디오 컴포넌트
CustomImage, // MDX 내 사용될 커스텀 이미지 컴포넌트
},
options: {
parseFrontmatter: true, // frontmatter 파싱 활성화
mdxOptions: {
rehypePlugins: [
rehypeHighlight, // 코드 하이라이팅
rehypeSlug, // 헤딩에 id 추가
[rehypeAutolinkHeadings, { // 헤딩에 자동 링크 추가
behavior: 'wrap'
}],
],
},
}
})
// 파일명에서 확장자 제거하여 포스트 ID 생성
const id = fileName.replace(/\.mdx$/, '')
// 블로그 포스트 객체 생성
const blogPostObj: BlogPost = {
meta: {
id,
title: frontmatter.title,
date: frontmatter.date,
tags: frontmatter.tags
},
content
}
return blogPostObj
}
하지만 블로그를 만들고 나니, 문제가 있었다.
문제1. 디자인이 마음에 들지 않음
내 마음에 들지 않았다. 분명 내가 디자인하고 만든 블로그였지만, 마음에 들지 않으니 관심이 떨어지고 애정도 마찬가지로 떨어졌다.
문제2. 부족한 컴퓨터 저장 공간
현재 내 노트북은 저장 공간이 부족해서 항상 파일을 지우고 다시 다운로드하는 과정을 반복해야했다. 따라서 모든 블로그 글을 내 노트북에 저장하고 있는 것은 부담스러운 일이었다.
세 번째 시도. 풀스택
그래서 내가 생각한 것은 풀스택으로 블로그를 만드는 것이었다.
하지만 이 시도의 경우, 생각만 하였지 실제 실천으로까지 이어지지는 못 했다.
이 흔적은 현재 turborepo로 구현한 모노레포에 apps > frontend 폴더가 잘 보여주고 있다.
네 번째 시도. Next.js + NotionPresso
그렇게 여러 시도를 하다가 블로그의 존재에 대해 잊고 지냈다. 그러다가 새로운 변화가 있었다.
먼저 SSD를 선물받아서 이제 저장 공간에 대한 걱정이 없게 되었다.
다음으로 NotionPresso라는 라이브러리를 통해 손쉽게 노션 글을 내 블로그에 가져올 수 있게 된 것이었다. 처음에는 에디터까지 내가 구현하는 것을 생각하였으나, 이는 쉽지 않은 일이었다. 그러면 내가 어디서 글을 편하게 쓰는지 생각해보았다. 가장 친숙한 것이 노션이었다. 그래서 노션에 쓴 글을 손 쉽게 가져다가 쓸 수 있게 하는 NotionPresso를 사용하게 되었다. (노션 프레소 튜토리얼)
🙃 새롭게 블로그를 단장하면서 겪은 경험들
이커머스 같은 블로그
최근에 모든 사업은 결국 물건을 사고 파는 이커머스에 뿌리를 두고 있다는 생각에, 이커머스에 대한 관심도 많은 상태였다. 그런데 이 이커머스를 내가 직접 경험하려면, 쇼핑몰을 운영할 수도 없고 어려움이 있었다. 그래서 이 이커머스를 내 블로그에 녹여내 보려고 했다. (shopping-backend) 블로그 하나의 이커머스로 보고, 내 글을 상품으로 생각했다. 그래서 어떤 식으로 글을 노출하면 조회수가 많았는지와 같은 데이터를 수집하고 싶었다.
그래서 만들어진 것이 바로 이커머스 같은 블로그였다. 현재는 하드 코딩으로 홈 화면이 구현되어 있지만, 향후에는 조회수를 비롯한 데이터를 통해 홈 화면에 노출한 컨텐츠를 정할 계획이다.
API route
개발하면서 가장 어려웠던 부분은 노션 글 데이터인 json 파일을 어떻게 불러오는 것인가였다.
처음에는 util 함수로 json 파일을 읽어오게 하려고 했다. 하지만 Next.js에서 fs 모듈을 찾을 수 없다는 이슈가 발생했다.
해당 이슈의 원인에 대해 살펴보면 Next.js 13+ 버전에서는 페이지가 기본적으로 클라이언트 컴포넌트가 아닌 서버 컴포넌트로 동작한다. 서버 사이드 모듈인 'fs'를 클라이언트에서 직접 사용하려고 하면 빌드 에러가 발생하게 되는 것이다. 그래서 초기 코드인 utils/load-posts.ts는 클라이언트 번들에 포함되어 빌드되려고 시도하기 때문에 위와 같은 에러가 발생했다.
그래서 해결한 방법은 바로 API route였다. API route는 항상 서버에서만 실행된다. 따라서 'fs' 같은 서버 사이드 모듈을 안전하게 사용할 수 있다.
그리고 데이터를 불러오는 방식 역시 til과 post의 차이 때문에 다르게 구현해야했다. til의 경우 Date 객체 변환 등 클라이언트 측 데이터 가공 필요한 반면, post는 서버에서 받아온 데이터를 그대로 표시하면 되었다.
// TilPage.tsx
// 클라이언트 컴포넌트에서 useEffect로 데이터 페칭
'use client'; // 클라이언트 컴포넌트 선언
useEffect(() => {
fetch(`${baseUrl}/api/til`)
.then(res => res.json())
.then(data => {
const entriesWithDates = data.entries.map((entry: any) => ({
...entry,
date: new Date(entry.date),
}));
setTilEntries(entriesWithDates);
});
}, []);// PostPage.tsx
// 서버 컴포넌트에서 직접 데이터 페칭
async function getPosts(): Promise<Post[]> {
const baseUrl = process.env.NODE_ENV === 'production'
? 'https://chapdo.vercel.app'
: 'http://localhost:3000';
const res = await fetch(`${baseUrl}/api/posts`, {
cache: 'force-cache',
next: { revalidate: 60 } // 60초마다 재검증
});
// ...
}향후 계획
- •
SEO 최적화 구현
- •
세밀한 구글 애널리틱스 추적 설정
- ◦
페이지별 추적
- ◦
버튼 클릭 등 사용자 행동 분석
현재 블로그 구현만 완성된 상태이지, SEO나 트랙킹하는 것은 거의 신경을 못 쓴 상태이다. 그래서 구글 애널리틱스의 경우에도 각 페이지와 버튼 등 세밀한게 티켓을 심어 추적하고자 한다.
또한 SEO도 robot.ts, sitemap.ts를 구현은 해두었으나 아직 진행 중인 상태이다.
그래서 앞으로 계속 블로그를 발전시켜 나가면서, 블로그도 열심히 운영해 볼 계획이다.