웹과 HTTP

인터넷과 웹, IP, DNS 그리고 HTTP까지

얻어갈 것

이번 레슨에서는 브라우저에 주소를 입력했을 때 화면이 뜨기까지의 흐름을 잡습니다.

인터넷은 컴퓨터들이 서로 연결된 거대한 길입니다. 웹은 그 길 위에서 브라우저와 서버가 정해진 약속에 따라 대화하는 방식입니다.

웹의 기본 그림은 단순합니다. 브라우저가 요청하고, 서버가 응답합니다. 우리가 만든 테트리스 페이지도 브라우저가 웹 서버에서 파일을 받아 실행한 결과라고 보면 됩니다.

인터넷에서 컴퓨터를 찾아가려면 기본적으로 주소가 필요합니다. 그 주소를 보통 IP 주소라고 부릅니다.

개발할 때 자주 보는 localhost:3000도 같은 감각입니다. localhost는 내 컴퓨터를 뜻하고, 3000은 그 안에서 켜둔 개발 서버의 포트입니다.

브라우저 주소창에 입력하는 전체 주소를 URL이라고 부릅니다. 예를 들어 https://example.com/posts/1 안에는 여러 정보가 섞여 있습니다.

DNS는 주로 example.com 같은 도메인 이름을 실제 서버 주소인 IP로 바꾸는 일을 맡습니다.

DNS로 서버 위치를 찾고 나면, 그다음부터는 브라우저가 해당 서버로 HTTP 요청을 보냅니다.

브라우저와 서버는 HTTP라는 프로토콜로 대화합니다. 프로토콜은 쉽게 말하면 서로 알아듣기 위한 대화 형식, 규격입니다.

주소가 http://나 https://로 시작하는 것도 이 프로토콜을 가리킵니다. 지금은 HTTPS가 암호화가 들어간 HTTP라고만 잡아도 충분합니다.

HTTP의 기본 흐름은 단순합니다.

용어	뜻
`request`	클라이언트가 서버에게 보내는 요청
`response`	서버가 클라이언트에게 돌려주는 응답

예를 들어 브라우저에서 어떤 페이지를 열면 브라우저가 서버에 request를 보냅니다. 서버는 그 요청을 보고 HTML, CSS, JavaScript, 이미지, 데이터 같은 response를 돌려줍니다.

request와 response는 보통 header와 body로 나눠 볼 수 있습니다.

용어	뜻
`header`	요청이나 응답에 대한 설명 정보
`body`	실제로 주고받는 내용

header에는 주소, 요청 방식, 응답 형식, 로그인 정보, 캐시 정보처럼 본문을 해석하는 데 필요한 정보가 들어갑니다. body에는 HTML 문서, JSON 데이터, 이미지 파일처럼 실제 내용이 들어갑니다.

Chrome DevTools의 Network 탭을 열면 요청 하나하나를 눌러볼 수 있습니다.

status code는 서버가 response에 붙여 보내는 상태 숫자입니다. 요청이 성공했는지, 주소를 못 찾았는지, 로그인이 필요한지, 서버 안쪽에서 문제가 났는지를 빠르게 알려줍니다.

상태 코드는 처음에 아래 정도만 알아도 충분합니다.

상태 코드	의미	처음 볼 때의 해석
`200`	성공	요청한 내용을 잘 받았습니다.
`400`	잘못된 요청	브라우저나 코드가 서버가 이해하기 어려운 요청을 보냈을 수 있습니다.
`401`	로그인 필요	인증이 안 된 상태입니다.
`403`	권한 없음	로그인은 했더라도 이 요청을 할 권한이 없을 수 있습니다.
`404`	찾을 수 없음	주소가 틀렸거나 해당 페이지/데이터가 없습니다.
`500`	서버 문제	서버 코드나 서버 안쪽 설정에서 문제가 났을 가능성이 큽니다.

HTTP만 프로토콜인 것은 아닙니다. 인터넷 위에는 목적이 다른 여러 프로토콜이 함께 쓰입니다. 다만 웹페이지를 열고 API를 호출하는 흐름에서는 HTTP가 가장 자주 쓰입니다.

지금 단계에서 전부 읽을 필요는 없습니다. 나중에 Network 탭을 더 자주 보게 되면 아래 문서들이 기준점이 됩니다.

웹은 결국 요청과 응답으로 움직입니다. 브라우저가 서버를 찾고, 필요한 것을 요청하고, 받은 파일을 화면으로 조립합니다.

다음 레슨에서는 이 흐름 위에서 화면 쪽 일과 서버 쪽 일을 프론트엔드와 백엔드로 나눠봅니다.