brunch

매거진 코딩 공부를 해보자

라이킷 8 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 아무나 Jun 27. 2019

[생활코딩] HTML 6일차 - 내 컴퓨터를 서버로!

HTML 최종장

*생활코딩 강의를 따라가고 있습니다.

이전에도 누누이 이야기하였다시피 개인 컴을 서버로 이용하는 것은 참으로 어렵고 복잡한 일이다. 하지만, 그 복잡한 것을 우리가 한 번 해보자!

1. 내 컴퓨터에 직접 웹서버를 설치해보자!

일단 본인의 컴퓨터를 웹서버로 만들려면, 웹 서버 프로그램을 먼저 깔아야 한다. 해당 프로그램의 후보는 다음과 같다.

Apache

IIS

Nginx

우리는 이 중에서 오픈 소스인 Apache를 써보자!

하지만 먼 훗날 또 이것들이 업데이트되거나 더 좋은 프로그램들이 있을 수 있으니, 그때는 아래와 같이 검색하여 스스로 더 좋은 프로그램을 찾도록 해보자.

how to install apache http server (os)

(os) 란에는 윈도우나 맥, 리눅스 등을 넣어보자. 그럼 본인 컴퓨터의 운영체제에 맞는 프로그램을 찾을 수 있다.

2. 아파치를 설치하기 위해 설치해야 하는 프로그램

아파치를 한방에 윈도에 설치하는 것은 매우 까다로운 일이다. 그렇기 때문에 아파치를 설치하게 해주는 프로그램을 또 설치해야 하는데, 아파치 공식 홈페이지의 몇 가지 추천 중 비트나미(bitnami)라는 프로그램을 설치해보자. 대략 이렇게 검색하면 된다.

bitnami wamp stack

3. 서버 구축을 위한, 아파치 설치를 위한, 비트나미(bitnami) 설치

아래는 기본 경로로 비트 나미를 설치한 모습이다.

위의 표시된 아이콘을 실행시키거나, 비트나미 설치 후 바로 실행하기를 체크했다면 아래와 같은 창이 뜰 것이다.

Go to Application을 클릭!

위와 같은 창이 뜬다면 비트나미가 잘 설치된 것이다.

4. 서버를 내렸다가 올려보자!

아까 Go to Application 버튼이 있던 창에서 위에 있는 Manage Severs를 클릭한다.

파란 불이 앞에 들어와 있다면 서버가 올라가 있다는 뜻이다. 아파치 웹서버(Apache Web Server)를 클릭 후 stop을 한 번 눌러보면 빨간 불로 변하는데 이렇게 되면 서버가 내려간 것이다. 다시 Go to Application을 클릭해보면 아까 그 페이지를 찾을 수 없다는 것을 확인할 수 있을 것이다.

당연하게도 붉은 불이 들어온 서버를 클릭하고 Start 버튼을 누르면 다시 서버에 녹색 불이 들어오며 다시 접속이 가능해진다.

자 이렇게 우리는 아파치 서버를 원할 때 올리고 끌 수 있게 되었다!

5. 로컬 호스트? = http://127.0.0.1/index.html

지금 우리가 띄우고 있는 창의 주소는 현재 local host이다. 이 주소를 http://127.0.0.1/index.html와 같이 바꿔보자.

오호라 그래도 같은 창이 뜬다. 왜 이럴까?

이 부분을 알기 위해서 우리는 이 페이지가 도대체 어디 있는 것인지 추적해볼 필요가 있다.

C:\Bitnami\wampstack-7.2.19-2\apache2\htdocs

기본 주소로 설치했다면 비트나미가 설치되어 있는 폴더 안에 아파치(apache2) 폴더 안에 있는 htdocs(hyper text documents=하이퍼텍스트 문서) 폴더로 들어가 보면 index라는 html 이 있다. 이걸 열어보면...

잡았다 요놈...!

오호라 역시 똑같다. 이 파일을 메모장으로 열어서 수정해보았다.

역시나 수정이 된다.

6. 이게 어찌 된 일일까?

도대체 http://127.0.0.1/index.html 가 무엇이길래 이곳에 있는 파일이 웹 브라우저에서 열리는 것일까.

우리는 일단 비트나미 설치를 통해 컴퓨터에 서버를 설치하였고 동시에 웹 브라우저가 있는 상태이다. 그 상태에서 127.0.0.1이라는 IP주소(Internet Protocol Address)를 치게 되면 '웹브라우저가 설치되어 있는 컴퓨터를 가리키는 아주 특수한 주소'이자 사전에 약속되어 있는 주소이다!

127.0.0.1은 말 그대로 본인 집 주소와 같으며, 웹 브라우저가 설치된 각자의 컴퓨터의 웹 서버를 가리킨다!!

여기 index.html을 넣으면, 웹브라우저가 자신의 컴퓨터의 웹서버에 "index.html을 원해!"라고 요청하게 된다. 그렇게 되면 '웹서버'는 'htdocs라는 디렉터리에서 파일을 찾도록 기본적으로 설정이 되어 있는 상태'이다.(설정은 바꿀 수 있다.)

7. 그럼 내가 만든 웹페이지로 바꿔보자

과감하게 htdocs 폴더에 들어 있는 파일들을 삭제하고, 내가 여태까지 만들었던 웹페이지를 복사 붙이기 한다.

그렇게 되면 짜잔-

로컬 호스트에 내 홈페이지가 뜨게 된다.

8. 무슨 차이 일까?

어차피 다 똑같은 창이 뜨는 건데 무슨 차이냐고 의문을 가질 수도 있다.

좋다. 파일을 오픈한 것과 웹페이지에서 연 것은 무슨 차일까?

1) 파일을 오픈한 것은 그냥 웹브라우저가 파일을 오픈한 것으로 웹서버가 필요하지 않음

(C:\Bitnami\wampstack-7.2.19-2\apache2\htdocs\index.html)

2) 하지만 http://127.0.0.1/index.html로 오픈한 것은 웹 브라우저가 웹서버에 요청한 결과를 보여준 것이다.

말 그대로 웹페이지-> 서버->다시 웹페이지라는 과정을 거친 것으로 웹을 거쳐서 우리에게 돌아온 결과이다.

9. 웹서버와 웹 브라우저의 통신

인터넷은 웹 브라우저가 웹 서버가 있는 컴퓨터에 특정 페이지를 요청해서 index.html을 받아오는 것이다.

전화하는데 전화번호가 필요한 것처럼 이렇게 특정한 페이지에 접속하기 위해서는 주소가 필요하다. 그것이 바로 IP 주소라고 불리는 것이다.

10. 서버가 잘 올라갔는지 확인해보자!

우리는 컴퓨터가 하나 더 있다 (스마트폰), 이것으로 우리가 직접 만든 서버에 어떻게 접속할 수 있을까?

잠깐, 우리는 그전에 서버로 만든 우리 컴퓨터의 IP주소를 알아야 한다. 나의 컴퓨터의 IP주소를 알아보자.

제어판이나 시작표시줄 하단에 인터넷 표시> 오른쪽 클릭> 네트워크 및 공유센터> 연결 부분 클릭>자세히 를 클릭하면 IPv4 주소란에 자신의 컴퓨터의 IP주소가 떠 있다.

블러 처리되어 있는 빨간 선 부분이 본인의 IPv4의 주소이다

11. 스마트폰으로 내가 만든 홈페이지에 접속해보자

만약 같은 공유기 아래에 스마트폰과 서버를 켠 컴퓨터가 있다면 스마트폰으로 내가 만든 홈페이지에 접속이 가능하다. 위에서 찾은 나와있는 IPv4 주소를 http://127.0.0.1/index.html 과 동일한 형식으로 스마트폰 브라우저에 입력하면 역시 우리가 만든 페이지가 뜨는 것을 알 수 있다.

놀랍다!!

12. HTML을 마치며... - 다음에는 어떤 과정을 공부해 볼까나?

HTML언어는 웹페이지를 만드는 뼈대에 지나지 않는다. 확실히 지금의 홈페이지는 우리가 늘 접하는 홈페이지에 비해 빈약하고 아름답지 못하다. 하지만 실망은 금물이다. 우리는 이제 막 공부를 시작했기 때문이다.

이제 여태까지 배운 뼈대 위로 아래와 같은 살을 붙일 수 있다.

CSS : 이쁘게 보이게 하는 것

JavaScript : 사용자와 상호작용하는 웹페이지

백 엔드 기술 : php, jsp, node.js 이 중 하나

등등...

할 수 있는 것이 이렇게 많다. 벌써부터 다음에는 어느 것부터 할지 행복한 고민에 빠져든다.

하지만, 난 아마도 CSS를 시작하게 될 것 같다. 역시 보기 좋아야 더 해볼 맘이 나니까!

그럼 다음 포스팅은 CSS로 돌아도록 하겠다!

그동안 건강하시길!