⛵️ 211009 TIL

주특기 회고의 날.. 험난했던 리액트 심화주차가 막을 내렸다. 오늘은 공통 과제인 Wrap-up Assignment를 팀원 분들과 함께 풀어봤는데, 주어진 키워드와 팀 자체적으로 선정한 질문들을 중심으로 정리한 개념들을 오늘의 TIL로 써본다.

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

<팀 답안>

• React 같은 SPA 라이브러리는 클라이언트 사이드 라우팅을 사용한다. 이 때, 최초에 1번 서버에서 전체 페이지를 로딩하여 보여주고 그 이후에는 유저의 요청에 따라 서버에서 페이지를 제공하면 클라이언트가 재렌더링을 하기 때문에 처음에 전체페이지를 로딩하기 위해서는 어떤도메인.com으로만 들어가야만 전체 페이지를 렌더링이 가능해진다.

<튜터님 답안>

1. 리액트의 라우팅 방식이 전통적 링크 방식이 아니기 때문. (전통적 링크 방식의 경우 주소창에 적힌대로 html 파일을 받아 보여준다면, SPA는 하나의 html을 두고 주소창에 적힌 대로 내용을 갈아끼우는 방식)

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

3. 에러 해결 방법은? s3가 어떤 상황이건 index.html을 보도록 설정해주는 것

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

<팀 답안>

• FileReader로 파일 내용을 읽어온다. 리덕스에 미리보기를 설정하는 액션과 리듀서를 만든다. 액션을 디스패치 해준다.

<튜터님 답안>

• 메타태그를 페이지에 맞게 조절해준다. 그리고 검색봇이 해당 메타태그를 미리 읽어갈 수 있도록 서버사이드 렌더링 처리 혹은 pre-rendering처리 해준다.

  더 알아보면 좋을 키워드 : SSR

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

<팀 답안>

• thunk 미들웨어는 객체가 아닌 함수를 반환하는 action creators를 만들어준다. 필요한 value를 parameter로 받아서 함수를 return 가능하게 해준다.

<튜터님 답안>

1. 액션 객체를 dispatch하는 대신 함수를 dispatch할 수 있도록 해준다. dispatch한 함수는 dispatch, getState, 그 외의 직접 설정한 값을 받아 사용할 수 있다.

2. 비동기 처리 등에 사용할 수 있다.

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

<팀 답안>

비동기 처리란?

• 어떤 작업을 요청했을 때 그 작업이 종료될때 까지 기다리지 않고 다른 작업을 하고 있다가, 요청했던 작업이 종료되면 그에 대한 추가 작업을 수행하는 방식

Promise란?

• 비동기 작업이 종료된 후 결과값이 어떠한지에 대해 반환을 약속해주는 객체이다.

<튜터님 답안>

1. 비동기는 요청을 보내고 해당 요청에 대한 응답을 기다리는 대신 다음 동작을 실행하는 방식.

2. 프로미스는 비동기 처리에 사용되는 객체. (비동기 자체는 아니다.)

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

<팀 답안>

• 변수 선언 이전에 변수를 참조하는 영역. 해당 영역에서 선언 이전에 참조한 변수는 참조 에러가 발생한다. 즉, TDZ 에 영향을 받는 변수는 선언 이전에 참조하는 것을 금지하고 있다.

<튜터님 답안>

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

19조 자체 질문!

✍️ 세션 vs 쿠키 vs 토큰

• 쿠키: 클라이언트(브라우저) 로컬에 저장되는 키와 값이 들어간 작은 데이터 파일
• 세션: 사용자 정보 파일을 서버에서 관리 (사용자에 대한 정보를 서버에 두어서 보안은 좋지만 서버 메모리를 많이 차지 할 수도 있음)
• 토큰: 토큰을 이용하면 로그인 정보 같은 예민한 데이터들이 매번 서버와 브라우저를 오갈 필요 없이 인증 절차를 수행할 수 있다. 또한 세션과 같이 데이터를 서버에 저장할 필요가 없기 때문에 서버 부하를 줄이는 데에 효과적 이기도 하다.

✍️ 리덕스를 사용하는 이유!

리액트에서 데이터는 단방향(부모에서 자식 방향으로)으로 흐르기 때문에 자식컴포넌트에서 부모컴포넌트의 데이터에 접근할 수 없습니다. 리덕스는 모든 컴포넌트에서 접근할 수 있는 전역 데이터를 관리해주는 라이브러리 입니다. 리덕스는 데이터를 저장하는 스토어와 데이터에 접근해서 데이터를 수정할 수 있는 리듀서가있습니다.