18. 웹호스팅 ~ 19. 웹서버 운영하기 + HTML 태그 공부

18. 웹호스팅

서버를 운영하려면 많은 조건들이 갖춰져야 한다.

항상 켜져 있는 컴퓨터가 있어야 하고, 밖에서도 그 컴퓨터에 연결될 수 있어야 한다.

 

즉 web hosting = 서버를 운영하기 위해 컴퓨터를 빌려주는 것!

(실제로 많은 웹 호스팅 업체들이 있다)

 

하지만 무료로, 웹 서버를 제공해주는 사이트가 있다! 이 사이트에서 직접 웹 서버를 만들어 보자.

 

1. 깃허브(Github)

repository = 저장하는 공간.

즉 우리가 작성한 코드를 깃허브에 보관해둘 수 있다!

1) 웹호스팅 역할을 어떻게 깃허브가 대신하는가?

서버를 만들 때에는 '서버'와 '클라이언트' 만이 존재했다.

1. 위에서는 깃허브가 서버의 역할을 대신하고, 대신 깃허브가 서버 역할을 할 수 있게 내 컴퓨터에 있던 index.html 이라는 코드를 깃허브에게로 넘겨준 것이다. 

2. 그리고 내 웹사이트를 방문하기를 원하는 사람들에게 도메인 주소를 넘긴다면, 이 방문자들은 깃허브가 서버 역할을 하면서 관리하고 있는 내 웹서버에 방문할 수 있게 된다.

 

2) 깃허브 말고 다른 사이트는 없나? 추천하는 웹호스팅 검색어 : free static web hosting

+ 추천하는 웹호스팅 서비스

 

www.bitballoon.com

Netlify App

www.neocities.com  

Amazon S3

Google Cloud Storage

Azure Blob

=> 위 서비스들은 무료로 웹호스팅을 해 주거나, 또는 일정 사용량까지는 무료로 쓸 수 있는 웹 호스팅 업체들이다!

---

19. 웹서버 운영하기

이번에는 직접 내 컴퓨터로 웹서버를 운영하는 방법에 대해서 알아보자!

한 번도 생각해 본 적이 없지만, 웹브라우저는 제품명이 아니라 제품군이라고 한다.

즉 웹브라우저는 제품의 한 종류이고, 웹브라우저의 종류도 여러가지라는 말이다.

대표적으로는 : Apache, IIS, Nginx  등이 있다. (처음 들어본다)

 

그런데 인터넷은 여러 가지 이유로 중간에 작동하지 않거나 오류가 날 수도 있다.

이를 대비해서 문제를 스스로 찾고 해결해보는 연습이 필요하다!

=> 추천검색어 : how to install apache http server windows

 

19-1. 윈도우에서 Apache 설치하는 법

1. Apache를 직접 설치하는 대신, Apache를 설치하는 것을 도와주는 프로그램을 설치하는 방법

2. Apache를 직접 설치하는 방법

=> 1번 방법을 사용한다.

+ Apache 설치를 도와주는 프로그램들은 how to easy install apache http server windows 10 을 검색하고, 

apache 웹페이지의 게시물을 보면 알 수 있다.

여기서는 아래 사이트를 추천한다.

• ApacheHaus
• Apache Lounge
• Bitnami WAMP Stack
• WampServer
• XAMPP

나는 Bitnami WAMP Stack 를 이용하기로 했다. 

W : windows, A : apache, M : mysql, P : PHP    이런 의미라고 한다.

그럼 Bitnami를 설치해 준다!

 

19-2. 웹서버 운영하기와 HTTP

Bitnami WAMP는 어떻게 작동하는가?

WAMP manager 의 Apache에서 초록불이 들어온다면 웹서버가 작동하고 있다는 것이다.

1) WAMP를 열면 우리 컴퓨터에 있는 웹 서버의 메인 페이지가 나온다.

주소로는 http://127.0.0.1/index.html 이라고 나와 있다.

 

127.0.0.1은 무엇인가?

여기서의 127.0.0.1 을 IP 주소라고 한다. (Internet Protocol Address)

각 페이지마다 고유한 IP 주소가 있고, 127.0.0.1은 해당 웹 서버의 메인 페이지의 IP 주소이다.

 

그럼 index.html 은 무슨 의미인가?

apache 파일에는 htdocs 라는 폴더가 있고, 여기에 이 컴퓨터의 웹서버 안에 저장된 html 파일들이 모두 저장되어 있다.

= 이 컴퓨터의 웹서버를 사용할 때, htdocs 폴더에 있는 파일은 이 웹서버에서 꺼내서 다른 사용자의 웹 브라우저로 전송해 줄 수 있다.

= 만약 이 컴퓨터의 웹 서버를 사용하는 사람이 해당 웹 서버로 index.html 파일을 요청했다면, 그리고 index.html 파일이 해당 웹 서버가 존재하는 컴퓨터의 htdocs 파일 안에 있다면, 웹 서버는 바로 index.html 파일의 코드(?) 를 신호로 다른 웹 브라우저에게 보내줄 수 있다.

 

HTTP란 무엇인가?

HTTP는 HyperText Transfer Protocol의 약자로, 웹 브라우저와 웹 서버가 정보를 주고받을 때 필요한 통신 규약이다.

HTTP는 '두 대 이상의 컴퓨터가 웹 서버와 웹 브라우저로써 정보를 주고 받을 때' 반드시 필요하다!

1) 한 컴퓨터에 웹 브라우저와 웹 서버가 모두 있다면 -> HTTP를 사용할 수 있지만 필수적이지는 않다.

2) 다른 컴퓨터와(보통은 웹 서버와) 통신하려면? -> HTTP 주소가 반드시 필요하다.

Q. 127.0.0.1 은 어떤 주소인가?

A. 내 컴퓨터에 설치된 웹서버에서, 자기 자신에게 접속할 때 사용하는 IP 주소이다.

이 주소는 '예약' 되어서, HTTP와 함께 사용할 수 없다.

또한 컴퓨터에 현재 웹 서버가 실행되고 있지 않으면 주소를 입력해도 페이지가 뜨지 않는다.

 

Q. HTTP와 HTTPS의 차이는 무엇인가?

A. S(Secure Socket, 보안) 라는 차이점이 있다. 

HTTP : 보안 X. 정보를 단순 텍스트로 주고 받기 때문에, 중간에 신호가 인터셉트된다면 정보가 유출될 수 있다.

HTTPS : 보안 O. 주고받는 정보는 두 개의 키(암호화 키, 복호화 키)로 암호화되어 있으므로, 중간에 정보를 유출하더라도 키가 있어야만 정보를 볼 수 있다.

+ 이때 두 개의 키 A, B는 각각 서로를 암호화/복호화할 수 있다

(= A로 암호화한 정보는 B로 복호화, B로 암호화한 정보는 A로 복호화할 수 있다)

+ 만약 A를 공개키, B를 비밀키라고 한다면(반대 경우도 가능하다), 정보를 이렇게 주고받는다:

(공개키 : 공개키 저장소에 보관되어 누구나 알 수 있는 키, 비밀키 : 개인에게만 주어진 키)

(1) 사용자가 서버에 정보를 전송하는 경우 : 

1) 사용자의 웹 브라우저가 공개키 A를 갖고, 웹 서버가 비밀키 B를 갖는다.

2) 웹 브라우저에서 보낼 정보를 공개키 A로 암호화해서 웹 서버에게 전송한다.

이때, 중간에 신호가 인터셉트되어도 정보가 유출되지 않는다. b/c 해당 정보는 비밀키 B키로 복호화해야 볼 수 있기 때문.

3) 웹 서버에서 B 키를 이용해서 정보를 복호화해서 받는다/저장한다 등등.

19-3. 다른 컴퓨터에서 내 웹 서버에 연결하는 방법

이론적으로는 웹 브라우저와 웹 서버를 각각 담당할 컴퓨터 두 대가 필요하지만,

우리에게는 '스마트폰'이라는 작은 컴퓨터가 있다!

그러면, 스마트폰에서 뭐라고 입력해야 내 컴퓨터의 웹서버에 연결할 수 있을까?

: 내 컴퓨터의 웹서버의 IP주소가 필요하다!

IP주소 알아보는 방법

1) 내 컴퓨터가 연결된 와이파이->와이파이 옆의 '속성' 클릭

2) 아래로 내리다 보면 'IPv4 주소' 가 뜬다. 

이렇게!

즉 http와 함께 192.168.0.8 을 입력하고, 그 뒤에 해당 웹서버에서 불러오고 싶은 파일명을 입력하면,

실제 웹서버(=내 컴퓨터)에서 웹 브라우저(=스마트폰)로 해당 정보를 전송시켜 준다!

지금은 http://192.168.0.8/index.html 을 입력했다.

 

+ 그런데 로딩 시간이 너무 걸렸다.

=> 실제로는 이론처럼 간단하지 않다. 웹 브라우저가 웹 서버와 같은 와이파이를 공유해야 하고, 등등...

그래서 전 세계의 모든 사람들이 내 웹페이지에 이런 IP주소만 알면 접속할 수 있게 하는 방법은 한계가 있다.

 

+ 사이트 주소가 HTTP 형태로, 정보 보안에 취약하다.

Q. 대부분은 HTTPS 주소를 사용한다던데, 어떻게 하는 걸까? 유료?

#. HTML 태그 공부

32개의 자주 사용되는 태그들 중에서, 내가 아는 것과 모르는 것을 정리해 보았다:

www.advancedwebranking.com/html/

사용방법을 조금이라도 아는 태그	모르는 태그 + 처음 들어본 태그
<html>, <head>, <body>, <title>, <a>, <img>, <p>, <li>, <ul>, <br>, <h2>, <h1>, <h3>, <strong>	<meta>, <div>, <script>, <link>, <span>, <style>, <input>, <form>, <nav>, <footer>, <header>, <iframe>, <button>, <i>

오늘은 이 태그들을 어떻게 사용하는지와 그 사용예시를 살펴보자!

 

#1. <meta> 태그

생활코딩의 HTML 사전에서 <meta>태그의 정보를 보면,

"meta요소는 title, base, link, style, script 요소로 표현할수 없는 다양한 종류의 메타데이터를 표현합니다." 라고 나온다.

그러면 title, base, link, style, script 요소는 무엇인가? 

<title> 태그는 웹페이지의 제목을 나타내는 걸 알고 있으니, <base> 태그가 뭔지를 알아보았다.

 

<base>태그:

웹 주소의 기준이 되는 base URL을 정의하는 태그란다.

base URL 이 뭔가?

처음에 웹사이트에 접속하면 보통 메인 페이지가 나온다. 이후 다른 항목들을 눌러서 여러 웹페이지로 이동하면, 주소의 앞부분은 그대로 있고 뒷부분에 다른 주소가 추가된다.

즉 여기서 '주소의 변하지 않는 앞부분' 을 base URL 이라고 한다!

 

base 태그에는 href 부분과 target 부분이 있다.

1) href 부분은 target 부분과 href 

 

예시 코드이다:

<head>
  <base href="https://www.w3schools.com/" target="_blank">
</head>

<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>