스파르타 코딩클럽 React 리액트 심화반 2주차 정리 -Promise, OAuth2.0, JWT, 웹 저장소

자바스크립트는 싱글쓰레드로 동작하는 언어

> 일꾼이 하나라 작업을 하나씩 수행함.

단, 실행환경의 도움을 받기에 비동기적인 동시실행이 가능함.

 

비동기 작업시

> 콜스텍에 setTimeout 같은게 쌓임

> 콜스텍이 Web API 에게 처리 위임

> Web API가 콜백큐에 콜백함수 넘겨줌

> 콜백큐는 이벤트 루프를 통해서 콜스텍에 콜백함수를 넘겨줌

> 콜스텍이 넘겨받은 콜백함수 처리

 

콜백

자바스크립트가 비동기처리를 하기위한 패턴 중 하나.

*콜백함수가 중첩될수록 관리가 힘들어진다.

 

Promise

비동기 연산이 종료된 이후 결과를 알기위해 사용하는 객체

const promise = new Promise((resolve, reject)=>{
    if ( ){
        resove("성공")
    }else{
        reject("실패")
    }
});

resolve : 성공했을 때의 콜백

reject : 실패했을 때의 콜백

 

상태값

pending : 비동기 처리 수행 전 (resolve, reject 호출 전)

fulfilled : 수행 성공 (resolve 호출)

rejected : 수행 실패 (reject 호출)

settled: 성공 or 실패 (resolve, reject 둘중 하나가 호출된 상태)

 

후속처리 메소드

.then(성공시, 실패시); 

//호출 성공시 1초후 "완료!"를 반환
let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("완료!"), 1000);
}); 

//위의 promise가 성공시 결과를 출력.
promise.then(result => {
    console.log(result);
}, error => {
    console.log(error);
});

promise chaining

.then 을 이용해서 promise들을 이어주는것.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Using_promises

Using promises - JavaScript | MDN

 

 

async

함수 앞에 붙여서 사용하며 함수가 Promise 로 반환되게끔함.

 

await

async함수 안에서만 동작함. 선택한 함수를 기다렸다가 실행함.

 

async function A(){
    let promise = new Promise((resolve, reject)=>{
        setTimeout(()=>resolve("완료!"), 1000);
    });
    console.log(promise);
    let result = await promise; //promise가 처리된 후에 반환된 값을 result에 넣는다.
    console.log(promise);
    console.log(result); //"완료!"가 콘솔에 적힌다.
}

 

---

 

세션 기반 인증

이전에는 사용자의 로그인상태를 서버의 세션에 전부 가지고 넣고있었음.

=> 서버에 부하가 오기 시작

 

토큰 기반 인증

 

OAuth2.0 (Open Authentication, Open Authorization)

외부서비스의 인증 및 권한부여를 관리하는 프레임워크

 

기본 동작 방식

1. 클라이언트와 서버 사이에 인증(로그인)시 서버에서 access_token 을 발급해줌
2. 클라이언트는 이 토큰을 이용해 API 요청을 할 수 있음.
3. 서버는 API 요청을 받고, access_token을 가지고 권한 유무를 판단해서 클라이언트에게 결과를 보내줌.

외부서비스와의 동작 방식 

: A웹사이트에서 로그인 방식으로 구글이 있을 때

• 유저 정보 = Resource (자원)
• 구글 = Resource Server (자원 서버) + Authorization Server (권한 서버)
• 유저 = Resource Owner (자원 소유자)

1. 유저가 A웹사이트 방문
2. A웹사이트가 구글에게 로그인페이지 요청 후 유저에게 전달
3. 유저가 구글 로그인 후 구글이 유저에게 접근 권한 코드를 발급해줌.
4. 발급받은 접근 권한 코드를 유저가 A웹사이트에 전달
5. A웹사이트는 전달받은 접근 권한 코드를 구글에 전달하여 구글로부터 access_token 을 발급받음
6. 발급받은 토큰을 A웹사이트가 유저에게 전달
7. 유저가 access_token 을 가진 상태, 이후 A웹사이트가 토큰으로 유저확인 후 페이지를 보여줌.
8. 토큰 만료시 A웹사이트는 구글에게 refresh_token을 전달한 후 새로운 access_token을 발급받은 뒤 유저에게 전달해준다.

 

JWT(Json Web Token)

: 변조의 유무 확인이 가능한 전자 서명이 포함된 토큰, 보안이 좋다. 

 

구조

• header : 토큰 타입, 암호화 방식 정보
• payload : 토큰에 담을 정보, name:value 가 한 쌍
• signature : 서명 정보, secret key 를 포함해서 header와 payload 정보가 암호화되어 들어감.

동작방식 

: 토큰 기반 동작 방식대로 움직인다.

1. 유저가 로그인
2. 서버가 요청 확인 후 secret key 를 가지고 access_token qkfrmq
3. 유저에게 JWT를 전달
4. 이후 유저가 API 요청할 때 Authorization header 에 JWT를 담아 보낸다.
5. 서버는 JWT의 서명을 확인 후 payload 에서 정보를 확인하여 API 응답을 보냄.

https://developer.mozilla.org/ko/docs/Web/HTTP/Headers/Authorization

Authorization - HTTP | MDN

 

---

 

웹 저장소

 

클라이언트 저장소 = Storage

 

쿠키 

: key 와 value의 한 쌍으로 이루어진 형태의 저장소. 약 4KB까지 저장 가능.

document.cookie = "key = value";  //쿠키 생성하기
document.cookie //모든 쿠키 key = value; 가져오기
document.cookie = "key = value; expires=new Date('만료일').toUTCString()"; //쿠키의 만료일 지정
document.cookie = "key = value; expires=new Date('2020-12-12').toUTCString()"; //만료일을 이전으로 돌려서 쿠키 삭제

 

세션 스토리지

: key 와 value의 한 쌍으로 이루어진 형태의 저장소. 브라우저를 닫으면 제거된다. 

sessionStorage.setItem("key","value"); //세션 스토리지 추가하기
sessionStorage.getItem("key") //특정 key 값을 가진 세션 스토리지 가져오기
sessionStorage.removeItem("ket") //특정 key 값을 가진 세션 스토리지 삭제하기
sessionStorage.clear(); //모든 세션 스토리지 삭제

 

로컬 스토리지

: key 와 value의 한 쌍으로 이루어진 형태의 저장소. 수동으로 지우지 않으면 계속 남아있음.

localStorage.setItem("key","value"); //로컬 스토리지 추가하기
localStorage.getItem("key") //특정 key 값을 가진 로컬 스토리지 가져오기
localStorage.removeItem("ket") //특정 key 값을 가진 로컬 스토리지 삭제하기
localStorage.clear(); //모든 로컬 스토리지 삭제

 

토큰의 저장 위치

: 프로젝트 성향에 맞춰 저장 장소는 달라져야함

 

쿠키 - 로그인 유지같은게 필요할때 만료시간 설정하여 사용

세션 스토리지 - 로그인 유지같은게 필요하지 않을 때 사용

로컬 스토리지 - 보안문제가 덜하고 용량이 좀 있는 토큰 저장할때 사용