블로그 개선하기

블로그를 개선하다

블로그를 만들고 나서 몇 가지 개선을 했습니다.

• Next.js 빌드 오류를 해결.
• 포스트 사이드바 추가

귀찮은 작업들이 이어졌습니다만, 블로그가 예뻐졌으니 만족합니다.

Next.js 빌드 오류 해결

린터는 정상적으로 작동했지만, 빌드가 되지 않는 오류가 있었습니다.
타입 체킹에서 오류가 발생했는데, 이는 포스트 생성 시에 PageProps라는 Next.js의 타입을 사용했기 때문입니다.

PageProps는 Next.js의 페이지 컴포넌트에서 사용되는 타입으로, 페이지가 렌더링될 때 필요한 props를 정의합니다.
이게 일반적인 패러미터인 줄 알았으나, Promise로 감싸져서 왔기 때문에, 계속해서 타입 오류가 발생했습니다.

다음과 같이 인터페이스를 정의하고 await를 사용하여 Promise를 풀어주니 해결되었습니다.

type PageProps = {
  params: Promise<{
    slug: string;
  }>;
};
 
// Some code
 
const { slug } = await props.params;

이제는 빌드가 정상적으로 완료됩니다.

포스트 사이드바 추가

사이드바를 추가하여 포스트의 내용을 쉽게 탐색할 수 있도록 했습니다.
사이드바는 포스트의 제목과 목차를 보여주며, 사용자가 원하는 부분으로 쉽게 이동할 수 있도록 도와줍니다.

이를 위해 React의 useState와 useEffect 훅을 사용하고자 했으나, 서버 사이드 렌더링을 하는 Next.js에서는 클라이언트 사이드에서만 작동하는 훅을 사용할 수 없었습니다.

결국 따로 스크립팅을 하여 마크다운으로부터 렌더링된 HTML로부터 제목에 해당하는 h1, h2, h3 태그를 찾아내어 사이드바를 구성했습니다.

const headingElements = Array.from(
    contentElement.querySelectorAll<HTMLHeadingElement>('h1, h2, h3')
);

이제는 포스트를 읽을 때 사이드바를 통해 쉽게 탐색할 수 있습니다.

결론

블로그를 개선하는 과정에서 Next.js의 타입 시스템과 사이드바 구현에 대한 많은 것을 배웠습니다.
그리고 생각보다 아직까지 검색이 많이 유용하다는 것도...

앞으로도 블로그를 계속해서 개선해 나갈 예정입니다.