React 애플리케이션이 점점 더 복잡해짐에 따라, 초기에 사용하던 패턴들이 점차 한계를 드러낼 수 있습니다. 예를 들어, 간단한 MVP는 잘 작동하지만 시간이 지나면서 성능 문제나 상태 관리의 복잡성이 커질 수 있습니다. 이러한 문제는 주니어 개발자가 시니어로 성장하면서 마주하는 자연스러운 과정입니다. 다행히도, React에서 복잡한 문제를 해결할 수 있는 고급 기술들이 존재합니다. 이번 글에서는 useCallback과 ref의 효과적인 활용법부터 Suspense를 활용한 데이터 패칭, 가상화, 에러 핸들링, 성능 최적화까지 총 15가지 기법을 소개합니다. 글을 다 읽고 나면 더 탄탄한 React 개발 역량을 가질 수 있을 것입니다. 1. useCallback을 사용하여 서비스 참조 유지하기useCal..

window.matchMedia를 활용하여 React에서의 반응형 웹 구현을 위한 코드입니다.import { useEffect, useState } from 'react';export default function Home() { const [isMobile, setIsMobile] = useState(false); useEffect(() => { const mediaQuery = window.matchMedia('(max-width: 768px)'); const handleChange = () => setIsMobile(mediaQuery.matches); mediaQuery.addEventListener('change', handleChange); setIsMobile(med..

Error: Unexpected token I in JSON at position 0  NextJS로 개발하실때 이런 에러 한번씩 뜨실겁니다.  이 에러에 대해서 처음 보시거나 모르시는분들은 프론트에서 문제를 찾으실겁니다. 막상 확인해보면 api 요청하는데 요청값이 잘못 들어가서 Backend server에서 에러가 나서 생긴 오류입니다. 저같은 경우도 아래의 에러 메세지 처럼 backend server에서 생긴 문제였습니다.

Next.js에서 useSearchParams() 사용 시 주의사항문제 상황다음과 같은 에러 메시지를 보신 적 있나요?useSearchParams() should be wrapped in a suspense boundary at page "/loginPage". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout 이 메시지는 "/loginPage"에서 useSearchParams()를 사용할 때 Suspense 경계로 감싸지 않아 발생하는 오류입니다. Suspense는 리액트 18버전에서 도입이 되었습니다. 다음 링크를 참조해주세요.-> https://ko.react.dev/reference/react/Suspense..

ESLint: A control must be associated with a text label.(jsx-a11y/control-has-associated-label) React 프로젝트에서 자주 마주치는 ESLint 오류 중 하나인 "A control must be associated with a text label.(jsx-a11y/control-has-associated-label)"에 대해 알아보고, 이를 해결하는 방법을 공유하려고 합니다.오류의 의미이 오류는 웹 접근성(Web Accessibility)과 관련이 있습니다. 간단히 말해, 사용자 인터페이스의 컨트롤(예: 버튼, 입력 필드)에 연관된 텍스트 레이블이 없을 때 발생합니다. 텍스트 레이블은 스크린 리더 사용자를 포함한 모든 사용자가 해..

NextJSnext.config.js에서 remotePatterns까지 셋팅해줬는데!!! Image 태그 src에 도메인주소를 넣으면 이미지가 안나오신다면 Loader를 사용하셔야 합니다! (Solution code)const src = `${API}/user/photo/${blog.postedBy.username}`; src} src={src} width={500} height={500}/> Next.js에서 이미지 로더(Loader) 이해하기Next.js에서 이미지 로더(Loader)가 어떻게 동작하는지에 대해 알아보겠습니다. 특히, 이미지 최적화와 관련된 부분을 중점적으로 다뤄보겠습니다.이미지 로더(Loader)란 무엇인가?Next.js에서 이미지 로더는 이미지의 URL을 생성하는 함수입니다..

Next.js 버전 14에서 도메인 설정을 remotePatterns로 변경하는 방법Next.js의 새로운 버전 14에서 도메인 설정이 어떻게 변경되었는지에 대해 알아보겠습니다. 특히, 이미지 호스팅과 관련된 설정을 하시는 분들에게 유용한 정보가 될 것 같습니다.Next.js 14에서의 주요 변경 사항Next.js 버전 14에서는 기존의 domains 설정이 deprecated(더 이상 사용되지 않음)되고, 새로운 remotePatterns 설정으로 대체되었습니다. 이는 next.config.js 파일에서 설정할 수 있습니다. 이 변경으로 인해 이미지 호스팅 설정을 더 유연하고 간편하게 할 수 있게 되었습니다.설정 변경하기기존에 domains 설정을 사용하던 분들은 아래와 같은 형식으로 설정을 하고 있었..

NextJS build Error: Failed to fetch dataserver component에서 SSR을 위해 데이터를 패치할때 dev모드에서는 정상적으로 작동하던것이 build할때 문제를 일으킬때가 있다.   해당 문제는 동적으로 데이터를 받아와야할 페이지를 정적으로 구현하려고하니 발생한 문제이다.아래 코드를 import 밑에 삽입하고 다시 build를 해보자.export const dynamic = 'force-dynamic';