IM 24일차 (Basic Web Architecture, Ajax)

1. Web Architecture

 

• Client : 서버에게 원하는 리소스를 요청하는 고객, 사용자
• Server : 고객이 요청한 리소스를 응답하는 제공자
• Database : 서버가 클라이언트에게 제공할 수 있는 리소스들이 있는 창고, 혹은 클라이언트가 서버에게 전달한 리소스가 저장될 곳
• API : 서버가 클라이언트에게 제공할 수 있는 기능들, 브라우저를 통해 렌더된 웹 페이지의 UI로 접근할 수 있음
• http : 클라이언트와 서버가 통신할 때 미리 정해놓은 규칙, 규약

  대부분의 웹은 위의 것들로 구성된다.

  음식점을 예로 들어보겠다.

  

  클라이언트는 맛있는 음식을 먹으러 온 손님이다.

  고객이 메뉴판을 보고 웨이터에게 주문을 한다. 여기서 메뉴판은 API이고 웨이터는 서버다.

  웨이터가 주방장으로 가서 주방장에게 이 메뉴를 만들어 달라고 한다.

  그러면 주방장은 창고에서 해당 메뉴를 만드는데 필요한 재료로 가공을 한 후 음식을 웨이터에게 전달한다.

  여기서 창고는 Database라고 할 수 있다. 그런데 만약 손님이 외국인이다. 안타깝지만 웨이터는 영어를 잘하지 못한다.

  즉 손님과 웨이터가 의사소통을 하기위해선 같은 언어를 써야 한다는 조건이 있다.

  여기서 같은 언어가 http 라고 할 수 있다.

 

  서버의 응답은 항상 클라이언트의 요청에 의해서 일어난다.

  손님이 음식을 주문하지도 않았는데 멋대로 웨이터가 음식을 가져다주는 경우는 없다.

  이처럼 클라이언트 - 서버 - 데이터베이스로 이루어진 3티어 아키텍처가 모던 웹의 주요한 구성이다.

 

web architecture

  

 

 

2. Ajax

 

  내가 처음 Ajax를 접했을 땐 Ajax가 특정 라이브러리나 프레임워크를 의미하는 것이라고 생각했다.

  Ajax는 특정 라이브러리 또는 프레임워크가 아닌 하나의 기술을 의미한다. 즉 패러다임이다.

 

  Ajax는 Asynchronus Javascript and XML을 의미한다.

  해석하자면 비동기적인 자바스크립트와 XML이 되는데 일단 XML은 크게 신경 쓰지 않아도 된다.

 

  현재 대부분의 모던 웹은 대부분 클라이언트와 서버가 데이터를 주고받을 때 json 형식의 데이터로 주고받는데 ajax가 도입됐을 당시는

  주고받는 데이터의 주요한 형식이 XML 이었을 뿐이다.

 

  즉 비동기처리 방식을 통해 서버에게 특정 부분의 데이터만을 받고 자바스크립트를 이용해 그 부분의 UI만을 갱신하는 방식을 말한다.

 

  그렇다면 어떻게 클라이언트가 서버로부터 원하는 데이터를 받아올 수 있을까?

  바로 window 객체에 내장되어 있는 fetch 메서드를 활용하면 된다.

 

  fetch의 첫 번째 전달 인자는 URL이다. 두 번째 전달 인자는 option 값으로 선택사항이다.

  fetch 메서드에 대한 자세한 내용은 mdn에 자세히 나와있다. mdn을 참고하자!

 

  developer.mozilla.org/ko/docs/Web/API/Fetch_API/Fetch%EC%9D%98_%EC%82%AC%EC%9A%A9%EB%B2%95