07.03 항해99 27일차

이번주 배운것 및 노트 :

Yarn install - 패키지.json에 있는 것 전부 설치

 

자바스크립트 - 싱글 쓰레드 언어

콜백 - 비동기 처리를 위한 패턴 중 하나.

**콜백 헬** **멸망의 피라미드**

프라미스 - ES6에서 도입된 비동기 처리 패턴. 종료 후 결과를 알기 위해.

ㄴ객체. 생성자 함수로 생성.

ㄴ프라미스 상탯값 4가지

후속처리 메서드

.then (성공 시, 실패시)

.catch(실패시)

콜백헬의 해결법 : 프라밈스 체이닝 (후속처리)

비동기마다 프라미스 객체.

 

Async, await : 프라미스를 더 편하게

어싱크는 비동기가 아니라도, 무조건 프라미스를 반환

어웨잇은 어싱크 안에서만

어웨잇 - 완료될때까지 기다렸다가 반환

 

토큰과 인증

옛날 - 세션 기반 인증

토큰 - 인증정보 서버에 저장 X

OAuth 동작방식 - 외부서비스 인증 및 권한부여 관리하는 프레임워크. 플랫폼간 권한 공유가능.

JWT 발전한 토큰. 전자서명 포함.

 

클라이언트 저장소

Cookies - Key : Value 형태. 가장 오래됨. 4KB

ㄴdocument.cookie = “”;

만료일 서렁 가능. (Date 객체 사용)

만료일을 앞으로 당기는 걸로 삭제

문자열로 선언하는 듯

 

Session Storage : Key : Value 형태.

ㄴ브라우저 닫으면 제거.

함수로 추가 삭제 등 관리

 

Local Storage : Key : Value 형태. 5MB

ㄴ삭제하지 않는 한 브라우저에 유지.

개인정보 저장X

함수로 추가 삭제 등 관리

 

**그때그때 맞는 저장소**

 

시간

let date = new Date();

date.setTime(date.getTime() + exp*24*60*60*1000);

document.cookie = `${name}=${value}; expires=$date.toUTCString()}`;

 

Pop- 마지막 자르고 반환, shift- 맨 앞 자르고 반환

 

 

yarn add redux react-redux redux-thunk redux-logger history@4.10.1 connected-react-router@6.8.0

 

yarn add immer redux-actions

 

Redux-action

Immer - 불변성 유지에 도움

 

 

2-7 “유저모듈”자주 만듬< 복습하기

액션 크리에이터 (편한 핸들액션과 크리에이트액션)

const 액션명 = createAction(타입, (user0 => ({user}));

const reducer = handleActionss({

[타입]: (state, action) => produce(state, (원본값draft)=>{ 

draft.user = action.payload.user; // payload라는 애가 더 붙음

}),

}, initialState = {});

 

스토어를 만들려면 모듈이 적어도 하나이상 필요함.

 

 

Env - 어느환경인지 알려줌

Const env = process.env.NODE_ENV;

 

require() < 패키지 가져오기

Logger from redux-logger < 콘솔로그에 찍힘

임포트 하지 않는 이유 : 개발환경에서만 사용하기 때문에

 

자바스크립트는 V8엔진이 돌아가기만 하면 브라우저가 아니어도 돌아감.

 

스토어 만드는 건 그때그때 달라질 게 없어 그냥 복붙도 ㅇㅋ

 

스토어 주입시 - Provider

액션을 쓰려면 - 디스패치 - import {useDispatch} from “react-redux”;

 

임포트시 as 라고 하면 별명 붙여주는 것:

Ex) import {actionCreator as useAction} from “주소”;

느낀것 :

크아악..어려워... . .. .......어렵다... 일단 구조파악 및 이해를 최우선으로..,.,. 노력하는 중 ㅠ 

내게 아쉬웠던 것 : 

...한국어인데 왜 ..한국어로 안들리지?

 

내일 할 일 :

.,.,.,. 공부?