개발 배경
-
개발 관련 학습한 지식들과 구현한 프로젝트들을 공유하기 위한 기술 블로그를 구현하고자 함.
-
이미 나와있는 플랫폼을 사용하는 방법도 있지만, 직접 기획부터 구현 및 배포를 진행함.
기술 스택
- 언어:
TypeScript - 스타일:
TailwindCSS - 프레임워크:
Astro - 배포:
Vercel
주요 기능
Tailwind CSS를 활용한 반응형 UI 구현.SEO적용.Light/DarkMode 지원.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로 배포했을 때 캐싱된 데이터 존재
- 해결: 캐시를 제거하고 다시 배포