real-bird / my-ground

📚 포트폴리오 및 블로그

(개인 프로젝트) My Ground (2022.07 ~ 2022.08)

개요

• 개인 블로깅 웹사이트

배포

https://real-bird.vercel.app

역할

• 프론트엔드
• Vercel 배포

사용 스택

• TypeScript, Next.js, TailwindCSS, Prisma, SWR, PlanetScale

주요 기능

---

• 목차
  1. Tailwind CSS를 이용한 UI 구현
  2. Table of Contents 구현
  3. Serverless 환경에서 블로그 구현

Tailwind CSS를 이용한 UI 구현

전반적인 UI 구현

• 클래스명으로 inline 스타일링할 수 있고 다루기 쉬워 Tailwind CSS를 선택해 전반적인 UI를 구현했습니다.

커스텀 클래스

• 제공되는 클래스를 사용하되 커스텀이 필요한 부분은 config에 추가하여 사용했습니다. 주로 애니메이션 효과를 만들었습니다.

반응형 웹

• 모바일을 기준으로 두고 태블릿은 md, PC는 xl prefix를 사용해 반응형 웹을 구현했습니다.

React Select를 클론하여 Tailwind CSS로 구현

• input 태그 안에서 여러 개의 태그가 나열되는 부분이 부러워 React Select의 스타일을 클론하여 Tailwind CSS로 구현했습니다.

Table of Contents 구현

Intersection Observer API를 사용

• Intersection Observer를 통해 파싱된 마크업 태그 중 heading 태그를 감지하고 하이라이트를 통해 현재 어느 heading을 보고 있는지 파악할 수 있습니다.

Serverless 환경에서 블로그 구현

PlanetScale과 Prisma를 이용해 Serverless 환경 구축

• 인터넷 강의(노마드 코더 - 캐럿마켓 클론 코딩)에서 배운 내용을 바탕으로, 사용한 환경을 재사용하여 블로그 환경을 구축했습니다.

my-ground's Issues

블로그 상세 페이지에서 ToC 미동작

• 게시물마다 최초 렌더링 시 observer가 동작하지 않아 ToC에 하이라이팅하지 않음
• CSR 페이지는 dynamic import로 해결
• SSG 페이지는 해결 중

배포 후 블로그 상세 페이지 이동 시 깜빡임 현상 발생

• attempted to hard navigate to the same URL 오류 발생
• getStaticPaths의 fallback을 false로 바꾸면서 상위에 있는 404 푸시 코드를 원인으로 추정
  • 아니었음