[TIL] 항해99 W.A

kzhxxn·2021년 10월 9일

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

S3에 업로드 된 객체를 어디서든 접근가능하게 하려면 퍼블릭 액세스 설정을 해야 합니다.
업로드 된 객체 정보를 보시면 객체 URL이 있는데, 이를 통해 어디서든 접근할 수
있도록 허용하는 것입니다. 설정 없이 위의 업로드 한 객체 url을 통해 접근할 경우
This XML file does not appear to have any style information associated with it. The document tree is shown below.
위와 같은 에러가 발생하며 에러 코드는 Access Denied입니다.

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

간단하게 말씀드리자면 SPA 단일페이지이기 때문에 HTML이 1개라는 뜻입니다.

사이트의 미리보기는 HTML 의 META 태그 중에서도 OG(오픈그래프) 로 정의 할 수 있습니다.
리액트에서 OG 그래프를 사용하려면 어떻게 해야할까?
리액트는 SPA(단일페이지)로써 CSR(클라이언트 사이드 렌더링) 방식으로 렌더링을 합니다.
즉, HTML 파일이 1개라는 뜻입니다.
이와 반대로 SSR(서버사이드 렌더링)은 HTML이 페이지마다 있습니다.

CSR 방식으로 HTML 파일이 1개인데 페이지마다 각 컨텐츠에 맞는 미리보기를 띄우려면 어떻게 해야할까요.
리액트에는 Helmet 이라는 라이브러리를 사용 할 수 있습니다.
이 라이브러리를 통해서 JSX에서도 간단하게 META 태그를 정의 할 수 있는데요,
사용방법은 각 컴포넌트마다 메타태그 내용 을 해주시면 됩니다.

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

미들웨어는 액션이 디스패치 된 다음 리듀서에서 액션을 처리하기 전에 액션을 받아와서 액션을 취소시키거나 다른 종류의 액션을 추가적으로 디스패치하는등 업데이트 이전에 추가적인 작업을 할 수 있도록 도와주는 역할이다.
즉 리듀서 내의 어떤 로직이 실행되기 사이의 중간다리 역할을 해줄 함수들을 작성하는 공간

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

동기와 비동기의 구분은 요청받고 응답받는 시간대의 차이라고 생각합니다.요청하고-응답받는 시간을 하나의 박스(box)라로 정의한다면,동기는 박스 안에서 움직이고, 비동기는 박스를 벗어나 작동되는 원리 라고 생각합니다.

동기 : 요청을 하면 (바로) 응답을 받는다는 의미
요청과 응답이 같은 시간대 “안에” 고정되어 있어, 요청에 대해 응답이 완료되기까지 프로그램이 정지합니다. 응답을 받고나서야 비로소 다시 진행되는 특성을 가집니다.
비동기 : 요청 한 내용을 언젠간 응답해 줄 것이라는 약속을 의미.
요청-응답 간 결합이 자유로워 프로그램이 응답 받기 위해 대기하지 않고 쿨하게?! 자기 갈길?! 가는 특성입니다. 언젠간 응답을 받을테고 다음 로직을 수행 합니다.
Promise
자바스크립트에서 비동기 프로그래밍을 위해 콜백을 사용한다.
Promise는 전통적인 콜백 패턴이 가진 단점을 일부 보완하며 동기 처리 시점을 명확하게 표현한다.
Promise는 비동기 처리 로직을 추상화한 객체와 그것을 조작하는 방식을 말한다.
Promise 객체에서 제공하는 메서드만 사용해야 하므로 인자가 같은 방식으로 통일된다.
복잡한 비동기 처리를 쉽게 패턴화할 수 있다.