[HTTP/네트워크] 브라우저의 작동원리 (보이는 곳)

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다.

 

🦔SPA를 만드는 기술 : AJAX

---

AJAX는 Asynchronous JavaScript And XMLHttpRequest의 약자로, JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법이다.

 

AJAX의 가장 큰 특징은 , 웹 페이지에 필요한 부분을 필요한 데이터만 비동기적으로 받아와 화면에 그려낼수 있다는 것이다.

 

🐇AJAX의 두가지 핵심기술

AJAX를 구성하는 핵심 기술은 javascript와 DOM, 그리고 Fetch이다.전통적인 웹 애플리케이션에서는 서버요청에 대한 응답으로 새로운 웹 페이지를 제공해야했다.하지만 fetch를 사용하면서, 페이지를 이동하지 않아도 서버로 부터 필요한 데이터를 받아올 수 있게 되었다.

브라우저는 Fetch가 서버에 요청을 보내고 응답을 받을 때까지 모든 동작을 멈추는 것이 아니라 계속해서 페이지를 사용할 수 있게 하는 비동기적인 방식을 사용한다.

 

또한 JavaScript에서 DOM을 사용해 조작할 수 있기 때문에, Fetch를 통해 전체 페이지가 아닌 필요한 데이터만 가져와 DOM에 적용시켜 새로운 페이지로 이동하지 않고 기존 페이지에서 필요한 부분만 변경할 수 있다.

 

fetch 이전에는 XHR을 사용했습니다. Fetch는 XHR의 단점을 보완한 새로운 Web API이며, XML보다 가볍고 JavaScript와 호환도는 JSON을 사용한다.

 

🐇AJAX의 장점

• 서버에서 HTML을 완성하여 보내주지 않아도 엡페이지를 만들 수 있다.
  
  이전에는 서버에서 HTML을 완성하여 보내주어야 화면에 렌더링을 할 수 있었습니다. 그러나 AJAX를 사용하면 서버에서 완성된 HTML을 보내주지 않아도 필요한 데이터를 비동기적으로 가져와 브라우저에서 화면의 일부만 업데이트 하여 렌더링 할 수 있다.
• 표준화된 방법
  
  이전에는 브라우저마다 다른 방식으로 AJAX를 사용했으나, XHR이 표준화되면서부터 브라우저에 상관없이 AJAX를 사용할 수 있게 된다.
  
  
• 유저 중심 애플리케이션
  
  AJAX를 사용하면 필요한 일부분만 렌더링 하기 때문에 빠르고 더 많은 상호작용이 가능한 애플리케이션을 만들수 있습니다
  
  
• 더 작은 대역폭
  
  대역폭 : 네트워크 통신 한 번에 보낼 수 있는 데이터의 크기
  
  이전에는 서버로부터 완성된 HTML파일을 방아와야 했기 때문에 한 번에 보내야 하는 데이터의 크기가 컸습니다. 그러나 AJAX에서는 필요한 데이터를 텍스트 형개(JSON, XML 등)로 보내면 되기 때문에 비교적 데이터의 크기가 작습니다.

🐇AJAX의 단점

• Search Engine Optimization(SEO)에 불리
  
  AJAX 방식의 웹 애플리케이션은 한 번 받은 HTML을 렌더링 한 후, 서버에서 비동기적으로 필요한 데이터를 가져와 그려냅니다. 따라서, 처음 받는 HTML파일에는 데이터를 채우기 위한 틀만 작성되어 있는 경우가 많습니다, 검색사이트에서는 전 세계 사이트를 돌아자니며 각사이트의 모든 정보를 긁어와 사용자에게 검색 결과로 보여줍니다. AJAX방식의 웹 애플리케이션의 HTML 파일은 뼈대만 있고 데이터는 없기 때문에 사이트의 정보를 긁어가기 어렵습니다.
  
  
• 뒤로가기 버튼 문제
  
  일반적으로 사용자는 뒤로가기 버튼을 누르면 이전 상태로 돌아갈 거라고 생각하지만, AJAX에서는 이전 상태를 기억하지 않기 떄문에 사용자가 의도한 대로 동작하지 않습니다. 따라서 뒤로가기 등의 기능을 구현하기 위해서는 뱔도로 History API를 사용해야 한다

 

🦔SSR vs CSR

---

🐇SSR

Server Side Rendering의 줄인말로, 웹페이지를 브라우저에서 렌더링하는 대신에 서버에서 렌디링을 한다.

브라우저가 서버의 URI로 GET요청을 보내면, 서버는 정해진 웹페이지 파일을 브라우저로 전송한다. 그리고 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더링된다. 서버에서 웹 페이지를 브라우저로 보내기 전에 서버에서 완전히 렌더링 했기 때문에 Server Side Rendering라고 부른다.

사용자가 브라우저의 다른 경로로 이동하는 경우 이동 할때마다 서버는 웹페이지를 완전히 렌더링하여 브라우저에 보낸다.

• SEO(Search Engine Optimization) 가 우선순위인 경우, 일반적으로 SSR(Server Side Rendering) 을 사용합니다.
• 웹 페이지의 첫 화면 렌더링이 빠르게 필요한 경우, 단일 파일의 용량이 작은 SSR 이 적합합니다.
• 웹 페이지가 사용자와 상호작용이 적은 경우, SSR 을 활용할 수 있습니다.

🐇CSR

Client Side Rendering의 줄인말로 SSR의 반대로여겨진다.

CSR은 웹브라우저와 같은 클라이언트에서 페이지를 렌더링한다.

브라우저의 여청을 서버로 보내면 서버는 웹페이지의 골격이 되는 단일페이지와 javascript파일을 클라이언트에게 보낸다.

javascript파일로 단일 웹 페이지를 완전히 렌더링 된 페이지로 바꾼다.

사용자가 브라우저의 다른경로로 이동하는 경우 웹 페이지를 다시 보내지 않고, 요청한 경로에 따라 페이지를 다시 렌더링합니다

CSR은 사용자가 다른 경로를 요청할 때마다 페이지를 새로고침 하지 않고, 동적으로 라우팅을 관리합니다.

 

• SEO 가 우선순위가 아닌 경우, CSR을 이용할 수 있습니다.
• 사이트에 풍부한 상호 작용이 있는 경우, CSR 은 빠른 라우팅으로 강력한 사용자 경험을 제공합니다.
• 웹 애플리케이션을 제작하는 경우, CSR을 이용해 더 나은 사용자 경험(빠른 동적 렌더링 등)을 제공할 수 있습니다.