Interaction with server

이번주 스프린트에서 서버와의 interaction에 대해 배운다.
코딩 공부를 시작하기 전부터 가장많이 접해왔던 개념이라 해당 스프린트에 등장하는 용어들은 제법 익숙한 편이다. 하지만 여전히 모호하게 이해하고 있는 부분들이 많다.

이 용어들을 남들에게 설명할 수 있을 정도로 '제대로' 학습하는 것

이번 스프린트의 진짜 목표다.

What I learn

이번 스프린트에서 웹 서비스의 기본 아키텍쳐를 구성하는 요소들을 배운다.
1. Browser
2. Server
3. API
4. HTTP
5. AJAX

외부에서 긁어온 복붙식 개념 정리는 생략한다.
학습을 하면서 몰랐던 것, 그리고 새로 알게 된 것 위주로만 간단하게 요약해보겠다.

Browser

브라우저는 어떻게 동작할까?

해당 링크에 들어가면 브라우저 동작법에 대한 자세한 설명이 나온다.
스압때문에 완독하지 못했으나, 대략적인 흐름은 이해했다.
읽다보니 모르는 개념이 계속해 등장하는데, 이것들은 따로 모아서 다음 기회에 따로 정리해보기로.

Study later
V8 엔진이란?

Server

API

서버 자원을 잘 가져다 쓸 수 있게 만들어 놓은 Interface, 한 마디로 메뉴판!

HTTP

'추상화된 개념'과 또 '구체적인 실재'를 명확하게 구분하지 못하는 경우가 있다. 당연히 학습이 부진하기 때문에 발생하는 문제다. HTTP는 굳이 따지자면 전자(추상화된 개념)에 해당하는 것이다. 명령어, 함수, 메서드같은 것이 아니라는 말이다. 서버와 클라이언트가 통신하기 위한 '규약' 이라는 점을 기억하자.

Study later
TCP IP
개알못을 위한 TCP/IP의 개념

AJAX

페이지를 새로고침할 때마다 페이지 전체를 리로드해야 한다면?
이미지, 스크립트, 코드 등을 모두 재요청해야 하는 리소스 낭비가 발생뿐 아니라, 사용자 경험을 떨어뜨리는 치명적 요인으로까지 작용할 것이다.

이런 문제 인식 위에서 1) 서버와 자유롭게 통신할 수 있고(XMLHttpRequest의 등장) 2) 페이지 깜빡임 없이 seamless하게 작동(Javascript와 DOM을 이용)하는 dynamic web page가 등장한다. 1)과 2)를 합쳐 AJAX (Asynchronous JavaScript and XML)라고 부른다. 그리고 AJAX가 등장함으로써 페이지의 일부만을 위한 데이터 로드가 가능해졌다.

fetch는 Ajax의 방식 중 가장 최신 방식이다. 기존 XMLHttpRequest API와 jQuery를 통한 Ajax 구현 이후 등장한 신개념 API라고 할 수 있다. fetch는 반환값으로 Promise를 가진다. 기본적으로 아래와 같은 구조를 가진다.

fetch (resouce, init)
  .then(callback)
  .catch(callback)

fetch('http://52.78.213.9:3000/messages')
.then(function(response) {
  return response.json();
  // response를 받은 후 json을 자바스크립토 object로
})
.then(function(json) {
  // json 형태로 전달받은 서버로부터의 응답
});

읽을 거리

MDN: Using Fetch
That's so fetch!
This API is so Fethching!