7월 2주차 WIL - about JWT & API , 미니프로젝트

JWT, API 탐구하기

 

JWT

JSON 웹 토큰(JWT)은 선택적 서명 및 선택적 암호화를 사용하여 데이터를 만들기 위한 표준으로, 페이로드는 몇몇 클레임 표명을 처리하는 JSON을 보관하고 있다.

 

JWT를 이해하기 위해서는 일단 쿠키, 세션, 토큰에 대해 알아야 한다. 

 

1. 쿠키

서버는 쿠키를 이용해 브라우저에 데이터를 넣어 기억한다.

사이트(ex. google)에 방문하면 브라우저는 서버에 요청을 보내고 서버는 이에 응답을 한다.

이 응답에는 모든 데이터와 내가 찾던 페이지 정보가 있을텐데 그곳에는 브라우저에 저장하고자 하는 쿠키가 있을 수 있다

브라우저에 쿠키를 저장한 후, 해당 웹사이트에 방문할 때마다 브라우저는 해당 쿠키도 요청과 함께 보내게 된다

▶ 쿠키의 특징

- 쿠키는 도메인에 따라 제한이 된다 (ex. 유튜브가 준 쿠키는 유튜브에만 보내지게 됨)

- 쿠키에는 유효기간이 있다(서버가 정한 기간에 따라 유효함)

- 쿠키는 인증 뿐만 아니라 여러가지 정보를 저장할 수 있다

  ex. 웹사이트 언어설정을 바꾸면(브라우저), 서버는 쿠키를 주고, 선택한 언어를 저장한다

      그래서 다음에 해당 웹사이트에 방문할 때 쿠키는 요청과 함께 서버로 보내지고,

      서버는 쿠키가 기억해둔 언어설정의 페이지를 제공한다

 

2. 세션(Sessions) & 토큰(Tokens)

stateful 프로토콜: 서버가 클라이언트의 세션 상태 및 세션 정보를 저장하는 네트워크 프로토콜

stateless 프로토콜: 서버가 클라이언트의 세션 상태 및 세션 정보를 저장하지 않는 네트워크 프로토콜

stateless는 서버로 가는 모든 요청이 이전 리퀘스트와 독립적으로 다뤄진다는 뜻이다.

stateless 프로토콜은 요청끼리 연결이 없고 메모리가 없기 때문에, 요청이 끝나면 서버는 내가 누군지 잊어버리게 된다.

그래서 요청 할 때마다 내가 누군지 알려줘야 하는데 그 방법 중 하나가 세션(Sessions)이다!

ex. 로그인

① '쪼짱'이라는 유저명과 비번을 서버에 보냄

② 비번이 맞으면, 서버는 세션DB에 '쪼짱'이라는 유저를 생성하게 됨

③ 해당 세션에는 별도의 ID가 있는데, 해당 세션 ID는 쿠키를 통해 브라우저로 돌아오고 저장됨

    같은 웹사이트의 다른 페이지로 이동하면, 브라우저는 세션ID를 갖고 있는 쿠키를 서버에게 보냄

④ 서버는 들어오는 쿠키를 보고 세션ID와 함께 오는 쿠키를 확인함

⑤ 해당 세션ID를 가지고 세션DB를 확인함 → 해당ID는 username '쪼짱'의 것이라는 걸 알게 됨

    중요한 유저 정보는 모두 서버에 있음!!!

    결국 유저가 가지고 있는 것은 세션ID뿐...

    쿠키는 그냥 세션ID를 전달하기 위한 매개체일 뿐이기 때문에 브라우저에만 있는 쿠키를 사용할 수 없다.

⑥ 이 때, 토큰(Token)을 서버에 보내고, 서버는 세션DB에서 해당 토큰과 일치하는 유저를 찾는다.

    세션에 대해서 기억해야할 것은, 현재 로그인한 유저들의 모든 세션ID를 DB에 저장해야 한다는 것이다.

    결국, 유저가 늘어남에 따라, DB 리소스가 더 필요한 것이다

 

- JWT(토큰 형식)의 등장

JWT로 유저 인증을 처리하면, 세션DB를 갖을 필요가 없고,

서버는 유저 인증한다고 많은 일을 하지 않아도 된다.

토큰은 서버에서 받아서, 요청할 때마다 보내야 한다.

ex. 로그인 (JWT)

① username '쪼짱'이 로그인을 하기 위해, 유저명과 비밀번호를 서버에 보냄 (세션과의 공통점)

② 유저명과 비번이 맞으면, 서버는 DB에 뭔가를 생성하지 않고 유저 ID를 가져다가 사인을 함

③ 해당 '사인된 정보' 또는 토큰을 서버에 보냄

④ 서버는 토큰을 받으면, 해당 사인이 유효한지 체크함 (토큰을 조작했는지 체크)

⑤ 토큰이 유효하다면, 서버는 나를 유저로 인증!

https://velog.io/@junghyeonsu/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%90%EC%84%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8%EC%9D%84-%EC%B2%98%EB%A6%AC%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

 

 

3. 세션(Session) vs JWT 장점과 단점

▶ 세션

장점

- 서버는 로그인된 유저의 모든 정보를 저장

- 해당 정보를 이용하면, 새로운 기능들을 추가할 수 있게 됨

  ex. 특정 유저를 쫓아내고 싶을 때 그냥 세션을 삭제하면 됨 - 인스타(디바이스 확인가능), 넷플릭스(계정 공유 숫자 제한)

- 세션 DB가 있기 때문에 서버가 누가 로그인 했는지를 저장함

단점

- 모든 정보를 알고 싶으면, DB를 사야하고 유지해야 함 → 유저가 늘어나면 늘어날수록, DB도 커져야함

   Redis라는 DB를 사용 → 수행하는데 빠르고 저렴함

▶ JWT

장점

- 생성된 토큰을 추적하지 않음(서버가 아는 것은 토큰이 유효한지의 여부)

- JWT에서는 DB를 따로 살 필요 없음

- 데이터를 사인하고, 유저에게 보내고, 해당 데이터를 돌려받을 때, 유효성을 검증할 수 있음

   ex. 코로나로 인해 실행했던 QR 체크인 → JWT가 들어간 QR코드

단점

- 강제 로그아웃과 같은 기능을 할 수 없음(해당 토큰이 만료되기 전까지는 유효하기 때문)

- 서비스 규모가 커지고 유저 계정을 더 잘 관리하려면, 세션으로...

- JWT는 암호화 되지 않는다

  JWT의 경우에는 누구나 열어서 해당 컨텐츠를 볼 수 있기 때문에 비밀정보는 JWT 안에는 둬서는 안됨

 

쿠키 = 그냥 옮기는 시스템, 매개체

토큰 = 서버가 기억하는 이상하게 생긴 텍스트, ID카드 처럼 서버에게 보여줘야하는 것

유저 인증을 위해서 JWT or 세션을 사용할 수 있음

JWT = 정보를 갖고있는 토큰, DB없이 검증할 수 있음

 

---

API(application programming interface)

애플리케이션 프로그래밍 인터페이스, 응용 프로그램 프로그래밍 인터페이스

컴퓨터나 컴퓨터 프로그램 사이의 연결이다.

일종의 소프트웨어 인터페이스이며 다른 종류의 소프트웨어에 서비스를 제공한다.

Window API, Java API, HTML5 API, Android API 등이 있다.

 

오픈 API 

API 중에서 플랫폼의 기능 또는 콘텐츠를 외부에서 웹 프로토콜(HTTP)로 호출해 사용할 수 있게 개방(open)한 API를 의미한다. 네이버 개발자센터에서 제공하고 있는 지도, 검색을 비롯 기계 번역, 캡차, 단축 URL 등 대부분 API는 HTTP로 호출할 수 있는 오픈 API에 해당한다.

카카오: https://developers.kakao.com/

네이버: https://developers.naver.com/

구글: https://console.developers.google.com

페이스북: https://developers.facebook.com/

공공데이터 포털: https://www.data.go.kr/

어떤 API는 보안상 Access-Control-Allow-Origin 오류가 날 수 있음 → Front-End용 서버를 만들어 해결가능(node.js)

 

API 가이드 예시

- 카카오 책 검색 기능 구현하기

https://www.youtube.com/watch?v=QPEUU89AOg8 

요청(request)	응답(response)
1. 주소: url() 2. 전송방식: GET 3. 보낼 것     query   검색어(필수)     sort      정렬 방식(선택)     target   검색 대상(선택)     ...	1. 형식: JSON 2. 응답 의미 설명     title             도서제목     contents     도서소개     thumbnail   도서표지 썸네일 URL     ...

▶ 정보 전송 방식: GET/POST

- GET: 주소창에 모든 정보를 담아 정보를 전달하는 방식

- POST: 주소창이 아니라 내부적으로 정보를 전송하는 방식

▶ 형식: XML, JSON(요즘 多)

- JSON: JavaScript의 Object, {키:값} 쌍의 패턴으로 표현 됨

  Object → {"이름":"홍길동"}   ex.Object(객체) = { key1: value1, key2: value2 }

   Array →  [1, 2, 3, 4]

▶ 구현 방법

① HTML 파일 생성하기

② jQuery CDN 복사해서 html에 가져오기 (https://releases.jquery.com/)

③ jQuery Ajax 코드 가져오기 (https://api.jquery.com/jquery.ajax/)

    method=전송방식

    url=주소

    data=보낼 데이터 Object 형식

    .done() 전송 완료 후 실행되는 함수

④ 오픈 API 키 발급 받기

⑤ API 가이드 참고하여 코드 작성하기

   - JSON 데이터 JavaScript 접근 방법

   ex. 값을 가져오는 방법:  data명.키 => 값

   ex. 배열 값을 가져오는 방법: data명.키[0] => 배열의 첫번째 요소

   store as Global Variable: 응답 받은 JSON을 콘솔창에서 다루기 위해 따로 저장해두는 것

⑥ console창에 원하는 정보 표시하기

⑦ 내 사이트에 정보 표시하기

     구글링(jquery add html): https://api.jquery.com/append/

 

<출처>

https://ko.wikipedia.org/wiki/JSON_%EC%9B%B9_%ED%86%A0%ED%81%B0

https://www.youtube.com/watch?v=tosLBcAX1vk 

https://velog.io/@junghyeonsu/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%90%EC%84%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8%EC%9D%84-%EC%B2%98%EB%A6%AC%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

https://ko.wikipedia.org/wiki/API

https://developers.naver.com/docs/common/openapiguide/apiterms.md

---

미니프로젝트

이번주까지 첫번째 미니프로젝트를 진행하면서

사이트의 흐름을 정확하게 다 파악한 것은 아니지만, 어떻게 사이트가 구현이 되는지 조금이나마 알게 되었다.

그리고 내가 어느 부분이 부족한지 알게 되어서 공부에 대한 의지가 불타올랐다!!!

미니 프로젝트 깃허브 주소: https://github.com/pwoogi/first_project

 

어려웠던 점, 해결 방법

• 몽고디비 오류 -> certifi 패키지 설치, mongodb 주소 다시 한번 입력 확인
• ec2 연결 오류 -> 패키지 미설치
• 로그인, 회원가입시 토큰으로 클라이언트와 서버가 소통하는 방식을 처음에 이해하기 굉장히 어려웠다.
• 깃허브 ( 머지, 브랜치) : 서로 도와 강의와 구글링으로 해결
• DB로 데이터를 저장하는 과정중에 로컬ip주소 인식오류로 접근허용이 불가한 부분을 구글링을 통해 해결

 

해결 못한 점

• 로그인에 따라 각자의 화면 구현
•  CSS class들이 겹쳐서 디자인을 통일하는데 많은 어려움이 있었고 불필요한 코드에 대한 정리작업도 하지 못했던 점. .
• 몽고 db , ec2와 직접 연결 못함
• 캘린더에 운동일지 적은 날짜 표시 및 날짜 선택 후 todolist페이지로 넘어간 후에 작성날짜 표기 구현안된점.
• JWT토큰으로 http보안 연결 못한점, 개념은 이해했으나 코드로 녹이지 못함

 

아쉬운 점

• 다른 사람들의 운동일지 공유
• 달력하고 일지 연결(날짜에 맞게 일지 연결)
• 로고, 디자인(버튼, 배경 등) 업그레이드
• 서버의 개인화
• jinja2를 적극적으로 활용하지 못한 점
• 처음 역할분배시 효율적으로 분배하지 못했던 점
• 서버와 클라이언트의 이해가 아직 부족했던 점
• 초반 API설계, 기능 구현 때 구현하고 싶은 기능이 너무 많아서 개인별 담당 페이지를 정하지 않고 하루를 날림.
• 디자인적인 문제, 아직 모르는 css, js 코드들을 구글링에서 하나씩찾아서 원하는 포지션에 넣는데 구현이 생각대로 되지 못함.