devlog 소개

Gatsby.js + Typescript 기반 정적 개인 블로그 및 포트폴리오 사이트입니다.
현재는 Gatsby Cloud를 이용해 해당 도메인으로 배포 되어 있습니다.

버전 별 자세한 구현 내용은 Releases에서 확인하실 수 있습니다.

프로젝트 아키텍쳐 (현재)

프로젝트 아키텍쳐 (예정)

Gatsby Cloud 서비스 종료에 따라 home server로 마이그레이션 할 예정입니다.

프로젝트의 주요 관심사

공통사항

• 지속적인 성능 개선 (lighthouse report 기반)
• 나쁜 냄새가 나는 코드에 대한 리팩토링

코드 컨벤션

• google code style 준수

성능 최적화

• dynamic import
• gatsby image
• SSR 활용

SEO 개선

• 색인 생성
• gatsby-plugin-sitemap 사용
• google search console 연결

다양한 환경에서 일관성 있게 지원

• 멀티 브라우저 환경
• 모바일, 태블릿 환경

사용 기술 및 환경

Gatsby.js, TypeScript, Sass, Mdx, Utterances, Loadable, Prism-React-Renderer, React-Helmet

화면 설계 - 초기 개발 화면

화면 설계 - 피그마 디자인

화면 설계 - 현재 버전 화면 (2023-12-12)

블랙 버전

화이트 버전

블로그 내부

관련 블로그

개인 블로그를 개발한 이유
Gatsby에서 useSearchParam 커스텀 훅 만들기