[항해뀨 3기] 주특기 회고의 날 W.A. 기반 TIL

기본 질문

 

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

 

리액트는 SPA(Single Page Application), 즉 한개의 페이지로 이루어져있어서 S3서버에서는 index.html 파일 하나만 있다고 인식한다.

이를 해결하기 위해서 s3설정시 에러가 났을때의 문서를 index.html로 해놓으면 오류가 발생해도 index.html로 돌아가 제대로 동작한다.

 

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

리액트는 한개의 페이지로 이루어져있어 index.html 자체에 넣을 수 있는 OG태그는 사용에 한정이 있으나,

react-helmet 을 이용하면 각 페이지 컨텐츠에 맞는 OG태그를 삽입할 수 있다. 

 

yarn add react-helmet

import {Helmet} from "react-helmet";

...

return (
	<Helmet>
    		<title>페이지 타이틀</title>
        	<meta property="og:title" content="페이지 타이틀"/>
        	<meta property="og:description" content="페이지 설명"/>
        	<meta property="og:image" content="이미지 경로"/>
    	</Helmet>
)

예를 들어 티스토리처럼 리액트를 사용하며 게시글을 올리는 사이트에서 위와 같은 방식을 이용해서 게시글별로 OG태그를 부여하여 카카오톡이나 티스토리에 해당 글의 링크를 걸었을 때 OG태그의 content가 뜨는걸 확인할 수 있다!

 

 

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

미들웨어는 리덕스에서 액션을 호출하고 리듀서에서 작업을 하기 전에 어떠한 행동을 실행할 수 있도록 해주는 것!

여러 미들웨어가 있지만 그 중에 청크(redux-thunk)는 객체가 아닌 함수 dispatch 할 수 있다!

리덕스 청크로 만들어진 액션 생성자는 내부에서 정말 많은 작업을 할 수 있다.

 

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

비동기란 병렬작업, 즉 코드를 순차적으로 작업하는 것이 아닌 이전 행동이 끝나지 않아도 다음 요청을 작업하는 데이터 처리 방식이다.

반면에 프로미스(Promise) 는 비동기 작업의 "결과"를 나타내는 자바스크립트 "객체"!

비동기 작업이 진행중이라면 pending, 진행이 성공적으로 완료되면 fulfilled, 진행이 비정상적으로 완료되면 rejected를 반환한다.

 

 

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

변수(=let)/상수(=const)의 접근 가능 범위에서 초기화 이전까지의 구간을 말한다.

A;
const A = 1+1

위의 코드를 콘솔에 넣었을 때 첫 줄의 A;는 A라는 상수의 접근 가능 범위에 있으나 A를 초기화하기 전 위치에 있기 때문에 에러가 발생한다. 이때 A;의 위치를 TDZ라고 한다.

const A = 1+1
A;

반대로 A;를 초기화 이후에 넣으면 2가 제대로 출력된다. 이때 A;는 TDZ를 벗어나고 정상적인 위치에 들어간것!

 

var의 경우 자바스크립트가 동작할때 var 로 선언된 코드를 최상위에 두기 때문에 우리가 코딩할때 var의 선언을 변수 호출 아래에 두어도 제대로 작동한다.

 

---

팀별 질문 - 우리 팀^^

 

▶  Debounce와 Throttle의 차이는?

두가지 모두 콜백을 줄여주는 용도지만 약간 다르다.

Debounce는 요청을 받으면 일정 시간 후에 요청을 수행하는대신 일정 시간 내에 새로운 요청이 들어오면 이전 요청은 무시하고 마지막 요청을 일정시간 후에 수행한다.

Throttle은 Debounce와는 다르게 일정시간동안 들어온 요청을 취합하여 출력하고 이를 반복한다.

 

▶  메모이제이션이란?

메모이제이션(Memoization)은 주어진 입력값에 대한 결과를 저장,

이후 같은 입력값에 대한 함수를 재실행하지 않고 한번만 실행되도록 한다.

.memo를 사용하여 계산 결과를 저장하고 이미 계산한 값인지 아닌지를 확인할 수 있다.

 

---

팀별 질문 - 다른 팀

다른 팀의 질문 중 몰랐다가 이해한것 위주로 정리!

(이해 못한 것들은...정리를 어찌해야할지 모르겠으니 보류.)

 

▶  리덕스에서 지켜야할 3가지 규칙들은 무엇일까요? (16조)

1. 하나의 app 안에는 하나의 store!

- 여러개의 store를 만들 순 있지만 권장 X

 

2. state 는 읽기 전용!

- state의 배열을 업데이트 할 때는 새로운 배열을 만들어서 교체. 직접 변경 X!

- Immer 를 사용하면 불변성을 유지하며 상태관리에 용이하다!

 

3. 리듀서는 순수한 함수

- 리듀서가 이전 상태와 액션객체를 받았을 때 이전 상태를 건들지 않고 변화가 생긴 새로운 상태 객체를 만들어서 반환!

- 실행할때마다 다른 값이 나오는 비순수 작업은 미들웨어를 사용.

 

▶  useRef()와 useState()는 변수에 관련된 훅이다. 두 훅의 차이점은 무엇일까? (17조)

state 는 업데이트 후 렌더링이 이루어져야 하지만

useRef로 관리하는 변수는 설정 후 바로 조회할 수 있다!

 

▶  리액트에서의 렌더링이 정확하게 무슨 의미인지 모르겠어요. (24조)

리액트의 렌더링은 컴포넌트를 호출하고 리액트 엘리먼트를 반환하는것!

브라우저의 렌더링과는 다르다..! 

 

---

드디어 주특기 심화 주차의 끝..! 

W.A는 기본 질문 5개와 팀별로 2개의 추가질문을 작성하여 정리할 수 있었는데

난 리액트쪽이기에... 리액트 팀의 질문 위주로 보고 위에 정리했다 ㅎㅎ

다른 리액트 팀의 W.A를 하나하나 쭈욱 봤는데 리액트 기본주차의 개념 관련된 질문이 꽤 있었으나 이 부분은 이전 TIL에 정리한 적이 있어서 여기 TIL에는 따로 정리하지 않았다. 

(파이어베이스는 왜 쓰는지..리덕스는 무엇인지..등등 중복된 질문도 있다!)

 

그 외에 나의 이해력이 부족해서 정리하지 못한 다른 팀의 질문들도 있었다.

• 일반 함수 this 와 화살표 함수 this의 차이
• then 과 async-await 의 차이 
• Prototype이란?

이것들은 따로 찾아서 공부해봐야겠다!

 

우리 팀과의 마지막 협업이 이렇게 끝났다..

이 좋은 분들과 팀 프로젝트가 아닌 주차에 팀으로 만난게 아쉽다ㅠㅠ

물론 다른 분들과 새롭게 팀이 되는 것도 좋지만?!

운 좋게 또 같은 팀이 된다면 좋을지두..!!

 

아무튼, 그럼 20000.