[TIL] 2022.05.11 (인스타 UI 클론 코딩 - 팀 프로젝트(끝))

: 지난 TIL :

https://sdrtst.tistory.com/35

[TIL] 2022.05.10 (인스타 UI 클론 코딩 - 팀 프로젝트4)

 

어제는 마이 페이지의 하단 Feed 사진 부분을 해결하였다.

 

오늘은 팀 프로젝트의 마지막 날이기에 팀원들이 완성한 프로젝트들을 병합하는 과정을 진행하려고 하였으나..

시간이 너무 부족하기도 하고 완성하고 싶은 부분들이 아직 남아있었기에 10일 밤 ~ 11일 새벽까지 시간을 투자해서 프로젝트 마무리에 힘을 썼다..

 

다들 늦은 시간까지 고생 많으셨어요!

 

계속 코드를 구현하고 버그를 고치면서 수정하다 보니까 뭔가 눈에 밟히는 부분이 있었다.

원래 Feed 박스에 사진을 추가하는 것으로 끝내려고 했지만, 마이 페이지를 살펴보자 소개글이 적히는 칸에 수정이 필요해 보였다.

 

소개글 부분

 

아차..!! 싶었다.

소개글 부분이 그냥 html로 쓰여있기만 해서 수정이 필요해 보였기 때문이다.

 

안타깝게도 마감 기한까지 얼마 남지 않았기에 급하게 코드를 구현하였다.

 

app.py

# 소개글 등록 POST
@app.route('/api/introduce', methods=['POST'])
def introduce_save():
    user_id_receive = check_token()
    introduce_receive = request.form['introduce_give']

    doc = {
        'user_id': user_id_receive['username'],
        'introduce': introduce_receive
    }
    db.introduce.insert_one(doc)

    return jsonify({'result': 'success', 'msg': '소개 등록 완료'})


# 등록된 소개글 보여주기 GET
@app.route('/api/introduce', methods=['GET'])
def introduce_view():
    user_info = check_token()
    introduce = list(db.introduce.find({}, {'_id': False}))
    return jsonify({'result': 'success', 'introduce': introduce, 'username': user_info})

mypage_page.js

function Introduce_list_post() {
    let introduce = $('#introduce-itr').val()

    $.ajax({
        type: "POST",
        url: "/api/introduce",
        data: {introduce_give: introduce},
        success: function (response) {
            alert(response["msg"]);
            window.location.reload();
        }
    })
}

function Introduce_list() {
    $.ajax({
        type: "GET",
        url: "/api/introduce",
        data: {},
        success: function (response) {
            if (response["result"] == "success") {
                let introduce = response['introduce'];
                let user_info = response['username']
                let info = user_info['username']
                for (let i = 0; i < introduce.length; i++) {
                    let user_id = introduce[i]['user_id'];
                    let itr = introduce[i]['introduce'];
                    console.log(user_info, user_id)
                    if (user_id == info) {
                        let introduce_add_html = `<p>${itr}</p>`
                        $('#introduce-box').append(introduce_add_html)
                    }
                }
            }
        }
    })
}

 

간단하게 POST를 이용하여 해당 데이터 값을 로그인된 user_id와 함께 MongoDB에 저장하고, 저장된 해당 DB를 GET으로 불러와서 소개글 부분에 표시할 수 있게끔 설정해주었다.

 

input 부분에 텍스트를 입력하고 Introduce 버튼을 누르면 소개글에 텍스트가 추가되는 모습

 

 

댓글을 등록하는 듯한 느낌으로 소개글을 등록하고 user_id에 해당되는 값만 불러오는 것으로 설정해주었다.

시간에 쫓기며 급하게 만든 거라 잘 만들 수 없었던 점이 아쉽게 느껴졌다..

 

그렇게 마지막까지 추가된 부분들을 갖고 와서 팀원들과 함께 코드를 살펴보며 오류를 해결하고 코드를 병합하는 데 성공했다.

 

다음은 완성된 프로젝트 시연 영상과 Git hub 링크이다.

 

: 웹 페이지 시연 영상 :

https://drive.google.com/file/d/1JhPZ05qpFbO3dAya-IcG_jtGjHWHkvwF/view

2022-05-11 11-59-04.mp4

 

: Git hub 프로젝트 링크 : 

https://github.com/wonbbnote/insta_clonecoding

GitHub - wonbbnote/insta_clonecoding: 내배캠 팀프로젝트

 

12시까지 제출이었기에 제출을 한 뒤, 13시부터 우리 프로젝트에 대한 것을 발표하였고 17시까지 모든 팀의 프로젝트의 발표를 보며 팀 프로젝트가 마무리되었다.

 

이후 우리 팀원들끼리 KPT를 하며 이번에 진행된 인스타 클론 코딩 회고를 진행하였고, 피드백을 갖는 시간을 가졌다.

 

-

 

뭔가 시간이 많은 듯했지만 순식간에 지나간 시간이었다.

 

이번 프로젝트를 진행하며 팀 개개인이 본인의 역량이 부족하다는 것을 느꼈다.

그래도 아직 시작한 지 4주를 달려가고 있으며 처음 시작과는 다르게 많이 성장했다는 것 또한 개개인 모두 느꼈다.

 

우리가 구현했던 코드들을 하나하나 설명해가면서 인스타 클론 코딩 발표도 해보니 코드를 전체적으로 이해하는데 도움이 됐던 것 같다.

 

마지막 날 새벽까지 고생한 팀원들 모두 고생 많으셨고 트러블도 없이 서로 도와주며 다들 잘해주셨다고 생각한다.

 

앞으로 남은 프로젝트도 힘내면서 모두 같이 쭉쭉 성장하는 개발자가 되길..

 

:D