DAY 4. TaeCho.vil 팀 프로젝트 (방명록, 제출자료 및 발표 준비)

내배캠4기 Node.js 4일차

 

Node.js 트랙이지만 1주차 여전히 python 으로 웹개발 중이다.

 

TIL 쓰고있는 현재시간 오후 9시 58분...

 

5일차인 금요일에 월요일부터 진행한 팀 프로젝트 최종 자료 제출 및 발표가 있다.

 

그래서 비교적 늦은시간 까지 회의를 하고 제출자료 및 발표를 준비했다.

 

튜터님은 12시간 훨씬더 할 열정이 필요하다고 하시지만...

 

힘든건 사실이다. 

 

그만큼 열정이 없다는 반론이기도 하다. (반성하자)

 

그래도 정해진 계획에 맞추기위해서 추가근무(?)를 통해서 열정을 불태우는 중이다.

 

3일차에 내가 맡은 프론트 부분은 거의 완성하여서 마지막으로 board 를 작성하였는데,

 

아직 개념이 부족한지 생각한대로 코드가 진행되지 않았다.

 

팀원 P 님의 도움으로 board 기능을 완성했고, 

 

나의 코드가 아니므로 공부해서 나의 코드로 만들어야겠다.

 

• 방명록 CRUD

 

- app.py (taecho)

@app.route("/api/boards/<member_id>", methods=["POST", "GET", "PUT", "DELETE"])
def api_boards(member_id):
    col_name = 'member_' + member_id
    if request.method == "POST":
        name = request.form['name']
        message = request.form['message']

        doc = {
            'name': name,
            'message': message
        }
        db[col_name].insert_one(doc)
        return jsonify({'msg': '기록 완료!'})
    elif request.method == "PUT":
        board_id = request.form['id']
        message = request.form['message']
        db[col_name].update_one({'_id': ObjectId(board_id)}, {'$set': {'message': message}})
        return jsonify({'msg': '수정 완료!'})
    elif request.method == "DELETE":
        board_id = request.form['id']
        db[col_name].delete_one({'_id': ObjectId(board_id)})
        return jsonify({'msg': '삭제 완료!'})
    else:
        guest_list = objectIdDecoder(list(db[col_name].find({})))
        return jsonify({'guests': guest_list})

- member_1.js

function create() {
        const name = $("#nameInput").val();
        const message = $("#commentInput").val();

        const memberId = 1
        const data = {
            name: name || 'GUEST',
            message: message || 'WOW!'
        }

        requestPostBoards(memberId, data, (response) => {
            alert(response['msg'])
        })
    }

방명록 글 작성 메소드이다.

html 에서 input 태그에 입력된 값을 name 과 message 에 담고, 

memberId, data 를 매개변수로하는 requestsPostBoards 함수를 활용해서

 

- POST, C(Create) 쓰기(생성)

function requestPostBoards(memberId, data, handler) {
    const {name, message} = data
    $.ajax({
        type: 'POST',
        url: `/api/boards/${memberId}`,
        data: {name: name, message: message},
        success: handler
    });
}

/**
 *
 * 서버에 방명록 작성을 요청하는 Ajax 함수
 *
 * @param {number} memberId (1-5) 멤버 아이디
 * @param {object} data
 * @param {callback} handler Ajex 성공시에 실행되는 콜백. (response) => void
 */

POST 방식으로 입력된 값을 저장한다.

 

내가 담당한 페이지는 아니지만 board.html 페이지에서는 개인 페이지에서 저장한 데이터를 출력한다.

 

추가로 수정 및 삭제도 진행했는데, 백엔드는 팀원 P 님께서 척척 해내셨는데, 프론트는 꽤나 오래걸린거 같다.

 

- GET, R(Read) 가져오기(읽기)

function requestGetBoards(memberId, handler) {
    $.ajax({
        type: 'GET',
        url: `/api/boards/${memberId}`,
        data: {},
        success: handler
    })
}

/**
 *
 * 서버에 방명록 목록을 요청하는 Ajax 함수
 *
 * @param {number} memberId (1-5) 멤버 아이디
 * @param {callback} handler Ajex 성공시에 실행되는 콜백. (response) => void
 */

- PUT, U(update) 수정하기(업데이트)

function requestPutBoards(memberId, data, handler) {
    const {id, message} = data
    $.ajax({
        type: 'PUT',
        url: `/api/boards/${memberId}`,
        data: {id: id, message: message},
        success: handler
    });
}

/**
 *
 * 서버에 방명록 수정을 요청하는 Ajax 함수
 *
 * @param {number} memberId (1-5) 멤버 아이디
 * @param {object} data { id: (받아왔던 것의 _id), message: 수정할 것}
 * @param {callback} handler Ajex 성공시에 실행되는 콜백. (response) => void
 */

- DELTE, D(delete) 삭제(삭제)

function requestDeleteBoards(memberId, id, handler) {
    $.ajax({
        type: 'DELETE',
        url: `/api/boards/${memberId}`,
        data: {id: id},
        success: handler
    });
}

/**
 *
 * 서버에 방명록 수정을 요청하는 Ajax 함수
 *
 * @param {number} memberId (1-5) 멤버 아이디
 * @param {string} id { 받아온 것의 _id}
 * @param {callback} handler Ajex 성공시에 실행되는 콜백. (response) => void
 */

아직 공부더 해야하는 부분이다... 주말동안 공부하자

 

============================================================================================

 

오전 오후 내내 팀 프로젝트 코드작성하고

 

저녁 먹고 계에속 제출자료, 발표 준비를 했다.

 

평소에 개발한 내용을 순서대로 기록을 해뒀으면 수월하게 지나갔을 시간을 지금 힘들게 보내고 있다.

 

다음 프로젝트 때는 반드시 계획적이게! 시간순서대로! 기록을 해둬야겠다.

 

대학교때 교수님의 농담이 생각난다.

 

'적자생존 - 적는자가 살아남는다'  - Kang 교수님 -

 

살아남아보자

 

오늘은 여기까지.