GET과 POST의 차이점 기억하기 💡

Express에 대해 정확히 알지 못하면서 Express를 사용하는 프로젝트에 동료와 합류한 후 최근에 GET 요청과 POST 요청의 차이점을 상기하게 되었습니다. 나는 이 글이 이 두 HTTP 메서드의 차이점과 사용 방법을 상기시키는 좋은 참고 자료가 될 것이라고 생각했습니다.

눈이 멀다

하면서 배우는 타입이라 기존 코드를 보고 따라하려고 노력했습니다. 내 첫 번째 작업은 사용자의 프로필 세부 정보를 검색하는 것이 었습니다. 이것은 우리가 데이터를 검색하고 새로운 것을 생성하지 않을 것이기 때문에 분명히 GET 방법이었습니다. users 경로 파일로 이동하여 다음 엔드포인트router.get('/profile', users.getProfile);를 추가했습니다.

그런 다음 users 컨트롤러로 이동하여 기본적으로 기존 POST 끝점에서 복사하여 붙여 넣은 다음 getProfile 함수를 만들었습니다.

getProfile: async (req, res) => {
    let user_id = req.body.id;
    if(!user_id) 
        res.send("Invalid id");

    let profile;
    try {
        profile = await User.getProfile(user_id);
    } catch (error) {
        res.send(500, error);
    }

    res.send(profile);
}

이 함수에서는 먼저 요청 본문에서 사용자 ID를 가져온 다음 데이터베이스에서 이를 확인하고 일부 데이터를 반환할 모델로 전달합니다. 다음으로 Postman을 사용하여 유효한 사용자 ID를 제공하여 이 엔드포인트에 연결을 시도했습니다.


GET 요청 본문에서 데이터를 보내는 방법에 주목하십시오. 이에 대해서는 나중에 다시 설명하겠습니다.

다음과 같은 응답을 받았습니다.

{
    "id": "11",
    "mobile": "050-5555555",
    "email": "[email protected]",
    "full_name": "Jane Doe",
    "bio": "Live Laugh Love!"
}

엄청난! 👏 당연히 다음 단계는 이 데이터를 뷰 레이어에 표시하는 것입니다.

<script>
    $(document).ready(function() { 
        let id = '11';
        $.ajax({
            url: '/users/profile',
            type: 'GET',
            data: {id: id},
            async: false,
            success: function (data) {
                console.log(data);
            }
        });
    });
</script>

이제 페이지를 새로고침하면 이 AJAX 요청이 지정한 엔드포인트에 도달하고 데이터를 기록해야 합니다. 당연히 이것은 Invalid id를 기록합니다. ID를 다른 방법으로 전송해 봅시다.

<script>
    $(document).ready(function() { 
        let id = '11';
        $.ajax({
            url: '/users/profile?id=' + id,
            type: 'GET',
            async: false,
            success: function (data) {
                console.log(data);
            }
        });
    });
</script>

흠, 이것은 또한 Invalid id를 기록합니다. 기이한. 이 시점에서 그리고 급했기 때문에 라우팅 방법을 GET에서 POST로 변경하고 AJAX 요청에서도 변경했으며 콘솔에서 결과를 보기 시작했습니다.

router.post('/profile', users.getProfile); // changed to post

<script>
    $(document).ready(function() { 
        let id = '11';
        $.ajax({
            url: '/users/profile',
            type: 'POST', // changed to post
            data: {id: id},
            async: false,
            success: function (data) {
                console.log(data);
            }
        });
    });
</script>

이것이 효과가 있었고 시간이 부족했기 때문에 부수적으로 모두 데이터를 검색했지만 결국 POST 요청으로 작성되는 다른 끝점으로 이동했습니다. 몇 주 후, 나는 약간의 시간이 있었고 여전히 이 동작에 대해 생각하고 있었기 때문에 HTTP 메서드를 수정하고 Express를 제대로 배우기로 결정했습니다.

학습

내가 잊고 있었던 것은 GET과 POST 방식의 주요 차이점이었습니다. MDN에 따라 GET 요청에는 본문이 없어야 합니다. 대신 데이터는 요청 본문에 데이터를 숨겨 더 안전한 POST 요청과 달리 요청 URL로 전송되어야 합니다. freeCodeCamp의 이 훌륭한 예는 개념을 보여줍니다.

// GET request using query strings
route_path: '/library'
actual_request_URL: '/library?userId=546&bookId=6754' 
req.query: {userId: '546', bookId: '6754'}

// GET request using route parameters
route_path: '/user/:userId/book/:bookId'
actual_request_URL: '/user/546/book/6754' 
req.params: {userId: '546', bookId: '6754'}

// POST request
route_path: '/library'
actual_request_URL: '/library'
req.body: {userId: '546'}

그러나 Postman은 혼란을 야기한 GET 요청 본문에 데이터를 삽입할 수 있도록 허용했습니다. Postman에서 GET 요청으로 데이터를 전달하는 올바른 방법을 살펴보겠습니다.



참고: 이전에 있었던 '본문' 탭 대신 '매개변수' 탭에 있는지 확인하십시오. 습관의 힘!

리팩토링

이제 의도한 대로 GET 요청을 사용하도록 함수를 리팩터링해 보겠습니다. 먼저 GET 메서드를 사용하기 위해 AJAX 요청을 되돌려 보겠습니다.

<script>
$(document).ready(function() {
    let id = '11'; 
    $.ajax({
        url: '/users/profile',
        type: 'GET', // change this back to GET
        data: {id: id},
        async: false,
        success: function (data) {
            console.log(data);
        }
    });
});
</script>

그리고 GET을 사용하도록 경로를 업데이트합니다.

router.get('/profile', users.getProfile);

다음으로 컨트롤러에 대해

getProfile: async (req, res) => {
    let user_id = req.query.id; // use req.query, instead of req.body
    if(!user_id) 
        res.send("Invalid id");

    let profile;
    try {
        profile = await User.getProfile(user_id);
    } catch (error) {
        res.send(500, error);
    }

    res.send(profile);
}

짜잔! AJAX GET 요청에서 성공적으로 응답을 받고 있습니다 🎉

{
    "id": "11",
    "mobile": "050-5555555",
    "email": "[email protected]",
    "full_name": "Jane Doe",
    "bio": "Live Laugh Love!"
}

TL; DR

GET 요청에는 요청 본문이 없지만 POST 요청에는 있습니다.

Postman을 사용하여 GET 끝점을 테스트할 때 주의하십시오. POST 요청에 사용되는 'Body' 탭 대신 'Params' 탭에서 데이터를 전달해야 합니다.

경로 매개변수 또는 명명된 세그먼트를 사용하지 않는 경우 GET 요청과 함께 전송된 데이터를 보려면 req.query를 사용하십시오. 경로 매개변수를 사용하는 경우 데이터를 보려면 req.params를 사용하십시오.

읽어 주셔서 감사합니다! 이 문서를 개선할 수 있는 방법을 알려주세요. 다음 시간까지 👋
Unsplash에 있는 Samson의 커버 사진. Undraw의 다른 사진 .

자원

https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods

https://stackoverflow.com/questions/10298899/how-to-send-data-in-request-body-with-a-get-when-using-jquery-ajax

https://www.freecodecamp.org/learn/apis-and-microservices/basic-node-and-express/