웹페이지의 표시 과정
웹 브라우저가 웹 서버로 웹 페이지를 요청하면, 웹 서버가 해당 페이지의 내용을 HTML 형식으로 응답한다.
1. 웹 브라우저 -> 웹 서버 : 보고 싶은 웹 페이지의 URL을 요청
2. 웹 서버 -> 웹 브라우저 : 웹 페이지의 HTML 파일을 응답한다.
3. 웹 브라우저 : HTML 내용을 확인하고, 추가로 CSS, JavaScript, JPEG가 필요하면 해당 파일을 받기 위해 재요청
4. 웹 브라우저 : 응답으로 받은 HTML, CSS, JPEG, JavaScript 파일들을 조합하여 웹 페이지에 표시한다.
HTTP(HyperText Transfer Protocol)
위의 정보 교환 과정은 어떻게 일어나는 걸까?
클라이언트 PC의 웹 브라우저와 웹 서버는 HTTP(HyperText Transfer Protocol)라는 애플리케이션 계층의 프로토콜을 사용한다.
HTTP 메세지
통신 과정에서 주고받은 정보들. 크게 요청(Request)와 응답(Response)의 두 가지 형태로 구분된다.
요청/응답 정보 행 메시지의 종류나 상태를 표시
헤더 메시지에 대한 상세한 정보
바디 응답의 경우, 이 부분에 HTML 데이터가 들어감
※HTTP는 대표적인 무상태 프로토콜이다.
HTTP는 통신 시 정보를 한 번씩 주고 받은 후 바로 끊는 형태,
즉 상태 정보를 저장하지 않는 stateless 통신 형태를 띈다.
1.HTTP 요청과 URL
특정 웹 페이지를 받아보기 위해서 HTTP 요청을 보내는데, 이 때 URL(Uniform Resource Locator)이라는 문자열을 사용한다.
Example : http://www.sample.co.kr/sample/index.html
스키마(Schema) : 사용하는 프로토콜을 명시 (Example의 http)
호스트(host) : 서버의 이름 또는 역할을 명시 (Example의 www)
도메인(domain) : 서버를 운영하는 조직을 명시 (Example의 sample.co.kr)
디렉터리(directory) : 서버 내의 디렉터리를 명시 (Example의 sample)
파일(file) : 해당 디렉터리 내의 파일을 명시 (Example의 index.html)
2.HTTP 응답과 상태 코드
서버는 웹 브라우저의 HTTP 요청에 대해 HTTP 응답을 보낸다.
HTTP 응답 데이터의 첫 번째 줄에는 상태 코드가 들어가고, 응답이 정상일 경우 바디에 요청한 웹 페이지의 내용이 들어간다.
※상태 코드의 의미
100번대는 정보, 200번대는 성공, 300번대는 경로 전환, 400번대는 에러를 의미한다.
상태 코드 |
의미 |
100 Continue |
서버가 헤더는 받았고 바디가 올 것을 기다리고 있음 |
101 Switching Protocols |
클라이언트가 서버에게 프로토콜을 바꾸자고 제안했고 서버도 수락함. |
200 OK |
요청이 성공했고 요청한 결과 데이터를 응답으로 보냈음. |
201 Created |
요청이 성공했고 새로 만들어진 URL을 응답으로 보냈음. 웹 서비스나 웹 애플리케이션에서 사용됨. |
301 Moved Permanently |
요청한 내용이 다른 경로로 옮겨졌음. 이후 옮겨진 경로로 요청해야 함. |
302 Found |
요청한 내용이 다른 경로로 옮겨졌음. 임시로 옮겨진 것이라 이후에도 동일한 경로로 요청해야 함. |
400 Bad Request |
요청에 문제가 있음 |
403 Forbidden |
요청한 내용은 접금 금지됨. |
404 Not Found |
요청한 내용을 찾을 수 없음 |
500 Internal Server Error | 서버 내부 오류 - 이 에러는 웹 서버가 요청사항을 수행할 수 없을 경우에 발생함 |
웹 서비스와 웹 애플리케이션
웹 페이지에서 사용자가 어떤 입력을 하면, 웹 페이지는 웹 서버에 그에 대한 응답 결과를 요청한다.
그러면 웹 서버는 그 응답 결과를 다시 사용자에게 되돌려 준다.
이때 웹 서버에서 응답 결과를 동적으로 만들어주는 것을 = 웹 서비스 = 웹 애플리케이션 이라고 한다.
웹 서버와 웹 서비스 동작 비교
웹 서버 : 웹 브라우저가 웹 페이지를 요청하면 웹 서버가 미리 만들어 둔 정적 HTML 파일의 데이터로 응답
웹 서비스 : 웹 서버가 결과를 미리 만들어 놓지 않고 서버 프로그램이 HTML 데이터를 동적으로 만들어서 응답
즉, 웹 서버와 웹 서비스의 차이는, 미리 만들어둔 정적인 HTML 파일로 응답하느냐, 아니면 동적으로 HTML 데이터를 만들어 응답하느냐의 차이이다.
*웹 서버에서 동작하는 프로그램을 서버 사이드 프로그램(Server side Program) 이라고 부른다. 서버 측 프로그램은 HTTP 메시지를 주고받는다는 조건만 맞으면 구현 방법은 어떤 것이라도 상관 없기 때문에 PHP, Python, Rudh 등의 다양한 언어로 개발된다.
GET 방식 vs POST 방식
요청을 보낼 때에는 주로 GET 방식과 POST 방식 둘 중 하나의 요청 방식을 많이 사용한다.
GET 방식 : 내용이 URL에 포함된다. 정적인 웹 페이지처럼 다룰 수 있음. 간단한 요청, 또는 보안이 필요 없는 요청에 사용.
POST 방식 : 내용이 Body에 담긴다. 정보를 저장하거나 변경할 때 사용. GET 보다 더 큰 데이터를 전송 가능.
웹 서비스의 사용성을 높이는 AJAX
예전에는 응답 결과 표시를 웹 페이지 전체를 다시 그려 갱신하는 방식을 사용하였다. 그러나 최근의 웹 서비스는 시스템의 사용성을 높이기 위해 AJAX(Asynchronous JavaScript and XML)라는 기술을 사용한다.
HTTP 메시지로 통신한다는 점에서 일반적인 요청 방식과 비슷하나, *요청을 보내는 주체가 브라우저가 아닌 자바스크립트* 라는 것에 차이가 있다.
즉, AJAX는 웹 브라우저가 웹 서버에 요청하는 것이 아닌, 자바스크립트로 작성된 프로그램이 웹 서버와 통신한다.
또한, 응답 결과로 받은 내용을 웹 브라우저가 전체 페이지를 갱신하는 것이 아니라, 자바스크립트가 웹 페이지의 특정 부분에만 응답받은 내용이 갱신되도록 처리한다.