React : Refresh Token &Access Token& Cookie(브라우저 저장소)
·
React
1. Access Token Access Token은 말 그대로 인증, 인가 서비스를 구현하기 위한 것이다. 사용자가 로그인을 하면 백엔드 서버에서 토큰을 만들어 헤더에 담아 클라이언트에 전송한다. 클라이언트는 서버에 요청(axios, fetch)을 할 때 서버로부터 받았던 토큰을 함께 전송한다. 서버는 요청과 토큰을 함께 받고 서버에서 토큰을 디코딩하여 로그인한 사용자를 확인한다. Access Token은 한 번 발급되면 강제로 만료 시킬 수 없다는 단점이 있다. 따라서 만료 시칸이 짧은 Refresh Token을 나눠서 사용한다. 2.Cookie 쿠키는 브라우저의 저장소 역할을 한다. 쿠키는 만료 기한이 있는 Key-value 저장소이다. 쿠키 또한 자바스크립트로 접근이 가능하지만, HTTP ONLY..
flex
·
CSS
반응형 웹이나, 컨테이너 박스를 유연하게 조절하고 싶을 때 플렉스박스(flexbox)를 사용한다. 1. 플렉스 박스(flexbox) 플렉스박스는 행 또는 열을 주축으로 설정하여 웹 요소를 배치 및 정렬하는 1차원 레이아웃 방식을 말한다. 플렉스박스 방식에서, 요소의 배치와 정렬은 플렉스 컨테이너와 플렉스 아이텐 간의 상호작용을 통해 결정된다. 플렉스 컨테이너: 플렉스박스 방식으로 레이아웃을 결정할 요소 플렉스 아이테: 플렉스 컨테이너 내부에서 플렉스박스 방식으로 배치되는 요소 시작: 플렉스 컨테이너로 사용하고자하는 요소를 선택해서 display: flex; 속성을 지정하면 플렉스 컨테이너가 만들어진다. 플렉스 컨테이너가 인라인 레벨 요소이길 원한다면? display: inline-flex로 지정해주면 된..
OAuth 2.0(생활코딩) 개념
·
React
OAuth 2.0(Open Authorization 2.0)은 인증을 위한 개방형 표준 프로토콜입니다. Resource Owner(사용자) : 리소스 소유자입니다. 본인의 정보에 접근할 수 있는 자격을 승인하는 주체입니다. 예시로 구글 로그인을 할 사용자를 말합니다. Resource Owner는 클라이언트 인증하는 역할을 수행하고, 인증이 완료되면 동의를 통해 권한 획득 자격을 클라이언트에게 부여합니다. Client : Resource Owner의 리소스를 사용하고자 접근 요청을 하는 어플리케이션 ->접근하도록 서비스를 요청(request) Resource Server: Resource Owner의 정보가 저장되어 있는 서버입니다. (server) Authorization Server: 권한 서버입니다...
HTTP response
·
네트워크
HTTP에는 2가지 타입의 message가 있다. response와 request HTTP request message: general format method: GET(입력폼) , POST(개시), HEAD, PUT(파일 보내기) URL(user data) version : HTTP version value: host, 브라우저 어떤거 쓰는지, launguage ,인코딩 Other HTTP request messages 대표적인 method에 대해서 알아보자 POST : 입력폼, 설문조사, 로그인 request를 보낼 때 사용하는 method이다. input을 포함하고 있다면, user의 input 내용이 client에서 server로 POST의 body를 통해 전달된다. (입력 정보 보내기) GET ..