기초 개발 노트

이미지를 클릭했을 때, 해당 이미지가 화면 중앙에 오도록 스크롤하고, 그 뒤 부드럽게 페이드인하는 기능을 만들고 싶었다.처음에는 window.scrollTo({ behavior: "smooth" }) 정도면 되지 않을까 했는데, smooth 스크롤이 브라우저 기본 기능이라서 지속 시간을 세밀하게 제어하기가 쉽지 않았다.그래서 GSAP의 ScrollToPlugin을 사용하기로 했다. 이걸 쓰면 원하는 시간(0.2초, 0.3초 등)을 직접 지정할 수 있었다. 그러나 또 다른 고민은 사용자에게 스크롤 애니메이션 과정을 아예 안 보이게 하고 싶다는 것이었다. 그래서 스크롤은 즉시 이동(애니메이션 없음)으로 처리하고, 10ms 정도 뒤에 페이드인 애니메이션을 실행했다.  간단한 예시 코드Home.tsx (일부 발..

최근 프로젝트에서 헤더에 있는 플러스 버튼으로 그리드 레이아웃(예: 9열, 3열, 1열)을 전환하는 기능을 구현하려고 했다.처음에는 Home 컴포넌트 내부 상태만 바꾸면 되겠다고 생각해서 Home 컴포넌트에서 gridState라는 useState를 만들어 관리했는데, 막상 헤더에서 plus 버튼을 누르면 이 상태가 업데이트되지 않아 그리드 전환이 되지 않았다.처음엔 Prop Drilling으로 해결할까 했지만 구조가 복잡해질 것 같았다. 차라리 글로벌 상태 관리 라이브러리를 써보자 싶어서 Zustand를 도입했다. 써보니 Redux처럼 많은 보일러플레이트가 필요 없고, 훨씬 간단했다.대략적인 구현 과정은 이랬다:useGridStore.ts 파일을 만들고, gridState(예: "grid9", "grid..