Next.js 블로그 mdx에서 이미지 복붙하기 (feat. Paste Image)

환경 세팅하기
단축키 설정

notion, velog로 글을 작성하다가 vscode로 작성하려다보니 이미지를 추가하는 것이 꽤나 번거롭습니다. 🥲
일일이 링크를 찾거나 생성해서 수작업으로 넣어줘야 했지요.
앞으로 글을 그대로 수작업으로 작성해야한다고 생각하면 너무 아찔합니다!

다행히 우리를 구원해줄 vscode 플러그인이 있습니다!
mdx에서 이미지를 복사하면 로컬환경에 정적 이미지 리소스를 생성해줍니다.

✨ Paste Image
다만 gif는 지원되지 않습니다.

환경 세팅하기

.vscode/settings.json 파일을 생성합니다.
레포 단위의 개발환경을 세팅하기 위함입니다.

{
  "pasteImage.defaultName": "YYMMDD-HHmmss",
  "pasteImage.basePath": "${projectRoot}/public",
  "pasteImage.path": "${projectRoot}/public/posts/${currentFileNameWithoutExt}",
  "pasteImage.forceUnixStyleSeparator": true,
  "pasteImage.insertPattern": "![${imageFileNameWithoutExt}](${imageFilePath})",
  "pasteImage.prefix": "/"
}

경로를 mdx 파일 단위로 이미지가 저장되도록 했습니다.

/posts/nextjs-blog/2-images.mdx
-> /public/posts/2-images/[YYMMDD-HHmmss].png

posts와 1:1 매칭하고 싶지만 중간 경로를 추출할 수 있는 방법이 없는 것 같습니다 🥲

단축키 설정

저는 간편하게 복붙하기 위해서 단축키도 같이 수정을 해줬습니다.

.vscode/keybindings.json

[
  {
    "key": "shift+cmd+v",
    "command": "-notebook.cell.pasteAbove",
    "when": "notebookEditorFocused && !inputFocus"
  },
  {
    "key": "shift+cmd+v",
    "command": "-markdown.showPreview",
    "when": "!notebookEditorFocused && editorLangId == 'markdown'"
  },
  {
    "key": "shift+cmd+v",
    "command": "-markdown.extension.closePreview",
    "when": "markdownPreviewFocus"
  },
  {
    "key": "shift+cmd+v",
    "command": "extension.pasteImage",
    "when": "editorTextFocus"
  }
]

이제 이미지를 복사하고 shift + cmd + v 입력하면 이미지가 짜잔 생성됩니다.
딜레이가 거의 없다는 사실!

copy-paste

221115-012522

Next.js 블로그 mdx에서 이미지 복붙하기 (feat. Paste Image)

Table of contents

환경 세팅하기

단축키 설정