[HTML] 생활코딩 19~20, 부록 _ 윈도우에서 웹 서버, 동영상 삽입, 댓글과 채팅 기능, 웹사이트 방문자 분석

안녕하세요~ 보라해바라기입니다. 

 

오늘은 이론적인 내용이 많으리라 예상되는데요.

 

저번에 배운 서버와 클라이언트의 연장선이라고 생각하시면 편할 것 같아요^__^

 

그럼 오늘 내용도 한 번 복습해볼까요~?

---

 

1. 윈도우의 관점에서 보는 웹서버의 모든 것

일단 웹서버를 사용해보려면 설치를 해야겠죠?!

 

우리는 apache(아팟치)를 윈도우에 설치해야합니다.

 

여기서! apache란 월드와이드웹(www) 서버용 소프트웨어로 한 줄 요약할 수 있어요!

 

쉽게 설치할 수 있을 것 같다는 통념과 달리 웹 서버를 직접 설치하는 것은 생각보다 까다로운 일이랍니다.

 

그래서 우리는 bitnami wamp stack의 도움을 받아 웹 서버를 쉽게 설치할 수 있어요^_^

 

검색엔진에 bitnami wamp stack을 검색하시면 자세한 설치 방법이 제공되니 참고하세요~

 

 

설치를 완료했다면, 우리는 웹서버와 http간의 관계를 살펴볼 필요가 있답니다.

 

http.. 어디서 많이 보시지 않았나요?

 

우리가 웹페이지 주소를 입력하고 엔터를 치면 자동으로 맨 앞에 붙는 것! 기억나시나요?

 

예를 들면 저의 블로그 주소는 purple-sunflower.tistory.com 인데요.

 

이것을 입력해서 엔터를 쳐보면 https://가 자동으로 붙는 것을 보실 수 있어요 ㅎㅎ

 

이렇게 웹서버에서 없어서 안되는 존재인 http는 Hyper Text Transfer Protocol의 약자로서

 

웹 서버의 규약 중 하나랍니다!

 

http://127.0.0.1/index.html 을 예시로 들어보면

 

http + ip주소 + html 파일명으로 구성되어있다는 사실! 

 

 

이렇듯 웹브라우저가 웹 서버에 요청을 할 때, IP주소가 꼭 필요하답니다.

 

웹 서버가 설치된 컴퓨터의 IP주소는 "네트워크와 공유 센터 열기"라는 설정에서 알아볼 수 있어요~

 

2. 여러 부수적인 기능들 

• 동영상 삽입
• 댓글 기능
• 채팅 기능
• 방문자 수 기록

HTML을 고작 며칠 밖에 안배운 제가 위 기능들을 코딩을 통해 직접 구현하려면.. 택도 없겠죠?

 

하지만 코딩을 못한다고 해서 코딩하고 싶은 아이디어 자체가 부족한 것은 아닙니다.

 

즉, 대단한 설계를 가지고 있지만 그것을 단지 코딩으로 구현하지 못한다는 것이죠..

 

이런 상황은 참 안타까운 상황이기에 많은 서비스들이 이런 기능들을 구현할 수 있도록 도와준답니다.

듣던 중 반가운 이야기 아닌가요? ㅎㅎ

 

그 방법에 대해 간단하게 짚고 넘어가겠습니다~

 

 

우리는 많은 영상을 유튜브라는 플랫폼을 통해 접하게 되는데요.

 

유튜브에 있는 영상을 HTML파일에 삽입하는 것은 아주 간단하답니다?!

 

• 유튜브 영상 재생 후, 공유 버튼 클릭
• 퍼가기 버튼 클릭하면 나오는 태그를 복사
• 복사한 태그를 원하는 자리에 삽입

이 3단계만 거치면 동영상 삽입이 바로 완료된답니다~ 아주 신기하죠?

이처럼 댓글 기능을 추가할 때는 Disqus나 LiveRe를

 

채팅 기능을 추가할 때는 tawk 서비스를

 

웹사이트 방문자를 분석하는 것은 구글 analytics 서비스를 통해 구현이 가능하답니다!

 

다만 생활코딩님의 영상이 3~4년전 영상이라는 것을 고려한다면

 

분명 달라진 부분이 존재할 겁니다. 

 

제가 실습을 실제로 해 볼 때도, 잘 안되는 부분이 많았거든요..

 
하지만 제가 말씀드린 것들 말고도 다양한 서비스들이 존재하니 

 

이번 기회를 통해 한 번 찾아보시는 것도 추천드려요 ㅎㅎ

 

---

이렇게 생활코딩님의 HTML 강의를 다 수강하였답니다!!! 박수~~~~~

저는 처음 시작할 때부터 수강을 다 끝낸 지금까지, 생활코딩님의 설명 방식에 항상 감탄했답니다..

 

단순히 코딩을 배우는 것에서 벗어나

 

이 언어의 실제적 활용과 이 언어에 접근하는 우리의 태도에 대한 이야기도 해주셨어요! 

 

코딩 수업을 인문학적으로 풀어낸 생활코딩님의 노련한 수업방식 덕에

 

흥미를 잃지 않고, "HTML문법"이란 것에만 집중하지 않고

 

내가 이 언어를 배우는 진정한 이유는 무엇인가에 대해 계속 상기시킬 수 있었어요^__^

 

생활코딩님이 이 글을 언젠가 읽으실 수도 있고 아닐 수도 있지만 정말 감사하다는 말씀을 드리고 싶네요 ㅎㅎ

 

광고 받은 거 절대 아닙니다!! ㅎㅎㅎ 정말 제가 느낀 그대로를 말씀드리고 싶었어요~

 

또한 웹 페이지 제작에 첫걸음을 잘 떼준 저 자신에게도 무한한 박수를 쳐주고 싶네요 ㅎㅎ

---

마지막으로 제가 추가한 체크박스와 동영상 삽입한 것을 보여드리고 글 마무리 하도록 하겠습니다^__^

 

<p>다 읽으셨습니까? <input type="checkbox"> 네  <input type="checkbox">아니오 </p>

 

<p style="margin-top:25px;">웹 프로그래머가 되기 위해서는 HTML, CSS, JavaScript를 필수로 알아야한다. 나는 현재 생활코딩님의 영상을 보며 HTML을 아주 얕게나마 배우고 있다.
  <iframe width="560" height="315" src="https://www.youtube.com/embed/tZooW6PritE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></p>
</body>