항해 99 - 2022.02.10.THU (팀과제)

이번 챕터 일정

• 02/04 (금) 21:00 까지 : S.A 제출 완료 ✅
• 02/07 (월) 14:00 : 아이엘포유 협력사 채용 세션 ✅
• 02/08 (화) 20:00 : ‘쌀 팔다 개발자’ 김병욱님 특강 ✅
• 02/08 (화) ~ 02/09 (목): 담당 매니저와 1:1 선택 면담 ✅
• 02/09 (수) 저녁 : 제4회 항해톡 ✅
• 02/10 (목) : 주특기별 튜터님을 모셔서 마무리 하는 Wrap up✅
• 02/10 (목) 21:00까지 : 주특기 심화 주차 개인/팀 과제 제출 완료✅
• 02/11 (금) 09:00 : 미니 프로젝트 주차 발제

오늘 내가 할 일

• 팀과제 제출 완료✅
• 개인 과제 제출 완료 ✅
• 좋아요 기능 구현 할수 있으면 구현 ❎

어제 늦게 자서 피곤해 
결국 좋아요 기능은 성공하지 못했다 꼭 성공하고 싶다...

 

<팀 과제 정리>

 

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

• index.js가 연결되어야지만 배포가 가능
• react router를 사용하여 url 관리하고 있었는데 루트 url 즉 BASE가 되는 url의 경우에는 index.js를 연결시켜 배포하기 때문에 새로고침을 해도 index.js가 배포되지만 다른 특정 url에서 새로고침을 하면 해당 url에 맞는 js를 찾으려고 하기 때문에 오류 발생

---

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

📌 업로드 시 onChange나 ref 활용하여 값을 받아온 다음, 리덕스에 반영

• initialState - preview:null로 준 다음 넘겨준 값을 preview에 넣어주고,
• 노출하고자 하는 페이지에서 useSelector로 preview 값을 다시 받아와서 미리보기 이미지 태그 src에 꽂아줌!
• preview 값이 null일 경우, 기본 이미지를 노출하고 preview에 값이 있을 경우 preview를 그대로 넣어줌

---

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

📌 리덕스가 지니고 있는 핵심 기능이다. 액션이 디스패치 된 다음, 리듀서에서 해당 액션을 받아서 업데이트하기 전에 추가적인 작업을 할 수 있다.

📌 추가 작업

• 특정 조건에 따라 액션 무시
• 액션을 콘솔에 출력, 서버에 로깅
• 액션이 디스패치 됐을 경우 : 수정 → 리듀서에 전달
• 특정 액션 발생 : 다른 액션 발생되도록 설정 가능
• 특정 액션 발생 : 특정 자바스크립트 함수 실행 가능

---

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

📌 비동기 작업

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

📌 프라미스

• 비동기 연산이 종료된 후에 결과를 알기 위해서 사용 하는 객체이다.
• 즉 비동기 처리 시점을 좀더 명확하게 표현하기 위해서 도입된 비동기 처리 패턴이다

---

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

📌 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 TDZ(Temporal Dead Zone)라고 한다.

• 변수 선언 이전에 변수를 참조하는 영역으로 해당 영역에서 선언 이전에 참조한 변수는 참조 에러가 발생한다

---

🔐 immer와 불변성의 원리

📌 자바스크립트의 불변성

• 불변성을 지켜주지 않을 경우, 값이 변경되어도 감지를 하지 못 한다.
• 변경된 값을 감지 못할 경우, React.memo 에서 서로 비교하며 최적화하는 것이 불가능하다.

📌 immer

• 객체 구조가 깊어질 경우, 간단하게 불변성을 유지할 수 있게 업데이트 해줄 수 있는 라이브러리 이다.
• 라이브러리 설치 : yarn add immer
• 리액트에서 immer 사용하기 : import produce from ‘immer';

---

🔐 모듈에서 actionCreators로 묶어서 export 한 이유

📌 액션 생성 함수나 미들웨어를 묶어주지 않으면 하나하나 export, import를 해야 함.

• 1~2개 정도면 괜찮겠지만 기능이 늘어나고 import 해주어야 할 컴포넌트가 많을 경우 비효율적일 수 있음
• 애초에 모듈에서 묶어서 export 해준 다음,
• 컴포넌트들에서는 actionCreators as postActions, actionCreators as userActions로 별명을 지어 구분지어주면 훨씬 효율적임

---

🔐 React.Fragment 사용 이유

📌React는 컴포넌트들을 조합하여 페이지를 구성함.

• 만약 div로 감쌀 경우 컴포넌트 조합 이후에 불필요한 태그가 늘어나면서 큰 프로젝트를 진행할 경우에 DOM 구조가 복잡해질 수 있음
• +) Fragment 대신에 빈 태그를 사용해도 됨
• Fragment는 key값을 설정할 수 있지만,
• 빈태그는 key값 설정 불가

---

🔐 반응형 웹 페이지를 만드는 방법

📌 뷰포트(viewport)

• 사용자에게 보여지는 웹 페이지의 영역으로 반응형 웹 페이지를 만들 때 고려되는 사항이다. 즉, 화면이 바뀔 때 마다 화면에 맞춰 스타일이 바뀌게 되는 것을 말한다.
• 뷰포트 단위
  • vh
  • vw
  • vmin
  • vmax

📌 미디어 쿼리(media query)

• 미디어 쿼리를 사용하면 콘텐츠(content)를 별도로 변경하지 않아도 웹 페이지에 접속하고 있는 기기에 알맞은 형태로 스타일을 조정한다.

 

---

🔐 Debounce와 Throttle의 차이점

📌 많은 이벤트가 한 번에 발생할 때 관리할 수 있는 방법이다.

• debouncce
  • 이벤트가 일어나면, 일정 시간을 기다렸다가 이벤트를 수행해요! 일정 시간 내에 같은 이벤트가 또 들어오면 이전 요청은 취소함
• throttle
  • 일정 시간 동안 일어난 이벤트를 모아서 주기적으로 1번씩 실행해준다