HTML 편 - 4일차

 

4일차

 

 

 

---

17. 인터넷을 여는 열쇠: 서버와 클라이언트

• 인터넷이 동작하는 가장 기본적인 원리를 알아보자.
• 인터넷이 동작하려면 컴퓨터가 최소 몇대 있어야 할까? 답은 2대이다.
• 팀 버너스 리는 2대의 컴퓨터를 장만하고, 2개의 프로그램을 개발하는데, 하나는 웹 브라우저(Web Browser)라는 프로그램이고, 하나는 웹 서버(Web Server)라는 프로그램이다.
• 웹 서버가 설치된 컴퓨터는 info.cern.ch라는 주소를 가지고 있고, 하드디스크의 어느 디렉터리에 index.html이라는 파일이 저장되어 있다.
• 그리고 웹 브라우저에서 주소창에 http://info.cern.ch/index.html이라는 주소를 입력하면 아래와 같이 동작하게 된다.

 

• 웹 브라우저가 설치된 컴퓨터를 클라이언트(Client, 고객)이라고 하고, 웹 서버가 설치된 컴퓨터를 서버(Server, 사업자 혹은 서비스를 제공하는 사람)라고 한다.
• 클라이언트는 서버에 요청(request)을 하고, 서버는 클라이언트에 응답(response)을 하게 된다. 그래서 인터넷을 만든 사람들은 각각을 클라이언트 컴퓨터, 서버 컴퓨터라고 부른다.
• 우리가 배우고 있는 것은 웹이라서 웹 클라이언트, 웹 서버라고 부를 수 있고, 만약 게임 혹은 채팅 시스템일 경우에 각각 게임 클라이언트 & 게임 서버, 채팅 클라이언트 & 채팅 서버 라고 할 수 있다.
• 웹 브라우저의 사용법은 알고 있으나 웹 서버는 낯설고 무섭게 느껴질 수 있다. 하지만 단지 써본 적이 없기 때문에 낯설고 추상적으로 느껴질 뿐이다.
• 컴퓨터를 만든 사람 중에서 수학 천재인 폰 노이만에게 누군가 수학을 잘하는 방법을 물었더니 이렇게 답하였다.
• "수학은 이해하는 것이 아니라 익숙해지는 거라네"
• 이 말에서 알 수 있듯 결국 공부는 이해하는 것이 아니라 익숙해지는 것이다.

 

• 웹 서버를 사용할 수 있다는 것은 내 컴퓨터에 있는 문서를 전 세계의 누구나 인터넷이 연결되어 있는 컴퓨터에 웹 브라우저만 깔면 가져다 볼 수 있게 된다.
• 여기에는 두 가지 방법이 있다.
• 그 중 한 가지 방법은 컴퓨터에 직접 웹 서버를 설치하는 방법이다. 또 하나의 방법은 웹 서버를 직접 설치하는 것이 아니라 대행 업체에 맡기는 것이다.
• 전자의 경우는 어려우나 그 과정에서 많은 것을 알게 된다.
• 두 번째 방법은 웹 호스팅이라는 것을 이용하는데, 이를 전문적으로 하는 회사에 일을 맡기는 것은 쉽다. 하지만 인터넷이 동작하는 원리가 많이 감춰져 있기 때문에 배울 것이 많지 않다.
• 일단 웹 호스팅으로 쉽게 시작하고, 웹 서버를 직접 설치해 원리는 파악하는 방법을 추천한다.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=yBPyzaccbkc

 

---

 

 

반응형

 

 

18. 웹 호스팅: 깃허브 페이지

• 웹 서버를 운영하는 것은 쉽지 않다. 우선 컴퓨터가 있어야 하고 언제 클라이언트가 접속할 지 모르기 때문에 항상 켜져있어야 한다. 
• 인터넷이 연결된 컴퓨터 하나하나를 호스트(host)라고 한다. 
• 웹 서버를 운영하기 위한 컴퓨터, 다시 말해 호스트를 빌려주는 회사를 웹 호스팅(web hosting) 업체라고 한다.
• 수많은 웹 호스팅 업체 중 무료이면서 굉장히 유명한 사이트를 이용하자.
• 바로 깃허브(GitHub)하는 서비스이다.
• https://github.com/

GitHub · Build and ship software on a single, collaborative platform

• 깃허브는 프로그래머에게는 아주 중요한 서비스이다. 왜냐하면 전 세계의 수많은 오픈 소스 프로젝트가 이곳에서 만들어지기 때문이다.
• 깃허브에 가입하고 로그인하여 [New repository]로 저장소를 만든다.
• 저장소 이름은 'WEB1'로 하고, Public 체크, README 체크 후 생성한다.
• 해당 저장소에 들어가면 Upload files 버튼이 있고 눌러서 최근에 작업하였던 파일을 올린다.
• commit의 내용은 첫 번째 버전이라는 의미로 first version으로 명시하고 [commit changes] 버튼을 누른다.
• 다시 해당 저장소에서 [Settings] 버튼을 누르고 GitHub Pages 란으로 넘어가 Source에 None을 master branch로 변경 후 save한다. 그리고 "Your site is ready to be published at ~~~~~~~~~/WEB1/" 이라고 주소가 뜨면 자신이 만든 사이트로 갈 수 있다.
• 최근에는 /(root)를 /docs로 변경해야 사이트가 뜨기 때문에 안되면 변경한다. 혹은 주소뒤에 index.html을 붙힌다.

 

• 그럼 정리해보자.
• 내 컴퓨터에서 작업한 index.html을 깃허브에 업로드 하였고, 이 저장소를 웹 서버로도 쓰겠다고 설정하면 웹 서버가 활성화되어 외부에서도 index.html이 열리면 파일을 볼 수 있다.

 

• 앞서 말했듯이 인터넷에 접속된 하나하나를 호스트라고 하며, 인터넷에 접속된 컴퓨터를 제공하는 사업을 호스팅 사업이라고 한다. 이 호스팅 사업의 목적이 웹 서버를 제공하는 것이라면 웹 호스팅이라고 한다.
• HTML만을 서버스하고 싶다면 스태틱 웹 호스팅(static web hosting)이라 한다.
• 나중에 PHP, 파이썬(python), 루비(Ruby) 같은 언어를 배운다면 다이내믹 웹 호스팅이 필요해진다.
• 원하는 웹 호스팅 업체를 찾기 위해 검색 엔진에 "free static web hosting"을 검색하여 찾을 수 있으며, 추천하는 웹 호스팅 서비스는 다음과 같다.
  • BitBalloon: https://app.netlify.com/drop
  • Neocities: http://neocities.org
  • Azure Blob: https://azure.microsoft.com/en-us/services/storage/blobs/
  • Google Cloud Storage: https://cloud.google.com/storage/
  • Amazon S3: https://aws.amazon.com/ko/s3/

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=n1wvs7xuUYk

 

---

 

 

 

 

19. 웹 서버 운영하기

• 웹 서버를 설치해서 누구나 내 컴퓨터에 있는 웹 페이지를 볼 수 있게 만들어보자.
• 우리가 해야 할 일은 자신의 컴퓨터에 웹 서버라는 프로그램을 설치하는 것이다.
• 웹 서버라는 제품군에는 아파치(Apache), IIS, 엔진엑스(nginx) 등의 여러 제품이 있다.
• 그 중 간편하게 웹 서버를 만들 수 있는 "Web Server for Chrome"을 사용할 것이다.
• 구글에 Web Server for Chrome을 검색하여 [chrome에 추가] 한다.
• 설치가 완료되면 [앱 실행]을 클릭하여 뜨는 창에 [CHOOSE FOLDER]를 클릭한다.
• 지금까지 작업한 폴더의 경로로 가서 확인한 후 웹 서버를 킨다.(켜져있었다면 껐다가 다시 킨다)
• 그리고 Web Server URL(s)를 보면 http://127.0.0.1:8887 이라는 주소가 생겼을 것이다.
• 이 주소가 웹 서버 주소이며, 복사하여 주소창에 쳐보면 웹 페이지가 뜰 것이다.

 

• 우리가 지금까지 보던 웹페이지는 file://Desktop/web/index.html 이었고, 이것은 Web browser에서 Web Server를 거치지 않고 index.html을 보았다면, http://127.0.0.1:8887/index.html은 Web Server를 거쳐서 보는 것이다.

 

• 잠시 주소를 확인해보자.

 

• 위 그림과 같이 주소에는 해당되는 뜻을 가지고 있다.

 

• 위에서 실습한 웹 서버를 핸드폰에서 접속해보자.
• 먼저 핸드폰에서 현재 컴퓨터와 동일한 네트워크 환경의 와이파이에 접속한다.
• Web Server for Chrome 앱을 실행하여 아래 옵션에 [Accessivle on local network]를 체크한다.
• 그리고 웹 서버를 껐다가 켜면, http://127.0.0.1:8887 아래에 주소가 하나 더 생긴다.
• 이 주소는 각자 컴퓨터 네트워크 환경에 따라 IP주소는 다를 수 있으며, 핸드폰의 인터넷 브라우저에 이 주소를 입력하여 접속하여 본다.

 

• 저자 유튜브 강의보기
  • https://www.youtube.com/watch?v=krG7jVMUe_0&t=0s

 

 

 

---

해당 글은 [생활코딩! HTML + CSS + 자바스크립트] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.

 

---