Develop44 Nextjs<Image />에서 remotePatterns로 외부 이미지 사용하기 외부(사이트)에서 이미지를 받아오기 위해 next/image를 이용해 이미지를 가져오는 과정에서 에러가 났습니다.Nextjs 버전은 14.2.3 이고 이를 해결하는 과정을 간단히 기록합니다. 목차 next/image와 이미지 최적화 Next.js는 이미지 최적화를 자동으로 처리하는 컴포넌트를 제공합니다.이는 next/image 의 컴포넌트이며 기본적으로 Next.js의 내장 이미지 최적화 서비스를 사용하여 로컬 이미지와 호환되도록 설계되었습니다.그러나 외부 도메인에서 이미지를 로드할 때는 다음과 같은 설정이 필요합니다. Next.config.js 적용방법 Next.js는 보안과 성능을 고려하여 허용된 도메인 목록을 next.config.js 파일에 설정하도록 요구합니다.프로젝트 루트de.. 2024. 9. 18. 코드블록 복사 버튼 만들기 highlight.js (티스토리 우클릭금지 유지가능함) 티스토리의 우클릭금지 기능을 사용해서 일반적인 방법으로는 드래그조차 되지 않습니다.다른 많은 분들도 사용하시라고 만들어놓은 기능들을 드래그 / 복사 할 수 없으면 무용지물이겠죠. 코드 블록의 코드를 복사하기 편하게 highlight.js를 커스텀하여 복사버튼을 만든 과정을 기록합니다. 목차 스킨편집-HTML 스킨편집에서 HTML 을 들어갑니다. 윗 부분에 하단코드 부분을 복사해서 아래처럼 넣어줍니다. 조금 (많이) 아래로 내려와서 윗부분에 하단의 코드를 넣어줍니다. 여기기까지 HTML 부분에 대한 편집을 마쳤습니다. 간단하게 설명하면, highlight.js 라는 라이브러리(개발적인 도구를 뜻함)에 대한 기능을 사용할 수 있도록 가져오고(import), 가져온 기능을 2024. 9. 16. [ERROR] Cannot start service 해결: yarn 에서 build와 install 알아보기 개발 과정에서 Next.js 서버를 구동할 때 yarn과 npm을 사용하여 build와 install을 진행하면서 종속성 관련 오류가 발생했습니다.종속성 관련해서 yarn 과 npm 을 혼합해서 사용하고 버전을 수시로 바꾸다 보니 생긴 문제 입니다.간단한 오류 해결 과정에서 yarn 에 대한 build 과정까지 알게되어 해당 부분을 기록합니다. 목차 yarn 과 npmyarn 은 의존성 충돌을 잘 관리하며, 설치속도가 매우 빠른 것이 장점입니다. yarn.lock 파일을 통해 정확한 패키지 버전을 기록합니다.npm은 Node.js의 아주 오래된 기본 패키지 매니저로 많은 레퍼런스가 있고 제일 많이 사용되는 것 같습니다. package-lock.json 파일을 사용하여 설치된 패키지의 정확한 버전을 기.. 2024. 9. 16. Node.js에서 (punycode) DeprecationWarning 해결하기(node 버전 다운그레이드) NextJS build or run 하는 시점에서 Node.js가 JavaScript 파일을 실행할 때 다음과 같은 경고가 메세지를 내려보내기 시작했습니다. url-js 의 punycode 관련 에러입니다.punycode dependency 를 해결한 url-js-replace라는 대체수단으로 사용해보려 했으나, 규모가 작고 빌드업이 잘 될지 모르겠습니다.노드버전을 다운그레이드 하는 방식을 택했습니다. (node:5649) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead. 이 경고는 Node.js의 최신 버전에서 더 이상 punycode 모듈을 사용하.. 2024. 9. 15. 이전 1 2 3 4 5 6 7 ··· 11 다음