Algorithm Cinema

Next.js는 클라이언트에서 실행되는 React 기반의 프레임워크지만, 동시에 서버에서도 실행될 수 있는 환경을 제공한답니다.  따라서 window 객체나 localStorage 같은 브라우저 전용 기능을 사용할 때는 서버 환경을 고려해야 합니다. Vite만 쓰던 저에게 가장 어려운 부분이 이거였습니다. 서버의 존재를 계속 고려해야한다는   이번 글에서는 window 객체의 역할과 Next.js에서 localStorage와 같은 브라우저 전용기능을 활용할 때 서버 동작을 어떻게 고려해야하는지 학습한 내용을 정리합니다.window 객체란? 어디서 들어봤는데 이거 window 객체는 브라우저 환경에서만 존재하는 전역 객체입니다. 즉, 클라이언트(브라우저)에서만 접근 가능하고, 서버에서는 존재하지 않습니다...

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