[React,Next.js] Disqus를 이용하여 댓글 기능 구현

소개

웹사이트 개발과 사용자 참여의 동적인 세계에서 Disqus와 같은 도구는 상호 작용을 촉진하는 데 중요한 역할을 합니다. Disqus-react와 함께 Disqus를 설정하는 프로세스에 대해 알아봅시다. 여러분의 웹사이트에 견고한 댓글 시스템을 확보하세요.

Disqus

 

Disqus?

Disqus(디스커스)는 웹사이트에 댓글 기능을 추가하는 플랫폼 중 하나입니다. 이를 통해 웹사이트 소유자들은 간단히 Disqus를 통합하여 사용자들과 상호작용할 수 있습니다. Disqus는 사용자가 웹사이트에서 댓글을 작성하고 공유하며, 다른 사용자들과 의견을 나눌 수 있는 편리한 방법을 제공합니다.

Disqus를 사용하면 사용자들은 소셜 미디어 계정을 통해 로그인하여 댓글을 남길 수 있고, 댓글을 추적하고 관리할 수 있습니다. 또한, 댓글에 대한 알림을 받거나 특정 사용자를 차단하는 등의 기능도 제공됩니다.

이 플랫폼은 웹사이트 소유자들이 웹사이트 내에서 커뮤니티를 형성하고 유지하는 데 도움이 되는 도구를 제공하여 사용자들과의 상호작용을 강화합니다.

 

Disqus-react 이해하기

Disqus-react는 Disqus를 보다 편리하게 설치를 도와주는 리액트 NPM 라이브러리입니다.

 

Disqus-react 설정 전 요구 사항

설치 과정에 들어가기 전에 필요한 도구와 소프트웨어를 확보하세요. Disqus 계정을 만들어서 웹사이트 상호 작용을 향상시킬 수 있는 다양한 기능을 활용하세요.

 

Disqus 설치방법

step 1

1. Disqus를 가입하여 오른쪽 disqus를 내 사이트에 설치하고 싶다고 클릭하세요.

step 2

2. 사이트 이름을 입력하고, 사이트 카테고리를 선택해주세요. 해당 사이트 이름은 disqus 고유 URL 생성하게 됩니다.

step 3

3. 요금제를 선택해주세요. Basic은 무료 요금제 입니다.

 

step 4

4. 관련 Tool을 선택해주세요. 보통 React.js나 Next.js는 리스트에 없으니 그냥 하단에 수동으로 설치한다고 클릭해주세요.

step 5

5. 웹사이트 이름 및 URL, 언어를 선택해주세요.

Disqus-react 설정 단계별 안내

A. 웹사이트에 Disqus-react 설치

Disqus-react를 웹사이트에 원활하게 통합하기 위해 시작하세요. 이 단계별 안내서는 번거로운 설치 과정을 원활하게 진행합니다.

npm install --save disqus-react

yarn add disqus-react

 

B. 최적의 성능을 위한 Disqus 설정 구성

Disqus-react의 모든 기능을 활용하려면 웹사이트의 목표에 맞게 설정을 구성하세요. 모더레이션 컨트롤에서 사용자 알림까지, 플랫폼을 여러분의 요구에 맞게 맞추세요.

import { DiscussionEmbed } from 'disqus-react';

<DiscussionEmbed
    shortname='example'
    config={
        {
            url: this.props.article.url,
            identifier: this.props.article.id,
            title: this.props.article.title,
            language: 'zh_TW' //e.g. for Traditional Chinese (Taiwan)	
        }
    }
/>

 

C. Disqus-react 인터페이스를 웹사이트의 미적인 요소와 일치하도록 사용자 정의

일관된 외관을 유지하면서 Disqus-react를 웹사이트 디자인에 맞게 사용자 정의하세요. 색상 구성부터 글꼴 선택까지, 브랜드의 연장으로 만드세요.

// Next.js, useInView and language option
// identifier - slug url from parent component, title - blog title name from parent component


import { DiscussionEmbed } from 'disqus-react';
import { useRouter } from 'next/router';
import React from 'react';
import { useInView } from 'react-intersection-observer';

interface ICommentPprops {
    identifier: string;
    title: string;
}

const Comment = ({ identifier, title }: ICommentPprops) => {
    const router = useRouter();
    const { ref, inView } = useInView({
        /* Optional options */
        triggerOnce: true,
        fallbackInView: true,
    });

    return (
        <div className="pb-8" ref={ref}>
            {inView ? (
                <DiscussionEmbed
                    shortname="https-koreangermanium-com" // write in discuss as a Shortname
                    config={{
                        url: process.env.NEXT_PUBLIC_SITE_URL,
                        identifier: identifier,
                        title: title,
                        language: router.locale,
                    }}
                />
            ) : (
                ''
            )}
        </div>
    );
};

export default Comment;

 

웹사이트 소유자를 위한 Disqus-react의 이점

A. 향상된 사용자 참여 및 상호 작용

Disqus-react는 웹사이트에서 댓글 기능을 구현하게 하여 웹사이트를 보다 상호작용적으로 만들 수 있습니다.

 

B. 무료로 댓글 기능 구현 및 콘텐츠 풍부화

무엇보다도 Disqus는 무료로 사용가능합니다(Basic). 블로그에 댓글 기능을 활성화하여 구글 SEO에 도움을 줄 수 있습니다. 

disqus 댓글 예시

 

결론

종합적으로, Disqus-react를 Disqus와 함께 설정하면 어떤 웹사이트 소유자에게나 혁신적인 단계가 됩니다. 사용자 참여의 향상부터 고급 사용자 정의 옵션까지, Disqus-react는 웹사이트에서 의미 있는 상호 작용을 촉진하는 종합적인 솔루션을 제공합니다.

 

자주 묻는 질문

1. Disqus-react는 모든 웹사이트 플랫폼과 호환되나요?
   네, Disqus-react는 다양한 웹사이트 플랫폼과 호환되도록 설계되었으며 사용자에게 유연성을 제공합니다.
2. Disqus-react의 외관을 내 웹사이트 브랜딩에 맞게 사용자 정의할 수 있나요?
   물론입니다! Disqus-react는 브랜드에 맞게 외관을 사용자 정의할 수 있는 다양한 옵션을 제공합니다.
3. Disqus-react 사용에 추가 비용이 있나요?
   기본 기능은 일반적으로 무료이지만 일부 고급 기능에는 구독 요금이 발생할 수 있습니다. Disqus 웹사이트에서 가격 정보를 확인하세요.
4. Disqus-react가 제공하는 분석은 어떤 종류인가요?
   Disqus-react는 사용자 참여, 인기 있는 주제 및 기타 통찰력에 대한 분석을 제공하여 콘텐츠 전략을 개선하는 데 도움을 줍니다.
5. 기술적 지식이 제한된 사용자도 Disqus-react를 설치하는 데 어려움이 있나요?
   전혀 그렇지 않습니다. 설치 과정은 사용자 친화적으로 설계되었으며 Disqus는 지원을 위한 자세한 가이드를 제공합니다.