2023.03.31 TIL - 풀스택 미니프로젝트(books-books)

[Problem]

프로젝트 마지막 날이다. 마지막 제출 전까지 완료하고 싶었지만 아쉽게도 완전하게 만들지는 못했다. 마지막까지 해결하지 못한 기능은 Logout기능이다. 웹을 검색을 통해 해결해보려 했지만 아쉽게도 완전하게 해결하지 못했다.

 

[Try]

처음에 시도한 방법은 웹종합에서 배웠던 방법이다. 단순히 지금까지 사용하던 POST-GET 방식으로 값을 mongoDB에 넣고 받아온다 생각했지만 jwt 기능을 찾아보고 잘못된 생각을 했다는 것을 깨달았다. jwt 기능은 사용자가 로그인을 하면 회원가입을 하면서 DB에 남아있던 사용자를 확인하고 정보가 있다면 서버에서 토큰을 발급을 한다. 서버에서 넘겨준 토큰이 사용자로 가게되면 이 토큰이 계속해서 웹에 남아있다면 사용자가 페이지를 이용할 수 있는 것이다. 결과적으로 내가 해야할 부분은 session에 남아있는 토큰을 지워야 했다.

function login() {
            $.ajax({
                type: "POST",
                url: "/api/login",
                data: {
                    id_give: $('#input-id').val(),
                    pw_give: $('#input-password').val(),
                },
                success: function (response) {
                    console.log(response)
                    if (response['result'] == 'success') {
                        // 로그인에 성공하면 token을 쿠키에 저장!!!!
                        $.cookie('mytoken', response['token']);
                        alert('로그인 완료!')
                        window.location.href = '/main'
                    } else {
                        alert(response['msg'])
                    }
                }
            })
        }

팀원이 구현한 로그인 기능이다. 로그인 기능을 조금만 변경시키면 해결할 수 있을거라 생각해서 비슷하게 시도했다.

function logout() {
      // 쿠키와 로컬스토리지에서 mytoken 제거
      $.removeCookie('mytoken', { path: '/' })

      서버 측에서 세션 정보 삭제
      fetch('/api/logout', { method: 'POST' }).then((res) => res.json()).then((data) => {
      if (data['result'] == 'success') {
      window.location.reload();
      } else {
         alert(data['msg']);
       }
      })
    }

이렇게 시도했다. 결과는 main페이지에서 나오지 못했다. 결국 해결하지 못하고 장희성 매니저님의 순회때 도움을 받았다.

 

[Solution]

jwt 기능을 일부는 이해했지만 완전한 이해가 없었기에 어디에 토큰이 남는지 이해를 못했다. 웹페이지에 검사 기능을 활용해서 jwt 토큰이 남아있는 부분을 확인할 수 있었고 웹에 검색을 통해 지울 수 있는 방법을 배우게 되었다.

const deleteCookie = function (name) {
      document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:10 GMT;';
    }

function logout() {
      // 쿠키와 로컬스토리지에서 mytoken 제거
      deleteCookie('mytoken')
      window.location.href = '/login'
    }

위에 코드를 이용해 지울 수 있게 되었다.

 

[Conclusion]

다시 한번 웹 페이지에서 개발자들이 사용하는 검사 기능이 얼마나 중요한지 깨닫는 시간이 되었다. 모르겠고 이해하기 어렵다면 console.log, alert, 검사기능 등을 통해 확인하는 습관을 들여야겠다. 이번 troubleShooting에서도 토큰이 어디에 기록에 남았는지만 알았다면 해결하려는 것에 근접하게 생각할 수 있지 않았을까 생각한다. 

부족함이 많고 모르는게 많은 나와 같이 풀스택 프로젝트를 진행한 파트 1기 김보슬님, 심지현님, 윤진영님에게 감사함을 느끼고 있다.