웹에 파일을 업로드할 때 Drag & Drop 기능을 제공한다면 사용자 경험을 향상시킬 수 있다.React에서 Drag & Drop을 이용한 파일 업로드하는 방법을 구현해 보자.

처리해야하는 작업이 남아 있다면 아이콘을 활성화하여 사용자가 알 수 있도록 인터페이스(알림)을 제공하는 기능을 구현해보자.

사용자의 요청을 처리하는 기능 구현 중 사용자의 첨부 자료를 다운로드하여 확인해야하는 기능이 필요하다. React에서 파일을 다운로드 하는 방법을 구현하고 정리해보자.

앞서 미들웨어를 사용하여 비동기 처리를 통해 Redux 상태관리에 중앙집중화 할 수 있었다. 다만, 현재 프로젝트에서 관리하던 상태는 서버 상태로서 관리하는 것이 효율성효율성과 단순화에 좋다고 판단되었다. RTK Query를 학습하고 적용해보자.

앞서 구현한 Redux의 상태관리 로직은 Context API와 useReducer 훅을 사용한 방식과의 큰 차이점이 없다. Redux는 Context API에는 존재하지 않는 미들웨어(Middleware)가 존재한다. Middleware에 대해 학습하고 적용해보자.

React의 대표적인 상태관리 라이브러리 Redux에 대해 학습하고 사용해보자.

React에서 Framer Motion 라이브러리로 애니메이션 효과를 적용하던 중 의도치 않은 버그가 발생되었다. 어떻게 버그가 해결되었는지 그리고 왜 이런 버그가 발생했는지 기록하고 정리해보자.

Suspense와 lazy를 학습하고 적용하여 비동기 처리 로직을 단순화하고 성능을 개선해보자.

Recoil의 Selectors와 React Hook Form을 학습하며 ToDoList를 만들어 보자.

React의 상태관리를 도와주는 라이브러리 Recoil에 대해서 학습하고 첫 단계로 다크 모드를 적용해보자.

React Hook Form (RHF)은 React 기반 애플리케이션에서 폼을 쉽게 관리할 수 있도록 도와주는 라이브러리다.

Data Caching이란 반복적으로 엑세스되는 데이터를 빠르게 사용할 수 있도록 메모리에 일시적으로 저장하는 프로세스를 의미한다. 라이브러리 없이 직접 구현해보자.

웹 애플리케이션에서 데이터 패칭, 캐싱, 상태 관리 등의 복잡한 작업을 간소화하고 효율적으로 수행할수 있도록 도와주는 React Query에 대해서 학습하고 직접 사용해보자.

웹 앱을 구축하는 것은 복잡한 과정이다. 때때로 문제가 발생하게 되며, 이런 문제를 완전히 막을 수는 없다. 예상치 못한 방식으로 오류가 발생할 것을 예상하고 그에 대응할 준비가 되어 있어야 한다. 이를 위한 Error Boundary를 알아보고 직접 만들어 보자.

리액트에서 외부 API 호출할 때 사용하던 useEffect 훅과 로직을 커스텀 훅인 useFetch로 만들어주면 어떤 장점이 있을까? 직접 만들어 보자.

소셜 로그인으로 구현한 로그인 로직에서 동일한 사용자로 로그인을 시도했음에도 로그인이 잘되는 경우와 에러가 발생하는 경우가 발생했다. 성공이면 성공, 에러면 에러가 아닌 난감한 상황. 문제가 무엇인지 파악하고 해결해보자.

"상태가 변하면 리렌더링"으로만 이해하지 말고 상태 업데이트로 인해 React에서는 어떠한 과정이 일어나는지 조금 더 깊게 이해해보자.

브라우저가 HTML, CSS, 자바스크립트로 작성된 텍스트 문서를 어떻게 파싱(해석)하여 브라우저에 렌더링 하는지 알아보자.

Effect의 의존성 배열에 객체를 사용하면 생기는 문제점을 이해하고 내 코드를 수정해보자.

리액트 공식문서를 학습하면서 잘못된 Effect를 사용하고 있음을 알게 되었다. 불필요한 Effect를 사용하는 것은 아닐까? 라는 고민을 가져보자.