분류 전체보기65 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. 한글 문서(hwp)를 완벽하게 다른 형식의 파일로 변환하는 방법 HWP라는 한글문서/한글파일은 대한민국 국내에서만 사용하는 한글 친화적인 파일입니다.이를 개발,사무적인 용도로 변환하고자 할때 파일이 깨지거나 호환이 잘되지 않는 경우가 많습니다. 이런 경우 한컴에서 공식적으로 지원하는 모듈이 있습니다.한컴에서 공식 개발한 모듈로서 변환할 수 있는 형식이 다양하고, 호환이 잘되어 한글파일을 변환하고자 하는 경우 매우 유용하게 사용할 수 있을 것 같아 기록합니다. 목차 한컴통합문서뷰어 먼저 하단의 한컴 통합문서뷰어 에 진입합니다. https://developer.hancom.com/docsconverter-example 한컴 통합문서뷰어 예제한컴 통합문서뷰어의 API를 직접 호출하여 결과를 확인해 보세요.developer.hancom.com 입출력 정보에 원본 .. 2024. 9. 17. 코드블록 복사 버튼 만들기 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. 이전 1 ··· 5 6 7 8 9 10 11 ··· 17 다음
