[개발 관련 도움] - 코드 스니핏(Code Snippet)이란? - 간단하고 쉽게 알아보기(나만의 코드 스니핏 만들기, VS code 코드 스니핏 만들기)

📣 순서 소개

코드 스니핏(코드 스니펫)을 간단하게 알아보고

실제로 Mac VS code에 코드 스니핏을 만들어 보도록 하겠다!

---

👀 코드 스니핏이란?

프로그래밍에서 자주 사용되는 코드의 작은 조각을 의미한다.

따라서 코드 스니핏 템플릿을 설정하게 된다면

• '자주 사용하는 코드를 반복해서 타이핑 하는 불편함을 없애준다'.
• 팀 내 코드 스타일, 사용 패턴을 통일할 수 있다.

 

🤦🏻‍♂️ 코드 스니핏 템플릿 필요성

개발자 A : “함수 선언마다  'const, function, () ⇒ {}'들을 매번 입력하기 귀찮아! 이 모든걸 쉽게 딸깍하면 짜잔하고 나타났으면 좋겠어!!” ⇒ 그걸 해결해 주기 위한 것이 ‘코드 스니핏’이다.

 

 

🏄🏻코드 스니핏 템플릿 사용 흐름

 

순서 : 1. 코드의 스니핏 ‘단축어’를 정의 > 2.정의한 단축어를 입력 > 3.자주 사용하는 작은 코드가 즉시 작성’

• 예시 1) 딸깍 ⇒ useEffect 기본 작성 틀 자동완성(의존성 배열, 콜백 함수 등..)
• 예시 2) 딸깍 ⇒ Component 기본 작성 틀 자동완성 (function, return, export 등..)

쉽게 ‘요리’로 비유하자면 : 요리시작! → 딸깍! → ‘양파 다지기’ 끝! (…🙇🏻‍♂️)

 

---

🧱 코드 스니핏의 구조

정말 간단한 기본 구조만 알아 보자 (실습 및 예재 코드가 급하다면 아래로 넘어가자!)

JSON 또는 XML 형식으로 작성된다.

 

{
  "스니핏 이름": {
    "prefix": "단축어",
    "body": [
      "스니핏에 삽입될 코드",
      "필요하면 여러 줄을 포함할 수 있습니다."
    ],
    "description": "스니핏에 대한 설명 (선택 사항)"
  }
}

1. 스니핏 이름: 단순히 스니핏을 식별하는 이름
2. prefix (단축어): 스니핏을 호출할 때 사용할 단축어. (이 값을 통해 body의 값을 불러온다!)
3. body (코드 본문): 실제로 삽입될 코드 내용.
4. description (설명): 스니핏에 대한 짧은 설명으로. (선택사항)

 

 

---

🧑🏻‍💻 실습) VS Code에서 코드 스니핏 템플릿 작성하기

우선 본인은 TypeScript를 사용한 React 컴포넌트 생성 코드 스니핏을 작성해 보겠다.

(다른 언어를 사용하여도 똑같이 진행하면 된다!)

1. (좌측 상단) Code → 설정 → 코드 조각 구성 클릭

2. 원하는 언어의 ‘코드 조각 파일’을 선택한다.(typesciptreact.json)

• 원하는 언어가 없다면 새 코드 조각을 만들어도 좋다!

 

3. ‘기본 템플릿’이 나온다면 수정으로 진행하면 된다.

4. 아래와 같이 “TypeScript 기반의 컴포넌트를 작성할 때 사용할 기본 코드 스니핏을 정의해 보았다”

• prefix (단축어)는 ‘fsf’로 지정해 주었다.

 

{
  "Flow Component Template": {
    "prefix": "fsf",
    "body": [
	"import React from 'react';",
	"",
      "type ${TM_FILENAME_BASE}Props = {",
      "  $1", // 첫 번째 커서 위치: props를 정의할 곳
      "};",
      "",
      "export default function ${TM_FILENAME_BASE}(props: ${TM_FILENAME_BASE}Props) {",
      "  const { } = props;",
      "",
      "  return (",
      "    <div>",
      "      $0", // 마지막 커서 위치: div 내부에 커서가 위치
      "    </div>",
      "  );",
      "};"
    ],
    "description": "Flow component template with filename as the component name"
	}
}

 

 

5. tsx 파일 생성 후 ⇒ 지정한 단축어 ‘fsf’를 입력하면 정의한 ‘코드 스니핏’이 자동완성으로 나타난다.

 

 

6. enter를 통하여 정의한 스니핏이 작성된 것을 볼 수 있다.

• 이때 마우스 커서의 위치까지 정의하였기에 type지정 ⇒ jsx 문법까지 순차적으로 편리하게 진행이 가능하다!

 

---

 

 

✋🏻 마무리

팀 내 코드 컨벤션에 따라 [type, interface], [함수 선언식, 함수 표현식] 등을 잘 구분하여 정의해 보자!

또한 예시처럼 꼭 컴포넌트 스니핏 정의가 아니더라도 자주 사용하는 패턴이 있다면 정의해서 편리하게 개발해 보면 좋겠다!