콜라사이다환타

JWT를 통한 인증 절차1.[프론트엔드] ID와 비밀번호를 준다.2.[백엔드] ID와 비밀번호를 검증하고 AccessToken과 RefreshToken, AccessToken의 만료시간을 반환해준다. 이 때 생성한 RefreshToken은 DB에 {ID,RefreshToken}으로 저장한다.3.[프론트엔드] 반환받은 AccessToken을 매 api 호출마다 헤더에 붙여서 전송한다.4.[백엔드] api 호출시 헤더의 AccessToken을 확인하고 유효한지, 만료기간이 지났는지를 체크 후 api를 동작시킨다.5.[프론트엔드] AccessToken의 만료기간이 지나거나, 30초 미만으로 남았다면, 백엔드에 RefreshToken을 붙여 Reissue요청을 보낸다.6.[백엔드]Reissue 요청이 들어올 경..

Web이란? 즉 Web = 인터넷이 아니라, 인터넷의 범위에 web은 한 종류인 것이다. 웹서버란? 웹서버란 두가지 의미를 모두 지닌다.그러나 우리가 사용할 웹 서버의 개념은 소프트웨어 측면이 더 강하다. 1)하드웨어 측면 Web server는 website의 컴포넌트 파일들을 저장하는 컴퓨터이다. (컴포넌트 파일에는 HTML 문서, images, CSS stylesheet, 그리고 js files가 있을 것이다.)그리고 이 파일들을 최종 소비자의 디바이스에 전달한다. 2)소프트웨어 측면 web server는 기본적으로 웹 사용자가 어떻게 호스트 파일들에 접근하는지를 관리한다. 이 문서에는 web server 는 HTTP서버로 국한한다. HTTP서버는 URL(web addresses)과 HTTP(본인 브..

해당 작업을 수행하기 전 http 구조에 대해 이해하기 도움 request body와 request header에 대해 알았다면 각각에 다른 데이터를 넘겨주는 연습을 해보자. 예를 들어 request header에는 client-type 을 , request body에는 loginId를 url에 담아보도록 한다. const sendData = async() => { try const res = await axios.post(1,2,3); catch(error) error } 1의 인자, 2의 인자,3의 인자에 어떤 것을 넣어주느냐에 따라 각각 원하는 데이터를 전달할 수 있다. 1번 인자에는 주소를, 2번인자에는 body 정보를, 3번째 인자에는 header에 넣어줄 정보를 각각 넣어주면 된다. const..

HTTP란? HyperText(하이퍼링크를 통해 독자가 한 문서에서 다른 문서로 접근할 수 있는 텍스트) Transfer(교환) Protocol(규칙)의 줄임말이다. 인터넷 상에서 클라이언트와 서버가 자원을 주고 받을 때 쓰는 통신규약이라는 의미이다. 웹브라우저(client)와 웹서버(server)즉, 서로 다른 컴퓨터 간에 컨텐츠를 교환하기 위한 규칙과 그 메세지가 HTTP이다. 여기서 Transfer Protocol이라는 말은 "웹 간에 어떠한 것에대해 요청하고, 그 응답을 받아야하는데 그 과정에서 어떤 방식으로 주고 받을지에 대한 규칙이 적힌 메세지"이다. HTTP 기반 시스템의 구성요소 HTTP 각각의 개별적인 요청들은 서버로 보내지며, 서버는 요청을 처리하고 response라고 불리는 응답을 제..

HTTP 헤더와 본문으로 구성되어 있다. HTTP헤더는 HTTP 메시지(요청/응답)와 본문에 대한 정보를 말해주고 있다. 이에 대해서 이해하는 것이 실제로 중요하다. 해당 메세지가 제공하는 기능에 대한 최소한의 정보가 정리된 요약본이라고 할 수 있기 때문이다.헤더에 그 프로토콜에 불필요한 내용을 담으면 네트워크로 전송되는 데이터의 크기가 커져서 빠른전송이 불가능하기 때문에 그 프로토콜을 설계할 때부터 꼭 필요한 내용만 담아야 하고, 모든 기능이 표현되어야 한다. 이에 대해 HTTP헤더는 크게 세가지로 구성되어 있다. 1) General Header 전송되는 컨텐츠에 대한 정보보다는, 요청/응답이 이루어지는 날짜 및 시간 등에 대한 일반적인 정보가 포함된다. Date : 현재시간 (Sat, 23 Mat 2..

데이터의 흐름을 쉽게 하기 위해 vuex라는 외부라이브러리가 있고, 메소드들을 서로 호출할 수 있도록 도와주는 eventBus라는 방법이 있다. 이중 eventBus의 사용방법에 대해 알아보자. 이벤트를 사용하는 이유 일반적으로 메소드, 변수를 정의할 때 한오브젝트나 컴포넌트 단위로 묶어서 사용되기 때문에 이벤트를 사용할 필요가 없이 현재위치에 포함된 메소드/변수를 호출하여 사용할 수 있다. 하지만 각각 분리되어 있는 개체에 전송하거나 알려줘야한다면 어떻게 해야할까? 이럴 때 공통으로 데이터들을 주고 받을 수 있는 공간을 만들고, 이를 통해서 서로 규격에 맞춰 데이터들을 주고 받으면 될 것이다. 이벤트를 등록하고 받을 준비가 끝났다면 언제 어디서든지 데이터들을 주고 받고, 각 이벤트요청 상황에 따라 원하..