https://yrnana.dev

그래서 `next.js` & `ssg`로 진행중인데 진도가 안 나간다...

ESLint를 이해하고 작성하는 방법

redux를 사용할때 비동기 처리가 필요하다면 툴킷에 내장된 redux-thunk를 사용하자. 그런데 만약 서버 데이터를 비동기로 받아오기 위해 redux와 비동기 미들웨어가 필요한 상황이라면 이를 redux로 해결한다는 생각을 고심해 볼 필요가 있다.

정말 좋은 기능들이 추가되어서 정리해본다.

공식 설명에도 computeExpensiveValue라고 설명하고 있다. 즉 비싼 연산을 언급하는 것이다. a === b는 비싼 연산이 아니다!

`react-query`는 전역 상태관리 라이브러리가 아니라 서버와 클라이언트 간의 비동기 작업을 쉽게 해주는 라이브러리다.

context api는 글로벌 상태관리 라이브러리를 대체할 수 없고, 여전히 많은 리액트 개발자들이 redux, mobx 등을 사용하고 있다.

요점은 사용자 관점에서 테스트를 작성하자는 것이다.

스크롤 이벤트는 브라우저가 스크롤 위치 변경을 렌더링 할때마다 트리거 되는 것이여서 자체적으로 rAF가 제공해주는것과 동일한 결과를 갖는다.

이런 제목을 어디서 본 것 같은데?라고 생각한다면 정상이다.

useImperativeHandle와 forwardedRef를 활용하면 부모 컴포넌트가 자식 컴포넌트의 함수를 호출하거나 값을 가져올 수 있다.

A 쿼리 인스턴스가 mount 됨네트워크에서 데이터 fetch 하고 A라는 쿼리키로 캐싱함이 데이터는 fresh 상태에서 staleTime(기본값 0) 이후 stale 상태로 변경됨A 쿼리 인스턴스가 unmount 됨캐시는 cacheTime(기본값 5min) 만큼 유지

offsetTop을 읽는 것 자체가 무조건 reflow를 발생시키지는 않는다. 하지만 offsetTop을 읽기 위해서 브라우저가 렌더링 큐에 쌓인 모든 작업을 수행하면서 reflow를 발생시킬 수 있다고 한다.

Table Of Contents는 목차를 의미하고, Intersection Observer API는 타겟요소가 상위요소(또는 viewport)와 Intersect 하는지 관찰하는 기능을 제공하는 Web API다.

결론부터 말하자면 오류를 잡으려면 린터, 스타일을 교정하려면 포맷터를 사용하자.

Code Spell Checker는 맞춤법 검사기 for vscode이다. 과제를 평가하다보면 가끔 코드에 오타가 보이곤 한다. 이런 오타들은 코드의 신뢰성을 떨어트리고, typescript를 사용하지 않는 경우 오타 때문에 헤메는 경우가 있다.

드물게 보이는 void(0)은 뭘까 검색해보니 undefined라고 한다. 재밌는건 void 0(6 bytes)이 undefined(9 bytes)보다 바이트를 덜 먹기 때문에 uglifyjs같은 minifier에서 undefined를 void 0으로 바꾸는 경우가

Finite State Machine(FSM)은 유한한 개수의 상태를 가질 수 있는 automata이다. 이런 오토마타는 한 번에 오로지 하나의 상태만을 가지고, 어떠한 event에 의해 한 상태에서 다른 상태로 변경될 수 있으며 이를 Transition이라고 한다.