1. Restful api란?
1) Restful api의 개념
RESTful API는 HTTP 요청을 사용하여 데이터에 액세스하고 사용하는 API (응용 프로그램 인터페이스)의 아키텍처 이다. 이 데이터는 GET, PUT, POST 및 DELETE 데이터 유형에 사용될 수 있으며, 이는 리소스 관련 작업의 읽기, 업데이트, 생성 및 삭제를 나타낸다.
2) 4가지의 METHOD를 가지고 있어 CRUD를 할 수 있다.
더 상세하게 작성하자면 CRUD개념은 이렇다.
C : Create - 생성(POST)
R : Read - 조회(GET)
U : Update - 수정(PUT)
D : Delete - 삭제(DELETE)
2. 외부 api
오픈 API란 개발자라면 누구나 사용할 수 있도록 공개된 API를 말하며, 개발자에게 사유 응용 소프트웨어나 웹 서비스의 프로그래밍적인 권한을 제공한다.
외부 무료 api는 공공데이터 포털이나 무료사이트에서 사용을 하면 된다.
나는 https://jsonplaceholder.typicode.com/todos/1
이곳을 사용하여서 공부하였다.
3. Get
우선 시작하기전에 항상 postman으로 데이터가 잘들어오는지 시작하면은 좋다고 한다.
response 200. 데이터 정상 작동!
get은 데이터를 요청할 때 요청 데이터가 http request message의 header 부분의 url에 담겨서 전송된다.
그래서 url 상 ? 에 데이터가 붙어서 request를 보내는 것이다.
axios.get(`api작성/?limit=${10}&offset=${offsetNumber * 10}`)이것이 하나의 예시이다.
이런 것은 Pagination에서 사용된 api인데 pagination에서 limit를 통해 10개의 데이터만 가지고 오도록 설정을 하고
offset을 통해 버튼을 클릭시 1페이지에서 0~10개
2페이지에서 10~20개 데이터를 설정하는 것이다.
실제 코드
const fetchTableData = () => {
axios.get(`https://jsonplaceholder.typicode.com/todos/1`)
.then(res => {setTableData(res.data.data)});
};
React.useEffect(() => {
fetchTableData()
}, []) 4. PUT
PUT은 자원의 대한 수정을 하는 Method 이다.
만약
{ “id”: 1, “name”: “red”, “title”: "빨강색" }
이라는 값이 있으면 PUT을 통해서
{ “id”: 1, “name”: “blue”, “title”: "팔나색" } 으로 수정 할 수 있다.
여기에서 주의할점은 PUT은 리소스의 생성과 수정을 담당하므로 요청 시 마다 같은 리소스를 반환한다.
실제코드
axios.put(`https://jsonplaceholder.typicode.com/todos/1`,
{ //수정할 데이터를 json형태로 전달한다.
title : data.title,
content : data.contnet
}
,
{ headers: {'Content-Type' : 'application/json'} })
.then( res => {
if(res.data.code === "SUCCESS") {
console.log('업데이트 값 ->'+JSON.stringify(res.data));
setModalInfo(res.data);
} else {
console.og(res.data);
console.log('실패'+JSON.stringify(res.data));
};
}
)};5. POST
POST를 통해 해당 URI를 요청하면 리소스를 생성한다.
post는 기존에
video : [{ “id”: 1, “name”: “red”, “title”: "빨강색" }] 란 데이터를 가지고 있으면
{ “id”: 2, “name”: “yellow”, “title”: "노랑색" }
을 데이터에 추가한다.
video : [{ “id”: 1, “name”: “red”, “title”: "빨강색" },
{ “id”: 2, “name”: “yellow”, “title”: "노랑색" }
]
그럼 이러한 결과물을 나온다.
실제코드
axios.post("https://jsonplaceholder.typicode.com/todos/1", body)
.then(res => {
if(body) {
alert("컨텐츠를 제출하였습니다.")
console.log(res.data)
//res.data.data
} else {
alert(" 컨텐츠를 제출하지 못하였습니다.");
console.log(res.data)
}
})
}6. DELETE
DELETE는 리소스를 삭제하는 기능을 한다.
video : [{ “id”: 1, “name”: “red”, “title”: "빨강색" },
{ “id”: 2, “name”: “yellow”, “title”: "노랑색" }
]
이러한 데이터가 있을 때 id : 2를 지운다면 데이터는
video : [{ “id”: 1, “name”: “red”, “title”: "빨강색" }]
남는다.
실제코드
const body = {
title : data.title,
content : data.contnet
}
axios.delete(`https://jsonplaceholder.typicode.com/todos/1`,
{
headers: {
'Content-Type' : 'application/json'
},
data: body
})
.then( res => {
if(res.data.code === "SUCCESS") {
console.log('삭제하는 값 ->'+JSON.stringify(res.data));
} else {
console.log(res.data)
};
}
)};개념 - (출처: https://searchapparchitecture.techtarget.com/definition/RESTful-API)
