무제 제목 없는 코딩 블로그

비동기 데이터 관리를 Zustand로 캡슐화한 뒤, 그 과정에서 드러난 전역 상태 기반 내비게이션의 한계를 직면했다. Zustand가 UI 상태를 충분히 잘 다루었지만, "URL이 없는 페이지 전환"은 새로고침, 뒤로가기, 북마크 모두를 무너뜨렸다. 결국 React Router를 도입하고 폴더 구조까지 Feature-based로 재편하면서 진짜 웹 애플리케이션다운 구조를 갖추게 되었다. 총 세 편 중 3편(리팩토링)을 상태의 성격에 따라 구별하여 작성했다.[Portfolio #1] React로 웹사이트 구성하고 Tailwind로 디자인 입히기[Portfolio #2] Firebase 연동과 트러블 슈팅 (CRUD & 보안)[Portfolio #3-1] Zustand 도입으로 동기적 UI 상태 관리 리팩..

컴포넌트끼리 의존성이 커짐에 따라 상대적으로 가벼운 Zustand를 통해 Props Drilling 문제를 해결하려 했다. 단순하게 전역 상태 관리를 Zustand로 교체하는 것에 그치지 않고, 상태의 성격(동기 vs 비동기)에 따라 관리 전략을 다르게 가져갔다. 총 세 편 중 3편(리팩토링)을 상태의 성격에 따라 구별하여 작성했다.[Portfolio #1] React로 웹사이트 구성하고 Tailwind로 디자인 입히기[Portfolio #2] Firebase 연동과 트러블 슈팅 (CRUD & 보안)[Portfolio #3-1] Zustand 도입으로 동기적 UI 상태 관리 리팩토링하기[Portfolio #3-2] Zustand 도입으로 비동기적 서버 데이터 관리 리팩토링하기+ React Router ..

전역 후 개발 공부를 위해 기획했던 포트폴리오 웹사이트를 리액트로 구축하고, 디자인하기로 하였다. 프로젝트의 완성 단계인 지금 회고록을 작성하고자 한다. 총 세 편으로 프로젝트 회고록을 작성할 것이며 순서는 다음과 같다.[Portfolio #1] React로 웹사이트 구성하고 Tailwind로 디자인 입히기[Portfolio #2] Firebase 연동과 트러블 슈팅 (CRUD & 보안)[Portfolio #3-1] Zustand 도입으로 동기적 UI 상태 관리 리팩토링하기[Portfolio #3-2] Zustand 도입으로 비동기적 서버 데이터 관리 리팩토링하기 + React Router & 폴더 구조 리팩토링하기 1편에서 React와 Tailwind CSS로 그럴싸한 외관을 완성했다. 하지만 데이..

전역 후 개발 공부를 위해 기획했던 포트폴리오 웹사이트를 리액트로 구축하고, 디자인하기로 하였다. 프로젝트의 완성 단계인 지금 회고록을 작성하고자 한다. 총 세 편으로 프로젝트 회고록을 작성할 것이며 순서는 다음과 같다.[Portfolio #1] React로 웹사이트 구성하고 Tailwind로 디자인 입히기[Portfolio #2] Firebase 연동과 트러블 슈팅 (CRUD & 보안)[Portfolio #3-1] Zustand 도입으로 동기적 UI 상태 관리 리팩토링하기[Portfolio #3-2] Zustand 도입으로 비동기적 서버 데이터 관리 리팩토링하기 + React Router & 폴더 구조 리팩토링하기 웹사이트 초기 기획 실행 기술 선정: React와 TypeScript를 이용하여 컴포..