최근 프로젝트의 기능들이 점점 많아지면서 코드의 중복이 자주 발견되었는데 마침 견고한 node.js 프로젝트 설계하기라는 글을 보고 의식주 앱 구조의 리팩토링에 들어갔다. controller와 Service를 분리하는 작업을 진행했는데, 이게 처음에는 재미있었는데 구조를 잡고 나서부터는 비슷한 패턴의 반복 작업이 계속되어서 상당히 비효율적이고 지루해지기 시작했다.
이 이야기를 했더니 옆에 있던 팀원이 바로 스니펫이란 것을 추천해 주었다.
스니펫이란?
VS Code에서 반복되는 코드 패턴을 더 쉽게 입력할 수 있게 해주는 템플릿이다.
자주 쓰는 log 를 입력했을 때 console.log() 로 자동 완성이 되는 기능이 기본적으로 내장되어 있는 스니펫이라 할 수 있다. 그리고 이러한 기능들을 직접 만들 수 있다
사용 방법
사용 방법은 매우 간단하다. 설정에서 Code / Preferences / User Snippets 으로 접속하면 새로운 스니펫을 적용할 수 있는 화면이 나온다.
현재 프로젝트 또는 전역으로 설치하는 옵션이 있는데 전역으로 설치한다면 New Global Snippets file 을 선택해준다.
스니펫 이름을 입력하고 엔터를 누르면 아래와 같은 입력 예시가 나오는데 여기서 원하는 템플릿을 작성해 주면 된다.
{
// Example:
// "Print to console": {
// "scope": "javascript,typescript",
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
}- prefix : 단축키
- body : 단축키 입력 시 적용 될 코드 본문
- description : 단축키 입력 시 나오는 설명
코드 작성은 snippet generator를 이용하면 간편하게 적용할 수 있다. 원하는 템플릿을 작성하면 스니펫 문법에 맞게 알아서 변환을 해주어서 아주 편리하다.
적용 화면
