- Published on
giscus 적용 하는법
- Authors
- 이름
- Samdasoo1076
- @Samdasoo1076
tailwind, Next.js 스타터 블로그에서 Giscus 적용하는 법
Comments.tsx
import { useState } from 'react'
import siteMetadata from '../data/siteMetadata'
import CommentsComponent from './CommentsComponent' // CommentsComponent의 올바른 경로를 사용하세요.
import { GiscusConfig } from '../path/to/Giscus' // GiscusConfig 타입을 가져옵니다
type CommentsProps = {
slug: string;
}
const Comments = ({ slug }: CommentsProps) => {
const [loadComments, setLoadComments] = useState(false);
return (
<>
{loadComments ? (
<CommentsComponent commentsConfig={siteMetadata.comments as unknown as GiscusConfig} slug={slug} />
) : (
<button onClick={() => setLoadComments(true)}>댓글 불러오기</button>
)}
</>
);
}
export default Comments
16번째 줄에서 as unknown as GiscusConfig을 붙여주었다.
뜻은 TypeScript에서 타입 캐스팅을 두 번 사용하여 타입을 강제로 지정하는 방법이다 이 프로젝트를 커밋 전 항상 yarn prettier --write . 을 진행 해야하는데 그 과정에서 Comments.tsx 파일이 형식이 틀어져 위 방법을 통해as unknown as GiscusConfig 타입을 강제 지정 시켜주었다.1
아래는 직접 적용 시킨 모습 ↓
아쉽게도 호스팅 중일때만 작동한다.2