React

React Fiber에서 lane 모델이 도입된 이유와 이를 통해 해결하고자 하는 것이 무엇인지 알아보자.

Fiber reconciler 는 위의 Stack reconciler 가지고 있던 취약점을 보완하기 위해 만들어졌다.

Next.js 캐싱을 통해 웹서버 성능을 개선하기 위한 방법들을 알아본다.

HOC는 React에서 컴포넌트 로직을 재사용하기 위한 패턴이다.

frontend에서 여러 step 들을 통해 상태를 수집하고, 결과 페이지를 보여주는 다음과 같은 "설문조사" 패턴이 있다.

staleTime은 얼마나 오래 response를 fresh(or not stale)한 것으로 여길지를 정의한다. response가 fresh 하다면 새로운 request를 보낼 필요가 없다.

Headless라는 개념은 스타일링을 담당하게 되는 부분을 과감하게 제외하고 상태와 관련된 부분만을 다루자고 이야기한다.

useImperativeHandle은 ref를 사용할 때 부모 컴포넌트에 노출되는 인스턴스 값을 커스텀할 수 있게 한다.

변경에 유연한 컴포넌트를 만들기 위해서는 컴포넌트를 적절하게 분리해야 한다. 이를 위한 방법으로 다음 세가지를 정리한다.

dot notation export 패턴을 사용하여 modal component를 구현한 예제를 살펴본다.

React Server Component Demo를 사용해보고 어떻게 동작하는지 확인해본다.

리액트 커스텀 훅을 테스트하기 위해서 여러 가지 방법을 사용할 수 있다. 그중에 testing-library를 사용하여 진행한다.

React Testing Library는 React 컴포넌트를 테스트하기 위해 설계된 라이브러리다.

Recoil은 기존의 상태 관리 라이브러리들과 무엇이 다른가?

우리가 사용하는 Store가 상당 부분 API 통신을 위한 코드들로 비대해진다. API 통신과 Server Side 상태 관리를 위한 더 나은 방법은 없을까?

RSC는 무엇이고 왜 등장하게 되었는지, 어떻게 사용하는지 살펴본다.

Prefetch는 브라우저가 idle time에 미래에 사용될 리소스들을 미리 다운로드 받아서 캐시하여, 미래에 방문할 페이지의 로딩 속도를 빠르게 해주는 기능이다.

useEffect와 useLayoutEffect를 비교해보고, 언제 useLayoutEffect를 사용해야 하는지 알아본다.

React Query 에서 지원하는 mutations 사용방법에 대한 정리

react query 에서 지원하는 infinite query 사용방법에 대한 정리

React에서 Page 단위로 JS 번들을 분리할 때 다음과 같이 Page 컴포넌트 번들의 lazy loading을 구현한다.

Performance optimizations 를 위한 useCallback, useMemo 사용은 공짜가 아니다.

React Polymorphic Components 구현

SWR이란? | useSWR 사용 | 그 밖에...

useRef는 일반적인 declarative한 React data flow에서 벗어나서 DOM 엘리먼트에 접근할 수 있는 방법을 제공하여 imperative하게 DOM을 제어할 수 있게 해준다.

react 코딩 컨벤션

inject를 대체할 useStores hook

MobX를 React와 사용하면 쉽게 State를 관리할 수 있고, setState도 사용하지 않아도 된다.

MobX는 State관리 라이브러리이다. 장단점 및 사용방법에 대하여 정리하였다.

Jest, Enzyme 을 사용한 이유 | Setup | Enzyme을 통한 컴포넌트 렌더링 | 스냅샷 테스트

Hooks가 만들어진 이유 | State, Effect, Custom Hook

React.memo와 렌더링 성능 | props 비교 커스터마이징 | React.memo는 언제 사용해야 하나

전체 App의 최상위 container 컴포넌트에서 store의 변경 이벤트를 구독하고, 하위 컴포넌트에 데이터를 전달한다.

Action, Reducer, Store

Redux는? | MVC패턴의 단점 | Flux 패턴