ABOUT ME

끝없는 성장을 꿈꾸는 개발자 velog

Today
Yesterday
Total
  • [항해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를 붙여줌

Designed by Tistory.