생활코딩을 통한 HTML(with BGM. 부산 개발자들의 모임)_ch.3

HTML의 3번째 시간 "서버와 클라이언트 ~ 웹사이트 방문자 분석기" 를 진행해보겠습니다.

 

1. 서버와 클라이언트  

- 인터넷의 정보를 우리가 주고 받을때는 2대의 컴퓨터가 필요함! 과연 어떠한 원리로 우리의 정보가 표현이 되는지 아래의 그림을 살펴보자.

좌측의 웹 브라우저(요청, request), 우측의 웹 서버(응답, response)가 있고 우리는 웹 서버에 우리가 만든 "index.html" 파일을 보내주면 웹 서버에서 웹 브라우저로  "index.html" 을 보여줌

- 이런식으로 우리가 평소에 사용하는 인터넷이 내용을 주고 받는다는 사실과 앞으로 우리가 이러한 서버를 직접 구현할지 아니면 대행해주는 곳에 맡길지는 각자의 판단에 맡기면 될듯하다.(각각의 장, 단점이 있으며 현재 생활코딩에서 알려주는 방향은 먼저는 웹 호스팅을 통해 이해를 하고 후에 서버를 통한 원리파악을 권하고 있다.)

 

2. 웹 호스팅(git hub)

- host? 인터넷이 연결되어있는 컴퓨터 한대한대를 'host' 라고 부름. 그리고 이러한 'host'를 빌려주는 업체를 "web hosting"이라고 함.

- 많은 서비스 업체들이 있지만 우리는 "git hub" 를 사용할 것이다.

- 내가 작성한 코드 및 파일을 내 repositary에 올릴수 있고 코드를 상대방에게 보여주는게 가능함.

- 웹 호스팅의 서비스는 다양하니 필요에 따라 사용하자(무료, 유료 다양함)

 

3. 웹 서버 운영

- 이번에 우리가 사용해볼 웹서버는 'Apache' 라는 것임

 - bitnami에서 MAMP를 설치를 하면 Apache가 어떠한 설정이 필요없이 자동으로 설치가 되게됨.

- 설치를 다하면 management consol이 나옴. 이것은 우리가 사용할 'Apache' 를 관리할 프로그램.

 

- IP Address 와 파일경로로 들어간 웹 사이트의 차이

좌측은 웹서버를 경유해서 파일을 받은 후에 웹 브라우저에 보내주는 것이지만 우측은 파일을 웹 브라우저가 웹서버를 거치지 않고 직접 파일을 읽어서 표시를해주고 있음.

 

4. 실습

- 스마트폰을 이용한 컴퓨터와 연결

- 같은 IP주소를 사용하여 Apache 서버에 내가 만든 파일들을 넣고 그 IP주소를 스마트폰에 입력하여 잘 실행되는지 확인 할수있음(조건은 같은 IP주소를 사용해야한다는 제약이 있긴함.)

 

5. 그외기능

- 동영상 삽입기능: 유튜브의 동영상에는 공유의 기능이 있고 공유를 클릭하면 '퍼가기' 라는 것이 나오는데 여기에 이 동영상의 코드들이 나오며 이 몇줄의 코드들을 가져와서 우리는 편리하게 사용이 가능하다.

 

-  댓글기능: 원래는 벡엔드의 기술을 알고 있어야하지만 현재로서는 아주 아주 힘들기때문에 우리가 현재 할수잇는 방법은 남들이 만든 코드를 가져와서 우리가 사용하는것이다 ㅎㅎ ('Disqus' 란 사이트에서 우리는 댓글을 구현할수있는 코드들을 가져와서 사용할것이다.)

 

- 채팅기능: 'tawk' 라는 사이트에서 우리는 채팅을 관리자와 사용자가 주고받을수 있는 아주 대단한 기능을 사용 할 수있게됨.

 

- 웹페이지 분석기: 유용한 기능이지만 따로 설명은 하지 않습니다.

 

6. HTML을 이용한 간단한 웹사이트 

 

[제작 설명]

1. 기본적인 태그의 사용

2. 서버와 클라이언트를 연결하여 IPAdress를 통해서 스마트폰에 직접 연결하여 실행되는지 확인(연결OK!)

3. 그 외 기타기능을 이용하여 동영상 첨부, 댓글 및 채팅기능 첨부하여 제작.

 

*수업에서 아쉬웟던점: IP Address를 사용하는것도 신기했지만 도메인을 사용해서 조금더 우리가 평소에 보는 웹 서버주소를 가지는 사이트를 만들수 있었으면 좋겠다라는 생각이 아쉬웠음!