뭔가 불편해서 이런 것은 있겠다 싶은 것들은 꼭 존재한다. 지금까지 귀찮아서 검색하지 않았다가 이제야 발견하니 그동안 엄청 손해본 기분이다.
vscode에서 사용할 수 있는 Paste Image 라는 extension인데, 파일 내부에 붙여넣기를 통해 그림파일 삽입을 아주 쉽게 도와준다. 현재는 markdown 파일에만 적용을 해봤으나, 다른 파일 포멧에 서도 알아서 잘 적용이 되어 붙여넣기가 되는 것 같다.
이전에는 내가 마크다운 형식에서 글을 쓰다가 사진을 첨부하고 싶으면, 캡쳐한 사진을 파일로 만들어 프로젝트에 추가하고, 그림파일 경로와 이름을 복사하여 연결해줬다.
또한 이런 그림파일의 이름중복이 일어나지 않도록 형식지정도 하였으며, 한 폴더 안에 너무 많은 그림파일이 들어가지 않도록 작성하는 게시글마다 폴더를 새로 만들어 관리했었다.
그동안 얼마나 불편하게 살아왔던 것일까?
이제는 그럴 필요가 없다. 설치부터 사용까지 진행을 해보자.
extension에 paste image 라고 검색하면, 다음과 같은 것을 볼 수 있다.
별이 무려 다섯개다.
설치 이후 그림파일을 복사하여 클립보드에 존재할 때 기본 설정으로는 control + option + v를 누르면 붙여넣기가 된다.
이렇게 마크다운에는 주소와, 실제 프로젝트 내부에는 그림파일이 추가가 된다.
위의 사진에서 보이는 파일이름 생성 규칙이라던가, 파일의 생성 위치같은 것들은 처음 설치하고 설정을 아무 것도 건드리지 않았을 때와는 다르다.
나는 설정을 바꿨기 떄문에 저렇게 보이지만, 기본적으로는 같은 경로에, 날짜와 초단위로 구분된 파일명이 자동으로 생성이 된다.
그것은 이렇게 vscode 설정에서 paste image라고 검색을 하면, 확장 쪽에 설정이 나오는데 여기서 변경을 하면 된다.
나의 경우 여기에 사용하는 gatsby는 최종적으로 빌드되고 배포하는 파일에서의 경로와, 에디터 내부에서 보이는 파일경로가 달라서 실제 파일이 생성되는 위치와 파일의 경로를 문자열로 만드는 것을 따로 설정을 해야했다.
신기하게 이런 설정도 나누어져있어서 각각 지정해줄 수 있다. 붙여넣기를 하였을 때 붙는 이미지 주소값(설정에서는 Insert Pattern 이라고 부름)과 실제 파일이 생성되는 위치(설정에서는 Path 라고 부름)를 설정에서 따로 할 수 있다.
현재 프로젝트에서 내가 사용했던 설정
Path
${projectRoot}/static/media/${currentFileNameWithoutExt}Insert Pattern
${imageSyntaxPrefix}/media/${currentFileNameWithoutExt}/${imageFileName}${imageSyntaxSuffix}나중에 참고하기 위해 여기에 작성을 했다. 여러 설정들과 파일의 이름, 경로같은 것들과 같이 설정에서 사용할 수 있는 여러가지 기능들은 위에 작성했던 링크에서 찾으면 더 존재한다.
실제로 이런 기능을 사용할만한 프로젝트는 이 것 하나라서 따로 관리할 필요는 없지만, 문득 prettier extension의 .prettier 설정파일처럼 각 프로젝트마다 설정을 다르게 관리된다면 더 좋지 않을까 생각을 했다.
갑자기 너무 편해져서 기분이 이상하다.