[Flask] 화성땅 공동구매 프로젝트 문제점 해결

화성땅 공동구매 프로젝트를 진행하면서 겪었던 문제점을 해결하기 위한 과정을 기록하고자 한다.

 

[Flask, MongoDB] 화성땅 공동구매 프로젝트

 

문제점

 

위와 같이 POST - MongoDB 실행은 잘 되었으나

 

DB에 저장된 데이터를 긁어오는 GET 과정이 잘 되지 않았다.

추가하고 싶은 데이터가 테이블에 새로 찍혀야 했는데 그대로였다.  

 

원인파악

app.py를 실행시켜 데이터를 추가하면 MongoDB에는 저장이 잘 되는데
index.html 화면에 있는 테이블은 계속 그대로였다.

그래서 난 서버와 클라이언트의 원인을 파악해보기로 했다.

 

먼저 서버를 파악해보자!

터미널창을 확인해보니 http 상태코드가 200번대로 응답하고 있었다.
➡️ 200번대 코드 : 클라이언트의 요청을 서버가 성공적으로 처리했다는 것을 의미!

 

app.py 서버상에는 문제가 없다는 것을 확인하였다. 

고로 클라이언트 코드 index.html의 문제임을 알 수 있었다.

 

 

클라이언트에서 확인하는 방법은
무조건 찍어보는 수밖에 없다!

 

해결1. 

▶ console.log(rows)

// script

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

            $.ajax({
                type: 'GET',
                url: '/mars',
                data: {},
                success: function (response) {
                    let rows = response['orders']
                    console.log(rows)

rows가 돌기 전에 데이터가 잘 들어오는지 찍어보았다.

배열로 들어온 걸 확인, 주문한 사람 이름, 주소, 평수가 잘 들어오고 있었다.

➡️ rows에는 문제가 없다!

 

▶ for문 console.log()

// script

for (i = 0; i< rows.length; i++) {
                        let name = rows[i]['name']
                        let address = rows[i]['address']
                        let size = rows[i]['size']
                        console.log(name)
                        console.log(address)
                        console.log(size)

 

for문을 돌면서 잘못하고 있진 않은지 내가 내고 싶은 데이터가 맞는지 궁금했다.

0번째에도 문제가 있는지 console.log(name), console.log(address), console.log(size)로 찍어보았다.

➡️ 배열을 돌면서 그대로 잘 들어오고 있음을 확인,  tag html은 문제가 없다!

 

해결2.

▶ append

현재 내 문제는 orderbox에 데이터를 추가할려고 하는데 안붙는 것이기 때문에 

id가 orderbox에 있는 곳을 찾아가 보았다.

<tbody id="order-box">
              <tr>
                <td>강백호</td>
                <td>서울시 마포구</td>
                <td>50평</td>
              </tr>
              <tr>
                <td>서태웅</td>
                <td>부산시 수영구</td>
                <td>30평</td>
              </tr>
              <tr>
                <td>정대만</td>
                <td>서울시 강남구</td>
                <td>40평</td>
              </tr>
            </tbody>

<tbody>에 붙이기 위해서는 붙일 곳의 이름을 정해주어야 한다.

내 코드에는 이게 붙여있지 않았다.

<tbody id="order-box">

➡️ tbody에 order-box 이름을 붙이자! 

 

해결3.

▶ id 변수값

 

id값에 order-box를 주었음에도 불구하고 그대로였다.

마지막으로 특수문자의 문제인가 싶어 3군데를 바꿔보았다.

// GET 
$('#orderbox').empty()
$('#orderbox').append(temp_html)

// table
<tbody id="orderbox">

➡️ id에 슬래시(-)가 있는 경우 id를 두개로 인식하는 문제가 있음을 확인!

➡️ id에 특수문자를 넣고 싶은 경우, 언더바 슬래시(_)로 쓸 것! 

 

 

이와 같은 조치로 정상적으로 작동이 잘되었음을 확인할 수 있다. 

 

 

요약

1.  html 코드에 orderbox가 어디에 있는지 정해주지 않음
➡️ <tbody id="orderbox">

2. id 변수값의 특수문자를 잘못 지정함
➡️  order-box (❌)
➡️ orderbox & order_box (⭕)