Archive Me

html로 댓글, 채팅, 구글 애널리틱스 이용한 포트폴리오 웹 만들기

2021. 3. 27. 19:34ㆍ웹 개발

1주일 정도 만에 생활코딩 님의 web1-html 강의를 완료했다.

이렇게 좋은 강의를 어떻게 이제 알았지? 싶었다. 친절하고, 동기부여 해주며 절대 개념을 모호하게 넘어가지 않는다. 실습 화면도 훌륭하다. 혹시 웹 개발에 관심이 있지만 시작을 못 하셨던 분들은 정말 짧게는 1주일, 길게는 한 달 정도 투자해 하루에 짧은 동영상들로 실습하며 따라가면 html은 금방 시작할 수 있을 것 같다.

https://youtube.com/playlist?list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb

WEB1- HTML & Internet

www.youtube.com

이 강의를 끝내면 자신만의 웹을 하나 가지게 된다. 굉장히 어렵고 낯선 일이었던 웹 제작이 이렇게 쉽고 간편하다니..

새삼 내가 자체 제작한 블로그로 플랫폼을 옮겨보고 싶다는 생각도 들었다.

생활코딩님은 단순한 소개페이지를 만드셨는데, 계속해서 정말 필요한 게 무엇인지 생각해보고 거기에 맞는 개발을 하라고 하셔서 포트폴리오 사이트를 만들어보자는 생각에 하나 단순하게 만들게 되었다.

n-y-kim.github.io/web-study/web/index.html

Nayeon's Portfolio

n-y-kim.github.io

우선 생활코딩님이 알려주신 방법 중 가장 기억에 남았던 것 세 개가 댓글 기능, 채팅 기능, 그리고 구글 애널리틱스다.

1. 댓글 구현하기

댓글을 정말 코드로만 구현하기 위해서는 일단 백엔드 공부가 되어 있어야 하기 때문에 생활코딩님은 disqus 라는 사이트를 통해 댓글 기능을 삽입하는 형식을 택하셨다.

disqus.com/home/

Disqus

The web's community of communities now has one central hub.

disqus.com

우선 위 사이트에 들어가서 회원가입을 완료한 뒤에

위의 화면에서 톱니바퀴를 누르고 -> Add Disqus To Site -> Get STARTED -> I want to install Disqus on my site 를 선택해주시면 됩니다.

기본적인 정보를 입력하고

create site를 눌러줍니다!

1. Select Plan이라는게 나올텐데 당황하지 마시고 밑으로 스크롤해서 공짜인 'Basic'을 선택해주시면 되고요

2. Install Disqus에서 우리는

요 버튼을 눌러줄겁니다.

그러면 이런.. 알 수 없는 외계어가 가득한 화면이 나오는데요 그냥 복사해주시면 됩니다.

그리고 이걸 만들어둔 html파일에 넣어줍시다.

저는 html 편집기로 Visual Studio Code를 사용합니다

이렇게 넣어주고 해당 파일의 페이지를 새로고침 해주기만 하면!!

이런 댓글창이 생깁니다 :D!!

2. 채팅 구현하기

채팅도 직접 구현하기에는 아직 배운게 부족하니 이미 모든게 구축되어 있는 곳에서 링크를 복사해 넣어준다.

100% FREE Live Chat Software, Ticketing & Knowledge Base! - www.tawk.to

tawk.to is 100% free live chat software to monitor and chat with visitors on your website or from a free customizable page.

www.tawk.to

처음에 질문이 몇개 있는데 대답해도 되고 스킵해도 된다.

그러고 나서 add property를 해준다.

이렇게 해주면 아까 앞서 했던 댓글처럼 복사할 수 있는 링크가 있는 창이 뜬다. 그러면 링크를 그대로 복사해서 똑같이 html 파일에 집어넣어주면 된다.

그러면 짜잔!! 채팅이 활성화된다.

그리고 저렇게 채팅을 보내면 tawk 사이트에서 관리를 하고 답장을 할 수 있으며, 몇 분 동안 사이트에 머물렀고 어디서 접속했는지 등도 알 수 있다.

3. 구글 애널리틱스 적용하기

analytics.google.com

Redirecting...

analytics.google.com

처음 가입하면 시키는대로 따라가기만 하면 된다. 다 하고 나서 링크를 연결해줄 차례다.

그 후에 관리 -> 속성 -> 데이터 스트림 -> 웹을 선택해 내가 분석할 사이트의 링크를 넣어주고,

내가 방금 추가한 웹을 다시 눌러 저 손가락이 가르키는 곳 '전체 사이트 태그~~~' 를 눌러 위와 똑같이 복사를 한 뒤

html 코드에서 <head></head> 안에 넣어준다.

넣고 나서 새로 들어가보거나 새로고침을 진행한 뒤 구글 애널리틱스를 확인하면

이런식으로 위치, OS, 언어.. 등등 다양한 정보를 확인할 수 있다.

별 거 없지만 굉장히 많은 걸 한 기분이 드는.. 공부였다 ㅎㅎ 이제는 css 공부를 시작하려고 한다. css도 일주일만에 끝내서 새로운 포스팅을 올릴 수 있었으면 좋겠다.

티스토리툴바