Today I Learned
Web Architectures
Client <---> Server <---> Database- Client: 유저가 상호작용을 하는 부분
- Server: 리소스 요청과 응답을 처리하는 부분
- Database(DB): 리소스를 저장하는 부분
Browser
유저가 선택한 자원을 서버에 요청하고 표시하는 클라이언트의 한 종류이다.
Server
클라이언트로부터 요청을 받아 데이터베이스에 있는 서버 자원 혹은 그 외 응답을 다시 클라이언트에게 전달하는 주체이다.
API(Application Programming Interface)
데이터베이트에 있는 서버 자원을 클라이언트가 잘 활용할 수 있도록 만들어 놓은 인터페이스이다.
GET /message: 메시지 전달
POST /message: 메시지 저장HTTP(HyperText Transfer Protocol)
브라우저와 서버 간의 데이터를 주고 받기 위한 방식이다.
Client ---> Server : Request
Clinet <--- Server : Response요청과 응답의 형식으로 이루어져 있다. 한 번의 요청에는 한 번의 응답을 한다. 잘못된 요청이나 응답일 경우에도 반드시 포함해야 한다.
- Request
- Header: origin, content-type, user-agent, ...
- Body
- Response
- Header
- Body
HTTP는 stateless 프로토콜이므로 각 요청이 모두 독립적이다. 이전 요청이 이후 요청에 영향을 미치는 Context라는 개념이 없다.
- Method
- GET: 서버의 자원을 요청한다.
- POST: 서버의 자원을 새롭게 생성한다
- PUT: 서버의 자원을 수정한다.
- DELETE: 서버의 자원을 제거한다.
AJAX(Asynchronous JavaScript and XML
비동기적으로 서버로부터 데이터를 받아 필요한 부분만 동적으로 업데이트하는 기법
AJAX = XMLHTttpRequest(XHR) + (JavaScript + DOM)
브라우저는 XMLHttpRequest 객체를 가지고 있고 이를 이용하여 서버로부터 웹 페이지 전체를 가져오는 것이 아닌 수정하고 싶은 부분만 데이터를 가져와 표시하는 기법을 사용한다. 이 경우 JSON 혹은 XML 형태로 데이터를 가져온다. 이러한 데이터를 가져와 브라우저에 표시하기 위해서 JavaScript와 DOM을 사용한다.
jQuery를 사용하면 쉽게 작성할 수 있지만, JavaScript 표준 API인 Fetch API를 사용하면 훨씬 더 간단하고 깔끔하게 작성할 수 있다. 하지만, 여전히 XMLHttpRequest 또한 많이 쓰이는 기술이므로 서로의 차이점을 알아둬야 한다!
- XMLHttpRequest: 콜백함수를 사용하므로 가독성이 떨어진다.
- jQuery ajax: 메서드 체이닝을 사용하지만 jQuery 특성 상 속도가 느리다.
- Fetch API:
then...then...catch메서드 체이닝을 통해 깔끔하게 작성할 수 있다.
Fetch의 기본 스펙은 jQuery.ajax()와 기본적으로 두가지가 다르다는 사실에 유념해야합니다. 출처: MDN
fetch()로 부터 반환되는 Promise 객체는 HTTP error 상태를 reject하지 않습니다. HTTP Statue Code가 404나 500을 반환하더라도요. 대신 ok 상태가 false인 resolve가 반환되며, 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환됩니다.
보통 fetch는 쿠키를 보내거나 받지 않습니다. 사이트에서 사용자 세션을 유지 관리해야하는 경우 인증되지 않는 요청이 발생합니다. 쿠키를 전송하기 위해서는 자격증명(credentials) 옵션을 반드시 설정해야 합니다.
Fetch API
fetch 함수를 통해 서버로부터 데이터를 가져오거나 혹은 서버에 저장할 수 있다.
GET
fetch(url).then((response) => response.json()).catch(console.error);POST
fetch(url, {
method: 'POST',
body: JSON.stringify(data), // data가 객체일 수 있으므로 stringfy한다.
headers: { 'Content-Type': 'application/json' }
}).then((response) => response.json()).catch(console.error);Chatterbox 스프린트를 진행하면서 서버와 통신하는 방법을 학습했다.
이번 스프린트는 client측에서 chatterbox-server와 API를 통해 데이터를 주고 받는 실습을 한다. 오늘은 브라우저에서 입력받은 데이터를 Fetch API를 통해 서버에 저장하는 기능을 구현했다. 내일은 서버로부터 데이터를 가져와 DOM을 이용해 브라우저 상에 필요한 부분만 업데이트하는 기능을 구현할 것이다. 추가로 가능하다면 chat room을 생성하고 주기적으로 fetch할 수 있도록 만들 셈이다.
