[WIL] 1주차 → JWT, API

항해99의 첫 발을 내딛는 1주차이다 보니 긴장감, 부담감, 설렘이 컸었는 데

막상 프로젝트를 끝마치고 나니 좀 더 잘할 수 있지 않았을까라는 아쉬움과 뿌듯함이 남았습니다.

 

1주차 배운 내용들 중 중요하다고 생각되는 부분을 정리 하면서 한 주를 마무리 해볼 생각입니다.

 

1. JWT(Json Web Token)

: 웹표준으로써 두 객체 사이에서 JSON 객체를 사용하여 가볍고 자가수용적인 방식으로 정보를 안전하게 전달 해주는 방식입니다.

 

JWT 방식은 나알너노 프로젝트에서 로그인이 된 회원만 리뷰 게시물 목록을 볼 수 있도록 구성을 짜다보니

로그인을 했을 때 토큰을 생성하고, 토큰을 쿠키에 저장하여 사용자가 게시물 목록을 둘러보고, 게시물을 작성하고

자신이 작성한 글에 대해서는 수정, 삭제를 진행 할 수 있도록 하다보니 중요한 역할을 해주었습니다.

 

이번 프로젝트에서 JWT를 활용한 코드

    # 사용자가 입력한 아이디와 비밀번호를 불러온다.
    m_id_receive = request.form['m_id_give'] # 아이디
    m_pw_receive = request.form['m_pw_give'] # 비밀번호

    # 사용자가 입력한 비밀번호를 콜렉션에 있는 비밀번호와 비교하기 위해서
    # hash를 사용해서 암호화 한다.
    pw_hash = hashlib.sha256(m_pw_receive.encode('utf-8')).hexdigest()

    # member_info 콜렉션에 id와 pw가 같은 사용자가 있는 지 찾는다.
    result = db.member_info.find_one({'m_id': m_id_receive, 'm_pw': pw_hash})

=> 사용자가 입력한 아이디와 비밀번호를 받아와서 DB에 저장된 비밀번호가 hash를 사용하여 암호화한 값이기 때문에

비교를 위해서 암호화를 진행 -> DB에서 id와 pw가 동일한 회원이 있는 지 찾아서 result 변수에 담는다.

    # if문을 사용해서 result가 비어 있지 않다면
    if result is not None:
        # 토큰을 만들기 위해 id와 로그인 유지 시간을 payload에 담는다.
        payload = {
         'id': m_id_receive,
         'exp': datetime.utcnow() + timedelta(seconds=60 * 60 * 24)  # 로그인 24시간 유지
        }
        # pyjwt를 이용하여 토큰을 생성한다.
        token = jwt.encode(payload, SECRET_KEY, algorithm='HS256')
        # jwt 토큰은 놀이공원 자유이용권 같은 거

        return jsonify({'result': 'success', 'token': token})
    # 찾지 못하면
    # 토큰을 생성하지 않고 아이디/비밀번호가 일치하지 않는다는 문구를 띄운다.
    else:
        return jsonify({'result': 'fail', 'msg': '아이디/비밀번호가 일치하지 않습니다.'})

=> if문을 사용해서 result 변수의 값이 비어 있지 않다면 payload에 사용자의 아이디와 시간을 넣어서 만들어 주고

PYJWT를 사용하여서 토큰을 생성 해줍니다. 이번 프로젝트에서 SECRET_KEY는 SPARTA로 설정 하였습니다. algorithm='HS256'은 256자리로 생성한다는 뜻이고 token을 return 해주면

            // 아이디와 비밀번호가 비어 있지 않다ㅁ녀
            // ajax로 와서
            $.ajax({
                type: "POST",
                url: "/api/login",
                data: {
                    m_id_give: userId, // 아이디
                    m_pw_give: userPw // 비밀번호
                },
                // 성공 시
                success: function (response) {
                    // api에서 result를 넘겨주기 때문에
                    // result가 success이면
                    if (response['result'] == 'success') {
                        // 토큰을 cookie에 담아서 브라우저가 기억 할 수 있도록 한다.
                        $.cookie('mytoken', response['token'], {path: '/'});
                        location.href = "/review"
                        // script에서 링크를 이동 할 때는 location.href = "링크"를 사용한다.
                    } else { // result가 false이면
                        // msg를 출력한다.
                        alert(response['msg'])
                        $("#m_id").val("")
                        $("#m_pw").val("")
                    }
                }
            });

=> response에서 token 값을 불러와서 cookie에 담아 주면 유효 시간동안 해당 브라우저 안에서 토큰이 유지됩니다.

        // 로그아웃 함수
        function sign_out() {
            $.removeCookie('mytoken', {path: '/'});
            alert('로그아웃!')
            window.location.href = "/"
        }

=> 사용자가 로그아웃 버튼을 눌러서 브라우저 상에서 해당 사용자의 토큰을 해제 하고 싶을 때는 cookie를 remove(제거하다)을 사용하여 제거 해주면 됩니다.

 

2. API(Application Programming Interface)

: API는 점원과 같은 역할을 한다. 손님(프로그램)이 주문을 할 수 있게 메뉴(명령 목록)을 정리하고, 주문(명령)을 받으면 요리사(응용 프로그램)와 상호작용하여 요청된 메뉴(명령에 대한 값)를 전달 합니다.

쉽게 말해 API는 프로그램들이 서로 상호작용 하는 것을 도와주는 매개체로 볼 수 있습니다.

(역할)

- 서버와 데이터베이스에 대한 출입구 역할을 한다.

- 애플리케이션과 기기가 원활하게 통신 할 수 있도록 한다.

- 모든 접속을 표준화 한다.

 

(유형)

- private API, public API, partner API가 있다.

 

(사용 시 이점)

-API를 사용하면 Private의 경우 개발자들이 애플리케이션 코드를 작성하는 방법을 표준화함으르써, 간소화 되고 빠른 프로세스 처리를 가능하게 합니다. 또한 소프트웨어를 통합 하고자 할 때는 개발자들 간의 협업을 용이하게 만들어 줍니다. Public API와 Partner API를 사용하면 기업은 타사 데이터를 활용하여 브랜드 인지도를 높일 수 있고 고객 데이터베이스를 확장하여 전환률까지 높일 수 있다는 장점이 있습니다.

 

(출처)

http://blog.wishket.com/api%EB%9E%80-%EC%89%BD%EA%B2%8C-%EC%84%A4%EB%AA%85-%EA%B7%B8%EB%A6%B0%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8/

API란? 비개발자가 알기 쉽게 설명해드립니다! - Wishket

 

다음 번에는 마이페이지에 회원 정보 수정, 탈퇴 / 좋아요 기능 업그레이드 등등 사용자가 편리하게 사이트를 이용 할 수 있도록 다양하고 사용 편이성을 높여서 프로젝트를 만들어 보고 싶다.

 

다음 주 계획

다음주 부터는 1주동안 알고리즘 공부를 한다고 들었는 데 구체적이지는 않지만 어느정도 계획을 짜보았다.

1. 알고리즘 강의 수강

2. 리액트 200제 문제집 공부

3. 알고리즘 문제 하루에 1~2개씩 풀어보기(프로그래머스 or 리트코드)

: 일단은 프로그래머스로 레벨을 올려 가면서 알고리즘을 어떻게 푸는 지 감을 잡고

어느정도 감이 잡히면 리트코드로 실력을 쌓아갈 예정이다. 문제도 점점 늘려갈 예정이다.

 

https://programmers.co.kr/https://youtu.be/ZZhRbxfGlyU