๋ฐ๋ณต์ ์ธ ํจํด์ ์ฝ๋ ํ์ดํ์ ํ๋น๋๋ ์๊ฐ์ด ๋๋ฌด ์๊น๊ฒ ๋๊ปด์ก๋ ์๊ฐ, ๋ค๋ค ํ๋ฒ์ฏค ์์ง ์์ผ์ ๊ฐ์?
์ง๋ฃจํ ํ์ดํ์ ๋ค์ด๊ฐ๋ ์๊ฐ์ ์๊ปด, ์ฐ๋ฆฌ๊ฐ ๊ฐ๋ฐํด์ผํ ํ๋ก์ ํธ์ ์ค๊ณ์ ์ฝ๋ ํ๋ฆฌํฐ์ ์ง์คํ๊ณ ์ถ์ผ์ ๋ถ๊ป ์ถ์ฒ๋๋ฆฌ๋ ๊ธฐ๋ฅ...!
๋๋ฅ. ๋ฐ๋ก ์ง๊ธ๋ถํฐ ์๊ฐ๋๋ฆด โจ ์ฝ๋ ์ค๋ํซ(Code snippet) โจ ์
๋๋ค.
์ฝ๋ ์ค๋ํซ์ ์กฐ๊ฑด๋ฌธ, ๋ฐ๋ณต๋ฌธ๊ณผ ๊ฐ์ด ๋ฐ๋ณต์ ์ผ๋ก ๋ฑ์ฅํ๋ ์ฝ๋ ํจํด์ ํ์ดํํ๊ธฐ ์ฝ๊ฒ ๋์์ฃผ๋ ํ
ํ๋ฆฟ์ผ๋ก, ๋๋ถ๋ถ์ ํ
์คํธ ์๋ํฐ์ ์ฝ๋ ์๋ํฐ, IDE์ ๋ด์ฅ๋์ด ์๋ ๊ธฐ๋ฅ์
๋๋ค.
์๋ฅผ ๋ค์ด ๋ฆฌ์กํธ์์ ์ฌ์ฉํ๋ const [state, setState] = useState(initialValue);์ ๊ฐ์ด ์ ํํ๋๊ณ ๋ฐ๋ณต์ ์ผ๋ก ๋ฑ์ฅํ๋ ์ฝ๋ ํจํด์ ์
๋ ฅํ๊ธฐ ์ฝ๊ฒ ํด์ค ์ ์๋ ๊ธฐ๋ฅ์ด์ฃ !
์ด ๊ธ์์๋ VSCode์์์ ์ฝ๋ ์ค๋ํซ ํ์ฉ์ ์ง์ค์ ์ผ๋ก ์๊ฐํด๋๋ฆฌ๊ฒ ์ต๋๋ค.
VSCode๋ฅผ ์ค์น๋ง ํด๋ ์ฌ์ฉ๊ฐ๋ฅํ ์ฝ๋ ์ค๋ํซ์ ๋ช๊ฐ์ง ์ดํด๋ณผ๊น์?
Command Pallete์์ Insert Snippet ๋ช ๋ น์ด๋ฅผ ํตํด ํ์ฌ ์ด๋ ค์๋ ํ์ผ์์ ์ฌ์ฉ ๊ฐ๋ฅํ ์ฝ๋ ์ค๋ํซ์ ํ์ธํ ์ ์์ต๋๋ค.
์ฌ์ฉํ ๋งํ ์ฝ๋ ์ค๋ํซ์ ์ฐพ์ผ์ จ๋์?
๋ด์ฅ ์ฝ๋ ์ค๋ํซ์์ ๋์๊ฒ ํ์ํ ์ค๋ํซ์ ์ฐพ์ง ๋ชปํ์ จ๋ค๋ฉด, VSCode์ Marketplace์์ ํ์ํ ์ฝ๋ ์ค๋ํซ์ ํฌํจํ๊ณ ์๋ ์ต์คํ ์ ์ ์ค์นํด๋ณผ ์ ์์ต๋๋ค.
์ต์คํ ์ ๋ทฐ์์ @category: "snippets" ํํฐ๋ฅผ ํตํด ์ฝ๋ ์ค๋ํซ ์ต์คํ ์ ์ ํ๋์ ๋ณผ ์ ์์ต๋๋ค.
๋ง์์ ๋๋ ์ต์คํ
์
์ ์ฐพ์ง ๋ชปํ์
จ๋ค๊ตฌ์?
๊ทธ๋ผ ์ง์ ๋ง๋ค์ด๋ด
์๋ค!
MacOS: Code > Preferences ์์ Configure User Snippets
Windows: File > Preferences ์์ User Snippets
์ฝ๋ ์ค๋ํซ ํ์ผ์ด ์์ฑ๋ ๋ ํด๋น ์ฝ๋ ์ค๋ํซ์ด ์ ์ฉ๋ ์ค์ฝํ๋ฅผ ์ง์ ํ ์ ์๋๋ฐ์.
์ค์ฝํ๋ ๋ค์์ ๋๊ฐ์ง ์์ญ์์ ์ ํํ ์ ์์ต๋๋ค.
- ์ ์ฉ๋๋ ์ธ์ด: all ๋๋ language(s)
- ์ ์ฉ๋๋ ํ๋ก์ ํธ: 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์ ๊ฐ์ง ์ ์์ต๋๋ค.
๊ฐ ์์ฑ์ด ์๋ฏธํ๋ ๋ฐ๋ฅผ ์ ๋ฆฌํด๋ณด๋ฉด ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
json ํ์ผ์ ํค ๊ฐ์ ํด๋นํ๋ ๋ถ๋ถ์ผ๋ก, ์๋ ์ด๋ฏธ์ง์ ๊ฐ์ด IDE์ ์ค๋ํซ ์ถ์ฒ ๋ฐ์ค์ ํ์๋ฉ๋๋ค.
์์์ "Print to console"์ ํด๋นํฉ๋๋ค.
์์ ์ฝ๋ ์ค๋ํซ์ด ์ ์ฉ๋๋ ์ค์ฝํ๋ฅผ ์ง์ ํ ์ ์๋ค๊ณ ๋ง์๋๋ ธ๋๋ฐ์.
๊ทธ ์ค์์๋ ์ด ์์ฑ์ ํตํด์ ์ ์ฉ๋๋ ์ธ์ด๋ฅผ ์ ํํ ์ ์์ต๋๋ค.
์์์์๋ javascript(.js)์ typescript(.ts)์ Print to console ์ค๋ํซ์ ์ ์ฉํด์ฃผ์์ต๋๋ค.
IDE๊ฐ ์ด๋ค ํค์๋๋ฅผ ํตํด ์ฝ๋ ์ค๋ํซ์ ์ถ์ฒํด์ค์ง ์ง์ ํ ์ ์๋ ์์ฑ์
๋๋ค.
์์์์๋ log ํค์๋์ Print to console ์ค๋ํซ์ ์ถ์ฒํ๋๋ก ์ง์ ํด์ฃผ์์ต๋๋ค.
์ฝ๋ ์ค๋ํซ์ ๊ตฌ์ฑํ๋ ํ
ํ๋ฆฟ์
๋๋ค.
$1, $2, ... ๋ฅผ ํตํด tab์ด ๋ฉ์ถ๋ ์ง์ ์ ์ง์ ํ ์ ์๊ณ , $0๋ฅผ ํตํด ์ต์ข
์ปค์์ ์์น๋ฅผ ์ง์ ํ ์ ์์ต๋๋ค.
{$1: title}, {$2: description}๊ณผ ๊ฐ์ด placeholder๋ฅผ ์ง์ ํ ์๋ ์์ต๋๋ค.
์๋ ์ด๋ฏธ์ง์ ๊ฐ์ด IDE๋ฅผ ํตํด ์ถ์ฒ๋ฐ์ ์ฝ๋ ์ค๋ํซ์ ๋ํ ์์ธํ ์ค๋ช
์ ํ์ธํ ์ ์์ต๋๋ค.
์ฝ๋ ์ค๋ํซ์ ์์ธํ ๋ฌธ๋ฒ๊ณผ ํ์ฉ๋ฒ์ด ๊ถ๊ธํ์๋ค๊ตฌ์?
โญ๏ธ VSCode์ ๊น๋ํ ๋
์ค๋ฅผ ์ฝ์ด๋ด
์๋ค!
์ฝ๋ ์ค๋ํซ์ ๋ฉ์ง๊ฒ ํ์ฉํ๊ธฐ ์ํด์ , ๋จผ์ ๋ณธ์ธ์ด ๋ฐ๋ณต์ ์ผ๋ก ์์ฃผ ์ฌ์ฉํ๋ ์ฝ๋ ํจํด์ ํ์
ํด์ผ ํฉ๋๋ค.
๊ทธ๋ฆฌ๊ณ ๋ ์ผ๋ง๋ ์์ฃผ ํด๋น ์ฝ๋ ํจํด์ ์์ฑํ๋๊ฐ, ์ ์ฌํ ์ฝ๋ ํจํด์๋ ์ด๋ ํ ๊ฒ๋ค์ด ์์ผ๋ฉฐ ์ด๋ฅผ ์ด๋๊น์ง ๋ค์ํํ ๊ฒ์ธ๊ฐ, IDE์ ์ฝ๋ ์ค๋ํซ ๊ธฐ๋ฅ์ ์ด๋ป๊ฒ ๊ทน๋ํํด๋ณผ ์ ์์์ง ๊ณ ๋ฏผํ๊ณ ์ฝ๋ ์ค๋ํซ์ผ๋ก ์ฎ๊ฒจ์ฃผ์๋ฉด ๋ฉ๋๋ค.
๊ทธ๋ ๊ฒ ํ์ํ ์ ์ ์ด๋ฆฐ ์ฝ๋ ์ค๋ํซ ์ค ๋ฆฌ์กํธ hooks ์ค๋ํซ ๋ช๊ฐ์ง๋ง ์๊ฐํ๊ณ ,
์ ๊ฐ ๊ฐ๋ฐํ๋ ํ๊ฒฝ์ ํนํ๋ ๋ ๋ฌ๋ฌํ ์ฝ๋ ์ค๋ํซ์ ๋์ค์ ๋ฐ๋ก ๋ชจ์์ ์๊ฐํด๋๋ฆฌ๊ฒ ์ต๋๋ค.
๊ทธ๋ผ... ์ฝ๋ ์ค๋ํซ์ผ๋ก ํ๋ณต ์ฝ๋ฉํ์๊ธธ ๐
"useState": {
"prefix": "uses",
"body": ["const [$1, set${1/(.*)/${1:/capitalize}/}] = useState($2);", "$0"],
"description": "Create useState"
}
"useEffect": {
"prefix": "usee",
"body": ["useEffect(() => {", " $1", "}, [$2]);", "$0"],
"description": "Create useEffect"
}
"useRef": {
"prefix": "user",
"body": ["const ${1:ref} = useRef($2);", "$0"],
"description": "Create useRef"
}