팀프로젝트 - GET/POST

이한결·2023년 1월 11일

GET POST 부트 캠프 스파르타 코딩 여정 3일차 항해99

부트 캠프

목록 보기

9/98

1월 11일 여정 3일차이다.
팀프로젝트의 방향은 이전에 배웠던 것들에서 벗어나지 않고 배운 것을 깊게 파고 들기 위한 프로잭트가 진행되었다.

오늘의 Today I Learned

Problem

팀이 원하는 방식은 URL에서 파라미터를 가져와서 그것과 관련된 정보를 클라이언트에게 보여주는 것이었다. 문제는 프론트에서 URL파라미터를 가져왔지만 내가 만든 ajax type이 잘못 되었다.

백앤드

@app.route('/fanpage', methods=["POST"])
def fanpage_go():
    #jk fanpage go func
    idol_id = request.form['idol_id']
    user_list = list(db.idol.find({'idol_num':int(idol_id)},{'_id':False}))
    return jsonify({'msg':user_list})

프론트

      function show_idol() {
        let url_href = window.location.href;
        let url = new URL(url_href);
        let a = url.searchParams.get("id");
        $.ajax({
          type: "POST",
          url: "/fanpage",
          data: { idol_id: a },
          success: function (response) {
            let rows = response["idol"];
            for (let i = 0; i < rows.length; i++) {
              let id = rows[i]["idol_num"];
              if (id == Number(a)) {
                console.log(rows[i]);
              }
            }
          },
        });
      }

위에 코드는 잘 작동한다. 그렇지만 잘 생각해보면 작동 방식은 POST가 아니다. 사진을 클릭하였을때, 정보를 받아 오는 것은 GET 일 수 밖에 없다. 그렇지만 나는 POST를 사용하고 있다.

Try

POST였던 것을 type만 GET으로 바꾸어보았다. 하지만 작동하지 않았다. 당연한 것이다. GET에서는 body에 data를 실고 백엔드로 가지 않기 때문이다.

Solve

코드를 싹 지우고 다시 원점에서부터 시작했다.
일단 첫번째로 우리가 불러오고자 하는 DB가 무엇인가? 부터 생각했다.
ajax로 DB를 접근할 때, 처음 idol이라는 Collections에 저장을 했었다. 그렇다면 idol에 저장되어 있는 정보를 그대로 가져오면 된다.
두번째로 구지 프론트에서 넘긴 값을 백엔드에서 처리할 필요가 있는가? 였다.
답은 프론트에서도 처리가 가능하다 이다. 구지 프론트에서 URL 파라미터를 넘겨줘서 백엔드에서 URL 파라미터를 처리해서 줄 필요가 없다.

백앤드

@app.route("/idol", methods=["GET"])
def idol_get():
    idol_list = list(db.idol.find({},{'_id':False}))
    return jsonify({'idol':idol_list})

사실 위의 백앤드는 이미 이전에 DB의 idol 콜렉션에서 데이터를 불러와서 프론트에 보여주기 위해 써놓은 코드다.

프론트

      function show_idol() {
        let url_href = window.location.href;
        let url = new URL(url_href);
        let a = url.searchParams.get("id");
        $.ajax({
          type: "GET",
          url: "/idol",
          data: {},
          success: function (response) {
            let rows = response["idol"];
            for (let i = 0; i < rows.length; i++) {
              let id = rows[i]["idol_num"];
              if (id == Number(a)) {
                let name = rows[i]["idol_name"];
                let link = rows[i]["idol_link"];
                let temp_html = `<img src="${link}" alt="image"/> <h1>${name}</h1>`;
                $(".kaogaii-wrapper").append(temp_html);
              }
            }
          },
        });
      }