넥스트 (33) 썸네일형 리스트형 NextJS 개발 서버에서 메모리 사용량이 80%를 넘었다. [들어가는 말] 이 포스트는.. 근본적인 해결책을 담고 있지 않다. 왜 메모리 사용량이 80% 넘은걸까에 대한 의문을 해결하기 위한 과정을 기록한 것으로 나름의 타협점을 찾아서 해결한 척하기로 하였다. 이 포스트를 참고한다면, 이런 일도 있을 수 있구나의 참고용도로 보시면 좋을 것 같다. VSCODE 로 NodeJS 를 실행하고 개발 후 1시간이 지났을 무렵 아무리 많은 사이트를 켜두고 VSCODE 를 사용해도 아무런 렉이 걸리지 않았는데, 어제 오늘 렉이 심하게 걸리길래 윈도우10의 작업 관리자에서 하드웨어 사용량을 확인해보았다. 아니나 다를까. 메모리 16기가 중 85프로 이상을 사용하고 있으니, 렉이 이렇게 심하게 걸릴 수 밖에 VSCODE 를 종료하고 나서는 26프로 까지 확 줄었다. 즉, 이 문.. NextJS 14.1 버전 이상에서 useSearchParams() should be wrapped in a suspense boundary at page 에러가 발생하는 경우 해결책 에러원인 및 해결책 기능을 추가하고 다시 빌드하는 중 갑자기 빌드 에러가 발생하였다. 해당 에러가 발생하는 이유는 useSearchParams() 가 클라이언트 컴포넌트에서 동작하는데, 보통 빌드 과정을 거치는 동안에는 자바스크립트 파일을 다운로드 하기 전 까지는 해당 훅을 사용하는 페이지 전체는 빈 페이지가 된다. 따라서 이 문제를 해결하기 위해 데이터 페칭이될 때 까지 대기하는 Suspense 컴포넌트로 감싸주어야 한다. 현재 나의 컴포넌트는 사용자가 비밀번호 찾기 시 입력하는 form 을 하나의 컴포넌트로 구성하고 있다. 즉, Suspense 를 적용하려면 해당 컴포넌트를 감싸주어야 한다. // Form 컴포넌트 'use client' import { useRouter, useSearchParams.. [NextJS] 서버 컴포넌트에서는 어떻게 쿼리 파라미터를 읽을 수 있을까요? 포스트를 작성하게 된 배경 이번에 진행중인 개인 프로젝트인 명언 웹 사이트에서 사용자가 등록된 명언 카드와 관리자가 등록한 명언 카드 간에 쿼리 파라미터를 사용해서 구분 후 서로 다른 로직을 처리해야 하는 일이 생겼습니다. 그런데, 클라이언트 컴포넌트에서는 useSearchParams 라는 리액트 훅을 사용하여 쿼리파라미터를 읽어오거나, window의 location 객체의 searchparams 를 사용하면 간단하게 처리할 수 있는데, 서버 컴포넌트에서는 이 훅들의 사용이 불가능 합니다. 따라서 이번 기회에 서버 컴포넌트에서 쿼리 파라미터를 읽는 방법을 정리하면서, 프로젝트에 적용해볼까 합니다. 바로 본론으로, 공식문서에 답이 있습니다(단, NextJS 13.0 이상에서만 가능). 블로그 글 보다는 공.. [NextJS] NextJS(14.1) | Warning: Extra attributes from the server: style 해결 방법과 팁 에러 이미지 개발 하면서 오랫동안 거슬렸던 경고 에러(보다는 경고)가 있습니다. 개발 환경에서만 뜨고, 프로덕션에서는 뜨지 않아서 별 신경도 쓰지 않았지만, 루트 페이지에 접속할 때 마다 뜨는게 거슬려서 해결하기로 하였습니다. 해당 관련 이미지는 다음과 같습니다. 원인 및 해결 방법 해당 에러의 원인이 무엇인지 검색을 해서 찾아 봤을 때는 서버로 부터 전달 받은 속성과 클라이언트에서 렌더링되는 속성 간의 불일치가 발생하여 이에 대한 경고를 띄우고 있는 것이 원인으로 보입니다 이에 대한 자세한 예시는 NextJS 공식 사이트(https://nextjs.org/docs/messages/react-hydration-error) 에서 확인해 보세요(무려 공식 사이트에서 해당 에러에 대해 정리 해주었습니다.) 또.. [NextJS]파비콘이 정상적인 경로에 위치함에도 업데이트가 되지 않는다면? 원인 만일 각 프로젝트의 정상경로에 파비콘 파일을 두었음에도 수정한 파비콘으로 변경되지 않는 문제가 발생한다면, 이 문제는 기존에 브라우저에 캐싱되어 있는 데이터로 인해 갱신된 데이터가 반영되지않아서 발생했을 가능성이 높다. 해결방법 따라서 다음과 같이 개발자 도구(윈도우 크롬 기준 F12 OR Ctrl + Shift + i ) 를 연 상태에서 브라우저의 좌측 상단의 새로고침 버튼을 마우스(좌측 버튼)로 꾸욱 누른 상태로 대기 하면, [강력 새로고침 및 캐시 비우기] 가 뜨는데 해당 옵션을 선택 후 결과를 지켜보면 교체된 새로운 파비콘이 표시되는 것을 볼 수 있다. [NextJS] 번들 분석도구 설정 및 사용법 @next/bundle-analyzerJavaScript 모듈의 크기를 관리하는 데 도움이 되는 Next.js용 플러그인이다. 각 모듈의 크기와 해당 종속성을 시각적으로 확인할 수 있게 도와준다. 이 정보를 사용하여 불필요하게 큰 종속성을 제거하거나, 코드를 분할하거나, 필요할 때 일부 부분만 로드하여 클라이언트로 전송되는 데이터의 양을 줄일 수 있다. 설치 다음 명령을 실행하여 플러그인을 설치한다. npm i @next/bundle-analyzer # or yarn add @next/bundle-analyzer # or pnpm add @next/bundle-analyzer 그 후 next.config.js 파일로 들어가서, 다음과 같이 번들 분석도구를 사용토록 셋팅한다. const withBundle.. [Next.JS] Application error: a client-side exception has occurred (see the brows 클라이언트 측에서 예외처리를 제대로 안 해서 생기는 에러 Application error: a client-side exception has occurred (see the browser console for more information). vercel 에 배포 시 위 에러가 뜬다면, 90% 이상은 서버로 부터 클라이언트 측 렌더링에 필요한 데이터를 제대로 받아오지 못해서 생기는 문제이다. 그리고 해당 에러가 뜨는 근본적인 이유는 클라이언트 측에서 예외 처리를 제대로 안 해서 생긴다. 따라서 위 문제를 해결하기 위해서는 해당 데이터를 사용하는 로직을 찾은 후 데이터가 정상적으로 서버로 부터 받아온 직후에 데이터를 사용할 수 있도록 if(!data) return 데이터를 조회중입니다.. 와 같은 이른 반.. [NextJS] 메타데이터의 개념과 중요성, NextJS에서의 기초 사용법 이번 시간에는 메타데이터에 대해 정리해본다. 메타데이터란? 메타데이터는 사용자가 방문하는 웹 사이트나 페이지를 세부적으로 설명해주는 정보라고 할 수 있다. 예를 들어, 사용자가 사진을 편집할 수 있는 사이트를 방문하기 위해 해당 웹 사이트를 구글 등을 통해 검색했다면, 사용자는 현재 방문하고자 하는 사이트의 대략적인 정보나 해당 페이지에서 제공하는 주요 콘텐츠의 제목이나 설명 등을 링크를 클릭하기 전에 확인할 수 있다. 개인이 생각하는 메타데이터의 중요성? 메타데이터를 잘 작성해둔다면, 각 브라우저의 검색엔진이나 크롤링 봇이 해당 웹사이트를 보다 더 잘 이해할 수 있기 때문에 사이트맵(sitemap) 못지 않게 SEO에 중요한 영향을 미친다(애초에 사이트맵 자체가 메타데이터와 유기적인 관계를 가진다). .. 이전 1 2 3 4 5 다음
