카테고리 없음

실습 - Request보내기

yunajoe 2022. 12. 26. 23:25

# 학습용 URL : https://learn.codeit.kr/api/members
(1) 전체 직원 정보 조회 - GET 
(2) 특정 직원 정보 조회 - GET 
(3) 새 직원 정보 추가 - POST
(4) 기존 직원 정보 수정 - PUT
(5) 기존 직원 정보 삭제 - DELETE


=============================

(2) 특정 직원 정보 조회 - GET
(4) 기존 직원 정보 수정 - PUT
(5) 기존 직원 정보 삭제 - DELETE

이 작업들을 수행할 때는 작업의 대상이 되는 직원 정보를 특정할 수 있도록 URL 끝에 아래와 같은 고유 식별자를 붙여줘야 합니다. (직원의 id 값입니다.)

https://learn.codeit.kr/api/members/3
지금 이 URL은 3번 직원 정보에 대한 작업을 수행하겠다는 뜻입니다. 이렇게 작업의 종류에 따라 메소드뿐만 아니라 URL도 적절하게 변경해가며 써줘야 합니다.

=======================================


(1) 전체 직원 정보 조회 - GET 
(3) 새 직원 정보 추가 - POST

들은 특정 직원 정보를 대상으로 수행하는 작업이 아니라 아니라 전체 직원 정보에 대해서 수행하는 작업이기 때문에

https://learn.codeit.kr/api/members
/members로 끝나는 원래의 URL을 그대로 사용

=============

1) GET 

fetch('https://learn.codeit.kr/api/members')
.then((response) => response.text())
.then((result) => {console.log(result)});
[
  {
    "id": 1,
    "name": "Jason",
    "email": "jason@codeitmall.kr",
    "department": "engineering"
  },
  {
    "id": 2,
    "name": "Alice",
    "email": "alice@codeitmall.kr",
    "department": "engineering"
  },
  {
    "id": 3,
    "name": "Brian",
    "email": "brian@codeitmall.kr",
    "department": "marketing"
  },
  {
    "id": 4,
    "name": "Erica",
    "email": "erica@codeitmall.kr",
    "department": "marketing"
  },
  {
    "id": 5,
    "name": "Wilson",
    "email": "wilson@codeitmall.kr",
    "department": "sales"
  }
]

새로운멤머추가하기

// fetch('https://learn.codeit.kr/api/members')
// .then((response) => response.text())
// .then((result) => {console.log(result)});


새로운 직원 추가하기 

새로운 직원의 정보를 request의 body에 넣어주기 


fetch('https://learn.codeit.kr/api/members'

   body: JSON.stringify(newMember)
   // stringify는 JS객체를 string type의 json으로 바꿔준다 
   // 어떤 JS객체가 담고 있는 정보를 외부에 노출시키기위해선 string 타입의 json 바꿔줘여헌더 ,JS객체는 못 전달하줌



)



const newMember = {
    name: "yuna", 
    email: "yunajoe@gmail.com", 
    department: "tech",
}


fetch('https://learn.codeit.kr/api/members', {
    method: 'POST', 
    body: JSON.stringify(newMember), 
})
    .then((response) => response.text())
    .then((result)=> { console.log(result); }); 
    

Promise {<pending>}
VM1127:13 {
  "id": 6,
  "name": "yuna",
  "email": "yunajoe@gmail.com",
  "department": "tech"
}


// 
 id가 추가되어서 왔다. 
응답이 어떻게 올지는 서버마다 다르다.(
개발자가 어떻게 구현하는냐에 따르다