어떤 프로젝트든 시작은 있습니다. 프레임워크를 쓰더라도, Unity3D같은 엔진을 쓰더라도 새 프로젝트를 생성하고 빈 칸에 첫 타자를 치는 순간은 오죠. 그리고 공부할 때 그 첫 입력은 대개 정형화되어 있기 마련입니다. C라면 #include <stdio.h>를 쓰고, C++라면 #include <iostream>, using namespace std;와 같은 것이었죠. 짧지만 매번 저렇게 입력하는게 귀찮았던 기억이 나네요.
그런데 HTML을 시작하면서 와, 이건 좀 아닌데? 싶은 친구를 만났어요.
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
</body>
</html>이런 느낌이네요. 경우에 따라 더 많은 내용이 들어가 있을 수 있겠습니다. 이건 일단 외우는건 고사하고 따라 치는 것부터가 너무 귀찮았어요. 아마 독학으로 배우는 중이었다면 따라 치다가 질려서 그만둬버렸을지도 모르겠네요. 예제를 풀 때마다 이걸 새로 만들었을테니까요.
다행히 저는 독학이 아니었고, Snippet이라는 좋은 문물을 배웠습니다. '개발자들은 항상 귀찮은 것을 해결하기 위해 뭔가를 만든다'라는 명언과 함께요.
<사용 환경>
VSC입니다. 다른 환경에서 적용하는 것을 보고 싶어서 간단히 검색해 봤는데 몇페이지 내내 VSC만 나오는군요. 익스텐션 적용이 편하고 옵션 설정이 편하고 좋죠! 생각해보니 저는 아직 HTML,CSS를 VSC 외의 환경에서 써본적도 없군요. 아무튼 추후 다른 환경에서 적용하는 것을 발견한다면 기록할 수 있도록 하겠습니다.
<Snippet 적용>
기본적으로 VSC에서 html파일을 생성한 후, !타이핑 후 tab을 누르면 HTML 양식이 적용된 Snippet이 나타납니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>하지만 이대로 쓰기엔 language가 en으로 설정되어 있고, focus도 제가 원하는 곳에 가 있질 않네요.
f1을 누르고 snippet을 검색해봅시다. Snippets : Configure User Snippets라는 녀석이 있어요. 다른 친구도 있지만 솔직히..아직 안써봤네요. 다음에 찾아보고 쓸만한 내용이 있다면 기록하겠습니다.
아무튼, 저 친구를 누르면 여러가지 용도 및 언어가 뜨고, 그 친구를 누르면 '.json'파일이 열립니다.
{
// Place your snippets for c here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
}친절하게 설명되어 있으니, 간단하게만 짚어봅시다.
"prefix": "내용"의 경우, VSC에서 내용 + tab을 누르면 해당하는 부분의 "body": "내용"이 생성됩니다. 커서의 포커스는 $1로 가 있고, tab을 또 누르면 $2로 이동합니다.
위 예시대로라면, log입력 후 tab을 누르면 console.log('커서')의 형태가 되겠군요.
와! 끝났어요!
쓰는건 정말 쉽습니다. 어떤 것들을 등록해 놓느냐가 문제죠. 그건 언제 한번 시간을 들여 정리를 하든, 남이 올려놓은 것을 다운받고 확인을 하든 해야겠네요. 먼 미래의 내가 귀찮을 것을 대비해 코 앞의 미래의 내가 일을 조금 해둬야겠죠.
<기타>
HTML, CSS를 다루면서 배웠고 앞으로도 많이 쓸 것이기에 해당 태그를 달아놓았지만, Snippet 설정 메뉴를 보면 정말 여러가지가 있습니다. 다른 언어에서도 쓸 수 있어요! cpp의 경우 cout<< $1 <<endl;처럼 쓸 수 있겠네요. JavaScript라면 console.log('$1');를 쓸 수 있겠군요. 언제 한번 귀찮을 것 같은 부분은 적용해서 써봐야겠습니다.
