[TIL]이번 주 학습 내용들

- 업무 프로젝트를 진행하며 숙지할 필요가 있는 부분을 간단하게 작성한다.

---

생각해보니 TIL은 Today I Learned인데, Today는 아니다..그래도 한 주간 배운 것을 정리하니 TIL로 해야지.

 

VUE Mixins

 

Vue 컴포넌트에서 재사용 가능한 기능을 배포하는 유연한 방법이다. 공통 함수같은 것을 만들어서 여러 컴포넌트에서 사용하거나 그런 경우 사용한다.

 

JWT

회사에서 만들어진 것을 쓰다보니 궁금증이 생겨서 공부해봤다. 학습 프로젝트로 한 번 해봐야겠다.

 

기존 세션 방식

 로그인 시 인증/인가 방식에는 기존 세션 저장 방식이 있다. 클라이언트에서 로그인 요청시 서버에서 세션 생성을 한다. 그리고 그 세션id를 쿠키에 담아 클라이언트에 전달한다. 이후 Request를 보낼 때 쿠키에 담은 세션id를 같이 보내어, 서버의 세션id와 비교한다. 비교하여 같다면 요청을 받아들인다.

• 서버기반 인증 시스템은 세션에 유저정보를 메모리나 DB 등에 기억하고 있어야 한다.
• 여러 서버 사용시, A서버에서 세션을 생성했다면 추후 Request는 A서버에만 보내도록 설정해야 한다. 다른 서버로 보낼 경우 세션 정보가 없기 때문에 요청이 받아들여지지 않을 것이다.

 

JWT 토큰 방식 

 JWT는 Json Web Token의 약자이다. 로그인 시 토큰을 생성하여 클라리언트에 response를 보낸다. 토큰 생성은 서버측에서 갖고 있는 Secret Key를 이용하여 Signature를 만들어 보낸다. 추후 Request는 토큰 정보와 함께 요청하고 서버단에서 토큰 검증을 하여 응답한다. 토큰 검증은 보내진 Signature를 Secret Key로 풀어서 확인한다.

• 세션에 유저정보를 담아두지 않아도 된다.(Stateless)
• JWT는 크게 3가지로 구성된다.
  • 1)Header : 토큰 타입, 해시 암호화 알고리즘으로 구성
  • 2)Payload : 토큰에 담을 정보가 들어있다. 담은 정보의 한 '조각'을 클레임이라고 한다. name/value쌍으로 되어 있으며 클레임 종류는 등록된 클레임, 공개클레임, 비공개클레임이 있다.
  • 3)Signature : JWT 백엔드에서 발행한다. 각 요청시 서명이 확인된다.

 

BLOB과 파일 다운로드

정적 파일을 찾아 다운로드 구현할 필요가 생겼다. 백엔드에서 넘겨 받은 BLOB파일을 다운로드할 수 있도록 js를 구현해야 했다.

• Binary Large Object의 약자로, js에서 이미지, 사운드, 비디오 등의 멀티미디어를 다룰 때 사용하는 객체이다. 
• new Blob()으로 블랍 객체 생성 후, createObjectURL()을 통해 다운로드 받을 수 있는 URL화를 한다.

//Blob Object는 ArrayBuffer, Blob 타입 등이 들어감
let blob = new Blob(['Blob Object'], {type : 'content-type'})

//blob객체를 URL화 한다.
const url = window.URL.createObjectURL(blob)

//a태그를 만들어 href 속성에 연결한 후, 다운로드한다.
const a = document.createElement('a')
a.href = url
a.click()

//사용 후 js엔진에서 Garbage Collection 처리를 위해 revokeObjectURL() 사용하여 브라우저가 이 객체를 더 메모리에 안 들고 있도록 제거
window.URL.revokeObjectURL(url)

 

@스프링 컨트롤러에서 @PathVariable 확장자 인식 관련

프론트단에서 pathVariable로 파일명(filename.xxx...)에서 닷(.) 이후는 확장자로 인식하여 뒷부분을 잘라서 값을 받는다. @PathVariable을 정규식으로 써야 한다.

 

• before : @GetMapping("test/{fileName})
• after : @GetMapping("test/{fileName:.+})

 

 

 

출처 :

https://fierycoding.tistory.com/69

https://tech.toktokhan.dev/2021/04/30/JWT/ 

https://do-study.tistory.com/26

https://velog.io/@unani92/JS-%EC%89%BD%EA%B3%A0-%EA%B0%84%EB%8B%A8%ED%95%9C-%ED%8C%8C%EC%9D%BC-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0