반응형 전체 글280 [Next.js, Nextra] Error: Invalid src prop "(domains)" on `next/image` Error: Invalid src prop "(domains)" on `next/image` 해결방법 Next.js, Nextra에서 외부에서 이미지 파일을 불러오면 아래와 같은 Error가 발생한다.위와 같은 Error는 next.config.js에 domain을 설정해주면 된다. module.exports = { reactStrictMode: true, images: { domains: [ "www.notion.so", "s3.us-west-2.amazonaws.com", ], // 이곳에 에러에서 hostname 다음 따옴표에 오는 링크를 적으면 되고 배열로 여러가지 입력이 가능하다. }}이후 next.config 파일을 수정했기 때문에 서버를 껐다가 다시 켜면 정상적.. 2023. 7. 30. MongoDB Compass 사용이유 및 설치 MongoDB Compass란? MongoDB Compass는 MongoDB 데이터를 쿼리, 최적화 및 분석하기 위한 무료 대화형 도구이다. 핵심 인사이트를 얻고, 끌어서 놓기로 파이프라인을 구축하는 등의 작업을 수행할 수 있다. MongoDB에 의해 구축된 GUI인 Compass에서 데이터로 쉽게 작업할 수 있다. Compass는 스키마 분석에서 인덱스 최적화, 집계 파이프라인에 이르기까지 모든 것을 중앙 집중식 단일 인터페이스에서 제공한다. - Compass는 무료로 다운로드하여 사용할 수 있다. - Linux, Mac 및 Windows에서 사용 가능하다. https://www.mongodb.com/products/compass MongoDB Compass Explore and interact wit.. 2023. 7. 14. [VSC] 개발자 VisualStudioCode 확장 프로그램 추천 비쥬얼 스튜디오 코드_VSC(VisualStudioCode)에서 추천하는 확장 프로그램(extension)vscode는 여러가지 extension들을 통해서 쉽고 빠르게 커스터마이징하여 개발에 여러 도움을 받을 수 있다.아래는 알고있으면 유용하게 사용가능한 extension이다. Eslintjavascript library인 Eslint와 vscode를 연결해준다.ESLint는 코드 포맷팅/품질 정적 분석 도구이다.타입을 명시하지 않았다던가, 지역변수를 선언해놓고 사용하지 않는 등 개발할 때 발생할 수 있는 실수들을 미리 지적해주는 역할이다.주로 코드 품질 관리를 위해서 사용하고, 포맷팅은 Prettier로 처리한다.https://eslint.org/ Find and fix problems in your.. 2023. 6. 30. [VSC] VisualStudioCode에서 Prettier 적용하기 비쥬얼 스튜디오 코드_VSC(VisualStudioCode)에서 Prettier 적용하기 1. 확장(Extension)에서 prettier를 검색한다. 2. ctrl + ,로 설정을 켜주거나 좌측 상단에 파일 -> 기본설정 -> 설정을 클릭하여 설정화면으로 넘어간다. 3. format on save를 검색 후 아래 사진처럼 Format On Save를 체크해준다. 4. Default Formatter를 검색 후 아래 사진처럼 Prettier를 선택해준다. 2023. 6. 29. [js] 2차원 이상 객체의 복사 (얕은 복사 vs 깊은 복사) 1차원 객체일 때는 깊은 복사가 되는 방법들이 2차원 이상부터 내부객체에 대하여 깊은복사가 이루어지지 않을 때 해결하는 방법 얕은 복사 (Shallow copy)란? - 주소 값을 복사하기 때문에 참조하고 있는 실제 값이 같아 원본과 복사본이 서로 영향을 받는다. 깊은 복사 (Deep copy)란? - 실제 값을 독립적인 새로운 메모리 공간에 복사, 참조를 공유하지 않아 원본과 복사본이 서로 영향을 받지 않는다. 2023.02.16 - [개발 용어 정리] - [개발용어] 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy) [개발용어] 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy) 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy) A = 원본 B = .. 2023. 6. 28. [Github] GitHub 계정에 새 SSH 키 추가하는 방법 GitHub 계정에 새 SSH 키 추가하는 방법, windows와 mac 그리고 linux_SSH key 복사하는 방법 2023.06.18 - [개발 환경세팅/Github] - [Github] 새 SSH 키 생성 및 ssh-agent에 추가 [Github] 새 SSH 키 생성 및 ssh-agent에 추가Github의 private인 repository에 사용하는 SSH키 생성 및 ssh-agent에 추가하기 SSH 키 암호정보 SSH를 사용하여 Github.com의 리포지토리에서 데이터에 접근할 수 있다. SSH를 통해 연결할 때 로컬 머신에서 privkfdd6630.tistory.com새 SSH 키를 생성하고 ssh-agent에 추가한 이후 Github 계정에 새 SSH키를 추가하는 방법1. 깃허브 로.. 2023. 6. 27. [MARKDOWN] 자주 사용하는 마크다운 문법 정리 MARKDOWN(.md), README.md File와 Nextra에서 사용하는 MARKDOWN 주요 문법 정리 1. 제목(글머리) 작성 # H1 제목 ## H2 부제목 ### H3 소제목 #### H4 제목4 ##### H5 제목5 ###### H6 제목6 출력결과 2. 번호 없는 리스트 작성 * 리스트1 - 리스트2 + 리스트3 출력결과 3. 번호 있는 리스트 작성 1. 리스트1 2. 리스트2 3. 리스트3 출력결과 4. 이텔릭체(기울어진 글씨) 작성 *텍스트* 출력결과 5. 굵은 글씨 작성 **텍스트** 출력결과 6. 인용 > 인용1 > 인용2 >> 인용안의 인용 출력결과 7. 수평선 넣기 --- 출력결과 8. 링크 달기 (1) 인라인 링크 [블로그 주소](https://kfdd6630.tistor.. 2023. 6. 26. [Nextra] Nextra에서 이미지 파일 사용하기 Next.js 이미지Next.js에서 이미지를 사용하는 표준 방법은 MDX 내부는 구성 요소를 직접 가져오는 것이다. - 위와 같이 Next.js의 Image를 사용하면 레이아웃 이동이 없다. - 영상을 로드할 때 기본적으로 흐릿한 자리 표시자가 표시된다. - 크기(width와 height)를 정해줘야 한다. 정적 이미지Nextra는 Markdown 구문을 사용하여 정적 이미지 가져오기를 자동으로 최적화한다.이미지의 너비와 높이를 지정할 필요는 없으며![]() Markdown 구문을 사용하면 된다.- 이렇게 하면 public 폴더 안에 example.jpeg 파일이 로드되고 Next.js의 로 자동 래핑된다.- 공개를 통해 호스트하지 않으려면 으로 링크 시켜주는 코드를 생성해보자.사용방법은 아래와 같다.## `[here](/)` 사용Click [here](/) to read more.출력결과 위 코드는 아래와 같이 동작한다.import Link from 'next/link'## `here` 사용Click here to read more.출력결과 하지만 Nextra에서는 위 출력결과에서 보면 알다싶이 here에 하이퍼링크가 표시되지 않는다. (here을 누르면 동작은 된다.. 2023. 6. 23. 이전 1 ··· 7 8 9 10 11 12 13 ··· 28 다음 반응형
