웹의 작동원리(1)

네트워크 과목을 수강하기 전이나, 웹의 프로세스들을 가볍게 알고가면 좋은 정보들을 정리해보았다.

 

---

 

인터넷이란?

수십억대의 컴퓨터를 모두 연결할 수 있는 기술 인프라

인터넷의 작동 원리

1. 2대의 컴퓨터를 연결하면, 서로 통신이 가능함 -> 네트워크
2. 근데 10개의 컴퓨터를 연결하려는 경우 45개의 케이블이 필요!!
3. 그래서, 라우터라는 작은 컴퓨터에 10개의 컴퓨터를 연결하면, 10개의 케이블로만 연결이 가능!
4. 이 라우터끼리 연결하면, 무한대로 확장하여 다른 pc끼리도 통신이 가능함.
   • 이때, 라우터-PC 의 연결은 케이블로연결하지만
   • 라우터-라우터의 연결은 라우터의관리를 담당하는 ISP(Internet Service Provider)에 의하며, ISP-다른 회사의 ISP를 통하여 라우터에 액세스.

주소 찾기

173.194.121.32 로접근하면 좋겠지만, 이숫자를 모두 외우고 있을 수 없어서 domain을 사용하는데, www.google.com 과 같은 것.

• 이는 DNS(Domain Name Server)들이 그 문자로 된 도메인이 접근가능한 실제 ip를 다양한 DNS를 거쳐 알려줌.

 

---

 

 

웹 서버란?

• HW 측면 : 웹서버 소프트웨어, 웹사이트의 구성요소 파일을 저장하는 컴퓨터 -> 인터넷에 연결되어있으며, 웹에 연결된 다른 장치와의 물리적 데이터 교한을 지원
• SW 측면 : 웹사용자가 HTTP 서버로 (URL, HTTP를 이해할 수 있는 소프트웨어) request하면, 그 요청에 response하여 해당 컨텐츠를 전달하는 것.

동적 vs 정적 웹서버

• 정적 웹서버 : 스택, HTTP서버, 컴퓨터로 구성되어있음. 호스팅된 파일을 있는 그대로(html) 브라우저로 보냄.
• 동적 웹서버 : HTTP서버를 통해 정적웹서버 + 응용프로그램서버, db, 추가 sw 등을 업데이트 하여 브라우저로 보냄. 쉽게말해 서버가 컨텐츠를 처리하거나, 데이터 베이스에서 정보를 불러와 컨텐츠를 생성하는 경우.
  위키, mdn 에 있는 수천개의 웹페이지에는 실제 html 문서로만 구성된것이 아님. Mdn 웹페이지를 예로 들면, 웹서버에는 애플리케이션 서버가 존재하는데 그 애플리케이션서버에서 ^1) db에서 컨텐츠를 가져와 ^2) 포맷팅 후 html 템플릿에 넣고 , 결과를 보내는 역할을 한다. 이러한 프로세스를 통한 결과물을 빌드하여 response하여 우리가 보는 웹페이지를 볼 수 있는 것.

웹 호스팅

웹서버는 웹 사이트의 file, image, css style sheet, javascript file, font, video를 포함한 모든 html 문서와 리소스를 저장해야하는데,
모든 파일을 물리적으로 서버컴퓨터에서 호스팅할수는 있지만 전용 웹서버에 저장하는 것이 좋다. (유지보수 쉬움)
호스팅 회사를 통하여 호스팅 할 떄는, 파일을 웹서버에 업로드 하기만 하면 됨! (easy~~ )

HTTP를 통한 통신

두 컴퓨터간에 hyper tetxt(링크된 웹문서)를 전송하는 방법이다.
이는 text의 형태이고, state-less(상태정보를 저장하지 않는다. 이전 통신기억, 트랜잭션에서 어떤단계를 했는지 기억을 하지 않음. ) 이다.
그리고 클라이언트가 HTTP를 통해 파일을 요청할때, 파일의 URL 을 통해 요청하고 웹서버는 그를 통해 요청에 응답.

1. 클라이언트 -> 서버에 URL을 통해 파일을 요청
2. HTTP서버는 요청받은 URL이 기존 파일과 일치하는지 확인
3. 웹서버는 파일내용(+응답코드등)을 브라우저로 보내고 -> 애플리케이션 서버에서 필요한 파일을 빌드함(chrome)

 

---

 

하이퍼 링크란?

웹 이전에는 URL만을 통해 문서에 액세스하고, 서로를 link하는 것이 매우 번거롭고 어려웠다. 이를 혁신적으로 해결한것이 하이퍼링크!!
링크는 모든 텍스트 문자열을 URL과 연결이 가능해, 사용자는 대상 문서에 즉시 도달이 가능하다!!

링크의 종류

• Internal link : 두 웹페이지가 동일한 웹사이트에 속하는 경우
• External link : 웹페이지에서 다른 사람의 웹페이지로 연결되는 링크
• Incoming link : 다른사람의 웹페이지에서 연결이 되는! 링크

링크, 검색엔진

검색엔진은 링크를 따라 웹사이트의 다양한 페이지를 검색 + 도달하기에 적합한 검색 쿼리를 결정. SEO(검색엔진 최적화) 기법 등이 존재.

 

---

URL 이란?

Uniform Resource Locator. 인터넷에서 자원의 위치!! 각각의 유일한 URL은 자원의 유일한 주소를 뜻함.
http통신을 할 때, client-server 사이에 파일을 request, response할때도 URL을 통해 요청함.

URL 의 구조

http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument

1. HTTP(Protocol)
   http는 프로토콜(컴퓨터 네트워크에서 데이터를 교환하거나 전송하기 위한 일종의 통신 규약.) 보통의 웹사이트에서는 http, https(secure) 을 사용하고, 이뿐만 아니라 mailto:, gtp: 와같은 다양한 프로토콜이 존재함.
2. www.example.com(Domain Name)
   어떠한 웹 서버가 요구되는 것인지를 가리키며, 이 대신 직접 ip 주소를 통해 접근도 가능하다. (위 주소찾기 포스팅을 참고)
3. :80(PORT)
   웹서버에서 리소스에 접근하기위한 80번 gate! 이라고 생각하면 편하며, 만약 웹서버가 리소스에 접근하기위해 HTTP포트를 default값인 80port - localhost:80., https: 443를 사용한다면 포트번호는 생략
   가능하고, 그렇지 않은 경우 무조건 써줘야함!
4. /path/to/myfile.html (Path to the file)
   웹서버에서 리소스에 접근할 수 있는 경로. 초기의 웹에서는 위의 예시처럼 폴더\파일의 위치를 표현했으나, 요즘에는 웹서버에서 추상화하여 보여줌!
5. ?key1=value1&key2=value2 (parameter)
   &기호로 구분된 key-value 의 짝을 이룬 list. 웹서버는 이러한 파라미터로 정보를 request, response하며 각각의 웹서버는 parameter표현하는 규칙을 가지고 있다. 예를들어, 네이버아이디로로그인(네아로) 기능을 RESTful로 구현할 때 URL을 통해 접근하며, 네이버에서 정해놓은 Auth 서버에 사용자의 정보를 요청하고, 응답받기위하여 정해진 key로 request를 해야 성공적인 response를 받을 수 있다.
6. #SomewhereInTheDocument (Anchor)
   anchor는 일종의 resource 내부에서의 bookmark! 스크롤스크롤 . # 이후에 오는 정보들은 Fragment Identifier(부분 식별자)로, 서버에 request 할 때 이부분은 요청하지 않는다!!

 

---

 

 

참고.

RESTful URL(Semantic URL)

앞의 URL 의 표현방식보다 조작을 쉽게하며, 문자의 조합으로 표현한다. 웹사이트나 웹서비스의 접근성을 향상시키는 방식으로, 검색엔진 최적화나 웹리소스를 이용하기 위한 방식이다.
기존 url : http://localhost:8080/index.php?page=name -> 시멘틱 url : http://example.com/name
참고로, REST란 Representational State Transfer 의 약자로, 소프트웨어프로그램 개발의 아키텍쳐의 한 형식이다. 방식에 제한을 두는 것이 아니라, 비공식적인 구현가이드로 좀 더 보편적으로 사용되는 RESTful routing 을 참고하자.
https://www.a-mean-blog.com/ko/blog/%ED%86%A0%EB%A7%89%EA%B8%80/_/REST%EC%99%80-RESTful-API