Skip to content

min050410/TechBlog

Repository files navigation

image

devlog 소개

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

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

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

image

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

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

프로젝트의 주요 관심사

공통사항

  • 지속적인 성능 개선 (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

화면 설계 - 초기 개발 화면

image

화면 설계 - 피그마 디자인

image

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

블랙 버전 image

화이트 버전 image

블로그 내부 image

관련 블로그

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