앞으로의 목표

한 주 동안 프로젝트를 진행하면서 공부했던 부분을 정리하고자 한다.

앞으로 매일 TIL을 쓸 수 있도록 시간 분배도 철저히 해야 할 것..

1. JWT

• 인증에 필요한 정보들을 Token에 담아 암호화시켜 사용하는 방식

• sha256 암호화 방식으로 암호화한 데이터를 서버에 저장하고 그것을 디코딩해서 사용자 인증을 마침

• 공부하다 쿠키와 세션의 차이가 무엇인지 궁금하여 조사하다 알아낸 사이트
  https://dev-coco.tistory.com/61

  • 쿠키와 세션의 차이점은 크게 상태 정보의 저장 위치, 쿠키는 '클라이언트'에 저장하고, 세션은 '서버'에 저장

• 아래는 실제 프로젝트를 진행하면서 사용한 코드들, 프로젝트에 대한 상세 설명은 아래 Github 주소를 참고 - [짤방못잃어 프로젝트]
  

• 로그인

  • hashlib 사용 비밀번호 암호화

  • 토큰 생성하여 front로 전달

    @app.route('/login', methods=["POST"])
    def sign_in():
        id_receive = request.form['id_give']
        pw_receive = request.form['pw_give']
        pw_hash = hashlib.sha256(pw_receive.encode('utf-8')).hexdigest()  # 패스워드 암호화
        result = db.users.find_one({'id': id_receive, 'pw': pw_hash})  # 동일한 유저가 있는지 확인
    
        # 동일한 유저가 있으면, 암호해독, 결과 -> 성공 및 환영인사.
        if result is not None:
            payload = {
                'id': id_receive,
                'exp': datetime.utcnow() + timedelta(seconds=60 * 60 * 24)
            }
            token = jwt.encode(payload, SECRET_KEY, algorithm='HS256')
            return jsonify({'result': 'success', 'token': token, 'msg': '환영합니다.'})
        # 동일한 유저가 없으면, 결과 -> 실패, 다시 로그인.
        else:
            return jsonify({'result': 'fail', 'msg': '아이디/패스워드가 일치하지 않습니다.'})

  • server에서 전달 받은 토큰을 사용하여 쿠키 생성

    // ajax 콜 app.py로 전송 및 로그인 진행
            $.ajax({
                type: "POST",
                url: "/login",
                data: {
                    id_give: id,
                    pw_give: pw
                },
                success: function (response) {
                    if (response['result'] == 'success') {
                        $.cookie('mytoken', response['token'], {path: '/'});
                        alert(response['msg'])
                        window.location.replace("/")
                    } else {
                        alert(response['msg'])
                    }
                }
            })

  • 페이지 이동시 서버단에서 쿠키값을 받아 로그인 유무 판별

    token_receive = request.cookies.get('mytoken')  # 쿠키값 받아 오기
    # 쿠키값(로그인 판별) 여부에 따른 index.html 전송 자료 결정
        if token_receive is not None:
            payload = jwt.decode(token_receive, SECRET_KEY, algorithms=['HS256'])
            user_info = db.users.find_one({"id": payload["id"]})    # DB users collection 에서 user 데이터 불러 오기
            login_status = 1  # 로그인 판벌(bool 사용 해봐도 될듯)
            return render_template('index.html', posts=posts, user_info=user_info, login_status=login_status)
        else:
            login_status = 0
            return render_template('index.html', posts=posts, login_status=login_status)

• jinja2 사용 자료 전달

  • DB에서 받은 데이터 ‘posts’ 리스트에 담아 html에 전달

        post_list = list(db.posts.find({}, {'_id': False}).sort('post_num', -1))  # DB posts collection 에서 짤 데이터 불러 오기
        posts = list()  # client 전달용 list 변수 선언
        # posts 재정렬 (기존 리스트를 4개의 묶음 리스트로 변경)
        temp_posts = list()
        amount = len(post_list)
        for i in range(amount):
            temp_posts.append(post_list[i])
            if len(temp_posts) == (amount // 4):
                posts.append(temp_posts)
                temp_posts = list()
        if temp_posts:
                 posts.append(temp_posts)
    
    						# =======  중략 =======
    
            return render_template('index.html', posts=posts, user_info=user_info, login_status=login_status)

  • 서버에서 받아온 posts 데이터를 jinja2 템플릿을 이용 html 출력

    <div class="grid">
            {% for i in range(4) %}
                <div class="line">
                    {% for post in posts[i] %}
                        <div class="imgwrapper" onclick="">
                            <img class="zzal" src="{{ post.url }}">
                            <div class="tagposition">
                                <div class="imgtagbox" id="">
                                    {% for tag in post.tag %}
                                        <button class="imgtag" id="">{{ tag }}</button>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% endfor %}
        </div>

2. API

• Application Programming Interface -> 응용 프로그램 프로그래밍 인터페이스

• 클라이언트와 서버가 개발을 하기 위해 정해놓은 서로의 규약

• 라이브러리와 API의 차이에 대해 혼동한 경우가 있는데 다음은 나무 위키에서 이 차이를 발췌해옴

  API가 단순히 컴퓨터공학 분야의 추상적인 개념이라면 라이브러리는 이러한 API들을 기반으로 개발자에게 기능을 제공할 수 있도록 실제 구현된 구현체라고 볼 수 있다.

• Open API

  통상적인 API는 다른 사람들이 사용할 수 없도록 함
  하지만, Open API는 말 그대로 공용, 누구나 접근할 수 있도록 해놓은 것
  Open API 위키백과 - https://ko.wikipedia.org/wiki/%EC%98%A4%ED%94%88_API