API
Application Programming Interface
응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있도록 만든 인터페이스
API는 레스토랑에서 손님 으로부터 주문을 받은 음식 을 요리사 에게 요청을 하여, 완성된 요리를 다시 손님에게 가져다 주는 점원 과도 같은 역할을 한다고 한다.
손님(요청하는 프로그램)이 주문할 수 있도록 메뉴(명령 목록)를 정리하고, 주문(명령)을 받아 요리사(요청받은 응용프로그램)와 상호 작용하여 요청된 메뉴(명령에 대한 값)을 다시 전달한다.
AJAX
Asynchronous JavaScript And XMLHttpRequest
JavaScript, DOM, Fetch, XMLHttpReqest, HTML 등 다양한 기술을 사용하는 웹 개발 기법으로 비동기적으로 특정 데이터만 화면에 그려낼 수 있다.
핵심기술
JavaScript, DOM, Fetch
이전에는 form 태그를 이용하여 서버에 데이터를 요청하면, 새로운 페이지를 불러왔다. 지금은 Fetch를 통해 페이지를 이동하지 않고 데이터를 요청하고 받아오는 사이, 다른 작업을 할 수 있게 되었다. 또한 JS와 DOM을 통해 페이지를 부분적으로 수정할 수 있다.
장점
서버에서 HTML을 완성하지 않아도 AJAX가 필요한 데이터를 가져와 화면에 렌더링할 수 있다.
브라우저 상관없이 AJAX 사용 가능하다.
유저 중심 어플리케이션 개발에 용이하다.
작은 대역폭
단점
Search Engine Optimization(SEO)에 불리하다.
AJAX로 만든 웹페이지의 경우, HTML뼈대만 있고 데이터가 없기에 정보 수집이 어렵다.
뒤로가기 에러
AJAX에서는 이전 상태를 기억하지 않는다. 별도로 History API를 사용해야 한다.
SSR
Server Side Rendering
브라우저가 서버로 GET 요청을 보내고 -> 서버에서 웹페이지를 렌더링하여 -> 브라우저에 웹페이지를 보낸다.
SEO(Search Engine Optimization)가 우선 순위인 경우, SSR 사용
첫 화면 렌더링이 빠르게 필요한 경우, SSR 적합
웹 페이지와 사용자의 상호작용이 적은 경우, SSR 활용
CSR
Client Side Rendering
브라우저가 서버로 GET 요청을 보내고 -> 서버에서 웹페이지, JS, 데이터 (API 활용) 등을 브라우저에 보내면 -> 브라우저가 웹페이지를 렌더링한다.
SEO(Search Engine Optimization)가 우선 순위가 아닌 경우, CSR 사용
웹 페이지와 사용자의 상호작용이 있는 경우, CSR로 빠른 라우팅 사용
웹 애플리케이션 제작의 경우, 더 나은 사용자 경험을 제공
