API get, post 차이

api란?

api란 애플리케이션 프로그래밍 인터페이스(Applictaion Programing Interface)의 약자

 

하지만 솔직히 저걸 보자마자 아 저거구나! 하고 와닿지는 않는다. 특히 Cors 에러같은 경우에는 약어 말고 풀 단어로 보면 감이라도 오는데, 얘는 응..? 싶다.

 

조금 더 풀어 쓰자면,

고유한 기능을 가진 모든 소프트웨어 간의 서비스 계약으로, 요청과 응답을 사용하여 서로 통신하는 방법이다. 

 

그럼 통신을 위해서는 어떻게 해야할까?

api 통신을 위해서는 ajax, fetch, axios 등을 이용하여 통신할 수 있는데, 나는 axios를 이용하여 호출했다.

 

axios로 api호출하기

1. npm으로 axios를 설치 후 선언해주기

npm install axios

 

2. 사용할 jsx 파일 상단에 선언해주기

import axios from 'axios'

 

3. axios를 이용한 코드 작성하기

    1. api get

const getApi = async () => {
	try{
        const url = '/api/work_api/updateCompleted';
        let param = {
			파라미터 명: 파라미터 값
        }
        const response = await axios.get(url, {
            params: param,
            // header : {}
        })
        
    }catch(error){
        console.error(error) // 에러 처리용 콘솔
    }
}

useEffect(() => {
	getApi() // 렌더링 될 때 마다 api 호출
}, [])

    2. api post

const getApi = async () => {
	try{
        const url = '/api/work_api/updateCompleted';
        let param = {
			파라미터 명: 파라미터 값
        }
        const response = await axios.post(url, param, {
        	// header: {}
        })
        
    }catch(error){
        console.error(error) // 에러 처리용 콘솔
    }
}

useEffect(() => {
	getApi() // 렌더링 될 때 마다 api 호출
}, [])

 

get은 api의 정보를 가져올 때 사용하는 요청으로, 데이터를 param 속성에 넣어 쿼리 문자열로 전달 후 서버에 요청하며,

post는 api의 정보를 가져오는데 그치지 않고 수정, 삭제 등의 서버에 데이터를 보낼 때 사용하는 요청으로, 데이터 속성에 넣어 서버에 요청한다.

 

{param} 과 param의 차이점?

const response = await axios.get(url, { params: param });

const response = await axios.post(url, param);

 

둘이 비슷비슷, 똑같아 보이지만 잘 보면 파라미터를 넘기는 param의 위치가 조금 다르다.

get은 url 파라미터를 그대로 넘기기 때문에 {param}으로 값을 쿼리 문자열로 변경하여 전달하고 

post는 http body로 담아 값을 전달하여 data 속성으로 전달한다. 

 

get과 달리 post는 url에 보이지 않고, 값 자체를 그대로 data에 담아 전달하기 때문에 보안이 더욱 뛰어나다.

 

 

 

 

 

출처: https://aws.amazon.com/ko/what-is/api/ , https://axios-http.com/kr/docs/intro