1. Ajax

• 비동기적으로 서버와 브라우저 간에 데이터를 교환하는 기술
• 웹 페이지를 새로고침하지 않고도 서버로부터 데이터를 받아와서
  웹 페이지의 일부분을 업데이트할 수 있도록 해줌
  → 기존에는 웹 페이지를 다시 로드할 때 전체 페이지를 다시 받아와야 했기 때문에
  사용자 경험이 좋지 않았음
  → Ajax를 사용하면 웹 페이지를 로드한 후에도
  웹 페이지와 서버 간에 데이터를 주고받을 수 있으므로 사용자 경험을 향상시킴

---

2. 동기 요청 VS 비동기 요청

• 동기 : A의 요청과 응답이 끝나야, B가 실행되는 것
  == 웹 페이지를 다시 로드할 때, 전체 페이지를 다시 받아와야 함
• 비동기 : 요청과 응답 사이에, 중간 중간 끼어들 수 있음
  == 웹 페이지를 새로고침하지 않고도 서버로부터 데이터를 받아와서
  웹 페이지의 일부분을 업데이트 할 수 있음
  → 요즘은 비동기 요청으로 보내는 경우가 많음
• React
  : Javascript Framework
  : 비동기 기반

---

3. fetch() API

• 비동기 요청을 수행하는 최신 Javascript API 중 하나

fetch("요청주소")
.then(res=>res{응답을 처리하는 역할})
.then(result=>{변환된 데이터를 활용하는 역할})

---

4. Promise

• 비동기 작업의 결과를 처리하는 방법 중 하나
  → "어떤 결과가 올지는 모르지만 반드시 결과를 보내주겠다"는 약속
  → 비동기 작업이 맞이할 완료 또는 실패와 그 결과 값을 나타냄
  → 비동기 작업이 완료되었을 때 실행할 콜백 함수를 지정하고,
  해당 작업의 성공 또는 실패 여부를 처리할 수 있도록 함

• Promise 상태 3가지
  1) Pending (대기 중) : 비동기 작업이 완료되지 않은 상태
  2) Fulfilled (이행됨) : 비동기 작업이 성공적으로 완료된 상태
  3) Rejected (거부됨) : 비동기 작업이 실패한 상태

• 콜백 함수(callback function)
  → 특정 작업이나 이벤트가 완료된 후 호출되는 함수
  → 주로 비동기 작업이 끝난 시점에 실행됨
  → 비동기 작업이 완료될 때 까지 기다렸다가, 해당 작업의 결과를 이용하여
  추가적인 작업을 수행하는 방식으로 사용됨

---

5. JSON(JavaScript Object Notation)

• 데이터를 표현하기 위한 경량 형식으로, 주로 키-값 쌍으로 이루어진 구조
  주로 서버와 클라이언트 간의 데이터 전송에 사용됨

• JSON으로 변환 :
  1) JSON.stringify( js객체 )
  2) then(response => response.json())

{"name" : "홍길동",
  "age" : 20,
  "skills" : ["javascript", "java", "oracle", ...]
}

---

6. HTTP 메서드의 종류

• 멱등성 (idempotence) : 동일한 요청을 여러번 보내도 결과가 변하지 않는 성질

메소드	멱등성	예시
GET(조회)	O	/user 사용자 정보 조회 요청을 여러번 보내도 사용자의 정보는 바뀌지 않고 동일한 응답
POST(생성/삽입)	X	/order 새로운 주문 요청, 주문이 중복되어 생성됨
DELETE(삭제)	O	/user 사용자 삭제 요청을 여러번 보내도, 첫 요청에서 이미 사용자가 삭제되었다면 이후 요청은 더 이상 서버에 영향을 주지 X
PUT(갱신)	O	/user 사용자 정보 갱신할 때, 같은 데이터를 여러번 보내도 사용자 정보는 동일하게 유지