React 기초다지기 #5

자바스크립트:

• 싱글 쓰레드로 동작하는 언어이다
• 1번에 1개의 작업만 할 수 있는게 싱글쓰레드인데, 어떻게 비동기작업은 동시에 할 수 있을까?

콜백함수

• 어떤 함수에 인수로 넘겨지는 함수
• 자바스크립트가 비동기 처리를 위한 패턴중에 하나이다.

프로미스(Promise)란?

• 콜백헬 방지를 위해서 만들어진 객체
• 비동기 연산이 종료된 이후에 결과 값을 알기위한 객체
• 비동기 처리시점을 조금 더 명확히 알 수 있다.

프로미스 상태값

• pending: 비동기 수행 처리 전(resolve, reject가 아직 호출되지 않음)
• fulfilled: 수행성공 (resolve 호출)
• rejected: 수행실패 (reject 호출)
• settled: 성공 or 실패

async & await function

• async

1. 프로미스를 더 쉽게 사용하게 해주는 키워드
2. 함수 앞에 async를 쓴다.
3. 항상 프로미스를 반환한다.

async function myfun(){
  return "프로미스를 반환해요"
}

myfun().then(result => {console.log(result)})

• await
• async와 짝궁. async없이는 못쓴다
• Promise가 처리될때까지 기다렸다가 값을 반환한다.

OAuth2.0이란?
외부 서비스의 인증 및 권한부여를 관리하는 프레임워크이다.

• 클라이언트와 서버사이에 인증을 하면 access_token을 부여
• 클라이언트는 access_token과 함께 API 요청
• 서버는 access_token 비교 및 응답

JWT: 토큰의 한 형식이다. JSON 형태로 이루어짐

• 생김새: [header][payload].[signature[서명]]

웹 저장소 (feat. token)

• 토큰 뿐만 아니라 정보를 담을 때에도 웹 저장소를 쓴다

쿠키에 스토리지 : key value 형태로 저장된다.
세션 스토리지: HTML5에서 추가된 스토리지 형태. 쿠키와 마찬가지로 key:value 형태를 띈다. 세션 스토리지에 저장된 데이터는 브라우저를 끄면 데이터가 삭제된다.

sessionStorage.setItem("My_Session", "here"); //데이터 생성
sessionStorage.getItem("My_Session"); //데이터 찾기
sessionStorage.removeItem("My_Session"); //데이터 삭제

로컬 스티리지: 세션 스토리지 + 따로 지워주지 않으면 브라우저를 꺼도 데이터가 그대로 남아있다.

localStorage.setItem("My_Session", "here")
localStorage.getItem("My_Session", "here")

쿠기에다가 저장하기도 하고 로컬스토리지에다가도 저장하기도 한다.
쿠키 저장의 장점: HTTP 통신을 할때 쿠키가 자동으로 포함되어있다. 그래서 API 요청을 모든 경우에 한다면, 쿠키가 편하다
쿠키 저장의 단점: 다른 스토리지에 비해 쓰는데 불편한 감이있다.
쿠키 저장의 단점: 4KB가 한계

로컬 스토리지의 단점: 보안에 취약하다.

로그인하기 - 유저 모듈 만들기

• user.js만들기
• 설치한 redux-actions와 immer를 사용해서 액션과 액션 생성함수, 리듀서를 만드는방법을 알아봅시다.
• immer는 불변성관리를 도와주고, redux-actions는 좀 더 편한 액션함수 관리를 위해서 사용한다.

왜 immer가 필요하지?

• 객체는 const로 선언해도 바꿔줄 수 있기때문에 (스프레드 문법 {...}을 생각해보자) 코드가 복잡해지면 불변성 유지를 안하게되면 상당히 복잡해진다.

리덕스에 필요한 모든 것을 한 묶음으로 모아서 module을 만든 것을 ducks 구조라고 한다.