본문 바로가기

프론트엔드8

(프론트엔드) Refresh토큰과 Access토큰 인증처리 https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-Access-Token-Refresh-Token-%EC%9B%90%EB%A6%AC-feat-JWT 🌐 Access Token & Refresh Token 원리 Access Token & Refresh Token 이번 포스팅에서는 기본 JWT 방식의 인증(보안) 강화 방식인 Access Token & Refresh Token 인증 방식에 대해 알아보겠다. 먼저 JWT(Json Web Token) 에 대해 잘 모르는 독자들은 다음 포스 inpa.tistory.com Refresh Token을 왜쓰는데? - Access Token으로만 인증처리를 진행할 시 토큰의 유효기간을 줄이기가 어렵고, 해당 토큰을 탈취당하면 긴 유효기.. 2023. 6. 11.
(프론트엔드)yarn berry yarn berry란? 기존의 npm과 yarn v1에서 비효율적이었던 패키지 관련 약점들을 보완하고 PnP기반을 통해 대폭적으로 효율성을 상승시킨 새로운 패키지 도구이다. 왜 적용할 생각 했는지? 새로운 next, nest 프로젝트에서 배포 CI를 진행할 때 install시 너무 많은 시간을 잡아 먹었기 때문에 그 시간을 줄여보고자 도입하게 되었다. 기존 node_modules 문제점 node_moduels의 경우 각각의 패키지들이 또다시 node_moduels를 가지고 있기 때문에 파일의 크기 자체도 커지지만 해당 node_moduels에서 패키지를 찾기위해 순회할때 디렉토리를 차례로 돌며 해당 패키지의 node_modules를 또 탐색하는 식으로 깊이탐색을 한다. 그래서 파일을 참조하기 위한 시간도.. 2022. 10. 7.
OpenApi-Generator OpenApi-Generator란? yaml, json로된 api명세파일을 자동으로 코드로 자동 변환시켜주는 라이브러리 사용 이유 현재 프론트엔드 작업 시 api를 사용하기 위해 만들어진 Swagger UI를 보고 타입과 api를 직접 타이핑 해서 적용. 직접 입력하기 때문에 실수 가능성과 번거로움이 생기고, 만약 api 수정 시 변경 내용을 따라가서 수정해야함. 만약 OpenApi-Generator 사용시 이러한 번거로움과 실수를 방지하고 개발시간을 단축시켜 줄 수 있음. 사용 방법 1. install - 해당 프로젝트 root에서 yarn add @openapitools/openapi-generator-cli --dev 2. OpenApi 명세가 정의된 Json / Yaml 파일 준비 - Swagge.. 2022. 8. 7.
SSR(Server Side Rendering) MPA vs SPA MPA는 Multiple Page Application의 약자로써 이미 만들어진 정적 페이지를 요청에 따라 반환하는 방식이고, SPA는 Single Page Application의 약자로써 하나의 페이지에서 시작하여 동적으로 페이지를 만드는 방식이다. SSR vs CSR SSR은 Server Side Rendering의 약자로써 서버에서 코드를 실행해 렌더링 하는 것을 말한다. CSR은 Client Side Rendering의 약자로써 클라이언트단(브라우저)에서 코드를 실행해 렌더링 하는것을 말한다. 보통 MPA에선 SSR을 사용해 서버에서 렌더링 시켜서 브라우저로 페이지들을 넘겨주고, SPA에선 CSR을 사용해 서버에선 첫 빈 페이지와 모든 페이지와 로직이 들어있는 자바스크립트 번들.. 2021. 9. 26.