나의 웹페이지에 댓글 기능을 넣어보자
혼자 공부하고 배운것을 정리하다보니
편의상 말투가 격식없음을 미리 알려드립니다.
이번에는 나의 웹사이트에 댓글 넣는 기능을 배워봤다.
강좌를 해주시는 이고잉님 말씀처럼 누군가는 이 기능을 쉽게 사용하게 만들기 위해서
삶을 갈아넣었을지도 모른다.
나는 단 몇줄의 코드로 이렇게 쉽게 저작권문제없이 사용하고 있지만
이 기능을 만들기까지 얼마나 많은 시간과 사람들의 노력이 들어갔을지 감을 잡을 수 조차 없다.
본론으로 들어가서
웹페이지를 만들고 그곳에 글을쓰고 목차를 만들고 사진을 넣는 것 까지는 성공했다.
그리고 이번에는 댓글을 넣어보자
댓글을 넣기위해서는 우선 여러 사이트중에 댓글기능을 넣게 도와주는 사이트에 접속해야한다.
나는 디스커스라는 사이트를 이용했다
구글에 들어가서 디스커스를 검색하고 홈페이지로 들어가자
이렇게 사이트에 들어오면 우측 상단에 어드민이라는 것을 클릭하면된다.
아마 처음 접속하면 영어로 admin이라는 것이 보이지 않을텐데
회원가입을 하지 않아서 그렇다.
회원가입은 어렵지않고 간단하게 1분이면 할 수 있다
별다른 어려움없이 로그인까지 성공했다면
저기 보이는 어드민을 클릭해주고
저기보이는 사람을 클릭해서 인스톨 온 사이트를 클릭해준다.
그러면 이렇게 알록달록한 원형이 여러가지 나오게 되는데
일단 복잡한건 패스하고 아래로 쭉 내리게 되면
이렇게 생긴 것으 볼 수 있다
클릭해준다
그러면 엄청나게 복잡해보이는 것들이 나오게 되는데
우리는 저기에 관심을 두지 않아도 된다.
유튜브영상처럼 보이는 것 바로 아래에 익숙해보이는 아주 어려운 코드가 여러줄 보일 것이다.
그걸 그대로 복사해주면된다.
이런식으로 복사해서 컨트롤 c 를 눌러줘도 되고 우클릭해서 복사를 해줘도 되고 편하게 복사해준 후에
본인이 만들었던 웹페이지 코드에 넣어주면 되는데
나같은 경우는 예시로 만들었던 웹페이지 메인에는
이런식으로 링크를 걸어두었는데 국기를 누르면
국기의 정의가 나오고
한국의 국기를 누르면 한국 국기의 사진이 나오고
각 나라 별로 클릭하면 나라별 국기가 나오도록 만들어봤다.
그래서 각 링크와 메인페이지에 모두 댓글기능을 추가하고 싶어서
복사햇던 코드를 전부 붙여넣기해줬다.
이런식으로 나와있는 파일들중에 이미지 파일을 제외한
메인페이지 index 파일과
first 파일 그리고 1 2 3 html 파일 모두에 복사한 댓글생성 코드를 넣어주었다.
자 그리고 컨트롤 (맥에서는 커맨드 키 ) S를 눌러서 저장해주고
화면에 띄워보자
나와야 하는 댓글창이 안나오고 이런식으로 에러? 비슷한 문장이 나오게된다.
왜그런지 이유를 알아보자
저장하고 파일을 열었지만 그건 우리가 해당 폴더에서 예를 들어 index.html 이라는 파일을 열었기 때문에
어떠한 보안상의 문제로 생성되지못하는 것이다.
그래서 우리는 위 파일을 파일로 여는 것이 아니라 웹서버를 이용해서 열어줘야한다.
이렇게 나와있는 주소를 모두 지워주고
이렇게 입력해보자
감사하게도 아무런 저작권 문제없이 댓글기능을 웹페이지에 넣게 되었다.
내가 상업적 용도로 이용하더라도 무료로 아무런 지불없이 사용 할 수 있다는 것이 너무 감사하고 대단한 것 같다.
자 그렇다면 나만 사용할 건 아니니 나의 웹페이지에 방문하는 다른사람들과 이 댓글기능의 업데이트를 나누고 싶어질것이다
그렇다면 어떻게 해야할까?
깃허브로 들어가서 새로 추가된 코드를 넣어줘야한다 !
처음에 파일을 추가했던 그 방식 그대로 새로 코드를 넣어둔 파일을 업로드해주고
링크를 다시 들어가보면 !
짜잔 이렇게 모두가 공유할 수 있는 댓글창이 만들어졌다.
내가 댓글을 쓰고 스마트폰으로 링크를 눌러서 들어가보니
동일하게 확인이 가능해졌다.
이렇게 서툴지만 댓글창을 넣어보았다.
앞으로도 계속해서 배워나가고 기록하고 정리하면서
조금씩 앞으로 나아가보자
그럼 여기까지!