๐Ÿญ ์ฝ”๋“œ ์Šค๋‹ˆํŽซ: ๋ฐ˜๋ณต์ ์ธ ์ฝ”๋“œ ํƒ€์ดํ•‘์— ์ง€์นœ ๋‹น์‹ ์—๊ฒŒ

์ œ์ œ ๐ŸŠยท2022๋…„ 9์›” 30์ผ
2
post-thumbnail

๋ฐ˜๋ณต์ ์ธ ํŒจํ„ด์˜ ์ฝ”๋“œ ํƒ€์ดํ•‘์— ํ—ˆ๋น„๋˜๋Š” ์‹œ๊ฐ„์ด ๋„ˆ๋ฌด ์•„๊น๊ฒŒ ๋Š๊ปด์กŒ๋˜ ์ˆœ๊ฐ„, ๋‹ค๋“ค ํ•œ๋ฒˆ์ฏค ์žˆ์ง€ ์•Š์œผ์‹ ๊ฐ€์š”?
์ง€๋ฃจํ•œ ํƒ€์ดํ•‘์— ๋“ค์–ด๊ฐ€๋Š” ์‹œ๊ฐ„์„ ์•„๊ปด, ์šฐ๋ฆฌ๊ฐ€ ๊ฐœ๋ฐœํ•ด์•ผํ•  ํ”„๋กœ์ ํŠธ์˜ ์„ค๊ณ„์™€ ์ฝ”๋“œ ํ€„๋ฆฌํ‹ฐ์— ์ง‘์ค‘ํ•˜๊ณ  ์‹ถ์œผ์‹  ๋ถ„๊ป˜ ์ถ”์ฒœ๋“œ๋ฆฌ๋Š” ๊ธฐ๋Šฅ...!
๋‘๋‘ฅ. ๋ฐ”๋กœ ์ง€๊ธˆ๋ถ€ํ„ฐ ์†Œ๊ฐœ๋“œ๋ฆด โœจ ์ฝ”๋“œ ์Šค๋‹ˆํŽซ(Code snippet) โœจ ์ž…๋‹ˆ๋‹ค.

๐Ÿฌ ์ฝ”๋“œ ์Šค๋‹ˆํŽซ์ด๋ž€?

์ฝ”๋“œ ์Šค๋‹ˆํŽซ์€ ์กฐ๊ฑด๋ฌธ, ๋ฐ˜๋ณต๋ฌธ๊ณผ ๊ฐ™์ด ๋ฐ˜๋ณต์ ์œผ๋กœ ๋“ฑ์žฅํ•˜๋Š” ์ฝ”๋“œ ํŒจํ„ด์„ ํƒ€์ดํ•‘ํ•˜๊ธฐ ์‰ฝ๊ฒŒ ๋„์™€์ฃผ๋Š” ํ…œํ”Œ๋ฆฟ์œผ๋กœ, ๋Œ€๋ถ€๋ถ„์˜ ํ…์ŠคํŠธ ์—๋””ํ„ฐ์™€ ์ฝ”๋“œ ์—๋””ํ„ฐ, IDE์— ๋‚ด์žฅ๋˜์–ด ์žˆ๋Š” ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค.
์˜ˆ๋ฅผ ๋“ค์–ด ๋ฆฌ์•กํŠธ์—์„œ ์‚ฌ์šฉํ•˜๋Š” const [state, setState] = useState(initialValue);์™€ ๊ฐ™์ด ์ •ํ˜•ํ™”๋˜๊ณ  ๋ฐ˜๋ณต์ ์œผ๋กœ ๋“ฑ์žฅํ•˜๋Š” ์ฝ”๋“œ ํŒจํ„ด์„ ์ž…๋ ฅํ•˜๊ธฐ ์‰ฝ๊ฒŒ ํ•ด์ค„ ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์ด์ฃ !

์ด ๊ธ€์—์„œ๋Š” VSCode์—์„œ์˜ ์ฝ”๋“œ ์Šค๋‹ˆํŽซ ํ™œ์šฉ์„ ์ง‘์ค‘์ ์œผ๋กœ ์†Œ๊ฐœํ•ด๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

๐Ÿฌ ๋‚ด์žฅ ์ฝ”๋“œ ์Šค๋‹ˆํŽซ(Built-in-snippets)

VSCode๋ฅผ ์„ค์น˜๋งŒ ํ•ด๋„ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ ์Šค๋‹ˆํŽซ์„ ๋ช‡๊ฐ€์ง€ ์‚ดํŽด๋ณผ๊นŒ์š”?

Command Pallete์—์„œ Insert Snippet ๋ช…๋ น์–ด๋ฅผ ํ†ตํ•ด ํ˜„์žฌ ์—ด๋ ค์žˆ๋Š” ํŒŒ์ผ์—์„œ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ ์Šค๋‹ˆํŽซ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

1. for loop

2. forEach

3. console.log

์‚ฌ์šฉํ• ๋งŒํ•œ ์ฝ”๋“œ ์Šค๋‹ˆํŽซ์„ ์ฐพ์œผ์…จ๋‚˜์š”?

๐Ÿฌ ์ฝ”๋“œ ์Šค๋‹ˆํŽซ ์ต์Šคํ…์…˜ ์„ค์น˜

๋‚ด์žฅ ์ฝ”๋“œ ์Šค๋‹ˆํŽซ์—์„œ ๋‚˜์—๊ฒŒ ํ•„์š”ํ•œ ์Šค๋‹ˆํŽซ์„ ์ฐพ์ง€ ๋ชปํ•˜์…จ๋‹ค๋ฉด, VSCode์˜ Marketplace์—์„œ ํ•„์š”ํ•œ ์ฝ”๋“œ ์Šค๋‹ˆํŽซ์„ ํฌํ•จํ•˜๊ณ  ์žˆ๋Š” ์ต์Šคํ…์…˜์„ ์„ค์น˜ํ•ด๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ต์Šคํ…์…˜ ๋ทฐ์—์„œ @category: "snippets" ํ•„ํ„ฐ๋ฅผ ํ†ตํ•ด ์ฝ”๋“œ ์Šค๋‹ˆํŽซ ์ต์Šคํ…์…˜์„ ํ•œ๋ˆˆ์— ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿฌ ์ปค์Šคํ…€ ์ฝ”๋“œ ์Šค๋‹ˆํŽซ

๋งˆ์Œ์— ๋“œ๋Š” ์ต์Šคํ…์…˜์„ ์ฐพ์ง€ ๋ชปํ•˜์…จ๋‹ค๊ตฌ์š”?
๊ทธ๋Ÿผ ์ง์ ‘ ๋งŒ๋“ค์–ด๋ด…์‹œ๋‹ค!

MacOS: Code > Preferences ์—์„œ Configure User Snippets
Windows: File > Preferences ์—์„œ User Snippets

์ฝ”๋“œ ์Šค๋‹ˆํŽซ ํŒŒ์ผ์ด ์ƒ์„ฑ๋  ๋•Œ ํ•ด๋‹น ์ฝ”๋“œ ์Šค๋‹ˆํŽซ์ด ์ ์šฉ๋  ์Šค์ฝ”ํ”„๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ์š”.
์Šค์ฝ”ํ”„๋Š” ๋‹ค์Œ์˜ ๋‘๊ฐ€์ง€ ์˜์—ญ์—์„œ ์ œํ•œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  1. ์ ์šฉ๋˜๋Š” ์–ธ์–ด: all ๋˜๋Š” language(s)
  2. ์ ์šฉ๋˜๋Š” ํ”„๋กœ์ ํŠธ: all ๋˜๋Š” project(s)

๋ชจ๋“  ํ”„๋กœ์ ํŠธ์™€ ๋ชจ๋“  ์–ธ์–ด์— ์ ์šฉ๋˜๋Š” ๊ธ€๋กœ๋ฒŒ ์Šค๋‹ˆํŽซ ํŒŒ์ผ์„ ๋งŒ๋“ค๊ณ , ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ์ฝ”๋“œ ์Šค๋‹ˆํŽซ์„ ๋“ฑ๋กํ•ด๋ด…์‹œ๋‹ค.

// ์˜ˆ์‹œ

{
	"Print to console": {
		"scope": "javascript, typescript",
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	}
}

๊ฐ๊ฐ์˜ ์ฝ”๋“œ ์Šค๋‹ˆํŽซ์€ 1๏ธโƒฃ snippet name์œผ๋กœ ์ •์˜๋˜๊ณ , 2๏ธโƒฃ scope, 3๏ธโƒฃ prefix, 4๏ธโƒฃ body, 5๏ธโƒฃ description์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๊ฐ ์†์„ฑ์ด ์˜๋ฏธํ•˜๋Š” ๋ฐ”๋ฅผ ์ •๋ฆฌํ•ด๋ณด๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

1๏ธโƒฃ snippet name

json ํŒŒ์ผ์˜ ํ‚ค ๊ฐ’์— ํ•ด๋‹นํ•˜๋Š” ๋ถ€๋ถ„์œผ๋กœ, ์•„๋ž˜ ์ด๋ฏธ์ง€์™€ ๊ฐ™์ด IDE์˜ ์Šค๋‹ˆํŽซ ์ถ”์ฒœ ๋ฐ•์Šค์— ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.
์˜ˆ์‹œ์˜ "Print to console"์— ํ•ด๋‹นํ•ฉ๋‹ˆ๋‹ค.

2๏ธโƒฃ scope

์•ž์„œ ์ฝ”๋“œ ์Šค๋‹ˆํŽซ์ด ์ ์šฉ๋˜๋Š” ์Šค์ฝ”ํ”„๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ๋ง์”€๋“œ๋ ธ๋Š”๋ฐ์š”.
๊ทธ ์ค‘์—์„œ๋„ ์ด ์†์„ฑ์„ ํ†ตํ•ด์„œ ์ ์šฉ๋˜๋Š” ์–ธ์–ด๋ฅผ ์ œํ•œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์˜ˆ์‹œ์—์„œ๋Š” javascript(.js)์™€ typescript(.ts)์— Print to console ์Šค๋‹ˆํŽซ์„ ์ ์šฉํ•ด์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค.

3๏ธโƒฃ prefix

IDE๊ฐ€ ์–ด๋–ค ํ‚ค์›Œ๋“œ๋ฅผ ํ†ตํ•ด ์ฝ”๋“œ ์Šค๋‹ˆํŽซ์„ ์ถ”์ฒœํ•ด์ค„์ง€ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋Š” ์†์„ฑ์ž…๋‹ˆ๋‹ค.
์˜ˆ์‹œ์—์„œ๋Š” log ํ‚ค์›Œ๋“œ์— Print to console ์Šค๋‹ˆํŽซ์„ ์ถ”์ฒœํ•˜๋„๋ก ์ง€์ •ํ•ด์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค.

4๏ธโƒฃ body

์ฝ”๋“œ ์Šค๋‹ˆํŽซ์„ ๊ตฌ์„ฑํ•˜๋Š” ํ…œํ”Œ๋ฆฟ์ž…๋‹ˆ๋‹ค.
$1, $2, ... ๋ฅผ ํ†ตํ•ด tab์ด ๋ฉˆ์ถ”๋Š” ์ง€์ ์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๊ณ , $0๋ฅผ ํ†ตํ•ด ์ตœ์ข… ์ปค์„œ์˜ ์œ„์น˜๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
{$1: title}, {$2: description}๊ณผ ๊ฐ™์ด placeholder๋ฅผ ์ง€์ •ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

5๏ธโƒฃ description

์•„๋ž˜ ์ด๋ฏธ์ง€์™€ ๊ฐ™์ด IDE๋ฅผ ํ†ตํ•ด ์ถ”์ฒœ๋ฐ›์€ ์ฝ”๋“œ ์Šค๋‹ˆํŽซ์— ๋Œ€ํ•œ ์ž์„ธํ•œ ์„ค๋ช…์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ฝ”๋“œ ์Šค๋‹ˆํŽซ์˜ ์ž์„ธํ•œ ๋ฌธ๋ฒ•๊ณผ ํ™œ์šฉ๋ฒ•์ด ๊ถ๊ธˆํ•˜์‹œ๋‹ค๊ตฌ์š”?
โญ๏ธ VSCode์˜ ๊น”๋”ํ•œ ๋…์Šค๋ฅผ ์ฝ์–ด๋ด…์‹œ๋‹ค!

๐Ÿฌ ๊ทธ๋ž˜์„œ ์–ด๋–ป๊ฒŒ ์“ธ ๊ฑด๋ฐ

์ฝ”๋“œ ์Šค๋‹ˆํŽซ์„ ๋ฉ‹์ง€๊ฒŒ ํ™œ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„ , ๋จผ์ € ๋ณธ์ธ์ด ๋ฐ˜๋ณต์ ์œผ๋กœ ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ์ฝ”๋“œ ํŒจํ„ด์„ ํŒŒ์•…ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ ๋Š” ์–ผ๋งˆ๋‚˜ ์ž์ฃผ ํ•ด๋‹น ์ฝ”๋“œ ํŒจํ„ด์„ ์ž‘์„ฑํ•˜๋Š”๊ฐ€, ์œ ์‚ฌํ•œ ์ฝ”๋“œ ํŒจํ„ด์—๋Š” ์–ด๋– ํ•œ ๊ฒƒ๋“ค์ด ์žˆ์œผ๋ฉฐ ์ด๋ฅผ ์–ด๋””๊นŒ์ง€ ๋‹ค์–‘ํ™”ํ•  ๊ฒƒ์ธ๊ฐ€, IDE์˜ ์ฝ”๋“œ ์Šค๋‹ˆํŽซ ๊ธฐ๋Šฅ์„ ์–ด๋–ป๊ฒŒ ๊ทน๋Œ€ํ™”ํ•ด๋ณผ ์ˆ˜ ์žˆ์„์ง€ ๊ณ ๋ฏผํ•˜๊ณ  ์ฝ”๋“œ ์Šค๋‹ˆํŽซ์œผ๋กœ ์˜ฎ๊ฒจ์ฃผ์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

๊ทธ๋ ‡๊ฒŒ ํƒ„์ƒํ•œ ์• ์ •์–ด๋ฆฐ ์ฝ”๋“œ ์Šค๋‹ˆํŽซ ์ค‘ ๋ฆฌ์•กํŠธ hooks ์Šค๋‹ˆํŽซ ๋ช‡๊ฐ€์ง€๋งŒ ์†Œ๊ฐœํ•˜๊ณ ,
์ œ๊ฐ€ ๊ฐœ๋ฐœํ•˜๋Š” ํ™˜๊ฒฝ์— ํŠนํ™”๋œ ๋” ๋‹ฌ๋‹ฌํ•œ ์ฝ”๋“œ ์Šค๋‹ˆํŽซ์€ ๋‚˜์ค‘์— ๋”ฐ๋กœ ๋ชจ์•„์„œ ์†Œ๊ฐœํ•ด๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿผ... ์ฝ”๋“œ ์Šค๋‹ˆํŽซ์œผ๋กœ ํ–‰๋ณต ์ฝ”๋”ฉํ•˜์‹œ๊ธธ ๐Ÿ‘‹

1๏ธโƒฃ uses : useState ์ฝ”๋“œ ์Šค๋‹ˆํŽซ

"useState": {
  "prefix": "uses",
  "body": ["const [$1, set${1/(.*)/${1:/capitalize}/}] = useState($2);", "$0"],
  "description": "Create useState"
}

2๏ธโƒฃ usee : useEffect ์ฝ”๋“œ ์Šค๋‹ˆํŽซ

"useEffect": {
  "prefix": "usee",
  "body": ["useEffect(() => {", "  $1", "}, [$2]);", "$0"],
  "description": "Create useEffect"
}

3๏ธโƒฃ user : useRef ์ฝ”๋“œ ์Šค๋‹ˆํŽซ

"useRef": {
  "prefix": "user",
  "body": ["const ${1:ref} = useRef($2);", "$0"],
  "description": "Create useRef"
}

References

profile
๋ธ”๋กœ๊ทธ ๊ฟˆ๋‚˜๋ฌด ๐ŸŒฑ

0๊ฐœ์˜ ๋Œ“๊ธ€