코딩 빠르게 하는 꿀팁 및 설정 🍯 (자동 완성 기능, snippet)

스니펫의 필요성과 장점

코딩에서 스니펫은 자주 사용하는 코드 조각을 미리 정의해 두고, 필요할 때 간편하게 불러와 사용할 수 있게 해줍니다. 이 덕분에 매번 같은 코드를 입력할 필요가 없어져, 시간과 노력을 절약할 수 있어요. 예를 들어, 자주 사용하는 console.log 코드가 있다면, 이를 스니펫으로 만들어 놓으면 단 몇 글자만 입력해도 해당 코드가 자동으로 완성됩니다.

VS코드에서는 다양한 스니펫을 제공하고 있지만, 사용자가 직접 필요한 스니펫을 만들어서 사용할 수 있다는 점이 큰 장점이에요. 이를 통해 개발자는 자신의 스타일에 맞는 코드를 쉽게 입력할 수 있고, 코드 작성 속도를 비약적으로 향상시킬 수 있습니다.

VS코드에서 스니펫 만드는 방법

VS코드에서 스니펫을 만들기 위해서는 먼저 커맨드 팔레트를 열어야 해요. Mac에서는 Command + Shift + P, Windows에서는 Ctrl + Shift + P를 입력하면 됩니다. 여기서 "Snippets"라고 타이핑하면 관련 메뉴가 나와요. 그 중 "Configure User Snippets"를 선택하면, 다양한 언어에 맞는 스니펫 파일을 생성할 수 있습니다.

이제 스니펫 파일이 열리면, 원하는 스니펫을 정의할 수 있어요. 예를 들어, console.log를 위한 스니펫을 만들고 싶다면 다음과 같이 작성하면 됩니다:

json "Log to console": { "prefix": "cl", "body": [ "console.log('$1');" ], "description": "Log a message to the console" }

위 코드에서 prefix는 스니펫을 호출할 때 사용할 키워드이고, body는 실제로 삽입될 코드입니다. $1은 커서가 이동할 위치를 나타내요. 이제 소스 코드에서 cl을 입력하고 탭을 누르면, 자동으로 console.log() 코드가 생성됩니다.

고급 스니펫 활용 팁 및 예제

스니펫의 기본적인 사용법 외에도, 더 다양한 기능과 활용법이 있습니다. 예를 들어, 여러 줄 코드를 한 번에 입력하고 싶다면, body에 배열 형태로 코드를 작성할 수 있어요. 여러 줄의 코드가 필요할 때 유용하죠.

또한, 스니펫에서 변수를 활용할 수도 있습니다. 예를 들어, 파일 이름을 기반으로 함수명을 자동으로 생성하는 스니펫을 만들 수 있어요. 이를 통해 파일의 이름을 파스칼 케이스로 변환하여 함수명을 자동으로 설정할 수 있습니다. 예를 들면:

json "React Function Component": { "prefix": "rfc", "body": [ "export default function ${1:$(basename)}() {", "\t$0", "}" ], "description": "Create a React function component" }

이렇게 하면 rfc라고 입력하고 탭을 누르면, 파일 이름을 기반으로 한 기본 함수가 생성됩니다. 이처럼 스니펫을 잘 활용하면, 코드 작성이 훨씬 더 빠르고 편리해질 거예요.