브라우저와 Node.js 환경

브라우저는 html, css, javascript를 실행하여 웹페이지에 렌더링하는 것이 목적이고
Node.js는 자바스크립트의 서버개발환경을 제공하는것이 목적이다
브라우저와 Node.js는 javascript엔진(V8엔진)을 사용하기때문에 ECMAScript(javascript)를 실행 할 수 있다.

JavaScript는 ECMAScript 사양을 준수하는 범용 스크립팅 언어이며 이 같은 표준 스크립트 언어를 ECMAScript라고 한다

브라우저와 Node.js의 차이점중 하나는 서로 다른 api를 제공하는데
브라우저는 fetch나 DOM과 같은 Web api를 제공하며 Node.js의 경우는 FileSystem과 같은 내부 고유의 api를 제공한다.

Interaction With Server

클라이언트는 유저가 보는곳 즉, 유저와 상호작용하는곳이고
서버는 요청에대한 응답을 처리하는 곳 , 리소스를 제공하는곳
DB는 리소스를 저장하는곳이다.
이해한걸 쉽게 식당으로 생각하고 예시를 들어보면

Client(유저 -> 요청)
Server(메뉴판 및 주방)
DB(원산지 재료)

API

API 는 서버자원을 가져다 쓸 수 있게 만들어 놓은 인터페이스이다
메뉴판 같은 역할을 하는데 클라이언트가 요청하는것을 데이터베이스에서 가져와 리소스를 만들고 제공 할 수 있기때문이다.
GET/message : 메세지 전달 , POST/message:메세지 저장
이런 API를 구축해놔야 클라이언트에서 서버자원을 사용 할 수 있다.

fetch("/message",{
  method : "GET",
    content-type : application/json
})

위처럼 message라는 URL로 get요청을 하게 되면 서버는 json타입으로 응답하게 된다

AJAX

서버와 자유롭게 통신 할 수 있고 데이터를 받아오는 XMLHttpRequest과 javascript , DOM을 이용해 페이지가 깜빡임 없이 작동할 수 있는 web app이 등장하게 된다.
이것을 합쳐서 AJAX라는 개념이 생기게 된다.

초기에는 서버와 통신하기 위해 XML을이용하고 그다음은 제이쿼리를 사용해 작성했지만
요즘에는 많은 부분에서 fetch API를 활용 하고 있다고 한다.

fetch 에서 get요청을하는 코드

fetch("http://example.com")  //promise 객체를 리턴하기 때문에 체이닝을 활용해 함수를 쓸 수 있다.
.then(funtion(response){
  return response.json();  //javascript 오브젝트 형식으로 변환시킨다.
})
.then(function(json){
  // json형태로 전달받은 서버로부터 응답
  });

fetch 라는 메소드를 쓰는 이유는 서버 자원을 가져오기 위해서 사용하는 것이다.
fetch 외에 XMLHttpRequest , jQuert ajax라고하는 모듈을 통해 서버에서 자원을 가져오는 방법 등 여러개 있다.
fetch는 XMLHeepRequest 보다 좀더 강력하고 유연한 조작이 가능하다