기초 개발 노트

최근 Next.js 프로젝트에서 GSAP를 활용해 섹션마다 애니메이션을 적용했는데, 모바일에서 로딩이 너무 느려서 LCP가 30초 이상 찍히기도 하고, Hydration Error까지 발생했다. 다음 버전으로 마이그레이션을 했더니 어느 정도 성능은 좋아졌지만, 여전히 스크롤 트리거가 제대로 동작하지 않거나, 불필요하게 렌더링이 많이 일어나는 문제가 있었다. 특히 섹션별로 GSAP 초기화를 각각 따로 두면서 “use client”를 남발하다 보니 코드가 복잡해지고 성능이 떨어진 느낌이었다. 해결 방안처음에는 애니메이션 초기화만 따로 떼어 놓으면 되지 않을까 하고 단순하게 생각했다. 그런데 막상 적용해보니 각 컴포넌트에서 불필요한 “use client” 선언이 많고, ScrollTrigger를 초기화할 때마..

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..

1. App Router로 변경해야 하는 이유Next.js 14가 나오면서 공식 문서에서도 App Router를 권장했다. 기존 pages/ 폴더 기반의 Pages Router는 점차 유지보수 대상에서 밀려나고 있는 상황이었다.이번 기회에 프로젝트를 App Router로 마이그레이션하면서 변경해야 할 부분을 정리했다.주요 장점은 다음과 같았다.서버 컴포넌트 지원으로 클라이언트에서 불필요한 JS 실행을 줄일 수 있었다.레이아웃을 더 직관적으로 관리할 수 있었다.파일 기반 라우팅이 더욱 강력해졌다.TypeScript 없이도 사용 가능했다.대부분의 자료가 TypeScript 기반이었지만, 자바스크립트만으로도 App Router를 충분히 활용할 수 있었다.이번 마이그레이션 과정도 TS 없이 JavaScript만..

최근 프로젝트에서 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 연결이 끈어진 경우가 자주 있다.여러번 홈브루와 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 (JavaScript Object Notation)은 가볍고, 텍스트 기반의 데이터 교환 형식입니다. JSON은 속성-값 쌍 (key-value pairs)으로 구성된 데이터 객체를 표현하며, 주로 웹 애플리케이션에서 서버와 클라이언트 간에 데이터를 주고받을 때 사용됩니다. 원래는 자바스크립트에서 객체를 표현하는 방식이었지만, 현재는 대부분의 프로그래밍 언어에서 사용할 수 있도록 지원되고 있습니다.JSON의 특징은 다음과 같습니다:가볍다: JSON은 텍스트 기반의 형식으로, 복잡한 태그나 메타데이터를 포함하지 않아 전송할 데이터의 크기가 작습니다. 이로 인해 네트워크 대역폭을 절약하고, 더 빠른 데이터 교환을 가능하게 합니다.읽기 쉽다:..

SOLIDSOLID는 객체 지향 프로그래밍에서 유지보수와 확장성을 높이기 위한 다섯 가지 설계 원칙 이 원칙들은 객체 지향 프로그램을 개발하고 설계할 때 유용함   다섯 가지 SOLID 원칙SRP (Single Responsibility Principle): 단일 책임 원칙한 클래스는 단 하나의 책임을 가져야 함, 클래스가 변경되어야 하는 이유는 단 하나의 이유.OCP (Open-Closed Principle): 개방-폐쇄 원칙기존 코드를 변경하지 않으면서] 기능을 확장할 수 있도록 설계해야 함.LSP (Liskov Substitution Principle): 리스코프 치환 원칙서브 타입은 언제나 기반 타입으로 교체가능ISP (Interface Segregation Principle): 인터페이스 분리 ..

스프링 프레임워크는 자바 언어를 위한 프레임워크. 스프링은 도메인 객체를 다루기 위한 프로그래밍 및 테스트(Test)를 위한 가벼운 솔루션을 제공하며, 이를 통해 기업급 애플리케이션 개발에 사용됨스프링은 여러 모듈로 구성되어 있음, 필요한 모듈만 선택해서 사용할 수 있음. 대표적인 모듈로는 스프링 코어(Spring Core), 스프링 MVC(Spring MVC), 스프링 데이터(Spring Data).스프링 프레임워크는 자바에서 가장 널리 사용되는 프레임워크. 다양한 개발 환경과 통합이 가능하다는 장점이 있다. 또한, 대규모 애플리케이션에서도 유지보수가 용이하고, 테스트 코드 작성이 쉽다는 점에서 많은 개발자들이 선호하는 프레임워크이다.   결국 스프링 프레임워크는 강력한 객체지향 프로그램을 만들기 위한..

다형성이란? 다형성이란 "객체가 여러 형태를 가진다" 라는 의미로 해석되며, 하나의 객체가 여러가지 타입으로 사용되는 것을 의미함다형성은 상속을 전제 조건으로함다형성을 위해 자바는 자식 클래스가 부모 클래스의 타입을 가질 수 있도록 허용즉, 부모 타입에 모든 자식 객체가 대입 될 수 있다.부모 타입 변수에 어떠한 자식 객체든 들어갈 수 있다, 라는 개념이 다형성이다. tips// 다형성을 통해 이종(다른)모음 배열을 구현할 수 있음.// 객체타입에서 다운캐스팅의 전제조건: 반드시 상속관계가 있어야 하며// 자식객체가 부모타입으로 업캐스팅 된 것만 내릴 수 있음// 즉 부모객체를 자식타입으로 내릴 수는 없다.// 다형성은 객체의 교혼성을 높여주며// 객체가 특정 부품객체에 종속되지 않도록 하게 해준다.  ..

final 키워드final을 해석하면 ‘마지막’ 이라는 뜻이지 않은가.final 키워드는 필드, 메서드, 클래스, 지역변수에 선언이 가능하다.그렇다면 마지막 필드, 마지막 메서드, 마지막 클래스일까?약간은 의미가 비슷하다고 할 수도 있겠다.마지막 필드와 지역변수 → 더 이상 값의 변경은 없다.마지막 메서드 → 더 이상 재 정의는 없다.마지막 클래스 → 더 이상의 개념의 확장은 없다.  tips  public static final int ( psfi 등으로 줄여서가능 )  자바의 상수 : 무조건 static final 같이 final 걍 상속을 다 막아버리는거임' final 필드public class Person { final String nation; //에러 String name; int age;..