🌐 웹의 동작

🧑🏼‍🚀 웹의 동작을 알아야 하는 이유

❗문서인 웹페이지를 웹어플리케이션으로 만들고 싶다면 ❗서버에 다양한 요청을 하고, 받은 응답 메시지를 해석하고 싶다면 ❗네트워크에서 일어난 에러를 알고 문제를 해결하고 싶다면

🙋🏻‍♂️ 이 문서를 보고 나면

• HTTP라는 약속과 상태 코드를 알 수 있다.

1. 웹 서버와 웹 클라이언트

우리는 다양한 기기에 포함된 브라우저를 통해 쉽게 웹을 경험하고 있습니다. 우리가 입력한 행위들은 어떻게 요청을 보내고 화면에 출력될까요? 현재의 컴퓨터 시스템에는 클라이언트-서버 모델의 형태가 널리 사용되고 있습니다. 클라이언트와 서버는 각각 client와 server라는 의미의 영어가 어원입니다. 즉 client가 요청(request)하면 server가 응답(response)해주는 구조입니다. 웹서버는 네트워크상에 공개하는 하이퍼텍스트(HTML 형식의 파일)를 쌓고, 웹 클라이언트가 요청하는 HTML 파일을 건네주는 구조로 되어있습니다.

왜 클라이언트와 서버로 나뉘는 것일까?

웹에서 다양한 콘텐츠를 불특정 다수의 사람에게 공개하려면 콘텐츠를 적절히 정리하고 관리하는 것이 매우 중요합니다. 그런데 이 콘텐츠들이 여러 곳에 분산돼 있으면 어떤 문제가 발생할까요? 웹에 존재하는 대부분의 콘텐츠는 업데이트가 이루어집니다. 그런데 여러곳에 분산돼 있으면 어디에 저장되어있는지 파악하고 동시에 갱신하는 것이 매우 어렵고 비용이 많이 드는 작업이 됩니다. 즉 웹 서버와 같이 컴퓨터 하나에 정보를 모아 두는 편이 관리가 수월합니다.

또한 웹은 불특정 다수의 사람이 콘텐츠를 자유롭게 열람할 수 있어야 하는데, 사용자가 콘텐츠를 열람하기 위해 그 콘텐츠를 보관하고 처리하는 웹 서버를 직접 조작하는 것은 비현실적인 일입니다. 그래서 사용자 앞에 있는 PC를 웹 클라이언트로, 콘텐츠 자원을 관리하고 처리하는 컴퓨터를 웹서버로 만들어 인터넷으로 연결하는 것입니다.

그 리소스(html 파일은) 어디서 찾아서 주는 것일까? - URL

클라이언트(유저)는 "어디 어디에 있는 이 콘텐츠를 읽고 싶다."라고 지정할 방법이 필요합니다. 따라서 인터넷상의 콘텐츠를 고유하게 지정하기 위한 구조가 URL(Uniform Resource Locator) 인 것입니다. 즉 유저가 웹 브라우저로 특정 사이트에 접속할 때 주소창에 입력하는 문자열이 바로 URL입니다. 예를 들어 유저가 은행에서 돈을 찾는 화면을 이용한다면 아래와 같은 방식으로 요청할 수 있을 것입니다.

2. HTTP라는 약속

우리는 URL을 이용함으로써 웹상에 공개된 다양한 콘텐츠를 얻을 수 있습니다. 하지만 웹의 구현에는 한 가지 더 넘어야 할 산이 있습니다. 바로 하이퍼텍스트를 비롯한 콘텐츠를 컴퓨터가 어떻게 송수신할지에 대한 것입니다. 인터넷에는 다양한 종류의 컴퓨터가 연결돼있는데, 웹 서버와 웹 클라이언트가 통신하려면 어떻게 정보를 주고받을지에 대한 약속이 필요합니다. 이 약속을 통신 프로토콜(communication protocol) 이라고 합니다. 웹의 창시자 버너스 리 박사는 HTML 전송에 적합한 프로토콜을 새로 고안했습니다. 이것이 현재도 널리 사용되고 있는 HTTP (HyperText Transfer Protocol) (opens new window) 입니다. HTTP는 다른 프로토콜에 비해 매우 단순해서 간단히 구현할 수 있어 쉽게 널리 이용됐습니다.

1. HTTP 약속 알기

1) URL(Uniform Resource Location)

• URI(Uniform Resource Identifier)라고도 함.
• URI가 URL보다 더 상위 개념이지만 현재 혼용해서 사용하고 있음. 같은 것으로 이해해도 무방함
• URL은 스킴(scheme), 호스트명, 경로명으로 구성된다. 위 예에서 스킴은 http, 호스트명은 wooteco.com, 경로명은 webcontents/index.html이 된다.

a) 스킴(scheme)

스킴은 리소스를 획득하기 위한 방법을 나타냅니다. 웹 애플리케이션에서는 대부분의 경우 HTTP 프로토콜을 사용합니다. HTTP 이외에 다음과 같은 프로토콜들이 있습니다.

• https: 암호화된 http 통신을 나타내는 스킴
• mailto: 이메일의 수취인을 나타내는 스킴
• ftp: FTP 프로토콜을 통한 파일 획득을 나타내는 스킴
• file: 파일 시스템 속의 파일이나 디렉터리를 참조하기 위한 스킴

b) 호스트명

리소스가 존재하는 호스트(컴퓨터)의 이름을 나타냅니다. 인터넷을 비롯한 컴퓨터 네트워크의 세계에서 네트워크에 접속되어 다른 컴퓨터로부터 요구를 받고 처리한 결과를 되돌려주는 컴퓨터를 일반적으로 호스트 컴퓨터라고 합니다. 호스트명은 호스트 컴퓨터의 이름을 가리킵니다.

c) 경로명

호스트명에서 지정된 컴퓨터상의 리소스 위치를 나타냅니다.

www.wootecto.com/webcontents/index.html

위 경로에서는 webcontents 하위에 있는 index.html이라는 파일을 나타냅니다. 이처럼 URL을 이용하여 도메인 -> 컴퓨터 -> 디렉터리 -> 파일명과 같이 계층적으로 리소스의 위치를 지정할 수 있어 인터넷상에서 리소스의 위치를 나타낼 수 있습니다.

2) HTTP Request Line

a) 메서드(scheme)

요청의 종류를 나타냅니다. 여기서는 GET, 즉 ‘URI’에서 지정한 정보를 보내 주세요’라는 의미가 됩니다. 메서드에는 그 밖에도 몇 가지가 정의돼 있는데, 웹 브라우저에서 웹 서버로 송신되는 요청의 대부분은 GET 메서드에 따른 요청입니다.

b) URI(Uniform Resource Identifier)

GET메서드는 단순히 ‘정보를 주세요’라는 의미에 불과하며, URI는 '무엇을 원하는가’를 나타냅니다. 일단은 URL과 URI는 거의 같은 것으로 생각해도 무방합니다.

c) HTTP 버전

버전에 따라 이용할 수 있는 메서드의 종류와 요청 헤더의 종류가 달라지므로 어떤 버전에 따른 요청인지 저장한 것입니다. 두번 째 줄 이후의 나머지 부분은 메시지 헤더라고 하며, 요청의 부가적인 정보를 나타냅니다

d) Accept

웹 클라이언트가 받을 수 있는 데이터의 종류를 표시한 것입니다. 데이터의 종류는 Content-Type이라는 형식으로 표시되며, 클라이언트에서 받을 수 있는 Content-Type을 콤마로 구분해서 지정합니다. 이렇게 정보를 표현함으로써 Aceept 필드를 참조하면 웹 서버는 불필요한 정보를 송신하지 않아도 될 가능성이 있는 것입니다.

e) Accept-Language

웹 클라이언트가 받을 수 있는 자연 언어의 종류를 나타냅니다. 자연 언어는 사람이 사용하는 언어를 가리킵니다. 여기서는 ‘en-us’로 되어 있음으로 영어를 나타냅니다.

f) User-Agent

이용 중인 웹 브라우저의 종류와 버전을 나타냅니다

g) Host

요청을 보낸 곳의 호스트명과 포트번호를 지정한다.

3) HTTP response

a) 상태라인

HTTP 요청과 마찬가지로 HTTP 응답에서도 첫 번째 줄이 가장 중요하며, 이것을 상태 라인이라고 합니다. HTTP 상태 라인도 구성은 간단합니다. HTTP 버전과 상태 코드, 응답 구문으로 세 부분으로 나뉩니다

HTTP 버전은 요청에서와 마찬가지로 사용하는 프로토콜의 버전을 나타냅니다. 중요한 것은 상태 코드로 이 부분을 보면 요청이 성공했는지 실패했는지 쉽게 알 수 있습니다. 200은 요청이 성공해 정상적인 응답이 돌아왔음을 나타내는 상태 코드입니다.

대표적인 HTTP status code

• 200 - OK
• 201 - Created
• 302 - Found(HTTP 1.0)
• 304 - Not Modified
• 401 - Unauthorized
• 404 - Not Found
• 500 - Internal Server Error
• 503 - Service Unavailable

---

• status code 단위별 의미는?
  • 2XX : 성공. 클라이언트가 요청한 동작을 수신하여 이해했고 승낙했으며 성공적으로 처리
  • 3XX : 리다이렉션 완료. 클라이언트는 요청을 마치기 위해 추가 동작이 필요함.
  • 4XX : 요청 오류. 클라이언트에 오류가 있음
  • 5XX : 서버 오류. 서버가 유효한 요청을 명백하게 수행하지 못했음

b) 메시지 헤더

상태 라인에 이어서 나오는 것이 메시지 헤더로 두 번째 줄부터 빈 줄까지 계속됩니다. 메시지 헤더는 HTTP 요청의 메시지 헤더와 같은 형식으로, 응답에 관한 부가적인 정보가 들어있습니다.

c) 메시지 본문

웹 브라우저는 메시지 본문에 있는 HTML을 해석해 화면에 표시합니다. HTML은 텍스트 형식이므로 우리가 읽을 수 있는 형식으로 메시지 본문에 저장돼 있습니다. 그러나 GIF나 JPEG 형식의 이미지 파일을 요청했을 경우에도 마찬가지로 그 데이터가 메시지 본문에 들어갑니다.

4) HTTP method

주로 많이 사용하는 메소드는 GET과 POST입니다.

GET은 Select 적인 성향을 가지고 있습니다. GET은 서버에서 어떤 데이터를 가져와서 보여준다거나 하는 용도이지 서버의 값이나 상태 등을 바꾸지 않습니다. 게시판의 리스트라던지 글 보기 기능 같은 것이 이에 해당합니다.

POST는 서버의 값이나 상태를 바꾸기 위해서 사용합니다. 글쓰기를 하면 글의 내용이 데이터베이스에 저장이 되고 수정을 하면 데이터베이스값이 수정이 됩니다. 이럴 경우에 POST를 사용합니다.

📘 정리

✅ 웹은 불특정 다수의 사람들이 콘텐츠를 자유롭게, 효율적으로 접근하기 위해 서버와 클라이언트로 나뉘었다.
✅ url은 인터넷상의 콘텐츠를 고유하게 지정하기 위한 구조이다.
✅ HTTP는 서버와 클라이언트가 정보를 주고받기 위한 약속인 통신 프로토콜이다.
✅ url은 리소스를 얻기 위한 방법인 스킴, 리소스가 존재하는 호스트(컴퓨터의) 이름, 호스트 명에 지정된 컴퓨터상의 리소스 위치를 나타내는 경로명으로 구성된다.
✅ HTTP Request는 클라이언트가 서버에 전달해서 서버의 액션이 일어나게끔 하는 메시지이고 그에 대한 정보를 담고 있다.
✅ HTTP Response는 클라이언트의 요청에 대한 서버의 답변이고 그에 대한 정보를 담고 있다.
✅ HTTP Method는 클라이언트와 서버 사이에 이루어지는 요청(Request)과 응답(Response) 데이터를 전송하는 방식이다.

🔗 참고 링크

• MDN 웹의 동작 방식 (opens new window)