잡담
이번주 주특기 심화반도 어찌저찌 시간이 흘렀다. 시간이 지날 수록 리액트 구조에 대해 이해가 점차 늘기 시작하는걸 느끼지만, 아는 만큼 보인다는 말이 있듯이 내가 배워야 하는 것들이 산더미처럼 불어남을 느낀다..
과제를 진행 하면서 리덕스와 미들웨어, db 저장소에 대한 데이터의 흐름을 좀 더 이해할 수 있었다.
역시 내가 먼저 구상을 해보는 것과, 무지성 으로 강의를 듣는 것의 차이를 느낄 수 있었다. 강의를 듣기 전, 나라면 어떻게 구현할 것인지. 먼저 생각 해보는 시간을 갖는것이 강의를 이해하기 수월하다는 것을 깨달았다!!
내용정리
1. 파라미터란?
특정 id나 이름을 가지고 조회를 할 때 사용하게 되고,
쿼리의 경우는 어떤 키워드를 검색하거나 요청할 때 필요한 옵션을 전달 할 때 사용된다.
파라미터는 일반적으로 특정id나 이름을 가지고 조회할때 사용한다. 그 방법으로는
리액트의 라우팅 라이브러리를 사용해 (react-router-dom) Match 객체 에 접근하여 URL 파라미터를 받아올 수 있다.
<Route path="/somepath/:someInfo" component={SomeComponent} />이렇게 path에 파라미터를 추가할 수 있고,
여기에
http://localhost:3000/somepath/Hello
이런식의 요청을 받게 된다면
param 값은 {someInfo: "Hello"} 가 된다. 이를 원하는 페이지 에서 match를 받아와 match.params.seomInfo를 출력하면 Hello가 나온다.
2, 디바운스
- 디바운스란 무엇인가?
- 이벤트가 일어나면 일정시간 기다렸다가 이벤트를 수행하는 것
- onChange 이벤트에서 키값 하나하나 입력할 때마다 api 콜을 날리면 서버부담을 줄 수 있음. 그걸 막으려고 하는 것.
- 예시
- ㄱ | 가 | 감 |1초| 감ㅅ | 감사 | 감샇 |2초|
- 이렇게 검색한다고 했을때 이벤트에서 ㄱ, 가 이벤트는 삭제하고 미지막 이벤트를 실행함
- 활용사례
- 연관검색어
- 감사합니다 검색한다고 했을 때 가나 감사합 검색어는 필요없음
- 이전 이벤트 삭제해도 괜찮은 예시가 적합함
- 연관검색어
- 이벤트가 일어나면 일정시간 기다렸다가 이벤트를 수행하는 것
3. 쓰로틀
- 쓰로틀이란 무엇인가?
- 일정 기간(시간)동안 일어난 이벤트를 모아서 주기적으로 1번씩 실행
- 예시
- ㄱ | 가 | 감 |1초| 감ㅅ | 감사 | 감샇 |2초|
- 이렇게 검색한다고 했을때 이벤트에서 ㄱ, 가 이벤트는 삭제하지 않고 1초에 다다른 마지막 이벤트를 실행
- 활용사례
- 스크롤 높이에 따라 게이지 채워주는 것
- 이전 이벤트 삭제하지 않고 천천히 실행해주는 게 좋다
4. s3 버킷에 배포한 뒤, 어떤도메인.com이 아닌 어떤도메인.com/login 등 페이지로 이동하면 왜 오류가 날까?
- 리액트의 라우팅 방식이 전통적 링크 방식이 아니기 때문. (전통적 링크 방식의 경우 주소창에 적힌대로 html 파일을 받아 보여준다면, SPA는 하나의 html을 두고 주소창에 적힌 대로 내용을 갈아끼우는 방식)
- s3 버킷의 정적 웹사이트 호스팅은 /login 경로에 맞는 html을 찾는 거고, 해당 html파일이 없기 때문에 404 에러가 나는 것.
- 에러 해결 방법은? s3가 어떤 상황이건 index.html을 보도록 설정해주는 것
5. 리액트에서 각 페이지 컨텐츠에 맞는 미리보기(사이트 이미지, 사이트 설명 등)를 띄워주려면 어떻게 해야할까?
리액트에서 각 페이지 컨텐츠에 맞는 미리보기(사이트 이미지, 사이트 설명 등)를 띄워주려면 어떻게 해야할까요?
6. 리덕스에서 미들웨어 청크의 역할은 뭘까?
리덕스 청크는 리덕스 상에서 비동기 작업을 위한 중간 역할을 수행함. 리덕스 청크없다면 pi 요청, 수신 등이 원할하지 않을 때 리듀서 데이터가 제대로 업데이트 되지 않을 가능성이 있음. 이를 막고자 리덕스 청크라는 단계를 만들어 데이터 송/수신 작업을 완료 후 리듀서 스테이트를 업데이트함. 결과적으로 리덕스 청크를 이용하면 리덕스 내에서 원할한 비동기 작업을 진행할 수 있음.
7. 프로미스는 정확히 말하면 비동기가 아닙니다. 비동기와 프로미스는 각각 무엇일까?
비동기는 동시에 여러 가지 작업을 할 수 있는 개념이고 Promise는 비동기 작업의 단위를 뜻하며 비동기 작업을 쉽게 관리할 수 있음.
8. TDZ(Temporal Dead Zone/일시적 사각지대)란?
변수 실행 컨택스트는
- 선언: 이런 변수가 있다고 선언하는 것
- 초기화: 메모리에 선어한 변수가 차지할 공간을 확보하는 것
- 할당: 찜해놓은 공간에 실제 값을 넣어주는
선언, 초기화, 할당 3단계를 거칩니다. 이 과정에서 변수 선언만 되어 있고 초기화는 되지 않은 상태에 특정 변수를 가져다 쓰려고 시도했으나 참조할 수 없는 상태를 TDZ라고함.
이와 연관된 개념은 변수를 만드는 var, let, const인데,
선언과 초기화를 동시에 하고 호이스팅하는 var와 달리
선언만 먼저 하고 초기화는 나중에하는 let, const 사용시 문제가 생김
