[항해99]React 주특기 심화 회고

s3 버킷에 배포한 뒤, example.com이 아닌 examlple.com/login 등 특정 페이지로 이동하면 왜 오류가 날까?

원인

리액트는 SPA이고, index.html을 두고 router를 이용하여 관련된 내용을 갈아끼는 방식이다. 따라서, 위와 같이 특정 페이지로 이동을 하게 되면 s3가 해당 경로의 버킷에서 example.com/login에 맞는 객체(html)을 찾기 시작하는데, 해당 파일은 없기 때문에 404에러가 발생하는 것 이다.

해결방법

s3가 어떠한 상황(어떠한 특정 페이지로 이동)이건 index.html를 보이게 설정해주면 된다.

리액트에서 각 페이지 컨텐츠에 맞는 미리보기(사이트 이미지, 사이트 설명 등)을 띄워주려면 어떻게 해야할까

해결방법

react-melmet package를 이용하여 메타태그를 각각의 페이지에 맞게 넣어준다. 그리고나서 검색로봇이 해당 메타태그를 미리 읽어갈 수 있도록 pre-rendering 처리를 해주거나 서버사이트 렌더링처리를 해주면 된다.

리덕스에서 미들웨어 thunk의 역할은 무엇일까?

react-thunk는 리덕스에서 비동기 작업을 처리 할 때 가장 많이 사용하는 미들웨어이다. thunk를 사용하면 액션 객체를 dispatch하는게 아닌 함수를 dispatch 할 수 있다. 이렇게하면 dispatch, getState, 혹은 내가 직접 설정한 값을 받아 사용할 수 있다.

promise는 정확하게 말하면 비동기가 아니다. 비동기와 promise란 무엇일까?

1. 비동기
   비동기란 요청(request)을 보내고 해당 요청에 대한 응답(response)을 기다리는 대신 다음 동작을 실행하는 방식이다.
   하지만, 비동기에는 큰 문제로 꼽히는 콜백지옥이라 불리는 문제가 있다. 이를 해결해주는 객체가 바로 promise이다.
2. promise
   콜백 지옥에 빠져 디버깅도, 읽기도 어려워진 단점을 해결해주며 총 3가지의 상태가 있다.
   • pending(보류: operation 수행 중)
   • fulfiled(이행: operation 성공적 수행 완료)
   • rejected(거부: 파일을 찾을 수 없거나, 네트워크 문제 등)

TDZ(Temporal Dead Zone/일시적 사각지대)란?

const, let을 선언 할 때, 선언 > 초기화 > 할당 단계를 거친다. 런타임(코드를 위에서 부터 아래로 한 줄 한 줄 실행하는 것) 이전에 선언되어 메모리에 자리를 차지하지만 초기화 단계가 아직 실행되지 않았기 때문에 해당 변수(상수)에 접근 할 수는 없는 상태를 말한다.