<유튜버 - 생활코딩> WEB1 - INTERNET 17~32 따라하기

1. 코딩 파일을 저장하기 위해 깃허브에 가입. 이제 파일을 저장가능.

github.com/

GitHub: Where the world builds software

2. Apache 설치

비트나미 APACHE 설치 https://bitnami.com/stack/wamp/installer 여기 들어가셔서 맨 밑으로 쭉 내리면 버전 2개가 있고 Download for Windows 64-bit를 누르면 다운로드가 된다. 

웹서버 구축에 필요한 프로그램으로 Window에 Apache, MySQL, PHP를 설치해준다 그래서 bitnami WAMP 인 것.

Manage Servers로 웹 서버를 Start / Stop 할 수 있고, Welcome에서 'Go to Application' 누르면 이미 만들어져있는 웹사이트가 하나 뜨는데, 이것은 apache2/htdocs에 저장되어 있던 파일을 바탕으로 만들어 진것이다. 우리는 이것들을 싹 다 삭제하고 우리만의 html 파일들을 넣어서 새로 만드는 작업을 할 것이다.

 

3. 인터넷이 동작하는 기본 원리 (서버와 클라이언트)

Web Browser→	←Web Server
↑index.html

모든 컴퓨터가 자기 자신을 127.0.0.1이라고 하기로 약속함.

이런 숫자들 = IP 주소 = Internet Protocol Address = 웹 브라우저가 설치되어 있는 컴퓨터를 가리키는 아주 특수한 주소 = 각자 컴퓨터의 웹서버를 가르킨다.

웹브라우저가 웹서버에 index.html 요구한다. 그러면 web sever는 index.html을 받아서 브라우저에 전송한다.

 

http://127.0.0.1/index.html은 웹 브라우저와 웹 서버가 서로 통신할 떄 사용하는 통신 규약인 HyperText(웹페이지) Transfer(전송) Protocol(규약, 약속)을 이용해서 데이터를 가져오는 것. 그리고 저 숫자는 자기 자신을 의미한다.

 

http = 웹 페이지를 웹 브라우저와 웹 서버가 서로 주고 받기 위한 약속 - 서로 다른 컴퓨터에 있는 웹 브라우저와 웹 서버가 통신을 하기 위해서 필요.

 

 

만약에 파일로 열면 주소창이 file://c:/~~~ 인데

Web Browser

↑index.html

이 과정만 하는 것

 

4. IP 주소 알아내기 / 두 대의 컴퓨터가 통신하는 방법 살펴보기.

자신의 네트워크 아이피 주소를 볼려면 와이파이에서 속성을 눌러 IPv4 주소를 확인

여기는 192.168.0.4 

같은 네트워크(와이파이)를 쓰는 스마트폰, 다른 컴퓨터를 이용하여 저 아이피 주소에 접속할 수 있다.

Web sever 가 보낸 index.html을 내 스마트폰 혹은 다른 컴퓨터에 받을 수 있다.

 

5. HTML로 WEB1을 공부했으니 이제 WEB1을 기반으로 한 WEB2를 배워보자.

CSS: 나는 웹사이트를 아름답게 하고 싶다. HTML 나온 지 4년 후에 만들어짐 .

ㅡ web publisher, web designer

 

JAVASCRIPT: 나는 사용자와 상호작용하는 웹페이지를 만들고 싶다. 5년 후에 만들어짐.

ㅡweb front end engineer, web interactive designer

 

PHP, JSP, 파이썬의 장고, NODE.JS: 웹사이트 운영 중, h1 태그를 h2 태그로 바꾸어야 한다. 하나의 파일을 변경하면 1억개의 웹페이지 변경 가능. 서로 경쟁관계에 있다. 이 중에 하나 공부하면 된다.

ㅡ back end engineer 

 

광고수업: 웹사이트에 광고를 달어서 돈을 벌고 싶다.

6. 알고 있는 것을 공고히 하는 두가지 방법

1. 알고 있는 지식을 이용해서 프로젝트를 하는 것
2. 알고 있는 지식을 컨텐츠로 만들어서 누군가에게 알려주는 것

둘다 자신이 무엇을 알고있는지를 자신과 타인에게 확인시켜 줄 수 있는 좋은 방법

 

7. WEB1 부록 

1. 동영상 삽입: 유튜브 더보기에서 소스를 가져와서 붙여넣기 하면 가능

2. 댓글 기능: http는 방문자들에게 정보 제공 가능하지만 반대는 불가능하다. 즉, 상호작용이 안된다.

방문자와의 소통을 할려면 댓글 기능이 필요한데 이것은 백앤드 기술이 필요하다. 이 기술을 사용하려면 데이터 베이스를 활용하는 높은 산을 넘어야한다 (스팸 차단 기능, 이미지 업로드, sns 연동 같은 것들)

직접 하는 것은 매우 복잡하고 어렵지만, 남들이 만든 댓글을 우리 웹사이트에 포함시키면 직접 개발을 안하고 사용 가능하다.

DISQUS, LiveRe를 활용하면 된다. 가입하고 이용가능하다.

web1-llqmileo8t.disqus.com/admin/install/subscription/

자기 컴퓨터 안에 있는 파일로 열면 보안상의 이유로 적용이 되지 않지만 127.0.0.1/index.html 로 들어가서 보면 있다. 이것은 채팅기능도 그렇다. 웬만하면 자기 아이피로 들어가서 작업하길 추천한다. 

3. 채팅 기능: 

www.tawk.to/

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

코드를 안에 넣으면 채팅창이 만들어지는데 여기다가 채팅을 치면 나는 홈페이지에서 어떤 문자를 받았는지 확인이 가능하다. 고객응대가 이렇게 이루어지는 것!!

4. 웹페이지 분석기:

analytics.google.com/analytics/web/provision/#/a187140907p258571484/admin/streams/table/2242681613analytics.google.com/analytics/web/provision/#/p258571484/reports/defaulthome?params=_u..nav%3Ddefault

Redirecting...

• 가입을 한 후, 코드는 페이지 왼쪽하단에 관리 -> 데이터 스트림 -> 웹스트림 선택 -> 태그하기에 대한 안내-> 전체사이트 태그 클릭해서 찾을 수 있다.
• 스스로 만든 사이트에 들어간 후, 분석 사이트를 보면 조회수가 늘어난 것을 확인할 수 있고, 동시에 어느나라에서 어떤 언어로 유입되었는지 등 확인이 가능하다.
• 데이터는 무조건 쌓아 두어야한다. 어떻게 분석을 잘 할지는 나중에 고민 하면 될 문제이지만, 데이터가 없으면 분석할 수가 없기 때문이다.
• 단지 다섯줄의 코드가 이런 어마어마한 분석을 할 수 있게 해준다. 이것이 코드의 힘이다. 

-WEB1 FINISHED-