😂 [팀플] 인스타그램 클론코딩

😭 comment API 생성

- 진행 과정

• 댓글달기와 관련된 API 작성을 일단은 마이페이지에 있는 게시글을 클릭하면 나오게 되는 모달에서 시작하였다.

• 마이페이지에 있는 게시글들을 클릭하게 되면 아래와 같이 모달이 나오게 된다.
  

• 하단의 댓글달기에 댓글을 입력한 후, 게시 버튼을 클릭하면 게시 버튼에 적용되어 있는 save_comment() 함수에 의해 POST 요청이 진행되고 댓글이 로컬 db에 저장되고 저장된 부분을 GET 요청을 통해 화면에 보여지게 하였다.

• js 부분

function save_comment() {
    const cm = $('#cm').val();

    $.ajax({
        type: 'POST',
        url: '/mypage/comment',
        data: {cm_give: cm},
        success: function (response) {

            window.location.reload();
        }
    });
}

// 코멘트 부분 GET 요청 작성해야함!겟 받아와서 사용자한테 또 보여줘야죠
function show_comment() {
    $.ajax({
        type: "GET",
        url: "/mypage/comment",
        data: {},
        success: function (response) {
            const comments = response['comment_info']
            console.log(comments)
            for (let i=0; i < comments.length;i++) {
                const writer = comments[i]['cm_writer']['insta_id']
                const comment = comments[i]['cm']

                const temp_html = `<div class="show_comment">
                                        <div><img style="width: 40px; border-radius: 50%"
                                                  src="https://ca.slack-edge.com/T039CS8AH0D-U03A0MUBSQH-0e4deb8911e1-512">
                                        </div>
                                        <div class="modal_pf_name">${writer}</div>
                                        <div class="modal_desc_wrtie" id="cm">${comment}</div>
                                   </div>`
                $('#comments').append(temp_html)
            }
        }
    });
}

• flask 부분

@app.route("/mypage/comment", methods=["POST"])
def comment_info():
	token_receive = request.cookies.get('mytoken')
	payload = jwt.decode(token_receive, SECRET_KEY, algorithms=['HS256'])

	cm_writer_receive = db.user_info.find_one({"insta_id": payload["id"]})
	cm_receive = request.form['cm_give']

	doc = {
		'cm_writer': cm_writer_receive['insta_id'],
		'cm': cm_receive
	}

	db.comment_info.insert_one(doc)

	return jsonify({'msg': '댓글작성 완료!'})


@app.route("/mypage/comment", methods=["GET"])
def comment_output():
	comment_info_list = list(db.comment_info.find({}, {'_id': False}))
	print(comment_info_list)
	return jsonify({'comment_info': comment_info_list})

- 해당 코드의 문제점

• 함수의 이름들을 좀 더 직관적으로 짰어야 했다. 이전에 피드백을 받았을 때 코드의 구성은 그리 길지 않아서 파악하기 좋으나, 변수의 이름이 너무 줄여져 있고 해당 함수 자체가 정보를 담는 것인데 굳이 info라는 이름을 달 필요가 없다는 내용을 주셨었다. 우선은 기능 구현이 우선이라 생각하여 팀원들과 구현할 수 있는 것을다 시도해 본 후, 함수명이라던지 다른 변수명을 정리하여 지금보다는 클린한 코드를 만들 수 있도록 할 것이다.
• 댓글을 하나 달 때는 너무 잘 달려서 행복했다. 하지만 아이디가 제대로 반영되지 않았다. 해당 부분에 대해서도 차차 수정을 할 것이며, 댓글을 여러 개 달게 되면 댓글을 입력하는 창이 바닥을 뚫고 내려간다. 이 부분에 대해서도 CSS를 수정해 보완할 것이다. (또한 두 번째 직접 작성한 댓글부터 댓글의 내용이 나오지 않는다.)
  

- 해결 과정

• 우선 댓글창이 아래로 뚫고 내려가는 것을 막기 위해 중간의 댓글이 나오는 부분의 크기를 지정하였다.

• 크기를 지정하니 댓글 입력칸은 내려가지 않았지만 댓글을 칸이 수용할 수 있는 이상의 양을 달게 되니 댓글 입력칸을 침범하기 시작하였다.

• 따라서 댓글창에 스크롤을 달고자 하였고, 구글링을 통해 특정 div에 스크롤 다는 법을 찾아 스크롤을 닫았다.

• 닫고나니 또 욕심이 생겨 인스타를 이리저리 뜯어보니 인스타의 댓글창에는 글쎄 스크롤이 없었다. 그래서 또 스크롤을 숨기는 법을 구글링하였다.

• 해당 과정을 진행하고 나니 아주 이쁜 댓글창이 생기게 되었다.
  

• 댓글 작성자가 나오지 않는 부분도 팀원들과 자세히 코드를 관찰하다보니 작성자의 이름을 받아오는 부분에서 db보다 깊은 깊이의 이름을 꺼내오라고 명령을 하고 있었다. 이를 해결하기 위해 db에 나와있는 부분까지만에 대해 명령을 내렸고 해결이 되었다. (아래의 name 부분)

success: function (response) {
            const prof_name = response['user_info_list']
            const name = prof_name[0]['name']
            const insta_id = prof_name[0]['insta_id']

• 댓글의 내용이 나오지 않는 문제점은 id값을 이상한데다 주고 있었기 때문에 일어난 것이었다. 댓글을 다는 input창에 id를 잘 부여해 놓고, javascript로 받아오는 부분에 똑같은 id 값을 주고 있었다. 따라서 javascript 쪽의 id를 삭제해 주었고, 값이 잘 나오게 되었다. (윗 사진 참고)

😭 signup js 수정

• 원래 회원가입을 하면 로그인 창으로 넘어가게 되어 있어야 하고, 회원가입에 실패하게 되면 회원가입 창에서 새로고침이 되어 새로운 값을 넣을 수 있도록 사용자를 유도해야 한다.
• 오늘 기능을 구현한 후 팀원들과 시연을 하는 과정에서 해당 페이지의 경로 오류를 찾아내게 되어 수정하게 되었다.
• 첫 번째 시도
  • 첫 번째에는 if 조건문을 활용하여 해당 문제를 해결하려 했다. 생각만해도 너무 해결방법이 명확해 신이 나서 코딩을 했다.
  • 하지만 수정 후 시연을 하는 순간, 결과가 이전과 다를바가 없었다.
  • 로그인 성공 -> 회원가입 창
    로그인 실패 -> 회원가입 창

function save_user_info() {
    const contact = $('#contact').val();
    const name = $('#name').val();
    const insta_id = $('#user_id').val();
    const password = $('#password').val();

    $.ajax({
        type: 'POST',
        url: '/signup',
        data: {contact_give: contact, name_give: name, insta_id_give: insta_id, password_give: password},
        success: function (response) {
            if (response["result"] == "success") { 
                alert(response['msg'])
                window.location.href = '/login';
            } else {
                alert(response['msg'])
                window.location.reload();
            }
        }
    });
}

• 두 번째 시도
  • 내가 생각한 부분이 너무나 당연했기 때문에 별다른 해결책을 못 내고, 튜터님께 질문을 드렸다.
  • 이곳저곳에 print()와 console.log()를 하며 오류를 추적하다가 sign-up.html을 확인하게 되었다. 해당 부분의 jasonify 부분에 response["result"] == "success"에서 사용한 result 값을 선언해주지 않았었던 것을 알게 되었다.
  • 해당 부분에 대한 선언을 마치고 나니 생각했던 데로 경로가 잘 연결되었다.
    로그인 성공 -> 로그인 창
    로그인 실패 -> 회원가입 창

return jsonify({'result': 'success', 'msg': '회원가입 완료!'})