In this post, overral Concept of Web and Internet is introuduced.

Internet

1960년 만들어진 인터넷은 수 많은 통신 장치들이 연결되어 있는 통신 시스템을 의미한다.

Web

Web의 동작 방식

• 여기 두 대의 컴퓨터가 있다. 하나의 컴퓨터에는 웹 브라우저 라는 프로그램이 있고 다른 컴퓨터에는 웹 서버라는 프로그램이 있다. 두 컴퓨터는 인터넷으로 연결되어 있다.
• Web Server가 설치된 컴퓨터에는 http://info.cern.ch 라는 주소를 가지고 있다. 웹 서버 컴퓨터의 하드디스크 디렉토리 어딘가에 index.html 이라는 파일이 저장되어 있다.
• 웹 브라우저에서 주소 창에 http://info.cern.ch/index.html 을 검색하면 웹 브라우저가 설치된 컴퓨터는 인터넷을 통해 전기적인 신호를 웹 서버가 설치된 컴퓨터에 보낸다. 이 신호에는 index.html 파일을 원한다는 정보가 담겨있음. 웹 서버 프로그램은 하드 디스크에서 index.html 파일을 찾아 Web Browser가 설치된 컴퓨터에게 전기적 신호로 전송해줌. 그 코드를 Web Browser가 읽어서 화면에 표시하는 방식으로 Web이 동작한다. 이 때, Web Browser가 설치되어 정보를 요청하는 컴퓨터를 Client, 정보를 응답하는 컴퓨터를 Server 라 함.

만약 우리가 웹이 아닌 인터넷에 연결된 게임 서비스를 이용하고 있다면 Game Client와 Game Server 라 부를 수 있는 것이다.

우리가 만든 웹페이지를 전세계 웹 브라우저를 설치한 누구나 볼 수 있게 하는데에는 크게 두 가지 방법이 존재한다. 하나는 우리의 컴퓨터에 직접 Web Server를 설치한 방법이 있을 수 있고 회사에 맡기는 Web Hosting 이라는 방법이 있다.

Web Hosting

인터넷에 연결된 컴퓨터 하나하나를 Host 라 한다. 이러한 컴퓨터를 빌려주는 사업을 Hosting 이라 한다. Cloud 라고도 한다. 호스팅 중에서 컴퓨터의 웹서버와 같이 웹을 동작하기 위해서 필요한 소프트웨어까지 설치해서 빌려주는 빌려주는 비즈니스를 Web Hosting 이라고 한다.

Github Page 기능을 이용하면 쉽게 Web Hosting을 이용할 수 있다.

Web Server

VS code extenstion 중 Live Server를 설치하면 (VS code extensionsion은 주로 사용자 홈 디렉터리의 확장 폴더에 설치됨) 웹 서버가 설치 됨.

Live Server를 설치하고 VS Code 하단에 Go Live를 누르면 Port:5500 이 뜨면서 웹 서버가 실행된다. 동시에 웹브라우저가 뜨는데, 주소에는 http://127.0.0.1:5500 이 적혀있다.

Live Server의 장점은 코드를 편집하면 실시간으로 웹 브라우저의 내용이 변경되는 장점이 있다. 웹 서버를 종료하면 웹 사이트가 열리지 않는데 무슨 일이 일어나는걸까.

아래 그림처럼 현재 우리 컴퓨터에서는 web browser, web server 프로그램이 설치되어 있고 index.html 파일이 존재한다. 1번째 주소는 웹브라우저가 파일을 직접 열었을 때의 주소이다. 두 번째 주소는 웹 서버를 통해 접근했을 때의 주소이다. 그렇기 때문에 웹 서버를 끄면 두 번째 주소로는 접근이 안된다.

웹 서버 뿐만 아니라 게임 서버 등 여러 서버가 실행 중이라고 생각하자. 이 때 브라우저가 어느 서버와 통신할지를 나타내는 번호가 포트 번호(5500) 이다.

Nginx는 처음에 모든 HTML 파일을 한 번에 전송하지 않는다.

클라이언트(브라우저)가 요청할 때마다 그때 필요한 HTML 파일을 찾아서 전송해 준다.

1. 사용자가 http://example.com/ 접속
   • Nginx는 index.html을 브라우저에 전달
2. 브라우저에서 <a href="page2.html"> 같은 링크 클릭
   • 브라우저가 http://example.com/page2.html을 요청
   • Nginx는 그때 page2.html을 찾아서 브라우저에 전달
3. JS 기반 SPA(Single Page Application, 예: React)라면?
   • 실제로는 HTML 파일은 index.html 하나만 주고,
   • 나머지 화면 전환(ex. light/dark mode)은 자바스크립트가 클라이언트에서 처리
   • 다른 html 파일을 요청하는 경우(ex. 버튼 클릭), 브라우저가 새로운 요청.