항해 99 - 2023.01.12 TIL

오늘은 토이 프로젝트 마감일이다.

다행스럽게도 시간 내에 작업을 마치고 프로젝트를 완성할 수 있었다.

 

우리 조의 프로젝트명은 'Bookmark Saver'로 인터넷 페이지의 URL을 저장하여 한 페이지에서 확인할 수 있고, 카테고리 별로 정리할 수 있도록 만들었다.

 

내가 담당한 부분은 로그인 처리 백엔드 파트였는데, 초반에 세팅 문제로 많이 헤매게 되어 기본적인 로그인 기능 구현은 프론트엔드 파트를 담당하신 팀원 분이 대신 구현해주셨다..

 

나는 주로 로그인 부분에서 보안성을 강화하는 작업을 진행하게 되었다. 

 

 

index

바로 시작하기 버튼을 누르면 로그인 페이지로 이동한다.

 

 

로그인 페이지

 

내가 담당한 부분으로, 회원가입 시 패스워드가 암호화 처리되어 db에 들어가도록 하였다.

또한, jwt 토큰을 사용하여 id 값을 저장하고, 토큰을 Cookie에 담아 필요할 때 마다 꺼내쓰도록 했다.

 

토큰을 인코드하고 디코드할 때, 서버만 아는 KEY값을 사용하게 된다. 이 KEY값을 통해서 토큰을 암호화하고, 필요할 때 마다 잠금을 해제하여 사용하게 된다.

 

토큰은 Header, Payload, Signiture 3개의 구조로 이루어져 있는데, 나는 유저가 저장한 정보가 포함된 Payload를 주로 다뤘다.

 

로그인이 완료될 시에 프론트 단에서 JQuery로 쿠키를 생성하여 토큰을 담아주었고, 그것을 서버단에서 받아 잠금을 해제하고 유저의 id에 해당하는 값을 사용할 수 있도록 하였다.

 

로그아웃 시에는, 쿠키를 삭제하여 더 이상 유저정보를 사용할 수 없도록 조치했다.

 

로그인 후 메인화면

해당 페이지의 og태그 값을 가져다 썸네일 형식으로 가져와 사용한다.

 

원하는 url을 가져다 북마크로 만들 수 있다.

 

배포 후 에러 발생

로컬 환경에서 정상 적으로 작동 되었었는데, 배포 후 실행해보니 token을 발행하는 부분에서 에러가 발생했다.

구글링 해보니 encode 도중 에러가 발생한 듯 했다..

 

똑같은 Case가 발생한 블로그 글이 있어 참고했다.

https://kibua20.tistory.com/69

Python JSON 사용 시 TypeError: Object of type bytes is not JSON serializable

jwt를 토큰 값으로 변환하는 과정에서 타입이 잘못되어 에러가 발생한 듯 하다..

로컬 환경과 배포 후 환경에 어떤 차이가 있는지는 모르겠지만.. 아래와 같은 코드 수정을 통해서 에러를 해결했다.

token = jwt.encode(payload, SECRET_KEY, algorithm='HS256'); #기존

token = jwt.encode(payload, SECRET_KEY, algorithm='HS256').decode('utf-8'); #변경 후

 

 

 

토이 프로젝트 후기

GitHub

Pull Request를 사용하여 메인 Repo 관리자가 Merge를 진행했다.

Pull Request 사용 방법과 Fork의 개념, Merge까지 발생하는 오류에 대한 대처방법을 학습할 수 있었다.

특히 처음으로 GitHub를 통한 협업을 경험해볼 수 있어서 유의미했다.

시행착오가 굉장히 많이 있었지만 팀원들의 도움으로 잘 해결해나갈 수 있었다. 

 

 

Python

Merge 후에 Pull을 당겨오면, venv 폴더가 말썽이였다.

venv 폴더 삭제 후 프로젝트를 다시 생성하면 해결 되었는데, 이렇게 되면 해당 프로젝트의 패키지들을 다시 설치해야 해서 번거롭다. 아직까지는 구글링으로 해결법을 찾지 못한 상태이다.

 

Flask를 사용해서 작업을 진행해보았다.

클라이언트 단과 서버 단이 데이터를 주고 받는 원리에 대해서 공부할 수 있었다. 다만, 아직까지 원하는 값을 전달할 때 사용해야하는 코드나 문법에 대한 지식이 많이 부족하다는 것을 알 수 있었다.

 

처음으로 로그인에 대한 암호화, 보안 처리를 진행했는데 상당히 어려웠다. 덕분에 구글링 실력이 많이 늘어난 것 같다.

사전지식이 없는채로 구현을 해냈다는 점에서 뿌듯했고, 새로운 것을 배움에 있어 좀 더 자신감을 얻을 수 있었다.

 

 

다음 주는 새로운 조로 편성되어 2일 만에 풀스택 미니 프로젝트를 완성해내야 한다.

이번 토이 프로젝트로 얻은 것들을 가다듬어 다음 번 프로젝트에 활용할 수 있도록 연습해야겠다.