12강. 웹페이지에 댓글 기능 삽입(DISQUS)

안녕하세요! 오늘은 2020년 8월 2알 입니다. 7월 말 까지 중요한 일들이 있어서 잦은 야근으로 인해 한 동안 글을 적지 못했습니다. 일을 잘 마쳤으니 이제 웹 개발 공부도 열심히 할 예정입니다 ㅎㅎ 오늘 알려드릴 내용은 웹페이지에 댓글기능을 넣는 방법에 대해서 설명하도록 하겠습니다. 댓글 기능을 우리같은 초보가 구현하기에는 실질적으로 아직 무리가 있기 때문에 DISQUS에서 그 힘을 빌려보도록 하겠습니다. 먼저 DISQUS홈페이지를 가주세요

 

https://blog.disqus.com/

Disqus Blog

 

위의 사이트에 접속 후 사이트 가입까지 해주시기 바랍니다. 그 정도는 하실 수 있을거라 생각하니 생략하겠습니다~

 

로그인까지 마치셨다면 노란색으로 칠한 부분을 클릭해줍니다.

 

그렇다면 이 화면이 나올 것이고 아래 버튼을 눌러주시면 됩니다.

 

그렇다면 이 화면이 나올것이고 여러분의 사이트의 이름과 종류에 맞춰서 웹사이트 이름이나 카테고리를 선정해주시고 Create Site를 눌러주세요.

 

그럼 여러분께 돈을 요구하는 여러 개의 항목이 있지만 우리는 연습용이기 때문에 Basic의 Subscribe를 눌러줍니다.

 

그럼 다음과 같은 화면이 보일 것이고 여러분은 맨 아래 컴퓨터 아이콘 버튼을 눌러주시면 됩니다.

 

그렇다면 다음과 같이 소스코드가 있는 화면이 나올것입니다. 우리는 노란 1번의 소스들을 전부 복사해서 우리 Atom 에디터에 복사를 해줄 겁니다. 자, 1번 항목 안에 있는 모든 소스코드를 복사해주세요

 

저는 하단 부분에 따로 <p>~</p>를 만들어줘서 ~<<이 부분에 소스를 복사했어요. ctrl+s로 저장을 하고 홈페이지에서 열어주세요. 

 

그럼 하단에 We were unable to load Disqus가 뜰 거에요. 이유는 현재 우리가 만든 웹사이트는 주소가 파일로 시작하기 때문입니다. 그래서 웹서버를 이용해서 주소를 열어야합니다. 저는 10강에서 제가 만들어놓은 서버를 통해서 접속을 해보겠습니다. 

 

https://gongdae-bro.github.io/pringles/

pringles

 

그럼 다음과 같이 아래에 댓글 기능이 활성화 된 것을 확인할 수 있습니다. 자 오늘은 웹서버를 이용해서 댓글 기능 추가방법에 대해 설명해보았습니다. 웹서버 등록방법은 10강에서 확인 하실 수 있습니다. 댓글 기능을 지원해주는 사이트는 DISQUS입니다. 도움이 되셨다면 구독하기 버튼 부탁드리겠습니다~