[Web] 웹 브라우저와 서버의 상호작용 방법

 

 

 

웹 브라우저가 서버와 상호작용하는 방법에는 크게 네 가지가 있다.

 

1. URL을 통한 접속

2. <form> 태그를 사용하여  form 제출

3. XHR을 사용한 AJAX 요청

4. 웹 소켓을 통한 연결

 

URL을 통한 접속 - GET 

 

사용자는 주로 웹 브라우저에서 직접 URL을 입력하여

웹 페이지를 방문하거나 < a> 태그가 걸려 있는 링크를 통해

접근한다. 예) <a href =  '주소'> 

이 URL을 통한 접속에는 중요한 특징이 있는데,

바로 GET 메서드를 사용한다는 점이다. 

 

웹에서 사용하는 프로토콜인 HTTP는 요청의 종류를

'메서드(Method)로 구분한다. URL을 통한 접속 요청의 경우

항상 그 메서드가 'GET'에 해당한다.

 

<form> 태그를 사용하여 form제출

 

이 방법은 웹사이트를 이용 시 로그인 창이나 게시글 작성

화면에서 보게 되는 입력란에 주로 사용된다.

HTTP 요청은 GET 외에도 POST라는 메서드로도 가능하다.

form 태그는 GET과 POST 방식 모두 사용할 수 있으나,

주로 POST를 사용한다. 

 

XHR을 사용한 AJAX 요청

 

앞서 설명한 두 가지 방법은 정보를 전송하기 위해

반드시 화면을 새로고침해야 한다는 단점이 있다.

만약 웹 사이트에서 스크롤을 내릴 때 마다 새로운

정보를 요청하여 받아와야 하는 경우라면, 

매번 새로고침하지 않은 상태에서 정보를 요청하고

받아오는 것이 효율적일 것이다. 

 

XHR을 사용하면 페이지 전체를

새로 고치지 않고도 웹 페이지의 일부만 업데이트 할 수 있다.

이는 AJAX 요청을 보내는 데 사용된다. 예를 들어,

HMLHttpRequest 객체를 생성하여 서버에 GET/POST 요청을

보내고 서버로 부터 응답을 받을 수 있다.

 

XHR ?

XHR(XMLHttpRequest) API는 비동기적으로 서버와

데이터를 교환하기 위한 JavaScript의 객체를 말한다.

 

 AJAX ?

AJAX(Asynchronous  JavaScript And XML)의 약자로

직역하면 '비동기 자바스크립트와 XML'이라는 뜻이다.

실제로는 자바스크립트를 통해 서버에 비동기로 요청하는

것이라고 이해할 수 있다. 이름에 XML이 붙지만, JSON을

사용해도 되며, 현재는 JSON을 사용하여 통신하는 경우가 더 많다.

서버와 비동기로 상호작용하는 것을 확인하기 위해서는

다음과 같은 코드를 작성한다. 

 

- 클라이언트 코드 :

HTML 페이지 내에 XHR을 사용하여 서버로 AJAX 요청을 하는 코드

- 서버 코드 :

AJAX 요청에 대한 간단한 응답을 하는 컨트롤러 코드

 

전통적으로 웹 브라우저에서 웹서버로 새로운 정보를

요청하려면 항상 페이지를 이동해야 했다. 

그러나 웹 서비스가 발전하면서 더 나은 사용자 경험을

제공하기 위해 자바스크립트를 사용하여 웹 페이지를

이동하지 않고도 새로운 정보를 요청하는 방법인

AJAX가 활용되고 있다. 실제로는 '

 

예를 들어, AJAX를 사용하면 새로 회원가입 페이지를

띄우지 않으면서도 아이디 중복 검사를 수행할 수 있고

유튜브에서 동영상 목록을 보거나 인스타그램의

뉴스 피드와 같이 페이지에서 스크롤을 내리는 것만으로

다음 목록을 불러올 수 있다.

AJAX를 사용하면 다음 목록을 보기 위해 페이지가 매번 새로고침

되지 않아도 되며 따라서 사용자 입장에서 로딩이 완료될 때까지

매번 기다리지 않아도 되기 때문에 불편함을 해소시킬 수 있다.

 

또 다른 AJAX의 이점으로는,

AJAX를 통해 웹 서비스를 개발하면 프런트엔트와

백엔드를 완전히 분리할 수 있다.

 

 

웹 소켓을 통한 연결

 

웹 소켓(Web Socket)은 위의 세 가지 방법과 달리

서버와 클라이언트 간의 통신을 양방향으로 가능하도록

지원한데. 위 세 가지 방법 모두 클라이언트 쪽에서 먼저

서버로 요청을 해야만 데이터를 보낼 수 있다.

 

하지만 웹 소켓을  통해서 연결하면 클라이언트가 먼저

요청하지 않아도 서버에서 먼저 클라이언트로 데이터를 보낼  수 있다.