9월 다섯째 주: 항해 99 1주차
Chapter1 첫 번째 미니 프로젝트
항해 99 본과정 1주차가 끝났다. 1주일 이라는 시간은 나에겐 짧고도 긴 시간이었다.
하루 평균 16시간을 컴퓨터 앞에 앉아서 공부하다 보니 심적으로 힘들었지만 지나고 보니 참으로 유익한 1주일이었다.
1주일 동안 진행한 미니 프로젝트는 자신이 좋아하는 유튜브 영상을 코멘트와 함께 올릴 수 있는 웹사이트였다. 이 웹사이트에는 크게 3가지 기능을 넣으려고 했었다.
CRUD 기능
웹사이트의 가장 기본적인 기능이라고 한다면 CRUD이다.
CRUD는 Create, Read, Update, Delete 이렇게 네가지 기능을 줄인 말이다.
이 기능은 전에도 만들어 본 적이 있었기 때문에 어려움 없이 만들 수 있을 거라고 생각했었다.
예상대로 기능 구현 자체에는 큰 어려움이 없었는데 문제는 불러온 영상의 재생 부분이었다.
처음에는 영상을 재생시켜주는 video.js 라는 기능을 사용했는데 무슨 문제 때문인지 영상자체가 활성화 되지 않았던 것이다. 해결방법을 찾던 와중에 YouTube Player API 라는 것을 발견했다.
문서에는<<IFrame Player API를 통해 웹사이트에 YouTube 동영상 플레이어를 퍼가고 JavaScript를 사용하여 플레이어를 제어할 수 있습니다>> 라고 적혀있었다.
우리는 유튜브 영상만 올릴 것이었기 때문에 사용하기에 적합한 API라고 생각하여 무사히 문제를 해결할 수 있었다.
회원가입과 로그인 기능
이번 첫 주차에는 회원가입과 로그인에 대한 강의가 제공되었었다. 그래서 만들 사이트에 이 기능들을 사용해 보기로 결정하고 도전해 보았다.
회원가입 기능은 생각보다 간단했다.
클라이언트에서 아이디와 패스워드 정보를 받아온 다음에 서버쪽에서 데이터 베이스에 그 정보를 저장하는 방법이었다. 단, 비밀번호를 받아온 정보 그대로 저장하게 되면 보안상의 문제가 생길 수 있기에
해쉬 함수를 통해 비밀번호를 암호화 하고 암호화 된 비밀번호를 데이터 베이스에 저장하는 과정이 추가된다. 정말 간단하게도 회원가입 기능은 이게 다였다.
로그인 기능도 회원가입과 비슷했다.
클라이언트에서 로그인 정보를 받아오고 서버에 저장된 데이터와 비교하는 것이다.
이 다음 과정에서 몰랐던 내용을 배우게 되었는데 JWT 토큰이다.
로그인 정보와 서버 데이터가 일치하면 JWT 토큰이라는 것을 발급해 주는데 이것을 지정해준 시간동안 웹브라우저에 저장하여 로그인이 필요한 서비스에 접근할 때마다 재차 로그인을 할 필요 없이 통과시켜 주는 것이다. 강사님은 이것을 놀이공원 자유 입장권에 비유해 주셨다.
이 토큰을 가지고 있으면 통과, 가지고 있지 않다면 다시 로그인을 해야 한다는 것이다.
자신이 올린 포스팅만 불러오는 기능
세 번째 기능으로 마이페이지로 이동을 하면 자신이 올린 포스팅들만 불러오는 기능을 구현하려고 했었다.
JWT 토큰이라는 개념을 배웠기 때문에 쉽게 구현할 수 있을거라고 생각했는데 이 기능을 구현하는 데에는 실패했다.
JWT 토큰에는 payload와 시크릿키가 들어있다..
그 중에서도 payload 속에는 "id" 정보, 토큰의 유효기간을 설정해주는 "exp" 라는 정보 이렇게 두 가지가 들어있으므로 payload 속의 "id" 정보와 유튜브영상을 등록할 당시의 "id" 정보가 같은 영상들만 띄우려고 했었다. 하지만 payload의 "id" 정보가 undifined로 떠서 비교가 안되는 것이다.
이 부분은 좀 더 머리를 굴려서 해결해 봐야겠다.
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
드디어 해결했다...
꼭 구현해 보고 싶어서 pycharm에 들어가 코드들을 처음부터 차근차근 다시 살펴보던 와중에 GET에 payload 정보를 안넣은 것을 발견했다. 정보를 안넣었으니 당연히 undifined가 떴던 것이다..ㅠㅠ
내가 지금까지 고생한 건 무엇인가 허무하면서도 많은 것을 배운 느낌이다.
1주차에서 느낀점
우선은 기능적인 부분들 보다도 프론트엔드와 백엔드와의 원활한 소통의 중요성을 느꼈다.
서로 저장되는 데이터의 이름은 무엇으로 할 것인지 어떤 이름으로 데이터를 줄 것인지를 정하지 않고 하다보니 나중에 수정하는 시간이 더 오래 걸린 것 같았다. 서로 변수들의 이름이 틀리다 보니 오류가 발생해도 빠르게 고치지 못하고 헤메는 부분도 발생했었다. 프로젝트 막바지에 Restful API 라는 것을 알게 되어서 열심히 공부해 봐야겠다. 깃 허브 사용법 역시 마찬가지....
첫 번째 프로젝트이다 보니 미숙한 부분들이 많았지만 팀의 분위기는 무척이나 좋았다. 서로 의견차이가 여러 번 있었는데도 고운 말들이 오가고 서로 으쌰으쌰 하는 분위기가 1주차를 무사히 마친 이유가 아닐까 싶다.
역시 협업을 할때에는 상대방에 대한 배려와 태도가 가장 중요한 것 아닐까? 라는 생각을 하게 되었다.
