TIL 17일차: 문제 해결 과정 (get ajax에서 json값 불러오기, sql strict 디폴트값 없는 것 채워주기, console.log()로 셀프 디버깅)

오늘은 딱히 무슨 개념을 배웠다기 보다는 프로젝트 문제들을 확인하고 조금씩 해결한 날이었다.

오늘 있었던 문제들은 크게 봤을 때

1. get으로 코멘트를 불러왔을 때 undefined로 뜨는 것과

2.post 후에 alert가 떠지지않는 걸로 보아 post ajax가 작동이 제대로 안된다는 점

3. 1,2와 연관해서 db에 있는 데이터를 원만하게 끌어오거나 저장하는 것이 어렵다는 점이었다.

 

이 해결방법을 차례대로 살펴보자.

1. get으로 코멘트를 불러왔을 때 undefined로 뜬다.

다음과 같이 기존에 db에 저장했던 임의의 comment들이 undefined로 뜬다.

db엔 잘 저장되어 있다.

하지만 undifined로 뜸

데이터의 개수가 같은 걸로 보아 데이터는 잘 가져왔는데 표현하는 걸 잘못 적었다고 생각하고 다시 html로 가서 확인했다.

function show_comment() {

            $.ajax({
                type: 'GET',
                url: '/comment',
                data: {},
                success: function (response) {
                    let doc = JSON.parse(response)
                    // console.log(response)
                    for (let i = 0; i < doc.length; i++) {  
                        let comment_title = doc[i][5]	#여기 이 부분을 잘못 적었음.
#json값의 [i][j]이런 식으로 숫자를 적었어야 했는데, 그게 아닌 내가 원하는 값 "comment_title"을 적었다.
                        let comment_content = doc[i][1]
                        let star = doc[i][2]
                        let star_image = "*".repeat(star)

                        let temp_html = `<tr>
                                            <td>${comment_title}</td>
                                            <td>${comment_content}</td>
                                            <td>${star_image}</td>
                                        </tr>`
                        $("#comment_box").append(temp_html)
                    }
                }
            });
        }

이때 숫자를 잘 확인해서 넣어줘야 한다. 아래와 같이 잘못 나올 수도 있음.

인덱스 번호를 잘못 설정함.

 

 

올바르게 실현된 결과

인덱스 번호를 올바르게 설정했고 별점이라는 열도 추가해서 보여줬다.

 

 

이어서 두 번째 문제.

2.post 후에 alert가 떠지지않는 걸로 보아

post ajax 문제 또는 mySQL에서 데이터를 집어넣지 못함.

ajax라면 또다시 html로 가서 확인해보아야 한다.

 function save_comment() {
            let comment_title = $("#comment_title").val()
            let comment_content = $("#comment_content").val()
            let star = $(`#star`).val()
            let star_image = "*".repeat(star)

            $.ajax({
                type: 'POST',
                url: '/comment',
                data: {comment_title: comment_title,comment_content: comment_content,star: star},
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            });

일단 post 타입의 ajax에는 문제가 없었다.

변수 지정도 필요한 것들만 해줬고, alert로 msg까지 띄우는 것까지.

그렇다면 문제는 ajax가 아니라, 파이썬에 연결된 post 메소드의 안에서의 문제였다.

@app.route("/comment", methods=["POST"])
def insert_comment():
    db = pymysql.connect(host='localhost', user='root', password='0000', db="new_project", port=3306)
    cursor = db.cursor()

    comment_title = request.form["comment_title"]
    comment_content = request.form["comment_content"]
    star = request.form["star"]

    sql = """insert into comment (comment_title,comment_content,star, user_id,problem_id,review_id)values (%s,%s,%s,%s,%s,%s)"""
    #이곳 sql 지정해준 곳에서 user_id, problem_id, review_id에 대한 디폴트값이 지정이 안되었다는 에러 메시지가 있었다.
    # sql은 기본적으로 strict하기 때문에 이 값들이 AUTO_INCREMENT가 아닌 이상으로는 값을 빠짐없이 적어줘야 한다.
    # 따라서 아래에 값을 임의로 11,22,33으로 지정해주었다.

    cursor.execute(sql, (comment_title, comment_content, star,11,22,33))
    db.commit()
    db.close()
    return jsonify({'msg': '댓글 달기 완료!'})

sql로 지정해준 곳에서 칼럼 값들을 빠짐없이 적어줘야한다는 점.

기본 키인 comment_id는 auto_increment라서 안적어줘도 자동 생성되지만, 나머지 외부키인 user_id, probem_id, review_id는 일단 내가 임의로 설정한 데이터베이스 안에서는 자동생성되지 않고 디폴트 값도 없으므로 적어줘야 한다.

 

 

이어서 세 번째 문제.

3. db에 있는 데이터를 원만하게 끌어오거나 저장하는 것이 어렵다.

애초에 어제 오늘 겪었던 문제가, 디비버를 이용해서 데이터베이스를 생성했을 때 테이블이 그때그때 반영되지 않고

워크벤치와 꼬이거나, 생성 및 삭제가 바로바로 이루어지지 않고 로딩시간이 어마어마하게 길어졌다는 점이다.

튜터님께 여쭤본 결과, 한 번은 데이터베이스를 새로 파서 처음부터 다시 시작했고

또 한 번은 MySQL Command Line Client에서 직접 명령어를 쳐가면서 테이블을 생성하고 데이터를 집어넣는 것을 배웠다.

 

짧게 MySQL Command Line Client과 워크벤치 이용한 걸 떠올려보면 다음과 같다.

show databases를 하면 내게 있는 데이터베이스 전체를 볼 수 있다.

use 데이터베이스이름 은 해당 데이터베이스 안에서 작업을 한다는 걸 뜻한다. show processlist는 지금 프로세스 중인 데이터들이 뜬다. 이 중 디비에서 작동하지 않는 것들은 다 kill id번호로 바로 중단시켰다.

(오른쪽)해당 데이터베이스 안에 있는 table들을 보여준다. (왼쪽) 해당 테이블 안에 있는 모든 칼럼들을 보여준다.

여기서부턴 워크벤치에서 데이터 insert/delete하면서 내용이 잘 들어갔는지 확인하는 용도로 썼다.

해당 테이블에 마우스 오버 오른쪽 마우스 클릭, send to sql editor>create/insert/delete statement 등의 활동을 할 수 있다.

DBeaver보다 훨씬 직관적이고 에러 가능성이 낮다... 너무 좋다.

일단 워크벤치에서 외래키도 다 지워버렸다. get과 post 화면 구현이 1차 목표였기 때문에...

우리가 계획한 erd와 디비버에서 확인한 엔티티 관계도... 외래키를 없애버렸기 때문에 간단하게 나온다.

 

 

 

다시 원점으로 돌아와서, db의 데이터를 끌어오거나 db에 데이터를 저장하는 것에 어려움을 느꼈던 이유는,

위의 1번과 2번의 문제에서 비롯된 화면 구현이 실패한 것에서부터 있었다.

따라서 줄마다 console.log()를 찍어서 어느 줄이 잘못되었는지 파악을 조금씩 해나갔다.

예를 들면 콘솔창에 예쁘게 나오는 이런 것들이

화면에는 undefined로 나오자 아래 형광색 친 부분을 입력해서 콘솔창에 json형식으로 이상하게 나오는 걸 확인했다.

그리곤 doc이 우리 입력값을 예쁘게 출력하기 위해 만든 변수라는 걸 알고, 다음 for문을 통해 반복하는 것을 확인했다.

이 때 배열이 이중으로 되어있으므로 doc[i][j]에서 i와 j에는 숫자가 들어가 있어야 했다.

하지만 내가 처음 쓴 구문은 doc[i]["comment_id"] 꼴이었다. 지정해주지 않는 값을 빼내려고 했던 것이다.

이건 첫번째 문제에서 해결했던 부분이고, 이 부분이 해결되니 get ajax와 파이썬 파일의 get메소드도 잘 작동이 되었다.

이런식으로 줄마다 콘솔이나 프린트를 찍어서 어느 부분이 잘못되었는지 디버깅하는 것을 배운 날이었다.

물론 시간은 정말 많이 걸렸다 ㅠㅠ

 

 

이제까지 이해가 부족했던 부분이 페이지에 대한 부분이었다.

댓글 기능은 새로운 페이지에 있는것보다 전 페이지에서 함께 구동되는 게 맞다.

그럼 나는 리뷰 화면에서 같이 구현되는 셈인데, 이걸 어떻게 연결해야할지 감이 안잡힌다.

우리 팀의 프론트엔드이자 문제해결사를 맡으신 우중님이 에이태그로 연결시켜주신다고 했는데 오잉 그건 뭐지...

일단 나는 페이지에서 내 get과 post가 잘 구현되는 거 봤으니 다행이고,

이제 db만 조금씩 손보면서 id값 맞춰주는 걸 하면 될 것 같다.

 

팀장님이 새벽까지 일해주셔서 디비를 만들어주셨다.

나는 디비가 없이 작업해도 디비 새로 들어오면 다시 일해야되서 조금 허망하고 무기력했는데

이렇게 잘 파주셔서 ㅠㅠ 내일은 review, problem, comment db를 조금씩 같이 구현해갈 것 같다.