엄코딩의 개발 일지

 웹 호스팅이란?

웹 호스팅이란 무엇일까?

웹 브라우저는 웹 서버에 데이터를 요청 (request)하고, 웹 서버는 웹 브라우저에 응답 (respnse) 합니다.

이를 통해 우리는 웹 서버의 하드디스크에 있는 특정 파일을 화면에 나타낼 수 있습니다.

하지만, 웹 서버를 우리가 직접 운영하는것은 인터넷에 대한 이해 뿐만아니라 여러가지 지식이 수반됩니다.

이 어려움들을 해결해 주는 것이 웹 호스팅 서비스입니다.

호스팅이란 '한 행사의 사회자로서의 역할을 수행하는 것' 입니다. - 위키 백과


즉, 웹 호스팅은 개인과 단체가 월드 와이드 웹을 통하여 웹사이트를 제공하는 것을 뜻합니다.

웹 호스트는 인터넷 연결을 제공할뿐 아니라, 일반적으로 데이터 센터에서 클라이언트 이용에 대한 임대 또는 소유하는

서버의 공간을 제공하는 것입니다.


개발자라면 깃 헙(github)에 익숙할 것입니다. 지금부터 깃 헙을 이용하여 웹 호스팅을 해보겠습니다.

먼저 깃 헙에 로그인 후, 오른쪽 상단의 아이콘을 클릭한 후, New repository를 눌러 새로운 저장공간을 생성합니다.

그리고 작성한 코드를 업로드합니다.



그러면 위와 같은 화면을 볼 수 있습니다. 위 화면에서 오른쪽 상단의 Settings를 눌러줍니다.


화면이 이동한 뒤 스크롤을 아래로 내리면 GitHub Pages가 보입니다.




Select source에서 master branch를 클릭하고 저장합니다. 



그러면 파란색 창에 주소가 생성된 것을 볼 수 있습니다.


앞으로 위의 도메인이 나만의 웹 사이트 주소가 되는 것입니다.


해당 주소를 클릭하면 작성해둔 코드에 해당하는 웹 페이지를 확인할 수 있습니다.


 웹 서버 설치 ( MAC )


맥에서 웹 서버를 설치하는 것은 간단합니다 !

요즘에는 Apache를 직접 설치하고, 환경 설정해주는 것은 상당히 까다롭습니다. 하지만 MAMP를 다운 받으시면

비교적 간단하게 작업을 진행할 수 있습니다.

MAMP 링크를 통해 프로그램을 다운로드합니다. ( MAMP는 Mac Apache Mysql Php의 약자입니다. )

프로그램을 다운로드 한 후 해당 파일을 실행하면 웹 페이지가 하나 뜨고, 프로그램이 하나 실행됩니다.


위의 프로그램은 Management Console인데, Apache라는 웹 서버를 관리하는 도구입니다.

Manage Servers를 클릭하면 아래와 같은 화면이 뜹니다.


옆의 Start, Stop, Restart, Configure를 통해서 웹 서버를 관리할 수 있습니다.


어떻게 확인할 수 있을까요? 


아까 프로그램 설치를 마친 뒤 화면에 나타는 웹 페이지로 확인할 수 있습니다.


서버를 멈춘뒤 웹 페이지에서 새로고침을 누르면 어떻게 될까요?





위 화면에서 127.0.0.1은 IP ( 인터넷 프로토콜 ) 즉, 인터넷 규약을 의미합니다. 이는 인터넷에 연결되어 있는


각각의 컴퓨터들의 고유한 주소를 의미하죠.


그리고 뒤의 :8080은 포트 번호를 뜻합니다. MAC에는 기본적으로 웹 서버가 깔려있다고합니다. 기존 8080으로 접속이


안되셨다면 그것을 지워보는 것도 한 방법이 될 수 있습니다.



웹 브라우저와 웹 서버 실습 방법


저희에게는 실습용 컴퓨터가 두 대 있습니다. 바로 지금 사용하시는 컴퓨터와 스마트폰입니다.

위에서 설치한 MAMP를 통해 서버를 운영하고, 이를 웹 브라우저에 띄워주었습니다. 웹 브라우저에서 띄워주는

파일들의 위치는 응용프로그램 -> mampstack~ -> apache2 -> htdocs에 존재합니다.

이전에 작성한 자신의 프로젝트를 해당 폴더에 넣고, 위의 웹 브라우저를 새로고침하면 자신이 작성한 코드에

해당하는 화면을 볼 수 있습니다.

또한 같은 IP 에 접속한 두 대의 컴퓨터에서도 확인할 수 있습니다.

(스마트폰으로 같은 IP에 접속해서 확인해보세요.)




참고 자료 : https://www.youtube.com/watch?v=roETNgQf3x8&index=23&list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb


' > HTML' 카테고리의 다른 글

position 파헤치기  (0) 2018.09.27
HTML 태그를 어떻게 사용해야 할까?  (0) 2018.09.21
처음이자 마지막 HTML - 실습환경 구축 ( Atom )  (0) 2018.09.20