로그인을 하기 위해 경험한 에러들

api/login에 관련한 500 error

PSST http://localhost:5000/api/login 500 (INTERNAL SERVER ERROR)
send @ jquery.min.js:2
ajax @ jquery.min.js:2
login @ login?msg=%EB%A1%9C%EA%B7중략....:32
onclick @ login?msg=%EB%A1%9C%EA+중략.....:84

• 500 에러는 분류되지 못한 오류 신호로 자세한 정보를 담고 있지는 않기 때문에 정확한 원인 파악을 위해서는 정보가 부족하다. 더 자세한 정보를 위의 코드 만으로는 확인하기 어렵기 때문에 500에러는 특히 서버의 로그 정보를 확인하여 원인을 파악하는 것이 나을 수 있다고 한다.
• 블로그에서 이런 저런 내용들을 참고하여 만든 프로젝트이기 때문에 이런 문제가 생길 수 밖에 없었다. 일단 가장 확률이 높은 것은 ajax의 url문제가 가장 확률이 높다는 것을 확인하고 아래의 코드들을 확인했다.

문제의 32 줄

function login() {
                $.ajax({
                    type: "POST",
                    url: "/api/login",
                    data: {id_give: $('#userid').val(), pw_give: $('#userpw').val()},
                    success: function (response) {
                        if (response['result'] == 'success') {
                            // 로그인이 정상적으로 되면, 토큰을 받아옵니다.
                            // 이 토큰을 mytoken이라는 키 값으로 쿠키에 저장합니다.
                            $.cookie('mytoken', response['token']);

                            alert('로그인 완료!')
                            window.location.href = '/index'
                        } else {
                            // 로그인이 안되면 에러메시지를 띄웁니다.
                            alert(response['msg'])
                        }
                    }
                })
            }

82줄에 있는 버튼

<button class="button is-primary" onclick="login()">로그인</button>

해결 :에 해당하는 ajax에 url 주소가 문제였다. "/api/login"으로 수정하면서 다음 단계로 넘어갈 수 있게 되었다. url 주소를 단순히 /login으로 생각했던 것이 문제였다.

내가 경험한 에러2

Method Not Allowed
The method is not allowed for the requested URL.

• 이 역시 url 문제였다. 잘못된 url을 적어주는 바람에 정보의 흐름이 중간에 끊겨버려서 더 이상 진행하지 못한 부분을 수정하고 다음 단계로 넘어갈 수 있었다.

내가 경험한 에러3

AttributeError: 'str' object has no attribute 'decode'

• 에러가 끝나면 다음 에러가 나온다. 이번에도 역시 내가 전혀 공부하지 않은 부분에 대한 문제였다. 예측하기로는 암호화된 코드를 받아오는 부분에서 문제가 생긴것 같았다. 구글링을 해보니 다음과 같은 힌트를 얻을 수 있었다. 참고링크

AttributeError: 'str' object has no attribute 'decode' jwt decode Code Example (codegrepper.com)이 웹사이트에 따르면 ('utf-8')이 이미 decode가 되어서 .decode('utf-8')이 필요가 없기 때문에 저 부분을 삭제하면 된다.

• .decode('utf-8')를

• 시도 : token = jwt.encode(payload, SECRET_KEY, algorithm='HS256').decode('utf-8')에서 .decode('utf-8')를 지우고나니 문제가 해결된...것은 아니고 다음 에러를 만날 수 있었다.

내가 경험한 에러4

NameError: name 'mytoken' is not defined

변수 이름 에러였다. 각각의 파일에서 'token'과 'mytoken'으로 주고 받은 것들을 찾아가면서 잘못한 부분을 찾았다. 수 많은 에러들을 경험하면서 이것저것 고치다가 잘못 적은 부분이었는데

return jsonify({'result': 'success', 'token': token})

mytoken으로 되어있던 부분을 token으로 고치고 아무 기대없이 다음 에러를 기다리고 있었다. 그 순간 갑자기 로그인이 됐다.

아무 의미없이 지었던 닉네님 12와 누군가 만들어놓은 저 문구가 이렇게 반가울 줄이야... 내가 짠 코드는 아니지만 수없이 디버그를 고쳐가면서 코드와 그래도 익숙해지는 시간이었던것 같다.

로그아웃 기능 구현하며 에러 만나기

<script>
      // 로그아웃은 내가 가지고 있는 토큰만 쿠키에서 없애면 됩니다.
      function logout(){
        $.removeCookie('mytoken');
        alert('로그아웃!')
        window.location.href='/login'
      }

    </script>

라고 했을 때 아래와 같은 에러가 떴다.

(index):64 Uncaught TypeError: $.removeCookie is not a function
    at logout ((index):64:11)
    at HTMLButtonElement.onclick ((index):164:70)

• 제이쿼리 함수가 먹히지 않는 현상인것 같았다.
  원인은 여러가지가 있었다.

1. 태그 내 jquery script 선언이 가장 위에 위치하지 않은 경우.
2.jquery 중복 설치/선언
3. jquery 미설치.
4. 제이쿼리 버전 문제로 인한 충돌
5. path 설정

나의 시도 1

removeCookie('토큰 키'. {path: '/'})

• path를 잘못 설정했나 싶어서 더 구체적으로도 적어봤지만 고쳐지는 부분이 없었다. 이부분은 좀 더 두고보고 다른 시도를 해보기로 했다.

나의 시도 2 중복설치 되었나 확인해보기

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>

• 로그아웃을 구현해보기 전에 나는 다른 팀원에서 게시판 구현한 것을 받아와서 합치는 작업을 했었는데 이때 제이쿼리를 중복으로 입력해 놓은 것을 발견했다. 이 부분을 지우자 누군가 장난친것처럼 놀랍게 로그아웃이 되면서 로그인 페이지로 넘어갔다.

수 많은 에러를 경험하며 느낀점

• 에러는 끝이없다. 하지만 포기하면 아무것도 얻지 못했을 것이다. 누군가에게는 정말 단순한 작업이겠지만 배우지도 않은 jwt토큰 방식을 적용하기 위해 블로그를 서칭하고 다른 사람의 코드를 가져와서 내가 원하는 작업물을 만들기 위해 수 많은 에러를 넘는 경험을 해본 하루였다.