#️⃣ Ajax

• Asynchronous Javascript And XML
• 서버와 비동기적으로 통신시 사용함
• fetch를 이용한다 ⚡️ fetch(url, 옵션 객체) → Promise 객체 반환
  • 성공시 response 객체를 resolve 함
  • 실패시 error 객체를 reject 함

⚡️ JSON-server

프론트타입 백엔드 서버

설치 : npm install -g json-server

실행 : json-server --watch db.json

사용법

1. GET - READ

   fetch('url')
   .then(response => response.json())
   .then(data => {
   	~
   })

2. POST - CREATE

   fetch('url', {
   		method: 'POST',
   		headers: {
   		'Content-Type': 'application/json',
   },
   		body: JSON.stringify(data) // 새로 저장할 데이터
   })
   	.then(response => response.json())
   	.then(data => {
   			~
   		})

3. PUT - UPDATE

   fetch('url'+id, {
       method:'PUT',
       headers: {
           'Content-Type': 'application/json'
       },
       body: JSON.stringify(data) // 새로 업데이트할 데이터
   })
       .then(response=>response.json())
       .then(data=>{
   				~
       })

4. DELETE - DELETE

   fetch('url'+id,{
     method:'DELETE'
   })
   .then(response=>response.json()) // 패턴화. 우리가 받은 데이터가 json이다라고 명시하는 것
   .then(()=>{
   	~
   })

#️⃣ Synchronous vs Asynchronous

Synchronous 동기

• 요청과 결과가 동시에 일어나는 것
• 요청하고 시간에 관계없이 그 자리에서 결과가 주어져야 한다.
• 한 번에 한 실행
• 결과가 주어져야 다음 동작이 이루어지는 방식
• 다음 동작은 앞의 동작이 끝날 때까지 대기함

Asynchronous 비동기

• 요청과 결과가 동시에 일어나지 않는 것
• 요청한 자리에서 결과가 주어지지 않는다.
• 순서에 상관없이 코드가 실행됨
• 한번에 여러 실행
• 여러 데이터를 받아오는데 동기적으로 처리한다면 대기하는 상태가 길어져 사용하게 됨

#️⃣ Promise

• 해당 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 뜻함
• 보통 서버에서 데이터를 받아 올 때 사용한다.
• 비동기 방식을 잘 처리하기 위해 고안된 도구
• return 값이 있는 함수를 만나면 promise 방식으로 처리해야함

then & catch

• 성공시 then 콜백함수를 호출 하고, 실패시 catch 콜백함수를 호출 한다.
• then 다음에 then과 같이 여러 개의 프로미스를 연결한 Promise Chaining이 가능해진다.

세 가지 상태

Pending (대기)	비동기 처리 로직이 완료되지 않았을 때
Fulfiled (완료)	비동기 처리가 결과 값을 반환해주었을 때
Rejected (실패)	비동기 처리가 실패하거나 오류가 발생했을 때

1. Pending : 아래 객체 생성 메서드를 호출시 해당 상태가 된다.
2. Fulfilled : resolve가 실행시 해당 상태가 되고 then을 통해 값을 다시 받아 또다른 작업을 할 수 있다.
3. Rejected : reject를 호출시 해당 상태가 되고 catch를 통해 오류를 출력할 수 있다.

new Promise((resolve,reject)=>{
	resolve);
}).then(data=> console.log(data))
	.catch((err))=> console.log(err));