본문 바로가기

분류 전체보기

 (136)
GSAP 스크롤 후 페이드인 처리 이미지를 클릭했을 때, 해당 이미지가 화면 중앙에 오도록 스크롤하고, 그 뒤 부드럽게 페이드인하는 기능을 만들고 싶었다.처음에는 window.scrollTo({ behavior: "smooth" }) 정도면 되지 않을까 했는데, smooth 스크롤이 브라우저 기본 기능이라서 지속 시간을 세밀하게 제어하기가 쉽지 않았다.그래서 GSAP의 ScrollToPlugin을 사용하기로 했다. 이걸 쓰면 원하는 시간(0.2초, 0.3초 등)을 직접 지정할 수 있었다. 그러나 또 다른 고민은 사용자에게 스크롤 애니메이션 과정을 아예 안 보이게 하고 싶다는 것이었다. 그래서 스크롤은 즉시 이동(애니메이션 없음)으로 처리하고, 10ms 정도 뒤에 페이드인 애니메이션을 실행했다.  간단한 예시 코드Home.tsx (일부 발..
Zustand로 글로벌 상태 관리 도입기 최근 프로젝트에서 헤더에 있는 플러스 버튼으로 그리드 레이아웃(예: 9열, 3열, 1열)을 전환하는 기능을 구현하려고 했다.처음에는 Home 컴포넌트 내부 상태만 바꾸면 되겠다고 생각해서 Home 컴포넌트에서 gridState라는 useState를 만들어 관리했는데, 막상 헤더에서 plus 버튼을 누르면 이 상태가 업데이트되지 않아 그리드 전환이 되지 않았다.처음엔 Prop Drilling으로 해결할까 했지만 구조가 복잡해질 것 같았다. 차라리 글로벌 상태 관리 라이브러리를 써보자 싶어서 Zustand를 도입했다. 써보니 Redux처럼 많은 보일러플레이트가 필요 없고, 훨씬 간단했다.대략적인 구현 과정은 이랬다:useGridStore.ts 파일을 만들고, gridState(예: "grid9", "grid..
Next.js에서 GSAP 최적화하기: 중앙집중화로 성능 개선 최근 Next.js 프로젝트에서 GSAP를 활용해 섹션마다 애니메이션을 적용했는데, 모바일에서 로딩이 너무 느려서 LCP가 30초 이상 찍히기도 하고, Hydration Error까지 발생했다. 다음 버전으로 마이그레이션을 했더니 어느 정도 성능은 좋아졌지만, 여전히 스크롤 트리거가 제대로 동작하지 않거나, 불필요하게 렌더링이 많이 일어나는 문제가 있었다. 특히 섹션별로 GSAP 초기화를 각각 따로 두면서 “use client”를 남발하다 보니 코드가 복잡해지고 성능이 떨어진 느낌이었다. 해결 방안처음에는 애니메이션 초기화만 따로 떼어 놓으면 되지 않을까 하고 단순하게 생각했다. 그런데 막상 적용해보니 각 컴포넌트에서 불필요한 “use client” 선언이 많고, ScrollTrigger를 초기화할 때마..
Next.js 15에서 발생한 Hydration 오류와 해결 과정 Next.js 15로 업데이트한 뒤, 예상치 못한 Hydration 오류가 발생했다. typeof window !== 'undefined' 같은 조건문을 사용하는 코드에서 특히 문제가 심했다. SSR과 CSR에서 HTML이 다르게 렌더링되면서 React가 이를 감지하고 경고를 띄웠다. 해결하기 위해 여러 가지 시도를 해봤지만, 결국 Next.js 14와 React 18.2.0으로 다운그레이드하는 것이 가장 안정적인 방법이었다.Hydration 오류의 주요 원인typeof window !== 'undefined'** 사용**: Next.js 15에서는 SSR과 CSR에서 typeof window 조건문이 불일치를 일으킬 가능성이 높아졌다.스타일 동적 변경: GSAP, Swiper 같은 라이브러리들이 CSR..
Next.js 14: Pages Router에서 App Router로 마이그레이션하기 1. App Router로 변경해야 하는 이유Next.js 14가 나오면서 공식 문서에서도 App Router를 권장했다. 기존 pages/ 폴더 기반의 Pages Router는 점차 유지보수 대상에서 밀려나고 있는 상황이었다.이번 기회에 프로젝트를 App Router로 마이그레이션하면서 변경해야 할 부분을 정리했다.주요 장점은 다음과 같았다.서버 컴포넌트 지원으로 클라이언트에서 불필요한 JS 실행을 줄일 수 있었다.레이아웃을 더 직관적으로 관리할 수 있었다.파일 기반 라우팅이 더욱 강력해졌다.TypeScript 없이도 사용 가능했다.대부분의 자료가 TypeScript 기반이었지만, 자바스크립트만으로도 App Router를 충분히 활용할 수 있었다.이번 마이그레이션 과정도 TS 없이 JavaScript만..
Next.js // GSAP ScrollTrigger 적용하면서 겪은 문제 해결 최근 프로젝트에서 Next.js에서 GSAP ScrollTrigger를 사용하려고 했는데, 여러 문제가 발생했다.SSR(서버 사이드 렌더링)과 GSAP가 충돌하면서 예상대로 동작하지 않았다.이 과정에서 발생한 오류들과 해결 방법을 정리해본다.1. ScrollTrigger가 정의되지 않는 오류❌ 문제Next.js에서 ScrollTrigger를 사용하려고 하면 ScrollTrigger is not defined라는 오류가 발생했다.이유를 찾아보니 Next.js는 서버에서 먼저 HTML을 렌더링하는데, GSAP의 ScrollTrigger는 브라우저에서만 실행되기 때문이었다.✅ 해결 방법useEffect 내부에서 import("gsap/ScrollTrigger")를 사용해 ScrollTrigger를 동적으로 로..
[MariaDB] MariaDB ERROR 2002 (HY000): Can't connect to local server through socket '/tmp/mysql.sock' (2) 어느날 재부팅후 mariadb 연결이 끈어진 경우가 자주 있다.여러번 홈브루와 mysql을 밀어내고 gpt보다 검색이 나을때도 있다는 점을 깨달았다.  brew services start mariadb로 서버를 시작하자 다음 에러가 났다.ERROR 2002 (HY000): Can't connect to local server through socket '/tmp/mysql.sock' (2) 또는mariadb bootstrap failed: 5: input/output error try re-running the command as root for richer errors. error: failure while executing; /bin/launchctl bootstrap gui/501 /users/(이..
JSON* JSON  :  마치 프로그래밍 언어들의 공용어어와 같음  JSON (JavaScript Object Notation)은 가볍고, 텍스트 기반의 데이터 교환 형식입니다. JSON은 속성-값 쌍 (key-value pairs)으로 구성된 데이터 객체를 표현하며, 주로 웹 애플리케이션에서 서버와 클라이언트 간에 데이터를 주고받을 때 사용됩니다. 원래는 자바스크립트에서 객체를 표현하는 방식이었지만, 현재는 대부분의 프로그래밍 언어에서 사용할 수 있도록 지원되고 있습니다.JSON의 특징은 다음과 같습니다:가볍다: JSON은 텍스트 기반의 형식으로, 복잡한 태그나 메타데이터를 포함하지 않아 전송할 데이터의 크기가 작습니다. 이로 인해 네트워크 대역폭을 절약하고, 더 빠른 데이터 교환을 가능하게 합니다.읽기 쉽다:..

티스토리툴바