ํ๋ก ํธ์๋์ ํผํ ์ ์๋ ๋์ธ ํ์
์คํฌ๋ฆฝํธ,
์ด์ ๋ ์ ๋๋ก ์ ๋ณตํ ๋๊ฐ ์์ต๋๋ค! ๐
๐ง ๋ฐฐ์๋ ๋ฐฐ์๋ ํท๊ฐ๋ฆฌ๋
ํ์
์คํฌ๋ฆฝํธ, ์ด์ ์ ๋๋ก ๋ฐฐ์๋ด์
์ด์ ๋ ํผํ ์ ์๋ ๋์ธ๊ฐ ๋์ด๋ฒ๋ฆฐ 'ํ์
์คํฌ๋ฆฝํธ(Typescript)'!
์๋ฆฌ๋ฅผ ์ ๋๋ก ์ดํดํ์ง ๋ชปํ ์ฑ ๋ฌธ๋ฒ๋ง ๋์ถฉ ๋ฐฐ์ ๋ค๋ฉด
ํ์
์คํฌ๋ฆฝํธ๊ฐ ์ ๊ณตํ๋ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ๋ค์ ์ ๋๋ก ์ด์ฉํ๊ธฐ ์ด๋ ต์ต๋๋ค.
์ฌ๋ฌ๋ถ์ ํ์
์คํฌ๋ฆฝํธ๋ฅผ ์ ๋ง ์ ์ดํดํ๊ณ ๊ณ์๋์?
์๋ ์ง๋ฌธ์ ์ถฉ๋ถํ ๋๋ตํ ์ ์๋์ง ํ์ธํด ๋ณด์ธ์.
- ํ์
์คํฌ๋ฆฝํธ์์ ๋งํ๋ 'ํ์
'์ด๋ ๋ฌด์์ธ๊ฐ์?
- ์๋ก ๋ค๋ฅธ ํ์
๊ฐ์ ํธํ์ฑ์ ์ด๋ค ๊ธฐ์ค์ผ๋ก ๊ฒฐ์ ๋๋์?
- ๊ธฐ๋ณธ์ ์ผ๋ก ์ ๊ณต๋๋ ํ์
๋ค(any, unknown, never ๋ฑ)์ ๋์ ์๋ฆฌ๋ฅผ ์์ธํ ์ค๋ช
ํ ์ ์๋์?
์ด ๊ฐ์๋ ๋จ์ํ ํ์
์คํฌ๋ฆฝํธ์ ๋ฌธ๋ฒ๋ง ๋์ดํด ๋์ ๊ฐ์๊ฐ ์๋๋๋ค.
๋ฌธ๋ฒ์ ํฌํจํด ํ์
์คํฌ๋ฆฝํธ๊ฐ ์ ๊ทธ๋ ๊ฒ ๋์ํ๋์ง ๊ทธ๋ฆฌ๊ณ ์ด๋ป๊ฒ ์ค๊ณ๋์๋์ง
์์ฃผ ์ฝ๊ณ ์ฌ๋ฏธ์๊ฒ ์์๋ด
๋๋ค.
๊ฐ์๊ฐ ๋๋๊ณ ๋๋ฉด ์ด์ ์ฌ๋ฌ๋ถ์ ํ์
์คํฌ๋ฆฝํธ ๋ง๋ฒ์ฌ๊ฐ ๋์ด ์์ ๊ฑฐ์์. ๐ง๐ปโโ๏ธ
์๋ ๊ทธ๋ฆผ๊ณผ ๊ฐ์ ๊ฐ์์ ํจ๊ป ๋ณด์ค ์ ์๋ ํธ๋๋ถ๋ ์ ๊ณต๋ฉ๋๋ค!

์ด๋ ต๊ณ ๋ณต์กํ ๊ฐ๋
๋
์ฝ๊ณ ์ฌ๋ฏธ์๊ฒ ์ดํด๋ณผ ๊ฑฐ์์
ํ์
์คํฌ๋ฆฝํธ๋ ์ํ์ '์งํฉ๋ก '์ ๊ธฐ๋ฐ์ผ๋ก ๋์ํ๋ ์ธ์ด์ด๊ธฐ ๋๋ฌธ์
๋ง๊ณผ ๊ธ๋ก๋ง์ ์๋ฆฌ๋ฅผ ํ์คํ ์ดํดํ๊ธฐ ์ด๋ ค์ธ ์ ์์ด์.
๊ทธ๋์ ๋ค์ํ ์๊ฐ ์๋ฃ์ ์ฌ๋ก๋ค์ ์ค๋นํ์ด์.
์๋ฌด๋ฆฌ ์ด๋ ต๊ณ ๋ณต์กํ ๊ฐ๋
์ด๋๋ผ๋ ์ฝ๊ณ ์ฌ๋ฏธ์๊ฒ ์ดํด๋ณผ ๊ฑฐ์์.
์ด๋ฐ ๋ถ๋ค๊ป ์ถ์ฒํด์ ๐โโ๏ธ
์๋ฐ์คํฌ๋ฆฝํธ ํ์ต์ ๋ง์น๊ณ ํ์
์คํฌ๋ฆฝํธ๋ฅผ ์ฒ์ ๋ฐฐ์ฐ๋ ค๊ณ ํ๋ ๋ถ
ํ์
์คํฌ๋ฆฝํธ๋ฅผ ๋ฐฐ์๋ดค์ง๋ง ์์ง ํท๊ฐ๋ฆฌ๋ ์ ์ด ๋ง์ ๋ถ
์ ํํ ํ์
์คํฌ๋ฆฝํธ์ ๊ฐ๋
๊ณผ ๋์ ์๋ฆฌ๋ฅผ ์ดํดํ๊ณ ์ถ์ผ์ ๋ถ
๋ฆฌ์กํธ(React)์ ํ์
์คํฌ๋ฆฝํธ๋ฅผ ํจ๊ป ์ฌ์ฉํด ๋ณด๊ณ ์ถ์ผ์ ๋ถ
๊ฐ์ ํน์ง โจ
๐จ
์ธ์ ๋ ์ด๋์๋
์๊ฐ ์๋ฃ์ ์ง์ฌ์ธ ํธ
๊น๋ํ๊ณ , ์์๊ณ , ๋ฉ์ง ์๊ฐ ์๋ฃ๋ก ํ์ตํ๋ฉด ์ง์ค๋ ๋ ์ ๋๊ณ ๊ธฐ์ต์๋ ๋ ์ค๋ ๋จ์ ๊ฑฐ๋ผ๊ณ ๋ฏฟ์ด์.
๋ชจ๋ ์ง์ ๋ง๋ ์ด๋ฏธ์ง๋ค์ด๋ผ ์บก์ฒํด์ ํ์ต ๋ธ๋ก๊ทธ ํฌ์คํ
์ ์ด์ฉํ์
๋ ๋ฉ๋๋ค. ๐
๐๏ธ
ํ๋ธ๋ฆฟ ํ์์ ํจ๊ป
์๊ฐ์ ์ผ๋ก ํ์ต
๋ ์ฝ๊ณ ๋น ๋ฅด๊ฒ ์ดํดํ๋ ๋ฐ์๋ ์ญ์ ์๊ฐ์ ์ธ ์๋ฃ๊ฐ ์ต๊ณ ์ฃ ? ๊ทธ๋์ ์ด ๊ฐ์ ์ดฌ์์ ์ํด ํ์์ฉ ํ๋ธ๋ฆฟ์ ๊ตฌ๋งคํ์ด์. ํ์์ ํจ๊ป ํ์
์คํฌ๋ฆฝํธ ์ ๋๋ก ํํค์ณ ๋ด
๋๋ค.

๐๏ธ
์ค์ต ์ฝ๋๋ ์น์
๋ณ๋ก
๊น๋ํ๊ฒ ์ ๋ฆฌ
์ ์จ ์์ฑํ ์ค์ต ์ฝ๋๋ค์ ์๋ฌด๋ ๊ฒ๋ ๋ณด๊ดํ๋ฉด ์์ฝ์ฃ ? ์ธ์ ๋ ๋ค์ ๋์๋ณผ ์ ์๋๋ก ์ฝ๋๋ฅผ ์น์
๋ณ๋ก ์ ๋๋์ด ๋ณด๊ดํ ์ ์๋๋ก ์ ๊ฒฝ ์ผ์ด์.

๐
์ธ์ ๋ ๋ณต์ตํ ์ ์๋
๋ฌด๋ฃ ๊ฐ์ ๊ต์
๋ณต์ต์ ์ํด ๊ฐ์๋ฅผ ์ฒ์๋ถํฐ ๋ฃ๋ ์๊ณ ๋ฅผ ๋๊ธฐ ์ํด ๋ฌด๋ฃ ๊ฐ์ ๊ต์์ ์ ๊ณตํฉ๋๋ค.

๐
๊ฐ์ ์ดํ์๋ ํจ๊ป!
์๊ฐ์ ์ ์ฉ ์ปค๋ฎค๋ํฐ
ํ์ต์๋ ๋์ด ์์ต๋๋ค.
์ด ๊ฐ์๊ฐ ๋๋๋๋ผ๋ ์๊ฐ์ ์ ์ฉ ์ปค๋ฎค๋ํฐ์ ๋ชจ์ฌ
์๋ก ์ง์๊ณผ ๋ค์ํ ์์์ ๊ณต์ ํ๋ฉฐ ์ฑ์ฅํด์ ๐ฑ
[0 ์น์
2 ์ฑํฐ : ์๊ฐ์ ์ปค๋ฎค๋ํฐ ์ฐธ์ฌํ๊ธฐ]์์
์๊ฐ์ ์ ์ฉ ์คํ์ฑํ
๋ฐฉ ๋งํฌ์ ๋น๋ฐ๋ฒํธ๋ฅผ ํ์ธํ์ธ์
ํ์ต ๋ด์ฉ ๐
๐ SECTION 1. ํ์
์คํฌ๋ฆฝํธ ๊ฐ๋ก
๊ธฐ์ ์ ์ ์ดํดํ๋ ค๋ฉด ๊ทธ๊ฒ์ด ์ด๋ค ๋ฐฐ๊ฒฝ์์ ํ์ํ๋์ง ์ ํ์๊ฐ ์์ต๋๋ค. ๋ฐ๋ผ์ 1 ์น์
์์๋ ํ์
์คํฌ๋ฆฝํธ์ ํ์ ๋ฐฐ๊ฒฝ์ ์ดํด๋ณด๋ฉฐ ํ์
์คํฌ๋ฆฝํธ๊ฐ ํด๊ฒฐํ๊ณ ์ ํ๋ ๋ฌธ์ ๊ฐ ๋ฌด์์ด๊ณ , ์ด๋ค ํน์ง์ ๊ฐ์ง๋์ง ์์ธํ ์ดํด๋ด
๋๋ค.
๐ SECTION 2~3. ํ์
์คํฌ๋ฆฝํธ ๊ธฐ์ด ๋ค์ง๊ธฐ
๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ํ์
์คํฌ๋ฆฝํธ์ ๋ฌธ๋ฒ์ ์ดํด๋ด
๋๋ค. ๋์์ ํ์
์คํฌ๋ฆฝํธ๊ฐ ๋งํ๋ ํ์
์ด๋ ์ ํํ ๋ฌด์์ธ์ง, ๊ทธ๋ฆฌ๊ณ ํ์
๋ค์ด ์๋ก ์ด๋ค ๊ด๊ณ๋ฅผ ๋งบ๊ณ ์ด๋ป๊ฒ ๋์ํ๋์ง ์ดํด๋ด
๋๋ค.
๐ SECTION 4~6. ํ์
์คํฌ๋ฆฝํธ ๋ฌธ๋ฒ ์ดํด๋ณด๊ธฐ
ํจ์ ํ์
์ ์, ํจ์ ์ค๋ฒ๋ก๋ฉ, ์ธํฐํ์ด์ค, ํด๋์ค ๋ฑ ํ์
์คํฌ๋ฆฝํธ์ ๋ค์ํ ๊ธฐ๋ฅ๊ณผ ๋ฌธ๋ฒ์ ์ดํด๋ด
๋๋ค.
๐ SECTION 7~9. ๋ง๋ฒ์ฌ์ฒ๋ผ ํ์
์ ์กฐ์ํ๊ธฐ
ํ์
์คํฌ๋ฆฝํธ์ ๊ฐ์ฅ ๋
ํนํ๋ฉด์๋ ๊ฐ๋ ฅํ ๊ธฐ๋ฅ์ธ ํ์
์กฐ์ ๊ธฐ๋ฅ์ ๋ํด ์ดํด๋ด
๋๋ค. ์ ๋ค๋ฆญ, ์ธ๋ฑ์ค๋ ์์ธ์ค ํ์
, ๋งต๋ ํ์
, Keyof ์ฐ์ฐ์, ์กฐ๊ฑด๋ถ ํ์
๋ฑ ์์ฃผ ๋ค์ํ ํ์
์คํฌ๋ฆฝํธ์ ํ์
์กฐ์ ๋ฌธ๋ฒ์ ์ดํด๋ด
๋๋ค.
๐ SECTION 10. ์ ํธ๋ฆฌํฐ ํ์
์ด์ฉํ๊ธฐ
ํ์
์คํฌ๋ฆฝํธ๊ฐ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ๊ณตํ๋ ์ฌ๋ฌ ๊ฐ์ง ์ ํธ๋ฆฌํฐ ํ์
๋ค์ ๋ํด ์ดํด๋ด
๋๋ค. ๋ ์ดํด๋ณธ ์ ํธ๋ฆฌํฐ ํ์
์ ์ง๊ธ๊น์ง ๋ฐฐ์ด ์ง์์ ์ด์ฉํด ์ง์ ๊ตฌํํด ๋ด
๋๋ค.
๐ SECTION 11. (Bonus +) ๋ฆฌ์กํธ์์ ํ์
์คํฌ๋ฆฝํธ ์ฌ์ฉํ๊ธฐ
์ด๋๋ก ๋๋๋ฉด ์์ฝ์ฃ ? ๊ทธ๋์ ๋ณด๋์ค ์น์
์ผ๋ก ์ค๋นํ์ต๋๋ค. ์์ฃผ ๊ฐ๋จํ ํฌ๋ ๋ฆฌ์คํธ๋ฅผ ํจ๊ป ๋ง๋ค์ด ๋ณด๋ฉฐ ๋ฆฌ์กํธ ํ๋ก์ ํธ์ ํ์
์คํฌ๋ฆฝํธ๋ฅผ ์ ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ํด ์ดํด๋ด
๋๋ค.
์์ ์ง๋ฌธ Q&A ๐ฌ
Q. ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์๊ธด ์๋๋ฐ ์ ๋ชจ๋ฆ
๋๋ค. ๋ค์ด๋ ๋ ๊น์?
๋ค. ์์ ๋ชจ๋ฅด๋ ์์ค์ด ์๋๋ผ๋ฉด ๋ค์ผ์
๋ ๋ฉ๋๋ค. ์ค๊ฐ์ค๊ฐ ์๋ฐ์คํฌ๋ฆฝํธ ์ฌ์ ์ง์์ด ํ์ํ ๋๋ง๋ค ๊ฐ์ ๋
ธํธ์ ์ ๊ฐ ์ง์ ์ ์ํ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ต ์๋ฃ๋ฅผ ๋ฃ์ด ๋์์ต๋๋ค. ๋ ๋ฌธ๋ฒ์ด ์ด๋ ต๋ค๋ฉด ์๊ฐ์ ์ปค๋ฎค๋ํฐ์ ์ง๋ฌธํ์
์ ๋์์ ๋ฐ์ ์๋ ์์ต๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ํ์ต ์๋ฃ(ํ์
ํฌ๊ธฐ๋ก ์๋ผ๋จน๋ ๋ฆฌ์กํธ ๋์ ์ค ๋ฐ์ท)
Q. Node.js ๋ฐฑ์๋ ๊ฐ๋ฐ์์
๋๋ค. ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ ์๋๋ฐ ๋ค์ด๋ ๋ ๊น์?
๋ค. ๋ง์ง๋ง ๋ณด๋์ค ์น์
(๋ฆฌ์กํธ + ํ์
์คํฌ๋ฆฝํธ)์ ์ ์ธํ๊ณ ๋ ๋ชจ๋ ๋ค์ผ์ค ์ ์์ต๋๋ค.
Q. ๊ฐ์ PPT๋ ํ๋ฉด์ ์บก์ณํด์ ๋ธ๋ก๊ทธ์ ์ฌ๋ ค๋ ๋๋์?
๋ค! ์์ ๋กญ๊ฒ ์ฌ์ฉํ์
๋ ๋ฉ๋๋ค. ํ๋งค๋ง ํ์ง ๋ง์์ฃผ์ธ์. ๐ฅฒ ์ถ๊ฐ๋ก ํ๊ฐ์ง ๋ถํ๋๋ฆฌ์๋ฉด ์ ๊ฐ์ ๋งํฌ๋ฅผ ์ถ์ฒ๋ก ๋ฌ์์ฃผ์๋ฉด ๊ฐ์ฌํ๊ฒ ์ต๋๋ค.
์๊ฐ ์ ์ฐธ๊ณ ์ฌํญ ๐ข
์ ์ ์ง์
- ์๋ฐ์คํฌ๋ฆฝํธ ES6 ๋ฒ์ ์ด์(ํ์ดํ ํจ์ ๋ฑ)์ ์ฌ์ฉํด ๋ณธ ๊ฒฝํ์ด ์์ด์ผ ํฉ๋๋ค.
- ๋ณด๋์ค ์น์
์ ๋ค์ผ์๊ธฐ ์ํด์๋ ์ด์ ๊ฐ์(ํ์
ํฌ๊ธฐ๋ก ์๋ผ๋จน๋ ๋ฆฌ์กํธ) ์ ๋์ ๋ฆฌ์กํธ ์ฌ์ ์ง์์ด ํ์ํฉ๋๋ค.
์ ์ ์ฌํญ
- ๋ชจ๋ ์ค์ต ์ฝ๋๋ฅผ ์ง์ ๋ฐ๋ผ ์์ฑํ์๋ฉด์ ํ์ตํ์๋ ๊ฑธ ๊ถ์ฅํฉ๋๋ค.
- ๊ฐ์์์ ๋ฐฐ์ด ๋ด์ฉ์ ๊ฐ์ธ ๋ธ๋ก๊ทธ์ ๋ฐ๋ก ์ ๋ฆฌํ์๋ ๊ฑธ ๊ฐ๋ ฅํ ๊ถ์ฅํฉ๋๋ค.
- ์ง๋ฌธ์ด ์๋ค๋ฉด ๋ง์ค์ด์ง ๋ง๊ณ ์ง๋ฌธ ๊ฒ์ํ์ด๋ ์๊ฐ์ ์ปค๋ฎค๋ํฐ์ ์ฌ๋ ค์ฃผ์๋ฉด ๋ฉ๋๋ค.
์ง์๊ณต์ ์ ์๊ฐ โ๏ธ
๋ฌด์์ด๋ ์ฝ๊ณ ์ฌ๋ฏธ์๊ฒ ์ค๋ช
ํ ๋ฐฉ๋ฒ์ด ์๋ค๊ณ ๋ฏฟ๋ ๊ต์ก์์ด๋ค. ์ถ์ 1๋
๋ง์ ์ธํ๋ฐ, ์ ๋ฐ๋ฏธ์์ ์ฝ 5,000๋ช
์ ์๊ฐ์์ ๋ฐฐ์ถํ โํ์
ํฌ๊ธฐ๋ก ์๋ผ ๋จน๋ ๋ฆฌ์กํธโ ๊ฐ์๋ฅผ ๋ง๋ค์๋ค. ๊ฐ๋ฐ์๋ฅผ ํฌ๋งํ๋ ์ด๋ค์ ๋๊ธฐ ์ํด ๊ฐ๋ฐ์ ์ง์ ๊ณต์ ์ฌ์ดํธ DEVSTU๋ฅผ ๋ง๋ค์ด ์ฝ 2๋
๊ฐ ์ด์ํ๊ณ ์๋ค. 2022๋
๋ถํฐ๋ ๋ฆฌ์กํธ๋ฅผ ๊ณต๋ถํ๋ ์ฌ๋๋ค์ ์ํ ์คํ ์ฑํ
๋ฐฉ๋ ๊ฐ์คํด ์ด์ํ๋ค. ๋ํ ์ฃผ๋์ด ๊ฐ๋ฐ์๋ฅผ ์ํ ์๋น์ค ์คํํธ์
CTO๋ก 2๋
๊ฐ ๊ทผ๋ฌดํ๋ค.
์ด๋ ฅ ์ฌํญ
ํฌํธํด๋ฆฌ์ค/๊ฐ์ธ ์์