블로그 소개

<aside> <img src="https://prod-files-secure.s3.us-west-2.amazonaws.com/2b0b88ce-8e44-4496-b112-53ffb460dc30/a9d955ff-4870-4464-8184-6327502ee69d/logo.png" alt="https://prod-files-secure.s3.us-west-2.amazonaws.com/2b0b88ce-8e44-4496-b112-53ffb460dc30/a9d955ff-4870-4464-8184-6327502ee69d/logo.png" width="40px" /> 개발 글 만이 아닌 다양한 주제의 글을 업로드 하는 개인 블로그입니다.

이 블로그의 주된 목적은 제가 공부하며 겪는 다양한 경험과 정보를 공유하는 것 입니다. 특히 새로운 기술을 배우거나 문제를 해결하는 과정에서 "아!" 하는 순간이나 다른 사람에게도 설명하고 싶을 때, 그 주제에 대해 정리해서 기록합니다.

바닐라 익스트랙트와 Next.js앱 라우터에 대한 학습을 목적으로 진행한 프로젝트이기도 합니다.

</aside>

개인 블로그 개발 전담

개발 환경 및 아키텍처 설정

• 프로젝트 초기에 Next.js와 TypeScript를 기반으로 안정적인 개발 환경을 구축했습니다. TypeScript의 정적 타이핑은 코드의 안정성을 높이는 데 크게 기여했습니다.
• Contentlayer를 사용하여 마크다운 및 MDX 기반의 콘텐츠를 쉽게 관리하고, 빠른 빌드 시간과 개선된 개발 경험을 제공했습니다.

반응형 디자인을 적용하여 다양한 디바이스에서도 일관된 사용자 경험을 제공했습니다.

웹접근성을 향상시키기 위해 (<header>에 본문으로 바로가는 링크 등) 노력했습니다.

블로그 콘텐츠 관리

• Contentlayer를 이용하여 블로그 콘텐츠를 관리하고, 검색 엔진 최적화(SEO)를 위해 정적 사이트 생성(SSG) 기능을 적극 활용했습니다.
• MDX를 통해 다양한 커스텀 컴포넌트를 블로그 글에 통합했습니다.

디자인 시스템 및 UI 구축

프로젝트에서는 효율적이고 유지 보수가 용이한 스타일링 시스템을 구축하는 것을 목표로 삼았습니다. 이를 위해 **vanilla-extract**를 사용하여 **CSS-in-JS**의 유연성과 **CSS**의 성능을 결합한 스타일링 방식을 채택했습니다. 또한, 반응형 디자인을 적용하여 다양한 디바이스에서 일관된 사용자 경험을 제공했습니다.

vanilla-extract 사용 중 Window 환경에서 바로 적용되지 않는 이슈도 있었습니다. 이 문제는 WSL 환경에서 사용하여 우회적으로 해결했습니다.

사용한 기술 스택

✔️기술 선정 이유

NextJS

• 프로젝트에 Next.js를 선택한 주된 이유는 검색 엔진 최적화(SEO)와 파일 기반 라우팅 시스템이 프로젝트의 구조를 쉽고 명확하게 만들어 준다고 생각했습니다. Next.js의 SSG 기능을 활용해서 콘텐츠가 검색 엔진에 잘 노출되도록 했습니다.