221103 TIL (미니프로젝트)

TIL

팀 프로젝트

1) 부트스트랩에서 가져온 Modal 기능이 Modal.js 파일에서 오류가 나는 바람에 사용할 수 없게 되었다.

그래서 방명록 수정 틀을 일반 텍스트 기능으로 변경해야 했다.

Modal의 trigger button이 없어져서 일반 버튼에 onclick 기능을 2개 설정해야 했다.

onclick="load_reviews(${num}); open_edit()"

방법은 간단했다. 두개 기능 사이에 세미콜론(;)을 넣어주면 된다.

 

2) 서버를 작업할 때에는 print를 활용하고 클라이언트를 작업할 때에는 console.log를 활용해야 한다.

엊그제까지는 전혀 활용하지 않았는데 오류가 나도 이유를 알 수 없고 추측을 해야 하는 반면

위 두가지를 활용하면 제대로 작동하는지 눈으로 확인할 수 있고 오류가 발생할 때에는 console 창에 띄워주기 때문에

보다 쉽게 개선할 수 있었다.

 

 3) 팀원들의 개인페이지를 모아 합치는 작업을 진행하였다.

처음에는 조금 막막했으나 쉬운거부터 하자고 생각을 해서 html 파일들부터 url 없이 파일명으로 링크를 연결하였다.

url과 html을 연결하는 부분에서 어떻게 해야할지 몰라 구글에 검색을 해보았다.

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

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

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

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

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

이런식으로 각각의 파일들을 랜더링하고 도메인 값을 설정한 뒤 미리 연결해놓았던 링크에 파일명들을 url로 바꾸어주었다.

그 후 팀원들 각각의 app.py에 API를 복사하여 붙여넣었다.

 

구현한 기능들

• 방명록 저장

 i) 클라이언트

function save_reviews() {
    let comment = $('#comment').val()      // id=comment의 값을 가져와 comment로 선언
    let nickname = $('#nickname').val()    // id=nickname의 값을 가져와 nickname으로 선언

    $.ajax({
        type: 'POST',                      // POST 방식 요청
        url: '/api/reviews/save',          // url을 조금 복잡하게 준듯 하다.
        data: {comment_give: comment, nickname_give: nickname},   //comment와 nickname 값을 서버로 전달
        success: function (response) {
            alert(response['msg'])          // 서버로부터 메시지 받아옴.
            window.location.reload()        // 창 새로고침.
        }
    });
}

방명록 작성하기 버튼의 onclick 속성으로 동작.

 

 ii) 서버

@app.route('/api/reviews/save', methods=['POST'] )   # POST 방식
def reviews_save():

    comment_receive = request.form['comment_give']    # 클라이언트로부터 받아온 give 값을 receive 값으로 선언.
    nickname_receive = request.form['nickname_give']

    review_list = list(db.reviews.find({}, {'_id': False}))
    count = len(review_list) + 1                     # 저장된 데이터의 길이 +1만큼 count를 설정

    doc = {
        'num' : count,
        'comment' : comment_receive,
        'nickname' : nickname_receive       # DB에 저장할 이름 : receive 값
    }
    db.reviews.insert_one(doc)        # reviews 폴더에 저장한다.

    return jsonify({'msg': '작성 완료!'})  # 클라이언트에 메세지 보냄.

 

•  작성된 방명록 보여주기

 i) 서버

@app.route("/api/reviews/show", methods=["GET"])      # GET 방식
def reviews_get():
    review_list = list(db.reviews.find({}, {'_id': False}))  # DB에서 reviews 폴더의 데이터들을 가져와서 review_list로 선언.
    return jsonify({'reviews': review_list})    # 클라이언트로 보내준다.

간단하다. DB에서 찾아서 클라이언트로 보내준다.

 

ii) 클라이언트

$(document).ready(function () {
            show_reviews();          // 페이지가 새로고침 될 때 함수 실행.
        });
        
function show_reviews() {
    $.ajax({
        type: 'GET',                   // GET 방식
        url: '/api/reviews/show',
        data: {},
        success: function (response) {              // 서버에서 데이터 받음.
            let rows = response['reviews']          
            for (let i = 0; i < rows.length; i++) {
                let num = rows[i]['num']
                let comment = rows[i]['comment']      // 데이터들을 각각 선언.
                let nickname = rows[i]['nickname']

                let temp_html = `<div class="mycards">
                                    <div class="card w-75">
                                        <div class="card-body">
                                            <h5 class="card-title">${nickname}</h5>  // 선언된 nickname 값 붙여넣음.
                                            <p class="card-text">${comment}</p>      // 선언된 comment 값 붙여넣음.
                                            <span>No.${num}</span>					// 선언된 num 값 붙여넣음.
                                            <div class="buttons">
                                                <button onclick="load_reviews(${num}); open_edit()" type="button" class="btn btn-dark">수정</button>
                                                // 수정 버튼에 onclick 속성을 통하여 방명록 수정 틀을 열고 작성된 방명록 데이터를 불러오는 함수 실행.
                                                <button onclick="delete_reviews(${num})" type="button" class="btn btn-dark">삭제</button>
                                                // 삭제 버튼에 onclick 속성을 통하여 방명록을 삭제하는 함수 실행.
                                            </div>
                                            `
                $('#review-box').append(temp_html)
            }
        }
    });
}

display: none;  // css속성을 사용하여 수정박스는 닫아놓는다.

처음에는 보여주기 함수에 수정박스도 넣고 불러온 값을 그대로 적용하게끔 작성하였는데 동작이 되지를 않았다.

팀원들의 도움을 받아서 방명록 수정에 필요한 데이터를 불러오는 API를 따로 요청해야 한다는 사실을 알게 되었다.

 

• 작성된 방명록 수정하기 (데이터 불러오기)

 i) 서버

@app.route("/api/reviews/load/<num>", methods=["GET"]) # 클라이언트에서 num값을 받아온다.
def reviews_load(num):
    print(num)
    review_list = list(db.reviews.find({'num':int(num)}, {'_id': False}))
    print(review_list)    # 오류가 나서 print를 사용한 흔적.
    return jsonify({'reviews': review_list})

대체적으로 보여주기의 GET 요청과 동일하지만 클라이언트로부터 수정할 방명록의 num값을 받아온다.

 

 ii) 클라이언트

function load_reviews(num) {
    $('#edit-box').empty()        // 박스를 초기화하지 않으면 누를때마다 박스에 데이터들이 쌓인다.
    $.ajax({
        type: 'GET',
        url: '/api/reviews/load/' + num,        // 서버로 num값을 넘겨준다.
        data: {},
        success: function (response) {
            let rows = response['reviews']
            for (let i = 0; i < rows.length; i++) {
                let num = rows[i]['num']
                let comment_load = rows[i]['comment']      // comment_load로 선언
                let nickname_load = rows[i]['nickname']    // nickname_load로 선언.
                console.log(num, comment_load, nickname_load)
                let temp_html = `<div>
                                    <div class="mb-3">
                                        <label for="exampleFormControlInput1" class="form-label">닉네임</label>
                                        <input type="email" class="form-control" id="edit_nickname" value="${nickname_load}">
                                    </div>
                                    <div class="mb-3">
                                        <label for="exampleFormControlTextarea1" class="form-label">방명록</label>
                                        <textarea class="form-control" id="edit_comment" rows="3">${comment_load}</textarea>
                                    </div>
                                    <div class="buttons2">
                                    <button onclick="close_edit()" type="button" class="btn btn-outline-dark" data-bs-dismiss="modal" style="margin-right: 5px;">닫기</button>
                                    <button onclick="edit_reviews(${num})" type="button" class="btn btn-dark">수정하기</button>
                                    // 수정하기 버튼에 onclick 속성으로 수정하기 함수 실행.(클릭한 방명록의 num값을 넘겨준다.
                                    </div>
                                </div>`
                console.log(num, comment_load, nickname_load)  // 오류 때문에 console을 활용한 모습.
                $('#edit-box').append(temp_html)
            }
        }
    });
}

박스의 텍스트창에 보여줄 데이터를 위 보여주기와 다르게 선언한다. 요청 url에 num 값을 넘겨준다. 수정한 텍스트(인풋) 태그에 id를 설정한다.

 

• 작성된 방명록 수정하기 (수정 후 저장)

 i) 클라이언트

function edit_reviews(num) {
    let edit_comment = $('#edit_comment').val()    // 위에서 설정한 id에 입력한 값을 받아와 선언.
    let edit_nickname = $('#edit_nickname').val()

    $.ajax({
        type: "POST",
        url: "/api/reviews/edit/" + num,    // url에 num값을 넘겨준다.
        data: {edit_comment_give: edit_comment, edit_nickname_give: edit_nickname},
        success: function (response) {
            alert(response["msg"])
            console.log(num, edit_nickname, edit_comment)
            window.location.reload()
        }
    });
}

 

ii) 서버

@app.route("/api/reviews/edit/<num>", methods=["POST"])
def reviews_edit(num):
    print(num)
    edit_nickname_receive = request.form['edit_nickname_give']
    edit_comment_receive = request.form['edit_comment_give']
    print(edit_comment_receive, edit_nickname_receive)     #오류가 많이나서 print를 활용했다.
    db.reviews.update_one({'num':int(num)}, {'$set': {'nickname': edit_nickname_receive, 'comment': edit_comment_receive}})
     # 클라이언트로부터 받아온 num값이 문자열이기 때문에 형변형을 해준다.
    print(edit_comment_receive)
    return jsonify({'msg': '수정 완료!'})

 

• 방명록 삭제하기

 i) 클라이언트

function delete_reviews(num) {
    $.ajax({
        type: 'GET',                         // GET 요청
        url: '/api/reviews/delete/' + num,   // num 값을 넘겨준다.
        data: {},                            // 넘겨주는 데이터는 없다.
        success: function (response) {
            alert(response['msg']);
            window.location.reload()
        }
    });
}

위 방명록 수정하기(불러오기)에서 작성한 삭제버튼의 onclick으로 함수가 실행된다.

 

ii) 서버

@app.route('/api/reviews/delete/<num>', methods=['GET'])
def reviews_delete(num):
    db.reviews.delete_one({'num': int(num)})  # 받아온 num 값이 문자열이기 때문에 형변형을 한다.
    return jsonify({'msg': '삭제 완료!'})

 

 

내일이 미니프로젝트 마지막 날이고 발표일이다.

발표를 내가 하기로 되어 있었지만 팀원 중 한명이 내 블로그에서 발표 울렁증이 있다는 글을 보고 고맙게도 역할을 바꿔준다고 했다.

그래서 내가 합치는 작업을 진행하였고 새로운 것을 배운 느낌이라 오히려 좋았다.

 

지난 3일동안 너무 미니프로젝트에만 몰두해 있어서 다른 공부를 많이하지 못한 것 같다.

내일 미니프로젝트 발표가 끝나고 난 뒤부터는 자바 공부를 해야할 것 같다.

아무래도 자바가 제일 중요하지 않을까 생각한다.