Project

Woongsnote

개발 관련 학습한 지식 공유를 위한 기술 블로그

2024. 03. 113분 읽기

목차

Woongsnote

개발 배경

개발 관련 학습한 지식들과 구현한 프로젝트들을 공유하기 위한 기술 블로그를 구현하고자 함.
이미 나와있는 플랫폼을 사용하는 방법도 있지만, 직접 기획부터 구현 및 배포를 진행함.

기술 스택

언어: TypeScript
스타일: TailwindCSS
프레임워크: Astro
배포: Vercel

주요 기능

Tailwind CSS를 활용한 반응형 UI 구현.
SEO 적용.
Light / Dark Mode 지원.
Giscus를 활용한 댓글 기능 지원.

패키지 버전 변경

프레임워크 변경 및 프레임워크의 버전 업데이트를 반영해서 아래와 같이 패키지 버전 변경

0: Next.js 12와 ContentLayer 사용
1.0: Next.jS 13으로 프레임워크 업데이트
2.0: Astro 3.0으로 프레임워크 변경
3.0: Astro 4.0으로 프레임워크 업데이트

구현 결과

사이트 링크

트러블 슈팅

OG Image 생성 in Next.js

문제: 게시글의 섬네일 이미지 400 Error 발생
원인: next.config.js에 이미지의 주소 누락
해결: 이미지 주소 추가

remark-GFM inTable issue

문제: remark-gfm inTable issue로 빌드 실패
원인: Contentlayer와의 호환성
해결: 3버전으로 다운그레이드.

package dependency 충돌

문제: Next.js와 Contentlayer 간의 package dependency 충돌
원인: Contentlayer issue
해결: Astro로 프레임워크 migration.

다크 모드 구현

문제: migration 하는 과정에서, next-themes 사용 불가
원인: Next.js 프레임워크용 패키지
해결: 라이브러리를 사용하지 않고 js로 직접 구현

프로젝트 배포 실패

문제: 프레임워크 변경 후, Vercel에서 배포 실패
원인: 기존 Next.js로 배포했을 때 캐싱된 데이터 존재
해결: 캐시를 제거하고 다시 배포

참고 자료