Next.js 마크다운(mdx)에 이미지 삽입 자동화하여 편하게 붙여넣기

내 기술 블로그를 따로 DB 리소스를 사용하지 않고,
마크다운 정적 파일을 이용하여 구성하는 중에...
이미지를 넣는 부분에서 너무 번거로움을 느꼈다.

언제 이미지 파일을 컨벤션에 맞춰 각 디렉토리에 지정해주고
그 이미지 파일을 마크다운에 일일이 참조시켜야하는데
내 시간이 너무나도 아까웠다.

살펴본 결과

나는 다른 무거운 작업들은 안쓸것이고
IDE툴(vscode) 확장프로그램을 이용하여 가볍게 작업할 것이다.

다른 분의 포스팅에서 아래의 확장프로그램을 추천하고 있어서 참고했지만

내 환경은 윈도우 wsl 가상의 우분투를 사용중이라. 클립보드가 비어있다고 작동되지 않았다.
나같은 환경인 사람은 아래 확장프로그램을 써야한다.

🔗 Paste Image Anywhere

{
  "mdPasteEnhanced.defaultName": "YYYYMMDD-HHmmss",
  "mdPasteEnhanced.basePath": "${projectRoot}/public", // 이미지 코드에 적힐 URL의 basePath 부분 제외
  "mdPasteEnhanced.path": "${projectRoot}/public/.../${currentFileNameWithoutExt}", // 클립보드의 이미지 파일 생성하여 붙여 넣는 위치
  "mdPasteEnhanced.renderMap": ["**/*.mdx => ![${userVar}](/${imagePath})"]
}

각 값은 본인의 코드베이스 환경에 맞춰 적용해보자.

나는 mdx를 이용하기 때문에
mdPasteEnhanced.renderMap 배열에 .mdx 확장자 내부에
붙여넣을때의 양식을 넣어줬다.

세팅 후, 나는 윈도우 캡처(Alt + Shift + S)를 이용해서 바로 붙여넣어주면

마크다운 형식과 원하는 경로내에 이미지 파일까지 자동 완성🎉
너무 편하다 만족도 상승.

저장되어있는 이미지 파일은 어떻게?

위 방식은 캡처하여 클립보드에 복사된 것을 바로 붙여넣은 것이다.

이미지를 세부적으로 디자인&편집한다면,
이미지 파일을 저장하는 과정이 있어야할 것이다.

저장된 이미지 파일도 똑같은 방식으로 클립보드에 집어넣으면 된다.

클립보드에 넣어주기 위해 파일을 열어주고

열어둔 상태에서 복사(Ctrl + C)하고
마크다운에 붙여넣으면 해결.