Algorithm Cinema

🔍 서론React Query는 클라이언트 애플리케이션이 서버와 통신할 때 데이터 페칭, 캐싱, 동기화 및 상태 관리를 단순화하기 위해 개발된 라이브러리입니다.이번 포스팅에서는 **“왜 React Query를 사용하는가?”**라는 질문을 시작으로, 기존 방식과 React Query 방식의 코드를 비교하여 개선된 부분을 설명하겠습니다. 아래의 코드는, 패션 아카이브 프로젝트에서의 서버 통신시에 기존에는 React Query를 쓰지 않고 그냥 axios로 처리를 하는 법과, React Query를 써서 서버와의 통신을 할때의 차이점을 공부한 내용입니다. 모든 코드가 아닌 핵심 코드만 넣겠습니다 ( 보시는 분의 가독성을 위하여,,) 1️⃣ 기존 코드 리뷰 🔧 기존 코드 (Axios + useEffect 방식..

서론 프론트엔드 프로젝트를 진행하다 보면 특정 이벤트(버튼 클릭, 항목 선택 등)에서 발생한 데이터를 로컬 스토리지에 저장해야 하는 경우가 종종 있습니다. 특히 React에서 이러한 작업을 할 때, 어떤 컴포넌트가 해당 작업을 수행할 책임을 가져야 하는지를 고민하게 됩니다. 이번 내용은 예전에 짰던 코드를 리팩토링하는 과정에서, 로컬스토리지의 책임을 최상위 컴포넌트가 다 지고 있는데 마음에 들지 않아서 분리를 시키려고 공부를 했던 내용입니다. 이번 글은 제가 진행하고 있는 패션 아카이브 프로젝트에서의 최상위 컴포넌트와 하위 컴포넌트 간의 책임 분리에 대해 알아보고, 예제 코드를 통해 올바른 방식으로 구현하는 방법을 설명하겠습니다.  상황React 프로젝트에서 신발 쇼핑몰을 구현하는 과정에서, 사용자가 신..

내가 개인적으로 혼자 하고 있는 자기의 신발 컬렉션들을 전시 및 판매하는 패션 아카이브 프로젝트 코드를 짜면서 공부한 내용이다.  https://github.com/ChoiTheCreator/TheFashionArchive #리액트 코드를 짜다가 무한루프에 빠질수가 있을까?물론 알고리즘 공부하면서 코드 잘못짜서 while문에 늪에 빠진적은 있었을것이다. 그러나 내 개인프젝에서 렌더링이 아예 안되는 이런 경험은 처음이었다.   먼저 화면들을 보자면 아래와같다.  #메인화면여기서 장바구니 (Carts)를 클릭하면,  장바구니 페이지로 넘어가는데, 여기서 무한루프가 발생해서 크롬 브라우저가 먹통이 되는 것이다.  #장바구니 페이지  #무엇이 문제였을까?  1. Redux 상태 관리 특성: Redux는 상태(s..