WEB

생활코딩 WEB1-HTML & Internet 강의를 토대로 작성한 내용입니다.

• WEB : World Wide Web(WWW)의 약어이다.

WEB의 역사

버너스리가 NeXT 컴퓨터를 세계 최초의 웹 서버로 사용하였으며, 이때 사용한 최초의 웹 브라우저가 유럽 입자 물리 연구소(CERN)에서 사용된 1990년 2분기말 즈음의 월드와이드웹 태동직전의 모습으로 기록되어 있다. 당시 버너스리와 함께 글로벌 하이퍼텍스트라는 개념을 이해해 웹을 개발하고 발전시키는데 공헌한 사람이 CERN의 동료였던 로베르 카이오(Robert Cailliau)였는데, 그의 도움으로 웹 프로젝트는 공식적으로 유럽 입자 물리 연구소(CERN)으로부터 지원을 받게 되었다. 이무렵 영국에서 대학을 나와 CERN의 인턴연구원으로 합류한 니콜라 펠로(Nicola Fellow)가 개발에 참여하며, 그들은 최초의 웹브라우저도 만들었다. 1990년 성탄절에 버너스리와 카이오는 자신들의 컴퓨터에서 최초의 웹브라우저를 통해 http://info.cern.ch 라고 등록한 웹서버에 접속했는데, 이렇게 완성된 최초의 성공적인 빌드가 월드와이드웹(WWW)이 탄생하는 순간이라고 평가되고 있다.

• <위키백과> 발췌 -

• http://info.cern.ch 에 접속하면 최초의 웹브라우저 모습을 볼 수 있다.

WEB은 기본적으로 정보를 요청하는 browser, client라고도 하는 컴퓨터가 있으며 정보를 저장하고 있고 요청시 응답, 전송하는 server 컴퓨터가 있다. 이 두 컴퓨터의 상호작용으로 web은 시작하며 작은 지역을 연결하면LAN(Local Area Network)이 되고 여러 작은 지역의 LAN을 하나로 연결하면MAN(Metropolitan Area Network)이 되고 MAN, 즉 도시와 도시 나라와 나라를 연결해 WAN(Wide Area Network)을 형성해 오늘날 전 세계 사람들이 web 상에서 상호 의사소통을 하고 방대한 양의 자료와 거대한 web의 세계를 구축할 수 있게 된다.

지금부터 컴퓨터 2대가(client, server) 어떻게 상호작용하는지 실험해보겠다.

우선을 web hosting 하는 방법으로 상호작용하는 방법을 알아보자.
우선 웹을 호스팅하는 방법은 정말 다양하다. 개인이 서버를 구축해서 관리하여도 되고 서버를 대신 구축하여 운영(유지, 보수)해주는 회사, 업체를 통해 간단하게 호스팅할 수 있다. 개인이 서버를 구축해서 관리하는 방법은 대단히 어렵다 하지만 그 과정 중 서버에 대한 지식을 배울 수 있기 때문에 좋은 경험이 될 수 있다 지금은 웹의 간단한 동작원리를 파악하는 시간이기 때문에 프로그램이나 업체를 통해 간단히 호스팅하는 방법을 공부해보자.

Web hosting

1. Github page

• Github 에 가입 후 로그인한다.
• 우측 상단 +모양을 클릭하면 다음과 같은 화면이 나온다.
• New repository 를 클릭하면 아래와 같은 화면이 나온다.

• Repository name 을 설정한다.
• Public을 클릭해준다. 비공개로 개인적인 작업을 하고 싶다면 Private를 클릭한다.
• Add a README file을 클릭한다.
• 마지막으로 Create repository 를 클릭해준다.

예전 repository 화면 이랑 README 생성하는 라인이 조금 달라졌으니 참고하자.

• Create repository 를 클릭하면 다음과 같이 오른쪽에 add file을 클릭한다.
• add file을 클릭하면 upload files를 클릭하면 내가 작업했던 파일을 업로드할 수 있다.

• 여기에 choose your file을 통해 파일을 업로드 할 수 있고 commit change를 하면 파일이 업로드 된다.

• 상단 Settings 를 누르면 다음과 같은 화면이 나온다.
• github pages에서 source를 Branch: master로 바꿔준다.
• 업로드 했던 파일의 웹 주소가 생성된 것을 볼 수 있다.
• 호스팅이 완료 된 것이고 저 주소로 들어가면 작업했던 환경을 볼 수 있을 것이다.

2. MAMP

서버 환경 구축을 위해 여러가지 프로그램이 있다 apache, IIS, NginX 등등 많은 프로그램이 존재한다. 하지만 우린 실습을 위해 apache를 설치해보겠다.

apache를 직접 설치하는 것이 조금 까다롭기 때문에 MAMP라는 프로그램을 설치하면 자동으로 apache,MYSQL,PHP 를 한번에 설치하여주는 통합 프로그램이다.

우선 MAMP 의 첫번째 M의 약자는 Macintosh 줄여서 Mac 즉 MacOs 환경에서 서버 환경을 구축하기 위한 프로그램이라는 뜻이다.

나는 Bitnami 에서 MAMP를 설치하였다.

비트나미(Bitnami)는 가상 어플라이언스 및 웹 애플리케이션, 개발 스택용 소프트웨어 패키지 및 설치 라이브러리이다.

우선 설치하면 manager-osx 라는 파일이 생기는데 실행시키면 다음과 같은 화면이 생긴다.

현재 Running 상태는 개인 서버 구축 환경이 실행되고 있다는 뜻이다. 개인 컴퓨터에 고유 IP주소를 할당 받았을 것이다.
우선 호스팅하고 싶은 파일이 /Applications/mampstack-7.4.8-0/apache2/htdocs 경로에 저장되 있어야 한다.

MAMP 설치 후 할당받은 iP주소로 접속하면 저장한 파일이 잘 실행되는 것을 볼 수 있다. 나의 컴퓨터에 할당받은 IP주소는 http://127.0.0.1:8080/이다.

• http://127.0.0.1:8080/ : 여기서 127.0.0.1은 IP주소이고, 8080은 PORT이다. 원래 맥OS에 서버환경이 기본적으로 설치가 되어있다. 하지만 나는 연습을 위해 서버환경을 두번째 설치하였고 원래의 서버 IP주소와 구분하기 위해 8080이 사용되었다.
• IP : Internet Protocol의 약자이다. 컴퓨터 네트워크에서 장치들이 서로를 인식하고 통신을 하기 위해서 사용하는 특수한 번호이다.
• http : HTTP(HyperText Transfer Protocol)는 W3 상에서 정보를 주고받을 수 있는 프로토콜이다. 주로 HTML 문서를 주고받는 데에 쓰인다. 주로 TCP를 사용하고 HTTP/3 부터는 UDP를 사용하며, 80번 포트를 사용한다.
• PORT : 인터넷 프로토콜 스위트에서 포트(port)는 운영 체제 통신의 종단점이다. 이 용어는 하드웨어 장치에도 사용되지만, 소프트웨어에서는 네트워크 서비스나 특정 프로세스를 식별하는 논리 단위이다. 주로 포트를 사용하는 프로토콜은 전송 계층 프로토콜이라 하며, 예를 들어 전송 제어 프로토콜(TCP)와 사용자 데이터그램 프로토콜(UDP)가 있다. 각 포트는 번호로 구별되며 이 번호를 포트 번호라고 한다. 포트 번호는 IP 주소와 함께 쓰여 해당하는 프로토콜에 의해 사용된다.

지금부터 내 컴퓨터 개인 서버 환경이 구축되었다. 그러면 마지막 실험을 한번 해보자. 위에서 server컴퓨터에 정보나 자료를 요청하면 client 컴퓨터로 응답한다고 했다. 실습을 위해 컴퓨터가 2개가 있으면 좋겠지만 컴퓨터와 유사한 환경인 스마트폰을 활용하여 보자. 스마트폰(client)에서 내 컴퓨터(server)로 호스팅된 사이트를 요청하여 불러보자.

우선 Mac의 환경설정 -> 네트워크 -> 고급 -> TCP/IP 를 들어가게 되면 다음과 같은 화면이 보인다.

IPv4가 현재 내 컴퓨터의 IP주소이다. 그럼 스마트폰(client)에서 내 컴퓨터(server)의 IP주소로 호스팅했던 사이트를 요청한다면 스마트폰(client)에서 웹사이트를 볼 수 있어야한다. 하지만 전제조건이 있다. 원활한 실습을 위해 같은 네트워크 환경이 있어야한다는 것이다. 제한된 환경에서 실습을 진행하여야 한다.

네트워크환경이 달라도 호스팅된 사이트에 접속하는 방법에 대해서는 추후에 학습해보도록 하자.

http://172.30.1.42:8080/index.html 의 주소를 스마트폰에 입력하면 다음과 같이 잘 실행되는 것을 볼 수 있다.