Get vs Post

GDG 프로젝트를 진행하면서 백엔드의 api명세서를 보고 axios를 작성하던 와중, get post에 대한 정확한 차이가 문득 궁금해졌다.

쉽게말해 get은 정보를 가져온다는 개념 post는 정보를 준다는 개념

🤲 Get

Get은 서버에서 어떠한 데이터를 가져와 보여줄 경우에 사용합니다. 예를들어 이번 프로젝트를 토대로 말을 하자면, 입력한 코디네이터의 정보에 따라서 유저들의 메인 페이지에 보여줘야하는 경우에 get을 사용할 수 있습니다.

❓ 그래서 get이 정확히 뭔데?

• GET method 는 클라이언트에서 서버로 어떠한 리소스로 부터 정보를 요청하기 위해 사용되는 메서드입니다.
• 데이터를 읽고, 검색할때 사용되는 메서드.
• 오로지 데이터를 읽을때만 사용하고, 수정할때는 사용되지 ❎
• GET은 요청을 전송할 때 URL 주소 끝에 파라미터로 포함되어 전송되며, 이 부분을 쿼리 스트링(QueryString) 이라고 부릅니다.

  쿼리 스트링이란
  url 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것을 말한다. ex. http://~~~/path?querystring
  쿼리 스트링 구조 > http://~~~/path?키1=값1&키2=값2&키3=값3

✏️ 기타 참고 사항

• GET은 불필요한 요청을 제한하기 위해 요청이 캐시될 수 있습니다.
• 파라미터에 내용이 노출되기 때문에 민감한 데이터를 다룰 때 GET 요청을 사용해서는 안 됩니다.
  • GET 요청은 파라미터에 다 노출되어 버리기 때문에 최소한의 보안 의식
• GET 요청은 브라우저 기록에 남습니다.
• GET 요청을 북마크에 추가할 수 있습니다.
• GET 요청에는 데이터 길이에 대한 제한이 있습니다.
• Get 요청은 성공시, 200(Ok) HTTP 응답 코드를 XML, JSON뿐만 아니라 여러 데이터, 여러 형식의 데이터와 함께 반환합니다.
• GET 요청은 idempotent합니다.

📮 Post

클라이언트에서 서버로 리소스를 생성하거나 업데이트하기 위해 데이터를 보낼 때 사용 되는 메서드다.
case:
이번 프로젝트에서는 사용자의 키 / 몸무게 / 닉네임을 받아 백엔드로 넘겨줄때 사용.

• POST는 전송할 데이터를 HTTP 메시지 body 부분에 담아서 서버로 보낼수있다. ( body 의 타입은 Content-Type 헤더에 따라 결정 된다.)
  • GET에서 URL 의 파라미터로 보냈던name1=value1&name2=value2 가 body에 담겨 보내진다 생각하면 된다.
• HTTP 메세지의 Body는 길이의 제한없이 데이터를 전송할 수 있다.
  • 즉, Post로 넘겨줄때는 대용량 데이터 또한 전송이 가능한것.
• Post는 Get과 달리 직접적으로 보여지는 부분이 없어 민감함 데이터를 보내도 괜찮다고 생각할수도 있지만, 개발자 모드를 통해 전부 확인이 가능하니 민감한 정보같은 경우 최대한 암호화해서 보내는 것이 좋다.

✏️ 기타 참고 사항

• POST 요청은 캐시되지 않습니다.
• POST 요청은 브라우저 기록에 남아 있지 않습니다.
• POST 요청을 북마크에 추가할 수 없습니다.
• POST 요청에는 데이터 길이에 대한 제한이 없습니다.
• Post 요청 중 자원 생성은 201(Created) HTTP 응답 코드를 반환합니다.
• Post 요청은 idempotent하지 않습니다.

💡 idempotent란,,?

idempotent = 멱등법칙
연산을 여러 번 적용하더라도 결과가 달라지지 않는 성질

👉 즉, idempotent는 동일한 연산을 여러번 수행하더라도 동일한 결과가 나타나야한다.

앞에서 말했던것 처럼 get은 idempotent post는 non-idempotent 이다.

🤲 get으로 서버에게 동일한 요청을 해도 동일한 응답이 출력된다.

📮 Post로 동일한 요청을 해도 돌아오는 응답은 매번 다를 수도 있다.

→ 생성에는 POST, 수정은 PUT 또는 PATCH, 삭제는 DELETE 가 더 용도에 맞는 메소드

🧑‍💻 코드로 알아보는 post / get

GET

useEffect(()=>{
    async function fetchMainPage(){
      try{
        axios.defaults.withCredentials=true;
        const res = await axios.get("http://localhost:8080/어디에/누구");
        setMainPage(res)
      }catch(error){
        console.error(error);
      }
    }
    fetchMainPage();
  }, [])

Post

const inputCode = (e) => {
	let code = e.target.value
    if(code.length == 4){
    	let Email = emailRef.current.value + '@' + domain;
        async function fetchCode(){
        	try {
            const res = await axios.post("http://127.0.0.1:8080/이메일/코드/어쩌구",
            {
              이메일 : Email,
              코드 : code
            });
            if(res.data == 'success!'){
            	setPass(true);
             }
           } catch (error) {
           		console.error(error);
          }
        }
       fetchCode()
     }
  }