항해99 사전 프로젝트를 제외하고
정식적으로 시작한 후 첫 프로젝트를 하게 되었다.
🔥 프로젝트 주제 : 가까운 화장실 찾기
처음 우리 조가 선정한 프로젝트 주제는 실시간 위치를 받아서, 네이버지도 API를 사용해 가까운 화장실을 마커로 띄워주고, 해당 마커를 누르면 해당 화장실의 장소명, 주소, 리뷰들을 볼 수 있도록 하고 JWT토큰방식을 사용해서 로그인/회원가입 페이지도 구현하도록 만들기로 기획 했다.
그렇게 기획을하고 강의를 보면서 JWT토큰방식과, 네이버지도API를 어떻게 사용하는지에 대해서 배웠다.
🔥 JWT 란 ?
-
JSON Web Token의 약자로 전자 서명 된 URL-safe (URL로 이용할 수있는 문자 만 구성된)의 JSON이다. 전자 서명은 JSON 의 변조를 체크 할 수 있게 되어있다.
-
속성 정보 (Claim)를 JSON 데이터 구조로 표현한 토큰으로 RFC7519 표준이다.
-
서버와 클라이언트 간 정보를 주고 받을 때 Http 리퀘스트 헤더에 JSON 토큰을 넣은 후 서버는 별도의 인증 과정없이 헤더에 포함되어 있는 JWT 정보를 통해 인증한다.
이때 사용되는 JSON 데이터는 URL-Safe 하도록 URL에 포함할 수 있는 문자만으로 만든다. -
HMAC 알고리즘을 사용하여 비밀키 또는 RSA를 이용한 Public Key/ Private Key 쌍으로 서명할 수 있다.
JWT를 사용함에 있어서 이점은, 사용자 인증에 필요한 모든 정보는 토큰 자체에 포함하기 때문에 별도의 인증 저장소가 필요 없다는 것이고, 쿠키를 전달하지 않아도 되므로 쿠키를 사용함으로써 발생하는 취약점이 사라진다.
단점으로는, 토큰은 클라이언트에 저장되어 데이터베이스에서 사용자 정보를 조작하더라도 토큰에 직접 적용할 수 없다는 점이 있고, 비상태 애플리케이션에서 토큰은 거의 모든 요청에 대해 전송되므로 데이터 트래픽 크기에 영향을 미칠 수 있다는 점이다.
보통 JWT는 로그인과 정보교류 시 사용된다.
🔥 네이버지도 API 사용하기
먼저 네이버지도 API를 사용하려면
에 들어가서 이용신청에 가서, Application 등록에서 등록을 하면 시크릿키를 받을 수 있는데, 이 시크릿키를 저장해놓고 필요한곳에 인증하면 된다.
키를 받아왔으면 작성할 html 파일에
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=받아온아이디"></script>위와같이 넣어주면 이제 사용할 준비는 된 것이다.
나머지 기능들은 이제 네이버에 개발자플랫폼에서 지도API 사용법에 대해서 찾아보면 여러가지 기능들이 나와있는데, 거기에 나와있는데로 사용을 하면 된다.
위와 같은 기능들을 활용해서, 이번 프로젝트를 하게되었는데 나는 띄워진 마커를 클릭했을 때, 해당 마커의 화장실 장소명과 주소가 나오게되는데 , 리뷰작성 버튼을 누르면 해당 마커의 화장실 장소명,주소를 가져온 div를 새로 띄워서 거기에 넣어주고, 데이터베이스에 있는 해당 화장실에 대한 리뷰들을 불러와주고, 또 그 공간에서 리뷰등록을 만드는 기능들을 구현했다.
솔직하게 강의도 보면서, 프로젝트를 3일안에 구현해내는게 정말 쉽지가 않았다.
그래서 프로젝트 기간동안 아침9시부터 새벽3시까지 밥먹는시간을 제외하고는 프로젝트에 몰두했던 것 같다.
기간도 타이트하고 강의도 봐야 할 수있는 기능들을 하기로 했기때문에 원래 목표했던 기능들을 다 구현하지는 못했지만, 그래도 3일이라는 기간동안 프로젝트에만 몰두하면서, 엄청난 경험치를 얻은것 같아서 프로젝트가 끝나고 난 후 보람을 많이 느끼게 된 것 같다.
프로젝트가 끝나고나니 마음이 좀 편해져서 이번 주말에는 조금 늘어져있던것 같은데, 다시 집중해서 다가오는 2주차도 몰입해서 실력향상을 거뒀으면 좋겠는 바람이다.
