2022년 06월 05일 멀어진 자스랑 다시 친해지기

심화주차 팀과제 1번 확실히 알고 넘어가기

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

내가 이해한 것

: SPA의 동작방식에 의하여 

첫 페이지를 로딩하기 위해서 설정해놓은 어떤도메인.com으로 가야만 서버에서 그에 필요한 정적파일()들을 받아온다.

-> 이거 솔직히 이해안감

 

Custom Hook

왜 쓸까? 중복 로직 제거

어떻게 쓸까? 자바스크립트 함수에서 같은 로직 공유할  떄 다른 함수로 분리하는 것과 똑같다.

중복 로직이 담긴 컴포넌트를 분리하는데  Hook 또한 함수이기 때문에 인자를 넘기는 등의 같은 방법을 사용할 수 있다.

• 상태를 리턴한다
• 커스텀 훅의 이름은 use로 시작해야한다.
• 각 커스텀 훅의 state는 독립적이다.(공유ㄴㄴ)

 

인간 JS엔진 되기1

• 함수와 함수 호출, 고차함수
• 호출 스택 분석

동기 비동기

js는 기본적으로 비동기 처리를 할 수 있다. setTimeout이나 jquery의 ajax같은 web api를 이용한다.

문제는 변수에 값이 들어오기 전에 다음 코드를 실행시켜서 할당이 되지 않은 채로 출력되버리는 것이다.

그걸 해결하기 위해 콜백함수가 나왔다.

함수의 인자로 함수를 보내서 서버로부터 원하는 데이터가 받아와지면 콜백함수를 실행을 시키는 방법이 나왔다.

하지만 콜백 함수 내에서에 비동기 작업이 여러 번 필요할 때 꼬리에 꼬리를 무는 콜백함수 지옥이 펼쳐졌다.

콜백함수를 구분해서 떼어놓는 방법으로 가독성을 높였다.

그 뒤 나온 것이 promise.

promise는 비동기 연산이 종료 후 미래의 결과값을 담은 객체이다. 미래의 결과는 어찌될지 아무도 모른다.

pending(대기, 초기상태), fulfilled(연산 이행 또는 완료라고 해석해도 무방), refected(연산 실패) 3가지 상태가 있다.

New Promise()로 감싸준 함수는 새로운 promise 객체를 반환해준다.

이 함수는 resolve냐 rejected 냐에 따라서 그 결과를 then() 또는 catch()로 받을 수 있다.

그렇게 then으로 쭉쭉 이으면 promise chaining 이다.

 

async와 await는 promise를 좀더 쉽고 편하게 사용하기 위해 나왔다.

async는 항상 promise를 반환한다.

Await는 await가 붙은 promise의 값이 받아질 때 까지 실행을 멈췄다가 받아진 뒤부터 실행을 재개한다.

 

전역 state 관리

contextAPI - 상태 변화 많이 없는 곳에만 쓴다. 효율 bad.