Toris Blog 프로젝트 리뷰 - 나만의 기술 블로그 만들기

프로젝트 개요

프로젝트명: Toris Blog
기간: 2024.03
기술 스택: Next.js, TypeScript, Tailwind CSS, MDX, Vercel, GitHub Actions
목적: 개인 기술 블로그 구축 및 개발 지식 공유

Toris Blog는 제가 처음으로 Next.js를 사용해서 만든 개인 프로젝트입니다. 개발자로서 배운 것들을 정리하고 공유하기 위해 시작했고, 지금도 계속 개선하고 있는 프로젝트입니다.

프로젝트를 시작한 이유

개발을 시작하면서 "이걸 어떻게 정리하지?"라는 고민이 많았습니다. 노션에 정리하기도 했지만, 개발자다운 블로그를 만들고 싶었습니다. 그리고 무엇보다 "내가 만든 블로그"라는 것이 자랑스러웠습니다.

주요 기능 구현

1. 다크모드 지원

다크모드를 구현하는 것이 생각보다 재미있었습니다.

처음 접했을 때:

• "다크모드가 뭐지?"라는 생각부터 시작했습니다.
• CSS 변수를 활용하여 테마를 전환하는 개념이 신기했습니다.

구현 과정:

typescript복사
// 테마 전환 로직
const [theme, setTheme] = useState('light');

const toggleTheme = () => {
  const newTheme = theme === 'light' ? 'dark' : 'light';
  setTheme(newTheme);
  localStorage.setItem('theme', newTheme);
};

배운 점:

• CSS 변수를 활용하면 테마 전환이 쉬워집니다.
• 사용자 설정을 localStorage에 저장하면 다음 방문 시에도 유지됩니다.
• 시스템 테마를 감지하여 자동으로 설정할 수 있습니다.

2. 코드 하이라이팅

코드 블록에 문법 하이라이팅을 적용하는 것이 처음에는 어려웠습니다.

시도한 방법:

• 처음에는 highlight.js를 사용했습니다.
• 나중에는 shiki를 사용하여 더 나은 하이라이팅을 구현했습니다.

배운 점:

• 코드 하이라이팅 라이브러리를 선택하는 것도 중요합니다.
• 성능을 고려해야 합니다. 큰 코드 블록은 로딩이 느려질 수 있습니다.
• 다크모드와 라이트모드에 맞는 테마를 선택해야 합니다.

3. 카테고리/태그 필터

포스트를 카테고리나 태그로 필터링하는 기능을 구현했습니다.

어려웠던 점:

• URL 파라미터를 관리하는 것이 처음에는 어려웠습니다.
• 필터링 로직을 어떻게 구현해야 할지 고민이 많았습니다.

해결 방법:

• Next.js의 useRouter를 활용하여 URL 파라미터를 관리했습니다.
• 필터링 로직을 커스텀 훅으로 분리하여 재사용성을 높였습니다.

4. SEO 최적화

SEO 최적화는 처음 접하는 개념이었습니다.

처음에는:

• "SEO가 뭐지?"라는 생각부터 시작했습니다.
• 메타 태그가 왜 중요한지 이해하지 못했습니다.

배운 점:

• Open Graph 태그를 추가하면 소셜 미디어에서 예쁘게 공유됩니다.
• 구조화된 데이터(JSON-LD)를 추가하면 검색 엔진이 더 잘 이해합니다.
• 사이트맵을 생성하면 검색 엔진이 더 쉽게 크롤링할 수 있습니다.

구현:

typescript복사
// 메타데이터 생성
export async function generateMetadata({ params }) {
  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      images: [post.image]
    }
  };
}

5. 파일 기반 CMS

마크다운 파일을 직접 관리하는 방식으로 구현했습니다.

장점:

• GitHub에서 직접 관리할 수 있어서 편리합니다.
• 버전 관리가 쉽습니다.
• 별도의 데이터베이스가 필요 없습니다.

단점:

• 파일이 많아지면 관리가 어려워질 수 있습니다.
• 동적 콘텐츠 추가가 어렵습니다.

어려웠던 점

1. Next.js 학습 곡선

Next.js를 처음 사용했을 때는 정말 어려웠습니다.

처음에는:

• "이게 왜 이렇게 복잡하지?"라는 생각이 들었습니다.
• 서버 컴포넌트와 클라이언트 컴포넌트의 차이를 이해하는 것이 어려웠습니다.
• 라우팅 시스템이 처음에는 헷갈렸습니다.

하지만 배운 점:

• Next.js의 파일 기반 라우팅이 정말 편리합니다.
• 서버 사이드 렌더링의 장점을 직접 경험할 수 있었습니다.
• Image 컴포넌트가 자동으로 이미지를 최적화해주는 것이 신기했습니다.

2. 타입스크립트

TypeScript를 처음 사용했을 때는 타입을 정의하는 것이 번거롭다고 생각했습니다.

처음에는:

typescript복사
// 이렇게 작성하고 싶었습니다
const posts = getPosts(); // 타입이 뭔지 모르겠다

하지만 배운 점:

typescript복사
// 타입을 명확히 정의하면
interface Post {
  title: string;
  content: string;
  date: string;
}

const posts: Post[] = getPosts(); // 이제 posts가 뭔지 명확하다!

• 타입이 있으면 실수를 미리 방지할 수 있습니다.
• IDE의 자동완성이 훨씬 정확해집니다.
• 코드를 읽을 때도 이해하기 쉬워집니다.

3. 배포

처음에는 배포가 정말 어려웠습니다.

시도한 것들:

• Vercel을 사용하여 배포했습니다.
• GitHub Actions를 설정하여 자동 배포를 구현했습니다.

배운 점:

• Vercel이 정말 편리합니다. GitHub에 푸시하면 자동으로 배포됩니다.
• 환경 변수 설정이 중요합니다.
• 빌드 에러를 해결하는 것이 생각보다 시간이 걸립니다.

개선하고 싶은 점

1. 성능 최적화

지금 다시 보면 성능 최적화가 부족한 부분이 많습니다.

• 이미지 최적화를 더 철저히 해야 합니다.
• 코드 스플리팅을 더 적극적으로 활용해야 합니다.
• 불필요한 리렌더링을 줄여야 합니다.

2. 테스트

테스트 코드를 작성하지 않았습니다. 지금은 테스트의 중요성을 알지만, 그때는 그렇게 생각하지 못했습니다.

3. 접근성

접근성에 대한 고려가 부족했습니다. 키보드 네비게션이나 스크린 리더 지원 등을 제대로 구현하지 못했습니다.

총평

Toris Blog는 제가 처음으로 완성한 개인 프로젝트입니다. 처음에는 "이게 정말 블로그가 될까?"라는 생각도 했지만, 지금은 정말 자랑스러운 프로젝트입니다.

Next.js를 처음 사용하면서 어려운 점도 많았지만, 그만큼 배운 것도 많았습니다. 특히 서버 사이드 렌더링과 정적 사이트 생성의 차이를 이해할 수 있었고, SEO 최적화에 대한 이해도 높일 수 있었습니다.

지금도 계속 개선하고 있는 프로젝트이고, 앞으로도 더 많은 기능을 추가하고 싶습니다. 특히 댓글 시스템이나 검색 기능 등을 추가하고 싶습니다.

링크

• GitHub 저장소
• 블로그 사이트