-
[항해99]React 심화 주차 핵심 키워드카테고리 없음 2022. 8. 11. 19:41
리덕스에서 미들웨어 청크(thunk)의 역할은 뭘까?
먼저 미들웨어는 리덕스가 지니고 있는 핵심 기능이다.
Context API 또는 MobX를 사용하는 것과 차별화가 되는 부분입니다.
출처 : [React] 미들웨어 이해하기(1) : redux-thunk (tistory.com) 미들웨어는 객체 대신 함수를 생성하는 액션 생성함수를 작성할 수 있도록 도와줍니다.
리덕스는 기본적으로 액션 객체를 디스패치하기 때문에 함수를 생성하면 특정 액션이 발생하기
전에 조건을 주거나, 어떤 행동을 사전에 처리할 수 있습니다.
예를 들어 이런 경우들을 말할 수 있는데
1.전달받은 액션을 단순히 콘솔에 기록하는 경우
2.전달받은 액션 정보를 기반으로 액션을 취소하거나 다른 종류의 액션을 추가로 디스패치하는 경우 등리덕스는 주로 비동기 작업을 관리할 때 편하게 상태 관리를 할 수 있다.(api 연동 등에 유용)
Redux-Thunk란 특정 작업을 나중에 할 수있도록 미루기 위해 함수 형태로 감싼 것을 의미한다.
const addOne = x => x+1; function addOneThunk (x){ const thunk = ()=>addOne(x); return thunk; } const fn = addOneThunk(1); setTimeout(()=> { const value = fn(); // 바로 1+1이 연산되는것이 아닌 fn이 실행되는 시점에 연산 console.log(value); }, 1000);
이런 식으로 작업을 미룰 수 있는데 사용하기 위해서는 redux-thunk라이브러리를 사용해야한다.
프로미스는 정확히 말하면 비동기가 아닙니다. 비동기와 프로미스는 각각 무엇일까요?
동기: 요청과 결과가 동시에 일어남
비동기: 요청과 결과가 동시에 일어나지 않음
프로미스:
비동기 연산이 종료된 이후 결과를 알기 위해 사용하는 객체
비동기 메서드를 마치 동기 메서드처럼 값을 반환할 수 있음
콜벡 헬 때문에 ES6에서 도입됨
TDX(Temporal Dead Zone)란?
TDZ란
직역하자면 일시적 사각지대라는 뜻으로
이 사각지대는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 말합니다.
env란
엄밀한 정의는 아니지만, 환경변수는 특정 process를 위한 key-value 형태의 변수라고 할 수 있습니다.
이와 같은 형태로 변수 선언을 하고 해당 value의 보안을 위해 사용한다고 볼 수 있으며 순서는 다음과 같습니다.
출처[React] React에서 .env 환경변수 사용하기 (tistory.com) 먼저, 디렉토리의 root에 .env 파일을 생성
출처[React] React에서 .env 환경변수 사용하기 (tistory.com) 파일을 생성했다면 먼저 .gitignore에 추가해줘서 원격저장소에 저장할 때 파일이 올라가지 않게 함
출처[React] React에서 .env 환경변수 사용하기 (tistory.com) 키 = 밸류 형태로 키와 value를 설정
const GITHUB_CLIENT_ID = process.env.REACT_APP_GITHUB_CLIENT_ID; const GITHUB_SECRET_ID = process.env.REACT_APP_GITHUB_SECRET_ID; const GITHUB_TOKEN = process.env.REACT_APP_GITHUB_TOKEN; 출처: https://developerntraveler.tistory.com/142 [개발여행의 블로그:티스토리]
env안의 key를 가져오기 위해서는 process.env를 붙여줌