10.01 항해 19일차 TIL

기본 주차에 간신히 이해했던 리덕스의 사용법이 아예 다르게 바뀌어서 한참을 헤메고 있다.
훨씬 편해졌다고는 하는데 아직은 뭐가 편해졌다는 건지 잘 모르겠기도 하고..
항상 새로운 것을 받아들여서 빠르게 바뀌어야 하는 개발자 라는 직업을 가지고 싶어 시작 했으니 이번에도 내것으로 만들기 위해 한번 쭉 정리해본다!

오늘 배운 것
cookie와 session
redux-action, immer를 사용해서 리덕스 만들기.

토큰 기반 인증

• OAuth2.0란?
  외부서비스의 인증 및 권한부여를 관리하는 프레임워크
  → Open Authentication, Open Authorization라고 한다. (인증과 허가를 포함)

• OAuth2.0 동작방식

1. 클라이언트와 서버 사이에 인증(로그인)을 하면 서버가 access_token 을 준다.
2. 클라이언트는 access_token을 이용해서 API 요청을 할 수 있다.
3. 서버는 API 요청을 받고, access_token을 가지고 권한이 있나 없나 확인해서 결과를 클라이언트에 보내줍니다.

• JWT(Json Web Token) 란?
  토큰의 한 형식, 데이터가 JSON 형태로 이루어져 있는 토큰이다.
  구조는 한번 정리 했었으니 동작 방식을 살펴 보겠다.

• JWT 동작방식

  • 유저가 로그인을 시도하면,
  • 서버가 요청을 확인하고 secret key를 가지고 access_token을 발급한다.
  • 클라이언트에 JWT를 전달하고
  • 클라이언트는 API 요청을 할 때 Authorization header에 JWT를 담아서 보낸다.
  • 서버는 JWT의 서명을 확인하고 payload에서 정보를 확인해서 API 응답을 보낸다.

🍪 Cookie

클라이언트 로컬에 저장되는 key:value 형태의 저장소
약 4KB 정도 저장할 수 있다.

//쿠키 만들기
// key는 MY_COOKIE, value는 here, 
document.cookie = "MY_COOKIE=here;";

//쿠키 가져오기
console.log(document.cookie);

//쿠키 삭제
//쿠키를 삭제할 때는 만료일을 이전으로 돌려서 지우는 방법을 많이 쓴다.
document.cookie = "MY_COOKIE=here; expires=new Date('2020-12-12').toUTCString()";

🗄️ Session

HTML5에서 추가된 저장소, 쿠키와 마찬가지로 key:value 형태의 저장소이다.

//세션 만들기
// key는 MY_SESSION, value는 here,
sessionStorage.setItem("MY_SESSION", "here");

// 세션 가져오기 
sessionStorage.getItem("MY_SESSION");

// 하나만 삭제하고 싶다면, 이렇게 키를 통해 삭제.
sessionStorage.removeItem("MY_SESSION");

// 전부 지우고 싶을 땐 clear()를 쓰면 된다. :) 
sessionStorage.clear();

리덕스

redux-action은 좀 더 편한 액션 관리를 위해 사용되고 이번에 처음 사용해본 immer는 불변성 관리를 도와주는 패키지다.
객체는 const로 선언해도 내용이 수정될 수 있는데 스프레드 문법 ({...~~}) 등을 이용해서 수정되지 않게 주의해서 코드를 작성한다.
그런데, 객체 구조가 복잡해지면 코드를 짜기가 번거롭기 때문에 불변성을 신경 쓰지 않는 것처럼 써도 알아서 불변성을 유지해주는 immer를 사용한다.

우선 기존 코드와 비교를 해보았다.

• 기존 리덕스 작성 코드

// 액션 선언
const CREATE = 'card/CREATE';


// 액션 생성 함수
export function createCard(card) {
  return { type: CREATE, card };
}

// 리듀서
export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case 'card/CREATE': {
      // console.log('연결 됨', action, state)
      const new_card_list = [...state.card_list, action.card]
      // console.log('새로운 리스트', new_card_list)
      return { ...state, card_list: new_card_list }
    }

• redux-action, immer 사용하여 리덕스 작성

// 액션 선언
const ADD_POST = "ADD_POST";

// 액션 생성 함수
const addPost = createAction(ADD_POST, (post) => ({ post }));

// 리듀서
export default handleActions(
  {
    [ADD_POST]: (state, action) =>
      produce(state, (draft) => {
        draft.list.unshift(action.payload.post);
      }),
  },
  initialState
);