Suzie's Blog

문제상황 : Next.js 15에서 i18next를 설치하자 "TypeError: URL.canParse is not a function"오류 발생.이 에러는 "URL.canParse()"라는 함수가 브라우저나 Node.js 환경에서 아직 정식으로 지원되지 않아서 발생.특히 "i18next", "resourcesToBackend" 같은 라이브러리 내부에서 이 함수를 사용하는 경우, 별도로 처리해주지 않으면 앱이 크래시가 남.💡 해결 방법 : 간단한 폴리필(Polyfill) 추가하기다행히 이 문제는 "폴리필(Polyfill) 을 통해 쉽게 해결 가능.폴리필이란?지원되지 않는 기능을 흉내 내는 코드다음 코드를 앱 진입점 (예: app/layout.tsx 또는 app/page.tsx)상단에 추가하면 에러메세..

개발할때 유용하게 사용한 useEventListener hook 이다. (Next.js, TypeScript)src > utils > hooks 에 저장 후 import하여 사용 하면 코드도 간편해지고 편함.import { useEffect, useRef } from "react";function useEventListener( eventType: K, handler: (event: WindowEventMap[K]) => void, element: HTMLElement | Document | Window | null = typeof window !== "undefined" ? window : null) { const savedHandler = useRef void | null>(n..

최근 Next.js로 프로젝트를 진행하면서 이미지를 저장하는 두 가지 방식이 있는 걸 알게 되었다.1. public 폴더에 저장하기2. src/assets 에 저장하기둘 중 하나만 쓰면 되는 거 아니야?라는 생각이 들었지만, 상황에 따라 둘 다 쓰는 게 유리할 수 있다는 것을 알게 되어 공유하고자 한다. 일단 특징을 표로 정리해 보았다.특징publicsrc/assets사용 방식URL 접근 가능 (import 도 가능)Import 로 불러옴캐싱 문제업데이트 된 이미지가 이전 이미지와 파일명이 같다면 옛날 파일을 보여줄 수도 있음해시된 파일명으로 최신 파일만 표시번들링번들링 되지 않음번들링과 최적화 자동으로 진행성능번들 크기에 영향을 안줌자주 사용하면 번들 크기가 커질 수 있음최적화Next/image 와 함..