[항해99 ] React 심화 주차 팀과제 Answer
팀 과제 질문 답변 (모범 답변 및 우리 조 답변 참고해서 새로 정리)
s3 버킷에 배포한 뒤, 어떤도메인.com이 아닌 어떤도메인.com/login 등 페이지로 이동하면 왜 오류가 날까요?
- 리액트의 라우팅 방식이 전통적 링크 방식이 아니기 때문. (전통적 링크 방식의 경우 주소창에 적힌대로 html 파일을 받아 보여준다면, SPA는 하나의 html을 두고 주소창에 적힌 대로 내용을 갈아끼우는 방식)
- s3 버킷의 정적 웹사이트 호스팅은 /login 경로에 맞는 html을 찾는 거고, 해당 html파일이 없기 때문에 404 에러가 나는 것.
- 에러 해결 방법은? s3가 어떤 상황이건 index.html을 보도록 설정해주는 것
리액트에서 각 페이지 컨텐츠에 맞는 미리보기(사이트 이미지, 사이트 설명 등)를 띄워주려면 어떻게 해야할까요?
- 메타태그를 페이지에 맞게 조절해준다. 그리고 검색봇이 해당 메타태그를 미리 읽어갈 수 있도록 서버사이드 렌더링 처리 혹은 pre-rendering처리 해준다. (더 알아보면 좋을 키워드 : SSR)
⇒ react-helmet을 사용하면 페이지마다 타이틀을 변경할 수 있고, 컨텐츠에 맞는 미리보기도 만들 수 있다.
https://writingcode.tistory.com/60?category=1101707
리덕스에서 미들웨어 청크의 역할은 뭘까요?
- 액션 객체를 dispatch하는 대신 함수를 dispatch할 수 있도록 해준다. dispatch한 함수는 dispatch, getState, 그 외의 직접 설정한 값을 받아 사용할 수 있다.
- 비동기 처리 등에 사용할 수 있다.
미들웨어 ?
리듀서에 보내진 액션을 처리하기 이전에 어떤 작업을 수행할 수 있게 도와주는 것이다.
즉, 액션과 리듀서 사이의 중간자 라고 볼 수 있다.
전달 받은 액션을 단순히 콘솔에 기록하거나, 전달 받은 액션 정보를 기반으로 액션을 아예 취소하거나, 다른 종류의 액션을 추가하는 등 다양한 역할을 담당할 수 있다.
미들웨어가 왜 필요한가?
리덕스는 동기적인 흐름으로 동작한다. 하지만 동기 방식으로는 처리하기 힘든 작업들이 있다.
(setTimeout 메서드 쓸 때라던지, 외부 데이터를 받아올때 라던지…..)
이런 비동기 작업들을 하기 위해 쓰는 것이다.
( 우리는 이전 프로젝트에서 파이어스토어에 데이터들을 요청하는 작업을 thunk 로 구현을 했었다. )
redux-thunk는 대표적인 리덕스 미들웨어 중 하나다. ( redux-saga 도 있음 )
서버로부터 어떠한 동작 중간에 데이터를 가져오는 역할을 한다.
또한 dispatch로 값을 불러오기 위해선 무조건 action type이라는 key를 가진 객체를 넣어주어야 하지만 thunk를 쓰게되면 함수를 입력해도 된다. (반환값 객체 외에 반환값이 함수인 함수 입력 가능)
프로미스는 정확히 말하면 비동기가 아닙니다. 비동기와 프로미스는 각각 무엇일까요?
- 비동기는 요청을 보내고 해당 요청에 대한 응답을 기다리는 대신 다음 동작을 실행하는 방식.
- 프로미스는 비동기 처리에 사용되는 객체. (비동기 자체는 아니다.)
비동기
어떤 작업을 하라고 요청을 보낸 다음, 그 작업을 다했다는 응답을 받을 때까지 기다리지 않고 바로 다음 작업을 시작하는 방식
프로미스비동기 연산이 종료된 이후 결과를 알기 위해 사용하는 객체프로미스는 3가지의 상태(states)를 가지며, 여기서 상태란 프로미스의 처리 과정을 의미한다. new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 가진다.
- Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태new Promise() 생성자를 호출 할 때 인자로 콜백함수를 선언 할 수 있고, 콜백 함수의 인자는 resolve, reject 이다.
- Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태resolve를 함수로 실행하면 이행상태가 된다. then()메소드를 이용하면 결과값을 받을 수 있다.
- Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태reject를 함수로 실행하면 실패상태가 된다. catch()메소드를 이용하면 실패 처리의 결과값을 받을 수 있다.
TDZ(Temporal Dead Zone/일시적 사각지대)란?
const, let을 선언할 때 선언 -> 초기화 단계를 거친다. 런타임(파일을 한 줄 한 줄 실행하는 것) 이전에 선언되어 메모리에 한 자리를 차지하지만 초기화 단계가 아직 실행되지 않았기 때문에 해당 변수(상수)에 접근할 수는 없는 상태를 TDZ라고 한다.
우선 변수는 선언, 초기화, 할당 이라는 3가지 단계에 걸쳐서 생성이 된다.
- 선언 단계 : 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계를 의미한다.이 변수 객체는 스코프가 참조하는 대상이 된다.
- 초기화 단계 : 실행 컨텍스트에 존재 하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계이다. 이 단계에서 할당된 메모리에는 undefined로 초기화가 된다.
- 할당 단계 : 사용자가 undefined로 초기화된 메모리의 다른 값을 할당하는 단계이다.여기서 TDZ는 선언 단계와 초기화 단계 사이를 의미한다.그래서 var는 선언 단계와 초기화 단계를 동시에 진행하여 호이스팅이 일어나지만const나 let 은 선언 단계와 초기화 단계가 분리되서 진행되기 때문에호이스팅이 일어나도 메모리에 할당이 되지 않아 ReferenceError가 발생하게 된다. 그래서 호이스팅이 일어나질 않는다라고 오해하게 된다.