[TIL]2023.05.11 풀리지 않는 오류 ㅠㅠ, 오늘 기록할게 많은데!!(2)

Nick·2023년 5월 11일

TIL: 오늘을 돌아보자

목록 보기

4/95

좋아 하나씩 풀어나가고 있어

ㅎㅎㅎ;; 실마리 하나를 찾아 내었다.

작성하기 버튼을 누르면 405 에러가 계속 발생했다.

개발자 도구 > 네트워크 > payload 를 확인해 보니, 데이터 값은 온전히 담겨 있었다.

클라우드MongoDB에 데이터가 잘 들어가고 있던걸 발견!!!

그러나 405 에러는 여전히 진행중
- 주소창에 "http://localhost:5000/#" 가 나오는데 #은 뭐지?...
- 혹시 비밀번호 Data 때문에 get 할때 못불러 오는게 연관 있을까?

javascript 코드

$(function () {
    $(document).ready(function () {
        listing();
    });

    function listing() {
        fetch('/review').then((res) => res.json()).then((data) => {
            let rows = data['result']
            $('#colums').empty()
            rows.forEach((a) => {
                let image = a['image']
                let name = a['name']
                let star = a['star']
                let comment = a['comment']

                let star_repeat = '⭐'.repeat(star)

                let temp_html = `<figure>
                                    <img src=${image}/>

                                    <figcaption class="name">
                                         ${name}
                                     </figcaption>
                                     <figcaption class="star">
                                         ${star_repeat}
                                     </figcaption>
                                     <figcaption class="caption">
                                          ${comment}
                                      </figcaption>
                                 </figure>`
                $('#colums').prepend(temp_html)
            });
        })

    }

    function save_review() {
        let name = $('#name').val()
        let star = $('#star').val()
        let comment = $('#comment').val()
        let img = $('#img').val()
        let pw = $('#pw').val()


        let formData = new FormData();
        formData.append("name_give", name);
        formData.append("star_give", star);
        formData.append("comment_give", comment);
        formData.append("img_give", img);
        formData.append("pw_give", pw);

        fetch('/review', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
            alert(data['msg'])
            window.location.reload()
        })
    }

    let share_modal = $('.share-overlay');

    $('.share').click(function() {
        share_modal.css({
            'display' : 'block',
        });
    });

    $('.cancel').click(function() {
        share_modal.css({
            'display' : 'none'
        });
    });

    $('.submit').click(save_review)

})

app.py 코드

@app.route('/')
def home():
    return render_template('index.html')

@app.route('/review', methods=["POST"])
def review_post():
    name_receive = request.form['name_give']
    star_receive = request.form['star_give']
    comment_receive = request.form['comment_give']
    img_receive = request.form['img_give']
    pw_receive = request.form['pw_give']

    doc = {
        'name' : name_receive,
        'star' : star_receive,
        'comment' : comment_receive,
        'img' : img_receive,
        'pw' : pw_receive
    }

    db.review.insert_one(doc)

    return jsonify({'msg':'맛집 저장 완료 🍽️ '})

@app.route('/review', methods=["GET"])
def review_get():
    all_review = list(db.review.find({},{'_id':False}))
    return jsonify({'result' : all_review})

if __name__ == '__main__':
    app.run('0.0.0.0', port=5000, debug=True)

(해결)남의 코드는 한번 더 뜯어봐야 한다.

에러를 잡았다... Flask 서버 쪽에서 문제인줄만 알았고, api 와 method 관련된 코드만 한참 뜯어보고 문법이 틀렸는지 확인해 보고... jquerty 문법에서 문제가 있나 확인해 보고... 허공에 삽질을 했지만... 너무 너무 우연히 찾게 되었다.
localhost:5000/# -> 역시 이게 힌트...

form 태그 너가 뭐길래?

Form 태그에 대해 알아보자

'form' 태그가 뭐야?

로그인을 하거나, 물건을 사거나, 글을 작성 하는 등 내가 입력한 정보를 서버에 전송하는데
글자를 입력하거나 무언가 선택하는 것을 form 이라고 한다.
이번 미니 프로젝트에서

이렇게 정보를 보내기 위해 form 태그를 이용 했던걸로 보인다!
다시 정리하자면 사용자가 입력한 정보를 서버에 보낼때 사용하는 태그라고 생각하면 될듯!

'form' 태그 속성

Action 👮🏻‍♂️얘가 범인

👻 form속성값에 name="id" 꼭 네이밍을 해줘야 한다 잊지말자!

<html>
<body>
  <form action="http://localhost/login.php"> <!--http://localhost/re_min 주소로 전송해 주세요 --> 
    <p>아이디 : <input type="text" name="id"> </p>
    <p>비밀번호 : <input type="password" name="pwd"></p>  <!--*** 패스워드 모양으로 생성 -->
    <p>주소 : <input type="text" name="address"></p>  
    <input type="submit">
  </form>  
</body>
</html>

이렇게 작성한다면 form 태그는

"http://localhost/login.php?/id=입력값&pwd=입력값&address	=입력값"

이런식으로 서버에 전송된다!

아니 그러면 정보가 누출 되잖아?

그래서 필요한게

🔒Method 속성

method를 지정하지 않으면 기본 적으로 Get 방식으로 전송이 될거야
Get 방식은

"http://localhost/login.php?/id=입력값&pwd=입력값&address	=입력값"

이런식으로 전송되고

Post 방식은

"http://localhost/method.php"

이런식으로 숨겨져서 전송된다는 사실 !

form : 문자입력

<html>
<body>
  <form action="http://localhost/login.php"> 
    <p>아이디 : <input type="text" name="id"> </p>
    <p>비밀번호 : <input type="password" name="pwd"></p> 
    <p>글입력 : 
      <textarea cols="50" rows="10"></textarea> <!--cols는 열-> 50글자가 입력될 수 있는 폭이 커짐 / rows="10"-> 글자를 입력할 수 있는 10 줄 -->
	</p>  
    <input type="submit">
  </form>  
</body>
</html>