⭐지식공유⭐_클라이언트 사이드와 서버 사이드의 개념과 차이점 Client-side / Server-side & Ajax 장단점, 구성요소 총정리!!!

안녕하세요 jju_developer입니다.

오늘은 제이쿼리 비동기 방식 연동에 대해 설명하다가

따로 설명을 드려야 할 것 같은 정보가 있어서!! 글을 정리하여 적어봅니다~

 

책을 읽다보면 서버사이드와 클라이언트 사이드를 많이 접하실텐데요?

웹 프로그래밍에서 서버 사이드 / 클라이언트 사이드가 나뉘고,

어느 쪽에 중심을 두느냐에 따라 프로젝트의 방향이 달라지게 됩니다.

 

그렇다면 클라이언트 사이드와 서버 사이드는 무엇일까요?

 

1. 클라이언트 사이드(Client-Side)

---

- 클라이언트(사용자) 측에서 처리하는 것.

클라이언트(사용자)가 입력한 것을 수신해서 HTML로 만들어서 크롬과 같은 애플리케이션에 해석해서 표시합니다.

대표적으로 자바스크립트(Javascript)가 있습니다.

 

 

2. 서버 사이드(Server-Side)

---

- 서버(제공자) 측에서 즉시 처리하는 것.

서버 사이드는 클라이언트로 보낼 웹 페이지(HTML, JavaScript 등이 담긴)를 만들며,

작업들(사용자 유효성, DB 관련 등)을 수행합니다.

대표적인 언어는 Java, PHP, Ruby, Python, Node.js 등이 있습니다.

 

 

즉, 서버와 클라이언트는 웹 페이지로 서로 커뮤니케이션을 한다고 볼 수 있다.
클라이언트 사이드 언어를 다루고 그에 관련된 개발자들을 프론트 엔드
서버 사이드 언어를 다루고 그에 관련된 개발자를 백엔드라 부릅니다.

 

웹사이트를 제작하는데 쓰이는 스크립트는
실행되는 위치에 따라 클라이언트 사이드 스크립트와 서버사이드 스크립트로 구분합니다.

 

서버사이드 스크립트는 서버에서 해석해서 구동되는 스크립트이고,

클라이언트 사이드 스크립트는 브라우저에서 해석해서 구동되는 스크립트입니다.

 

서버사이드 스크립트는 DB를 액세스 하는 게 주요 목적이고,

클라이언트 사이드 스크립트는 브라우저의 객체를 제어하는데 쓰입니다.

 

서버 사이드와 클라이언트의 데이터 교환은 HTTPS로 하는데요!

여기서 HTTP의 한계를 알아보겠습니다.

 

 

HTTP의 한계

HTTP의 뒤 두 글자 Transfer Protocol.

HTTP의 대전제는 “URL 및 부가정보를 통해 사용자가 원하는 페이지를 서버에 요청한다,

그리고 서버는 해당 요청에 응답한다”입니다.

 

사용자가 URL을 요청할 때에만! 서버에서 해당 페이지를 꺼내주는 식이라는 겁니다.

거꾸로 말하자면, 사용자는 서버로부터 새로운 정보를 받아보기 위해서, 반드시, 새로운 URL을 요청해야 한다는 말과 같습니다.

 

예전에 로그인할 때 아이디 중복확인하는 거 해보셨죠?

그때 서버에게 중복 검사를 요청하기 위해서 새 페이지를 요청해야만 했었는데,

회원 정보 작성 중에는 페이지를 이동할 수 없었기 때문에

새로 요청한 페이지를 팝업창으로 띄웠던 것입니다.

(요즘 사이트들은 대부분 팝업창 없이 검사가 가능합니다. 이것이 바로  Ajax를 이용했기 때문이죠!!!)

 

 

AJAX

그 당시에 떠오르기 시작한 구글은 HTTP 규약을 뛰어넘는 방안을 제안합니다.

이름하여 AJAX입니다.

 

AJAX를 쓰면, 유저는 새로운 HTML을 서버로부터 받는 것이 아닙니다.

즉, 유저는 새로운 웹페이지로 이동하는 것이 아닙니다. 대신, 동일한 웹페이지 내에서 DOM을 변경하게 됩니다.

1. 요청 페이지에서 이름 칸에 ‘쮸’를 쓰고, 내용에 ‘안녕하세요. 쮸입니다’라고 썼다고 해봅시다.
2. 사용자의 이벤트로부터 Javascript는 해당 이름과 내용이 쓰인 DOM을 읽습니다.
3. 그리고는 XMLHttpRequest 객체를 통해 웹서버에 해당 이름과 내용을 전송합니다.
4. 웹서버는 요청을 처리하고 XML, Text 혹은 JSON을 XMLHttpRequest 객체에 전송합니다.
5. 그러면, Javascript가 해당 응답 정보를 DOM에 씁니다.
6. 그렇게 결과페이지가 만들어집니다.

​

AJAX를 쓰면 새로운 HTML을 서버로부터 받아야 하는 것이 아닙니다.

동일한 페이지의 일부를 수정할 수도 있는 가능성이 생깁니다.

결과적으로 사용자 입장에서는 페이지 이동이 발생되지 않고 페이지 내부 변화만 일어나게 됩니다. HTML 페이지 전체를 다 바꿔야 하는 것이 아니라 부분만 바꿀 수 있게 되는 것입니다.

 

이렇게 따로 페이지의 이동 없이 페이지 내부에서 검사를 하여 결과를 출력하는 것을 볼 수 있죵?

아이디 중복체크하려면 필히 서버 쪽 DB와 통신하기 위해서 웹서버 동작이 필요한데,

이때 페이지를 바꾸지 않고 요청 결과만 그대로 가져와서 띄우면 되게 됩니다.

그 외에도 비밀번호 강도 확인, 검색어 실시간 추천, 마우스 커서나 스크롤바 위치에 반응하는 그림, 지도 표시 서비스 등등 다양합니다.

 

<정리>

Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있게 해 줍니다.

즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다.

 

이때 서버와는 다음과 같은 다양한 형태의 데이터를 주고받을 수 있습니다.

• JSON
• XML
• HTML
• 텍스트 파일 등

 

Ajax의 장점

Ajax를 이용하면 다음과 같은 장점이 있습니다.

​

1. 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다.

2. 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있습니다. (Post를 통해 값을 서버 쪽으로 전달해 처리되고 받아올 수 있음)

3. 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있습니다.

4. 백그라운드 영역에서 서버로 데이터를 보낼 수 있습니다.

 

 

Ajax의 단점

Ajax를 이용하면 여러 장점을 가지지만, Ajax로도 다음과 같은 일들은 처리할 수 없습니다.

​

1. Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식(사용자가 직접 요청)을 사용하므로, 

서버 푸시 방식(푸시알람 같은)의 실시간 서비스는 만들 수 없습니다.

2. Ajax로는 바이너리 데이터를 보내거나 받을 수 없습니다.

3. Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없습니다.

4. 클라이언트의 PC로 Ajax 요청을 보낼 수는 없습니다.

 

 

Ajax 구성 요소

- 웹 페이지의 표현을 위한 HTML과 CSS

- 데이터에 접근하거나 화면 구성을 동적으로 조작하기 위해 사용되는 DOM 모델

- 데이터의 교환을 위한 JSON이나 XML

- 웹 서버와의 비동기식 통신을 위한 XMLHttpRequest 객체

- 위에서 언급한 모든 기술을 결합하여 사용자의 작업 흐름을 제어하는 데 사용되는 자바스크립트

1 : 사용자에 의한 요청 이벤트가 발생합니다. (-> jju240 아이디 생성 요청함)

2 : 요청 이벤트가 발생하면 이벤트 핸들러에 의해 자바스크립트가 호출됩니다.

3 : 자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청을 보냅니다.

이때 웹 브라우저는 요청을 보내고 나서, 서버의 응답을 기다릴 필요 없이 다른 작업을 처리할 수 있습니다.

4 : 서버는 전달받은 XMLHttpRequest 객체를 가지고 Ajax 요청을 처리합니다.

5,6 : 서버는 처리한 결과를 HTML, XML 또는 JSON 형태의 데이터로 웹 브라우저에 전달합니다.

이때 전달되는 응답은 새 페이지 전부 보내는 것이 아니라 필요한 데이터만을 전달합니다.(->이미사용 중이라는 문구)

7 : 서버로부터 전달받은 데이터를 가지고 웹 페이지의 일부분만을 갱신하는 자바스크립트를 호출합니다.

8 : 최종으로 웹 페이지의 일부분만이 다시 로딩되어 표시됩니다. (-> 이미 사용 중인 아이디입니다!)

 

 

XMLHttpRequest 객체

Ajax의 가장 핵심적인 구성 요소는 바로 XMLHttpRequest 객체입니다.

Ajax에서 XMLHttpRequest 객체는 웹 브라우저가 서버와 데이터를 교환할 때 사용됩니다.

웹 브라우저가 백그라운드에서 계속해서 서버와 통신할 수 있는 것은 바로 이 객체를 사용하기 때문입니다.

let httpRequest = new XMLHttpRequest();

 

이상으로 서버사이드, 클라이언트의 개념과 그 둘이 어떻게 데이터를 교환하는지 알아보았습니다.

⭐⭐⭐⭐⭐ 이번 글은 이해하고 적는 것에 초점을 두었기 때문에 시간이 많이 걸렸었는데용 ㅎㅎ😥\

중요한 개념이니 꼭 숙지하시는데 도움이 되었으면 좋겠습니다~!!!

 

그럼 오늘도 수고하셨습니다~

 

 

참고 웹사이트: http://tcpschool.com/ajax/ajax_intro_works