[HTML] Web1 : apache 설치, http, ip와 도메인, 서버통신

이번 시간에는 윈도우에 아파치를 설치하고, 설치된 웹서버를 살펴보는 시간을 가졌다.

 

한번에 이해하기에 조금 어려웠지만 차근차근 하나씩 보니까 조금 이해된 느낌이었다.

 

TMI. 나는 목차에 웹서버 운영하기 : 윈도우, 맥, 리눅스가 있길래 3가지 다 들어야하는 줄 알고 계획을 짯는데 

윈도우 하나만 들어도 된다해서 먼가 두개를 안들어도 되어서 기분이 좋아졌다. 공부를 안했는데 진도를 많이 나간 느낌?ㅎㅎㅎ 그치만 오늘 가져온 이 해독주스는 너무 맛이없다. 솔직히 조합이 이상해서 넘어가지 않는다...배는고프지만..지금까지 만든 것 중에 가장 맛이없다....ㅜㅜㅜㅜㅜㅜ버리고싶은 마음이 들정도...결국 안마시고 엄마가 쪽갈비 사왔다해서 달려나갔다.

 

아파치를 직접 까는 것은 어렵기 때문에 설치를 도와주는 프로그램을 이용했다.

우리는 bitnami를 이용했다.

 

(https://bitnami.com/stack/wamp

WAMP

그런데 wamp가 뭐지?

 

검색해봤다.

 

WAMP 각각 Windows(리눅스 버전은 LAMP), Apache, Mysql, Php를 의미합니다. 따라서 bitnami WAMP Stack는 Windows 환경에서 Apache, Mysql, Php를 한번에 설치할 수 있는 통합 솔루션입니다

 

라는 구글의 설명이 나왔다. 아하,,이중에서 우리는 아파치를 설치하는 거구나

그리고 아직 쓸줄 모르지만 이름은 많이 들어본 MySQL의 비밀번호를 설정했다.

이건 데이터베이스에서 쓰는 거구나

 

노트북이 좀 꾸져서 그런지(ㅠㅠ) 설치하는데 시간이 조금 오래 (기분탓인가) 걸렸다.

그리고 나서 비트나미 매니저를 열어주고, 매니저를 이용해서 웹서버를 켜고 끌수있다.

 

출처 : 생활코딩

 

웹서버 열기 성공!!

 

웹서버가 꺼져있다면 웹페이지가 안열릴거라고 했다.

 

여기까지가 웹서버 설치!!

----------------------------------------------------------------------------------------------------------------------

 

이제부터는 웹서버와 http에 대해서 배운 걸 정리해볼거다.

 

웹서버 설치 후 welcome에서 go to application을 누르면 주소에 local host라고 뜬다.

그리고 이 주소는 http://localhost/index.html 라고 적어도 똑같이 뜬다.

http://127.0.0.1/index.html 라고 적어도 똑같이 뜬다!

 

localhost라는 도메인 이름은 '내 컴퓨터'라는 의미의 특수한 주소라고 한다.

 

localhost

127.0.0.1

 

이 두가지 중 localhost와 같이 의미가 있는 이름을 도메인 네임이라고 부르고,

127.0.0.1과 같이 번호로 되어 있는 것을 ip 주소(ip address)라고 부른다.

 

화면에 표시된 index.html 파일은 

Bitnami wampstack이 설치된 디렉토리에서 apache → htdocs → index.html 를 통해 확인할 수 있다.

 

htdocs 디렉토리는 hypertext documents 의 약자이다. 즉 웹페이지가 저장된 디렉토리라는 의미이다.

 

이 파일에서 index.html을 메모장으로 열어 웹페이지 형식으로 되어 있는 지 확인해봤다.

우리가 배운 태그의 문법들이 나오는 걸 볼 수 있다. 수업을 따라가느라 캡쳐를 못했다ㅠㅠ

이 메모장의 body에다가 web1이라고 적으면 우리가 적은 내용이 화면에 표시되는 걸 확인할 수 있다!

 

------------------------------------------------------------------------------------------------------------------

 

이제 이론에 대한 설명이다.

 

출처 : 생활코딩

http://127.0.0.1/index.html 을 입력하면 벌어지는 일

 

1.  웹 브라우저가 웹서버에게 index.html을 내놓으라고 한다.

2.  웹서버는 htdocs에서 뒤적거려서 index.html을 꺼낸다.

3.  웹서버는 index.html의 코드를 읽고, 웹브라우저에게 전송한다.

4, 그리고 웹서버는 코드를 해석해서 화면에 표시한다.

 

여기서잠깐! protocol의 개념을 이 그림을 통해 더 이해하고 가는 게 좋다.

네이버 지식백과가 이걸 진짜 잘 정리해 놓았다.

 

출처네이버

 

https://terms.naver.com/entry.nhn?docId=2271799&cid=51207&categoryId=51207

프로토콜

-------------------------------------------------------------------------------------------------------

 

이제, 우리가 그동안 만든 프로젝트를 웹서버로 통해서 화면에 구현해보기 

 

htdocs 디렉토리의 문서를 다 지우고 내가 만든 HI JIN 웹페이지를 전부 넣는다.

그리고 나서 리로드하면 내가 만든 페이지가 나온다.

 

아이피 주소 http://127.0.0.1/index.html 와 파일 열기로 내가 만든 웹페이지를 여는 것은

화면상으로는 차이가 없지만, 내가 웹서버를 끄면 http://127.0.0.1/index.html라고 쳤을때

이 웹페이지가 나오지 않는다.

 

-----------------------------------------------------------------------

이론

 

출처 : 생활코딩

 

이 그림은 두가지 차이를 보여준다.

http는 hyper text transfer protocol의 약자이다.

즉. http는 웹페이지를 전송하기 위해 만든 통신규약을 의미한다.

주소가 http로 시작하면 이 통신규약에 따른 웹서버에 접속한다.

 

실제로, 크롬에서 새탭을 열어 검색을 할 때 http를 입력하기전에는 구글로 되어있지만,

http를 치면 지구본모양? 그걸로 바뀐다.

 

그럼 구글에 검색되는게 아니라 사이트로 이동한다.

 

다시 생각해보면,

http를 치면 웹서버와 웹브라우저가 상호작용? 해서 웹페이지를 보여주는 것이라고 이해했다.

따라서 당연히 웹서버를 꺼버리면,  http://127.0.0.1/index.html 를 입력했을 때 화면이 나오지 않는다.

 

 

반면에 파일은 웹브라우저가 자기가 가지고 있는 걸 꺼내는 것이기 때문에

 웹서버와 상관없이 웹페이지가 나온다.

 

오늘 나는 저 주소창에 구글검색만 할 수 있는 사람이 아니라 http랑 file도 칠 수 있다는 걸 깨닫았다.

file은 조금 신기했다. 크롬 주소에다가 치니까..

 

_____________________________________________________________________________________________________________________

 

이제 진짜 대단원의 마지막을 알리듯이 오늘 강의의 마지막이다.

 

바로 웹서버와 웹브라우저의 통신이다.

출처:생활코딩

웹브라우저가 웹서버에 접촉하기 위해서는 ip주소를 알아야한다.

ip주소는 다 다르게 뜬다. 나의 경우에 ip주소가 172.30.1.32 이었다.

 

 

127.0.0.1
172.30.1.32

 

이 둘의 차이점은 무엇인가?

둘다 내 컴퓨터를 가리키는데 전자는 대명사같은 거라서 변하지 않는 것이고,

두번째는 저 주소에 해당하는 컴퓨터이다 라는 것이다.

 

이해하기에 모든 사람들이 컴퓨터를 가지고 있고, 그 컴퓨터라는 단어를 127.0.0.1라고 한다면,

172.30.1.32 이거는 나의 컴에 내가 이름을 지어놓는 것??

 

실제로 이 주소가 와이파이에 따라서 달라지나 궁금해서 두개의 와이파이를 켜고 ip주소를 살펴보았는데

다른 와이파이를 사용하면 ip가 달라졌다. 

 

쨋든

두대의 컴이 필요해서 스마트폰을 이용해 연결하는 것을 해봤는데

나의 경우에는 뜨지 않았다..

이게 공용와이파이이기 때문에 그런것 같아서 나의 데이터를 이용해 보기로 했다.

 

그랬는데 화면에 떳다!!ㅎㅎㅎ

보안상의 문제가 아닐까?

 

웹서버도 켜놓고, 데이터핫스팟도 이용했다.

기분이가 좋군 ㅎㅎ

 

그런데 혹시 아까 웹서버를 안켜놓아서 이게 안뜬건가 싶어서 웹서버를 켜둔 상태 그대로

와이파이로 다시 접속해봤다. 그랬더니 접속이 된다. 아까 안된건 웹서버를 꺼두어서 그런가

 

그래서 웹서버를 꺼봣다.

 

근데도 내가 만든 웹페이지가 잘 떳다...

도대체 아까는 왜 안뜬거지???

알수없다..아까 뜨지않는 화면 캡쳐해둘걸 ㅜ

 

아무튼 마지막 순간이라도 웹페이지가 떠서 다행이다.ㅎㅎ

 

그리고 이 엄청나게 많은 이론과 함께 수업이 끝났다!!!!

 

-----------------------------------------------

TMI2. 이 수업을 들을 때 그냥 다른 사람들 처럼 영상만 보고 넘기는게 더 효과적이지 않을까

괜히 블로그에 적어서 시간을 더 오래걸리게 공부하는게 아닌가 그런 생각을 했다.

그런데 영상으로 볼때는 다 알거같은데 또 이렇게 빈 화면에 내가 이해한 대로

나름의 요약을 거쳐서 적으니까 또 모르겠고, 적다보니까 궁금한게 또 생기고 그렇다.

앞으로도 이렇게 꾸준하게 적어야지..느릿느릿 정확하게 움직이자! 조급해하지말기!(갑분일기)