팀과제- React 심화주차

팀과제- React 심화주차

1.

s3 버킷에 배포한 뒤, 어떤도메인.com이 아닌 어떤도메인.com/login 등 페이지로 이동하면 왜 오류가 날까요?

404 (Not Found)

리액트를 아무런 처리없이 빌드하고 배포하고 나서, 특정 URL로 바로 접근 시 생기는 에러

리액트라서 생기는 문제이라기 보다 SPA이 가진 특징 때문에 생기는 문제

왜 이런 에러가 발생 하는가

s3 버킷의 정적 웹사이트 호스팅은 /login 경로에 맞는 html을 찾는 거고, 해당 html파일이 없기 때문에 404 에러가 나는 것이다.

따라서, Base가 되는 URL이 아닌 다른 URL을 통해 사이트에 접속해도, index.html을 연결시켜 배포하는 작업이 필요

S3 서버에서의 처리 방법

S3에서는 정적 웹 사이트 호스팅 편집에서 인덱스 문서와 오류문서를 index.html 하나로 설정하면 해결

2.

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

리액트에서는 헬맷 라이브러리를 사용해서 웹페이지의 제목이나 이미지, 간단한 설명을 검색엔진에 알려주는 역할을 하는 메타 태그를 처리해 줍니다.

3.

리덕스에서 미들웨어 청크의 역할은 뭘까요?

액션 객체를 dispatch하는 대신 함수를 dispatch할 수 있도록 해줍니다. dispatch한 함수는 dispatch, getState, 그 외의 직접 설정한 값을 받아 사용할 수 있고 비동기 처리 등에 사용할 수 있다.

4.

프로미스는 정확히 말하면 비동기가 아닙니다. 비동기와 프로미스는 각각 무엇일까요?

Promise[프로미스]는 자바스크립트에서 비동기 처리에 사용되는 객체라고 한다. 비동기 처리는 코드 실행 후 결과를 받는것을 기다리지 않고 다음 코드를 계속 진행하는 처리 방식을 말한다.(동기 처리는 반대로 앞선 코드를 수행하고 그 결과를 받을 때 까지 기다린 다음에 수행하는 것을 말한다)

Promise 객체는

new Promis(function(resolve, reject)){ // 코드 resolve(response); }

이런식으로 resolve, reject, then 함수 등이 있다

동기(synchronous : 동시에 일어나는)

-동기는 말 그대로 동시에 일어난다는 뜻입니다. 요철과 그 결과가 동시에 일어난다는 약속인데요. 바로 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어져야 합니다.

요청과 결과가 한 자리에서 동시에 일어남

A노드와 B노드 사이의 작업 처리 단위(transaction)를 동시에 맞추겠다.

비동기 (Asynchronous : 동시에 일어나지 않는)

-비동기는 동시에 일어나지 않는다를 의미합니다. 요청과 결과가 동시에 일어나지 않을거라는 약속입니다.

요청한 그 자리에서 결과가 주어지지 않음

노드 사이의 작업 처리 단위를 동시에 맞추지 않아도 된다.

동기와 비동기는 상황에 따라서 각각의 장단점이 있다.

동기방식은설계가 매우 간단하고 직관적이지만 결과가 주어질 때까지 아무것도 못하고 대기해야 하는 단점이 있고,

비동기방식은 동기보다 복잡하지만 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있는 장점이 있습니다.

5.

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

const, let은 선언할 때 선언 -> 초기화 단계를 거칩니다.

런타임(파일을 한 줄 한 줄 실행하는 것) 이전에 선언되어 메모리에 한 자리를 차지하지만 초기화 단계가 아직 실행되지 않았기 때문에 해당 변수(상수)에 접근할 수는 없는 상태를 TDZ라고 합니다.

from http://mg-m2m.tistory.com/76 by ccl(A) rewrite - 2021-12-03 19:27:05