항해99 6기 DAY 4 TIL _ 22.03.10

기상 08:40

공부 시작 08:50

  - Slack 재부팅,,?

  - 삭제 기능 코드 짜보기

  - css 수정

프로젝트 제출 15:00

공부 

  - 웹미니 프로젝트1 제출 마감 18:00

  - Readme 파일 작성

  - 알고리즘 찍먹해보기

  - 웹개발 종합반 플러스 빠르게 수강

  - 수정 버튼 기능 도전

 

오늘은 목표시간보다 너무 늦게 일어나서 좀 아쉬웠다. 그래도 프로젝트에 구현할 기능들은 어제 모두 완료를 한 상태여서 css를 다듬는 것과 서버에 올리는 것만 남겨두어서 다행이었다.

 

어제 구현해보고 싶었던 카드에 마우스를 갖다 댈 때마다 움직이는 기능은 hover를 적용해서 구현하였다. 같은 팀원 분께서 많이 알려주셔서 예쁜 기능들을 많이 적용할 수 있었다. 

 

문제는 서버에 올린 뒤 발생했다. 우선 소스트리에서 메인 풀을 해왔는데 무슨 오류인지 파이참에서 gitignored 파일이 먼저 보이면서 다른 templates 파일이나 static 파일들이 보이지 않았다. 그래서 결국 새 파일을 다시 만들고 패키지도 모두 다 설치한 다음 메인 폴더에서 그대로 복사를 해온 뒤 실행할 수 있었다.

 

 서버에는 모두 잘 올라가고 기능도 모두 오류 없이 작동되었는데 파비콘이 뜨질 않았다 ㅠㅠ 파비콘이 뜨지 않은 것에 대한 오류를 찾기 위해 코드 경로도 수정해보고 지웠다 다시 업로드 한 뒤 서버에 재업로드도 해보았는데 결국 해결하지 못했다. 그래서 다른 분의 서버에 올려도 같은 오류가 발생하는 지 실험해보았다.

 

 그런데 다른 분들 서버에 올리니 로그인 과정에서 문제가 발생했다. 아이디와 비밀번호를 실제 저장된 값과 다르게 입력한 뒤 로그인 버튼을 누르면 일치하지 않는다는 alert이 잘 떴는데 실제 저장된 값에 맞게 작성하면 로그인 버튼을 눌러도 작동하지 않았다는 점이다. 해결방법은 로그인 쪽 서버에서 jwt 토큰을 암호화 하는 코드에 .decode('utf-8') 이 코드를 추가하면 된다.

 

token = jwt.encode(payload, SECRET_KEY, algorithm='HS256').decode('utf-8')

왜 encode를 한 다음에 바로decode를 하는 코드가 붙어야 하는지에 대해서는 아직 의문이지만 실제 decode를 위한 함수에서는 secret key와 알고리즘이 필요한데 그것과는 다르니 실제로 decode를 하는 것은 아닌 것 같다고 생각한다.

 

무튼 그래서 결국 favicon과 모든 기능이 다 잘 작동되는 분의 서버에 올리게 되었다. 제출에 필요한 시연 영상을 찍던 중 닉네임 중복확인 기능이 작동되지 않는다는 것을 알게 되었다. 

flask에서 받아오는 값에 대한 이름이 잘못되어서 작동되지 않는 것이였다. 이렇게 다시 한 번 이름 지정의 중요성도 알게 되었다.. ㅎㅎ 사실 이름 정하는 게 쉽지가 않다.

 

모든 기능을 수정하고 다시 시연 영상을 찍은 다음 제출까지 완료하였다. 제출 페이지에는 서버 사이드 렌더링에 대한 내용과 JWT 인증방식에 대한 내용도 추가해야했다. 

 

서버 사이드 렌더링은 빈 HTML 페이지를 받아 브라우저에서 그리는 클라이언트 사이드 렌더링과 다르게 서버에서 미리 그려서 브라우저로 보내주기 때문에 페이지를 그리는 시간을 단축할 수 있다. 사용자 입장에서는 화면에 유의미한 정보가 표시되는 시간이 빨라지는 것이다.

우리가 구현한 기능에서는 메인페이지와 상세페이지에 나타낸' OO님 환영합니다. '에서 'OO'에 해당하는 부분이 이 내용이다. 

서버에서 닉네임에 해당되는 'OO' 값을 미리 지정한 다음 서버에 {{ }} 이 코드를 사용해 넣어주면 그 값이 보여진다. 정확한 원리는 모르겠지만 좀 더 연습하면 익숙해질 것 같다.

 

JWT 인증방식은 인증에 필요한 정보들을 암호화시킨 토큰을 말한다. 알고리즘과 토큰 형식을 담는 Header와 data 값을 담는 Payload, 마지막으로 Verify Signature 의 세 부분으로 구성되어 있다.
 세션/쿠키 방식은 별도의 저장소 관리가 필요하다. 그러나 JWT는 발급 후 검증만 하면 되기 때문에 추가 저장소가 필요하지 않으며 간편하다는 장점이 있다. 그래서 서버를 확장하거나 유지, 보수하는데 유리하다.

 

사전 프로젝트에서 JWT 토큰을 처음 알게 되었는데 그 때 정확히 이해하지 못했던 개념이 이번 프로젝트를 통해 이해할 수 있었고 팀원들에게도 내가 이해한 내용을 설명해보며 앞서 말한 decode 의 오류에 대한 의견도 주고 받을 수 있었다.

 

제출을 완료하고 나서는 각자 공부를 했는데, 나는 수정 버튼을 구현해보고 싶어서 도전했다.

먼저, 수정버튼과 삭제 버튼을 나란히 정렬하기 위해 아래 코드를 활용했는데 잘 되지 않아서

display: flex;
flex-direction: column;
/*flex-direction: row;*/
/* column - 세로 정렬, row - 가로로 정렬*/
justify-content: center;
align-items: center;

수정 버튼에 id 값을 준 뒤 margin-right 값을 줘서 나란히 올 수 있도록 했다.

 

그리고 다른 기수 분들의 코드(아래 코드)를 참고해 작성해보았는데 끝까지 마무리 하지 못한 채 회고 멘토링 시간을 갖게 되었다.

$("#reviews-box tr").click(function () {
        let tdArr = new Array();
        tdArr = [];
        let tr = $(this);
        let td = tr.children();
        td.each(function (i) {
            tdArr.push(td.eq(i).text());
        });

        $("#updateButton").click(function () {
                let updateReview = $("#updateReviews").val();
                let updateStarValue = $('input[name="starpoint"]:checked').val();
                console.log("1111" + updateReview + updateStarValue);

                $.ajax({
                    type: "Put",
                    url: "/review",
                    data: {
                        userid: tdArr[0],
                        review: tdArr[1],
                        starValue: tdArr[2],
                        writeTime: tdArr[3],
                        updateReview: updateReview,
                        updateStarValue: updateStarValue
                    },
                    success: function (response) {
                        alert(response['msg'])
                        window.location.reload();
                    }
                })
            }
        )
    })

    $("#reviews-box tr td button:first-child").click(function () {
        if ($(this).html() == '수정') {
            $("#updateReview").show();
            $("#makeReview").hide();
            $("html, body").animate({scrollTop: document.body.scrollHeight}, "slow");
            $(this).html('수정취소');
        } else {
            $("#updateReview").hide();
            $("#makeReview").show();
            $(this).html('수정');
        }
    })

@detail.route('/review', methods=['Put'])
def update_reviews():
    from app import GetJwtId
    TokenUserId = GetJwtId()
    userId = request.form['userid']
    Review = request.form['review']
    starValue = request.form['starValue']
    nowDatetime = request.form['writeTime']
    updateReview = request.form['updateReview']
    updateStarValue = request.form['updateStarValue']
    print("userId = " + userId + "Review = " + Review + "starValue = " + starValue + "nowDatetime = " + nowDatetime)
    if (TokenUserId == userId):
        db.review.update_one({'userId': userId, 'nowDatetime': nowDatetime, 'Review': Review, 'starValue': starValue},
                             {'$set': {'Review': updateReview, 'starValue': updateStarValue}})
        review = db.review.find({'movieTitle': movieTitle})
        print(review)
        return jsonify({'msg': '수정완료'})
    else:
        return jsonify({'msg': '본인이 작성한 리뷰만 수정가능합니다.'})

회고 멘토링 시간에는 멘토님께 칭찬도 받았다. 더 열심히 하고 싶다는 생각이 들었고 의욕도 더 커진 것 같다. 내일부터는 다른 조원 분들과 함께 하겠지만 이번 팀 프로젝트를 통해서도 참 많은 것을 배웠고 즐거운 시간이었다.

 

앞으로 배울 알고리즘도 열심히 공부해서 팀에 누가 되지 않고 많이 배우고 나도 많이 알려줄 수 있으면 좋겠다!!

 

내일 공부할 것

알고리즘

GitHub