[자바스크립트] Axios에서 POST와 GET으로 불러오는 차이

axios에서 GET과 POST는 서버와 데이터를 주고받는 방식에 있어 중요한 차이점을 가지고 있습니다.

1. 사용 목적

• GET: 서버에 있는 자원을 조회하는 데 사용됩니다. 즉, 데이터를 가져오는 역할을 합니다. 서버 상태를 변경하지 않고 정보만 얻을 때 사용합니다.
• POST: 서버에 새로운 데이터를 전송하거나 기존 데이터를 수정하는 데 사용됩니다. 즉, 데이터를 변경하는 역할을 합니다. 사용자 입력 정보를 전송하거나 데이터베이스에 새로운 레코드를 추가할 때 사용합니다.

2. 요청 메시지

• GET: 요청 메시지의 URL에 파라미터를 포함하여 데이터를 전송합니다. URL 길이 제한이 있기 때문에 소량의 데이터 전송에 적합합니다. 또한, 캐싱이 가능하기 때문에 동일한 요청을 반복적으로 수행할 때 유용합니다.
• POST: 요청 메시지의 바디에 데이터를 포함하여 전송합니다. URL 길이 제한 없이 대량의 데이터 전송이 가능합니다. 하지만, 캐싱되지 않기 때문에 동일한 요청을 반복적으로 수행하면 성능 저하가 발생할 수 있습니다.

3. 멱등성

• GET: 멱등성을 만족합니다. 즉, 동일한 요청을 여러 번 수행해도 서버 상태가 변경되지 않습니다.
• POST: 멱등성을 만족하지 않습니다. 즉, 동일한 요청을 여러 번 수행하면 서버 상태가 변경될 수 있습니다.

멱등성(Idempotency)은 소프트웨어 개발과 데이터베이스 관리에서 중요한 개념 중 하나입니다. 멱등성이란 동일한 연산을 여러 번 수행해도 결과가 달라지지 않는 성질을 말합니다

4. 보안

• GET: URL에 데이터가 포함되기 때문에 보안 측면에서 취약할 수 있습니다. 민감한 정보는 GET 요청으로 전송하지 않는 것이 좋습니다.
• POST: 요청 메시지의 바디에 데이터가 포함되기 때문에 GET보다 보안성이 높습니다. 하지만, 여전히 HTTPS와 같은 보안 프로토콜을 사용해야 안전합니다.

5. 예시

• GET: 사용자 프로필 정보 조회, 게시글 목록 가져오기
• POST: 사용자 로그인, 게시글 작성, 데이터베이스 레코드 추가

따라서, 상황에 맞게 GET과 POST를 선택하는 것이 중요합니다.

사용 목적	자원 조회 (데이터 가져오기)	데이터 전송/수정 (데이터 변경)
요청 메시지	URL 파라미터	바디
멱등성	만족	불만족
보안	취약	높음
예시	프로필 정보 조회, 게시글 목록	로그인, 게시글 작성, DB 레코드 추가

1. 사용자 프로필 정보 조회 (GET)

다음 코드는 사용자 프로필 정보를 조회하는 GET 요청 예제입니다.

import axios from 'axios';

const userId = 123;

axios.get(`https://jsonplaceholder.typicode.com/users/${userId}`)
  .then(response => {
    console.log(response.data); // 사용자 프로필 정보 출력
  })
  .catch(error => {
    console.error(error);
  });

2. 게시글 작성 (POST)

다음 코드는 새로운 게시글을 작성하는 POST 요청 예제입니다.

import axios from 'axios';

const newPost = {
  title: 'Axios POST 예제 게시글',
  body: 'Axios를 사용하여 게시글을 작성합니다.'
};

axios.post('https://jsonplaceholder.typicode.com/posts', newPost)
  .then(response => {
    console.log(response.data); // 생성된 게시글 정보 출력
  })
  .catch(error => {
    console.error(error);
  });