IM Sprint #6 - Ajax / Browser / HTTP / API / Server

윤슬기·2019년 12월 2일

for IM Sprint

목록 보기

6/8

IM Sprint 시리즈는, 코드 스테이츠의 웹 개발 심화 코스인 Immersive 코스에서 수강생들과 함께 이야기 나눌 주제에 대해 빠르게 학습하고 정리한 글이다.

핵심 기능
사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 서버의 응답(Response)을 받아 브라우저에 표시한다. 브라우저는 항상 요청을 보내는 개체이다.
브라우저와 서버
브라우저는 서버로부터 요청한 HTML, CSS, Javascript, 이미지 파일 등을 받는다.
브라우저 내부 : 렌더링 엔진
HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(Parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합되고, 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 표시한다.
브라우저 내부 : 자바스크립트 엔진
브라우저는 동기(Synchronous)적으로 HTML, CSS, Javascript을 처리한다. HTML 파서는 script 태그를 만나면 자바스크립트 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘긴다. 제어 권한을 넘겨 받은 자바스크립트 엔진은 script 태그 내의 자바스크립트 코드 또는 script 태그의 src 어트리뷰트에 정의된 자바스크립트 파일을 로드하고 파싱하여 실행한다. 자바스크립트의 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨서 브라우저가 중지했던 시점부터 DOM 생성을 재개한다.

핵심 역할
HTTP는 인터넷에서 데이터를 주고받을 수 있는 규칙이다. 이렇게 규칙을 정해두었기 때문에, 모든 프로그램이 이 규칙에 맞춰 개발해서 서로 정보를 교환할 수 있게 되었다.
특징

HTTP는 상태를 저장하지 않는다(Stateless). 동일한 연결 상에서 연속하여 전달된 두 개의 요청 사이에는 연결고리가 없다. 하지만, HTTP 쿠키는 상태가 있는 세션을 만들도록 해준다.
connectionless. 한 번의 요청에는 한번의 응답을 한다. 응답 시 연결이 종료된다.
클라이언트, 서버의 요청과 응답은 HTTP 메시지 형식으로 오고, 메시지는 시작줄, 헤더, 본문으로 구성되어 있다.
HTTP/1.1 메시지들은 사람이 읽고 이해할 수 있다.

핵심 역할 (웹 서버)
브라우저와 같은 클라이언트로부터 HTTP 요청을 받아들이고 HTML 문서와 같은 웹 페이지를 반환하는 컴퓨터 프로그램이다. 자원을 제공하는 주체로, 데이터베이스에서 자원을 찾아 클라이언트의 요청에 응답한다.

비동기식 처리 모델과 Ajax : https://poiemaweb.com/js-ajax

개념
Application Programming Interface의 약자. 어떤 응용프로그램이 자신이 가지고 있는 정보를 제공하기 위해 어떤 방식으로 통신할 것인지 정한 규격이다. 프로그램이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작 장치이다. 이 조작 장치는 프로그래밍 언어를 통해서 조작할 수 있다.

개념
Asynchronous JavaScript and XML (AJAX)는 그 자체가 (특정한) 기술은 아니다. 하지만 HTML 또는 XHTML, CSS, JavaScript를 비롯한 기존의 여러 기술을 사용하는 "새로운" 접근법이라고 설명할 수 있다. 간단히 말하면, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말한다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있다. XMLHttpRequest나 fetch가 HTTP 규칙을 지켜서 서버에 요청을 보낸다.
특징
Ajax는 웹브라우저와 웹서버가 내부적으로 데이터 통신을 하게 된다. 그리고 변경된 결과를 웹페이지에 프로그래밍적으로 반영함으로써 웹페이지의 로딩 없이 서비스를 사용할 수 있게 한다. 빠른 퍼포먼스와 부드러운 화면 표시 효과를 기대할 수 있다.
Ajax의 비동기성
요청을 한 후 응답이 올 때까지 기다리지 않고, 다른 부분들을 동작할 수 있다. 응답이 오면 처리를 한다.
Ajax와 XMLHttpRequest
브라우저는 XMLHttpRequest 객체를 이용하여 Ajax 요청을 생성하고 전송한다. 서버가 브라우저의 요청에 대해 응답을 반환하면 같은 XMLHttpRequest 객체가 그 결과를 처리한다.

👩🏻‍💻