Request
response로 html, js 뿐만 아니라 json형태의 정보도 받을 수 있다.
# JSON이란
Javascript object notaiton 줄임말. 정보를 교환할 때 주도 받는 데이터 형식.
JS의 문법을 본 따서 만들어짐.
# 특징
1. JSON에는 프로퍼티의 이름과 값을 표현하는 방식에 제한이 있습니다.
(1) JSON에서는 각 프로퍼티의 이름을 반드시 큰따옴표(")로 감싸줘야 합니다.
(2) JSON에서는 값이 문자열인 경우 큰따옴표(")를 사용해야 합니다.
=> name, height, wieght, hobbies 가 ""로 감싸져있다.
{
"name":"Michael Kim",
"height":180,
"weight":70,
"hobbies":["Basketball", "Listening to music"]
}
2. JSON에서는 표현할 수 없는 값들이 있습니다.
=> 자바스크립트에서는 프로퍼티의 값으로 사용할 수 있는 undefined, NaN, Infinity 등을 JSON에서는 사용할 수 없습니다. 참고로, JSON은 비록 자바스크립트로부터 비롯된 데이터 포맷이지만, 그 탄생 목적은 언어나 환경에 종속되지 않고, 언제 어디서든 사용할 수 있는 데이터 포맷이 되는 것
3. JSON에는 주석을 추가할 수 없습니다.
=> JSON은 코드가 아니라 데이터 포맷이기 때문에 그 안에 주석을 포함시킬 수 없습니다.
=============================================
메소드의 의미
request의 종류는 크게 4가지로 나뉠 수 있다.
REQUEST METHOD 데이터 처리
데이터 조회 GEt read
데이터 추가 POST create
데이터 수정 put update
데이터 삭제 delete delete
=============================================
request의 head와 body로 이루어져 있다.
head- request에 대한 부가 정보
body - 실제 데이터를 담는 부분
post, put은 데이터를 담는 body가 필요 하지만
get, delete는 안 필요
사진 1추가
네이버에서 webbrowser를 키고, network를 보자
request headers란 header에 있는 각각의 header 속성들을 의미
(method, path, user-agent...etc)
사진2
==============================================
기존 데이터를 조회하는 리퀘스트 - GET
새 데이터를 추가하는 리퀘스트 - POST
기존 데이터를 수정하는 리퀘스트 - PUT
기존 데이터를 삭제하는 리퀘스트 - DELETE
(1) 전체 직원 정보 조회 - GET
(2) 특정 직원 정보 조회 - GET
(3) 새 직원 정보 추가 - POST
(4) 기존 직원 정보 수정 - PUT
(5) 기존 직원 정보 삭제 - DELETE
위의 5가지 작업 중
(2) 특정 직원 정보 조회 - GET
(4) 기존 직원 정보 수정 - PUT
(5) 기존 직원 정보 삭제 - DELETE
이 작업들을 수행할 때는 작업의 대상이 되는 직원 정보를 특정할 수 있도록 URL 끝에 아래와 같은 고유 식별자를 붙여줘야 합니다. (직원의 id 값입니다.)
https://learn.codeit.kr/api/members/3
그리고 나머지 작업인
(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); });// response
[
{
"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"
....
2. GET메서드 (특정 직원 조회하기)
fetch('https://learn.codeit.kr/api/members/3')
.then((response) => response.text())
.then((result) => { console.log(result); });{
"id": 3,
"name": "Brian",
"email": "brian@codeitmall.kr",
"department": "marketing"
}3. POST메서드 (새멤버추가하기)
const newMember = {
name: "yuna",
email: "yunajoe@gmail.com",
department: "engineering",
};
fetch('https://learn.codeit.kr/api/members', {
method: 'POST',
// JS 객체를 JSON의 STING타입으로 변환시킨다. 왜냐하면은 JSON객체는 외부로 바로 전송할 수 없기 때문이다.
body: JSON.stringify(newMember),
})
.then((response) => response.text())
.then((result) => { console.log(result); });{
"id": 16,
"name": "yuna",
"email": "yunajoe@gmail.com",
"department": "engineering"
}4. PUT메서드(회원정보수정하기)
{
"id": 1,
"name": "Jason",
"email": "jason@codeitmall.kr",
"department": "engineering"
},fetch('https://learn.codeit.kr/api/members/')
.then((response) => response.text())
.then((result) => { console.log(result); });
const member = {
"id": 1,
"name": "Jason",
"email": "jason@codeitmall.kr",
"department": "development"
};
fetch('https://learn.codeit.kr/api/members/1', {
method : 'PUT',
body: JSON.stringify(member),
})
.then((response) => response.text())
.then((result) => { console.log(result);}); {
"id": 1,
"name": "Jason",
"email": "jason@codeitmall.kr",
"department": "development"
},4. DELETE 메서드
fetch('https://learn.codeit.kr/api/members/2', {
method: 'DELETE',
})
.then((response) => response.text())
.then((result) => { console.log(result); });