배워서 남주는 개발자 :)

항해99

22.03.13 [항해99 7일차]

핏짜보이 2022. 3. 13. 22:44
반응형
  •  
    10:30 - 11:00 아침
  •  
    11:00 - 12:00 준비
  •  
    12:00 - 16:30 영화
  •  
    16:30 - 18:00 저녁
  •  
    18:00 - 21:00 휴식
  •  
    21:00 - 22:00 회고

 

 

[항해99 7일차]

 

 

오늘은 정말 푹쉬었다. 아침에 일찍 눈을 떴다가 피곤해서 조금더 잠을 잤다. 항해를 시작하고 한주가 지나갔다. 개발을 하면서 처음으로 새벽 3-4시까지 개발을 했지만, 재밌다고 느껴졌다. 내가 조금더 재미를 느끼고 흥미를 느끼려면 개발을 잘해야겠다는 생각이 들었다. 아직은 나의 부족한 점(게으름, 미루는 습관등)들이 보인다. 조금 더 부지런히 움직이고 내가 필요한 것들은 바로 바로 행동으로 옮겨서 동료들에게도 시장에서도 좋은 개발자로 인정받고 싶다. 그전에 나 스스로 그럴만한 가치가 있는 사람임을 증명하고 싶다.

 

 

🛑오류수정

  •  

→ 해결법 :

 

 

 

 

 

 

🛑새로 알게된 내용

  •  
    js ES란?

→자바스크립트는 1990년대 넷스케이프라는 회사의 Brendan Eich라는 사람에 의해 최초로 개발되었습니다. js가 잘되자, MS에서 Jscript라는 언어를 개발하여 IE(Internet Explorer)에 탑재했는데, 이 두 스크립스(JS, Jscript)가 너무 달라서,

표준이 필요

했습니다.

표준을 위해

자바스크립트

를 ECMA(European Computer Manufactures Association)라는 정보와 통신 시스템의 비영리 표준 기구에 제출하였고 1997년 6월에 채택되었습니다.

자주 보게되는 ES는 ECMA Script의 약자입니다.

JavaScript와 ECMA Script는 둘다 Script라는 키워드가 붙지만,

JavaScript는 언어

이고, ECMA Script는 규격/표준/스펙을 말합니다.

 

 

  •  
    JWT(Json Web Token)

JWT란 Json포맷을 이용하여 사용자에 대한 속성을 저장하는 Claim기반의 Web Token입니다. JWT는 토큰 자체를 정보로 사용하는 Self-Contained 방식으로 정보를 안전하게 전달합니다. 주로 회원인증이나 정보 전달에 사용되는 JWT는 아래 로직에 따라 처리 됩니다.

어플리케이션이 실행될 때, JWT를 static 변수와 로컬 스토리지에 저장하게 됩니다. static 변수에 저장되는 이유는 HTTP 통신을 할때마다 JWT를 HTTP 헤더에 담아서 보내야 하는데, 이를 로컬 스토리지에서 계속 불러오면 오버헤드가 발생하기 때문입니다.

클라이언트에서 JWT를 포함해 요청을 보내면 서버는 허가된 JWT인지 검사합니다. 또한 로그아웃을 할 경우, 로컬 스토리지에 저장된 JWT 데이터를 제거합니다.

(실제 서비스에서는 로그아웃시에 사용했던 토큰을 blackList라는 DB테이블에 넣어 해당 토큰의 접근을 막는 작업을 해줘야 합니다.)

 

JWT 구조

JWT는 Header, Payload, Signature의 3부분으로 이루어지며, Json형태인 각 부분은 Base64로 인코딩되어 표현됩니다. 또한 각각의 부분을 이어주기 위해 구분자를 사용하여 구분합니다.

(Base64는 암호화된 문자열이 아니고, 같은 문자열에 대해 항상 같은 인코딩 문자열을 반환합니다.)

1. HEADER

토큰의 헤더는 typ 과 alg 두 가지 정보로 구성됩니다. alg 는, 헤더를 암호화 하는 것이 아니고, Signature를 해싱하기 위한 알고리즘을 지정하는 것입니다.

  • typ : 토큰의 타입을 지정 ex) JWT
  • alg : 알고리즘 방식을 지정하며, 서명(Signature) 및 토큰 검증에 사용

2. PAYLOAD

토큰의 페이로드에는 토큰에서 사용할 정보들의 조각들인 클레임(Claim) 이 담겨 있습니다. 클레임은 총 3가지로 나누어지며 JSON 형태로 다수의 정보를 넣을 수 있습니다.

2-1. 등록된 클레임(Registered Claim)

등록된 클레임은 토큰 정보를 표현하기 위해 이미 정해진 종류의 데이터들로, 모두 선택적으로 작성이 가능하며, 사용할 것을 권장합니다. 또한 JWT 를 간결하게 하기 위해 key는 모두 길이 3의 String 입니다. 여기서 subject 로는 unique 한 값을 사용하는데, 사용자 이메일을 주로 사용합니다.

  • iss: 토큰 발급자(issuer)
  • sub: 토큰 제목(subject)
  • aud: 토큰 대상자(audience)
  • exp: 토큰 만료 시간(expiration), NumericDate 형식으로 되어 있어야 함 ex) 1480849147370
  • nbf: 토큰 활성 날짜(not before), 이 날이 지나기 전의 토큰은 활성화되지 않음
  • iat: 토큰 발급 시간(issued at), 토큰 발급 이후의 경과 시간을 알 수 있음
  • jti: JWT 토큰 식별자(JWT ID), 중복 방지를 위해 사용하며, 일회용 토큰(Access Token) 등에 사용

2-2. 공개 클레임(Public Claim)

공개 클레임은 사용자 정의 클레임으로, 공개용 정보를 위해 사용됩니다. 충돌 방지를 위해 URI 포맷을 사용하며, 예시는 아래와 같습니다.

{"https://yunmin.tistory.com":true}

2-3. 비공개 클레임(Private Claim)

비공개 클레임도 공개 클레임과 마찬가지로 사용자 정의 클레임입니다. 서버와 클라이언트 사이에 임의로 지정한 정보를 저장합니다. 아래 예시와 같습니다.

{"token_type":access}

3. Signature

Signature 는 토큰을 인코딩하거나 유효성 검증을 할 때 사용하는 고유한 암호화 코드입니다. 이는 위에서 만든 Header 와 Payload 의 값을 각각 Base64 로 인코딩하고, 인코딩한 값을 비밀 키를 이용해 Header 에서 정의한 알고리즘으로 해싱을 하고 이 값을 다시 Base64 로 인코딩하여 생성합니다.

JWT 토큰 예시

아래는 생성된 JWT 의 예시입니다.

생성된 토큰은 HTTP 통신을 할 때 Autorization 이라는 key의 value로 사용됩니다. 일반적으로 value에는 Bearer이 앞에 붙여 집니다.

{  "Authorization": "Bearer {생성된 토큰 값}", }

JWT의 단점 및 고려사항

  • Self-contained : 토큰 자체에 정보를 담고 있으므로 양날의 검이 될 수 있습니다.
  • Token Length ****: 토큰의 페이로드(Payload)에 3종류의 클레임을 저장하기 때문에, 정보가 많아질수록 토큰의 길이가 늘어나 네트워크에 부하를 줄 수 있습니다.
  • Payload 인코딩 : 페이로드(Payload) 자체는 암호화 된 것이 아니라, BASE64로 인코딩 된 것입니다. 중간에 Payload를 탈취하여 디코딩하면 데이터를 볼 수 있으므로, 암호화하거나 Payload에 중요 데이터를 넣지 않아야 합니다.
  • Stateless : JWT는 상태를 저장하지 않기 때문에 한번 만들어지면 제어가 불가능합니다. 즉, 토큰을 임의로 삭제하는 것이 불가능하므로 토큰 만료 시간을 꼭 넣어주어야 합니다.
  • Tore Token : 토큰은 클라이언트 측에서 관리해야 하기 때문에, 토큰을 저장해야 합니다.

Reference

 

  •  
    API

API(Application Programming Interface, 응용 프로그래밍 인터페이스)의 약자로 응용프로그램에서 사용할수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 말합니다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공합니다.(출처 : 위키백과) 이 설명은 응용 프로그램의 관점에서의 API의 의미입니다. 보통 웹에서는 데이터를 요청하고 응답하는게 대부분입니다. 그래서 위키백과에서는 웹 API를 아래와 같이 따로 정의해놓았습니다.

 

Web API는 웹 어플리케이션 개발에서 다른 서비스에 요청을 보내고 응답을 받기 위해 정의된 명세를 일컫는다.(출처 : 위키백과)

 

  •  
    자바스크립트 forEach() :
  •  
    자바스크립트 filter() :
  •  
    자바스크립트 some() :
  •  
    자바스크립트 every() :
  •  
    자바스크립트 화살표함수 :

 

728x90