๊ฐ์ ํ๋๋ก ํ์
์คํฌ๋ฆฝํธ ์์ ์ ๋ณต!
๋จ์จ์ TS ๊ณ ์๊ฐ ๋ ์ ์์ต๋๋ค.
์๊ฐ ์ ํ๋
! ๋จผ์ ํ์ธํด์ฃผ์ธ์.
์ด ๊ฐ์์์ ๋ฐฐ์ธ ๋งํ ๋ด์ฉ์ด ์์์ง ํ์ธํ ์ ์๋๋ก ์ค์ ๋ก ๋ฐฐ์ฐ๋ ์์ ๋ฅผ ์ ๋ฆฌํด๋์์ต๋๋ค. (๋ฐ๋ก๊ฐ๊ธฐ) ์ด๋ฏธ TypeScript๋ฅผ ์ด๋ ์ ๋ ํ ์ค ์๋ ๋ถ์ด๋ผ๋ฉด ๋จผ์ ์์ ๋ฅผ ํ์ธํด๋ณด์ธ์!
TypeScript๋ JavaScript๋ก ์ปดํ์ผ๋๋ ์ธ์ด์
๋๋ค. ์ด ๊ฐ์๋ TypeScript ์์ฒด์ ์ง์คํ ๋งํผ JavaScript์ ๋ํด์๋ ์ ํ ์ค๋ช
ํ์ง ์์ต๋๋ค. ์ ๊ฐ ๋ง๋ ๋ฌด๋ฃ JavaScript ๊ฐ์๊ฐ ์์ผ๋ ๊ผญ ๋จผ์ ์๊ฐํ์ ๋ค์ TypeScript ๊ฐ์๋ฅผ ์งํํ์๊ธธ ๋ฐ๋๋๋ค.
์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ๋ฐ์๋ผ๋ฉด
๋์น์ง ๋ง์์ผ ํ ํ์
์คํฌ๋ฆฝํธ
์ฝ๋ํฉํ ๋ฆฌ ํ์
์คํฌ๋ฆฝํธ ์
๋ฌธ
์ด ๊ฐ์๊ฐ ํน๋ณํ 3๊ฐ์ง ํฌ์ธํธ!
- โ
TypeScript๋ฅผ ๋ฐ๋ผ๋ณด๋ ์์ผ๊ฐ ๋ฌ๋ผ์ง๋๋ค.
- โ
ํ์ฌ์์ TypeScript๋ฅผ ๊ฐ์ฅ ์ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ์ค ํ ์ฌ๋์ด ๋ฉ๋๋ค.
- โ
TypeScript ์์ด JavaScript๋ฅผ ์ฐ๋ ์์ ๋ก ๋์๊ฐ๊ณ ์ถ์ง ์๊ฒ ๋ฉ๋๋ค :)
JavaScript๋ ํ๋ ํ๋ก๊ทธ๋๋ฐ์์ ๊ฐ์ฅ ๋ง์ด ์ฌ์ฉํ๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด ์ค ํ๋์
๋๋ค. ๊ทธ๋ฆฌ๊ณ TypeScript๋ JavaScript์ ๋ผ์ด๋์ ์ ์์ ์ ๋๋ก JavaScript ์ํ๊ณ์์ ๋ง๋ํ ์ญํ ์ ํ๊ณ ์์ต๋๋ค.
๊ฐ์ฅ ์ธ๊ธฐ ์๋ JavaScript ๋ฐฑ์๋ ํ๋ ์์ํฌ ์ค ํ๋์ธ NestJS๊ฐ TypeScript๋ฅผ ๊ธฐ๋ณธ์ผ๋ก ์ฌ์ฉํ๊ณ , ๊ฐ์ฅ ์ธ๊ธฐ์๋ ํ๋ก ํธ์๋ ํ๋ ์์ํฌ ์ค ํ๋์ธ NextJS ์ญ์ TypeScript๋ฅผ ๊ธฐ๋ณธ์ผ๋ก ์ฌ์ฉํฉ๋๋ค. ์ํฐํ๋ผ์ด์ฆ๊ธ ๋๊ท๋ชจ ํ๋ก์ ํธ์์ JavaScript๋ ๋์ด์ TypeScript ์์ด ์ฌ์ฉํ ์ ์๋ ์กด์ฌ๊ฐ ๋์์ต๋๋ค.
TypeScript๋ Stack Overflow 2022๋
์๋ฒ ์ด์์ ๊ฐ์ฅ ์ฌ๋๋ฐ๋ ์ธ์ด 4์๋ฅผ ๊ธฐ๋กํ๋ฉฐ ์ค์ ์ปดํ์ผ๋๋ ๋์์ธ Javascript๋ณด๋ค ๋์ ์์์ ์ค๋ฅด๊ธฐ๋ ํ์ต๋๋ค.
โJS ๊ฐ๋ฐ์๊ฐ ๊ตณ์ด TS๋ฅผ ๋ฐ๋ก ๊ณต๋ถํ ํ์๊ฐ ์๋คโ? ๊ทธ๋ ์ง ์์ต๋๋ค!
๋ง์ ์ฌ๋๋ค์ด โJavaScript๋ฅผ ์ ๋ค๋ฃฌ๋ค๋ฉด TypeScript๋ฅผ ๋ฐ๋ก ์๊ฐ๋ด์ ๋ฐฐ์ธ ํ์๋ ์๋คโ๊ณ ์๊ฐํ๋ ๊ฒฝํฅ์ด ์์ต๋๋ค. ํ์ง๋ง ์ด๊ฑด ๋งค์ฐ ์๋ชป๋ ์๊ฐ์
๋๋ค. ์ ๊ฐ TypeScript ๊ฐ์๋ฅผ ๊ธฐํํ๊ฒ ๋ ๋ฐฐ๊ฒฝ๋ ์ด๋ฐ ์ด์ ๋๋ฌธ์
๋๋ค.
์ฒ์ ๋จ์ํ ํ์
์ ๋ค๋ค๋ณด๋ฉด์ TypeScript๋ ๋ณ๋ก ๋ฐฐ์ธ ๊ฒ ์๋ค๊ณ ์๊ฐํ๋ ์ฌ๋๋ค์ด ์์ง๋ง, ์ค์ ์ ์ง์ฌ์ง TypeScript ๊ธฐ๋ฐ ํ๋ก์ ํธ๋ฅด ๋ถ์ํด ๋ณด๋ฉด ์ดํดํ๊ธฐ ์ด๋ ค์ด ํ์
์ ์ธ์ด ๋งค์ฐ ๋ง๋ค๊ณ ๋๋ผ๊ฒ ๋ฉ๋๋ค. ์ด๋ ๋ณต์กํ๊ณ ๊ณ ๋ํ๋ TypeScript ์ ์ธ์ ๋ํ ์ง์์ด ๋ถ์กฑํ๋ฉด any ํ์
์ ๋จ๋ฐํ๋ฉฐ TypeScript๋ฅผ ์ ์ฐ๋๋ง ๋ชปํ ํ๋ก์ ํธ๊ฐ ๋ ์ ์์ต๋๋ค. ์ ๊ฐ์๋ ๋ฐ๋ก ์ด๋ฐ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ์ง์ฌ์ง ๊ฐ์์
๋๋ค.
๋ง์ฝ์ ์๋ ์์ ์ค ๋ชจ๋ฅด๊ฒ ๋ ์์ ๊ฐ ํ๋๋ผ๋ ์๋ค๋ฉด ์ด ๊ฐ์๋ฅผ ๊ผญ ์๊ฐํ์ธ์. JS/TS ๊ฐ๋ฐ์๋ก ์ผํ๋ ํ์ ๊ฐ์ฅ ์ํ ์ผ ์ค ํ๋๊ฐ ๋ ์ ์์ ๊ฑฐ๋ผ ๋ณด์ฅํด๋๋ฆฝ๋๋ค. ๋ชจ๋ ๊ฐ์์์ ์ง์ ์ค๋ช
ํ๋ ์์ ๋ก, ๊ฐ์๋ฅผ ์๊ฐํ๋ค๋ฉด ์์ ํ ์ดํดํ ์ ์๊ฒ ๋ฉ๋๋ค.
๐ ์์ ๋ฅผ ์ง์ ์ฒดํฌํด๋ณด์ธ์.

1) Reflection

2) Inheritance with Class Decorator

3) Override Method with Method Decorator

4) Constructor Type

5) Type Predicate

8) Exhaustive Checking
์ค์ง TypeScript ์ค๋ ฅ ํฅ์์ ์ง์คํ ์ปค๋ฆฌํ๋ผ
๐ก ์ด ์ปค๋ฆฌํ๋ผ์ ์จ์ ํ Typescript ๋ฌธ๋ฒ์ ์ด์ ์ ๋ง์ถ๊ณ ์์ต๋๋ค. HTML/CSS, JavaScript ๋ฑ ๊ฐ์ ์ฃผ์ ์ ์ฐ๊ด์ด ์๋ ์ฝ๋๋ ์ ํ ์์ฑํ์ง ์๋ ๊ณ ๋์ถ TypeScript ๊ฐ์์
๋๋ค. ๋ํ, ์์ผ๋ก ๊ณต๊ฐ๋ NestJS์ NextJS ๊ฐ์์ ์ฒซ ๋ฐํ์ด ๋๋ ๊ฐ์์ธ ๋งํผ ๋ชฉ์ ์์ ๋ฒ์ด๋์ง ์๋๋ก TypeScript ๋ฌธ๋ฒ์ ํ์คํ๊ฒ ์ง์คํ์์ต๋๋ค.
ํน์ ์ฌ๋ฌ๋ถ์ ๊ณ ๋ฏผ์ ์๋๊ฐ์?
์ ๋๋ก ๋ง๋ TS ๊ฐ์๋ฅผ ๋ง๋๋ณด์ธ์.
์ ์์ ์ค์์ ์ดํดํ๊ธฐ ์ด๋ ค์ด ์ฝ๋๊ฐ ์๋ ๋ถ
ํ์ง JavaScript ๊ฐ๋ฐ์ ๋๋ JavaScript ํ์ต ํ ๊ทธ ๋ค์ ๊ธฐ์ /๊ฐ์๋ฅผ ์ฐพ๊ณ ์๋ ๋ถ
๊ฐ์ ํ๋๋ก TypeScript๋ฅผ ์ ๋ณตํ๊ณ ์ถ์ ๋ถ
๐ฌ Typescript๋ฅผ ์ ํ ์ค ์๋ค๊ณ ์๊ฐํ๋๋ฐ ์คํ์์ค ํ๋ก์ ํธ๋ค์ ๋ณด๋ฉด ๋์ ํ ํ์
์ ์ดํดํ ์ ์์ด์!
TypeScript์ ๋ํ ๊น์ ์ดํด๋๊ฐ ๋ถ์กฑํด์ ๊ทธ๋ ์ต๋๋ค. ๋จ์ํ ํ๋ฆฌ๋ฏธํฐ๋ธ(Primitive) ํ์
์ ์ ์ธํ๋ ๋ฐฉ์๋ง ๊ฐ๋จํ ๋ฐฐ์๋ดค๋ค๋ฉด TypeScript์ ๋๋ฌด ํ๋ฉด์ ์ธ ๋ถ๋ถ๋ง ๋ฐฐ์ ์ต๋๋ค. ๋ง์ ๊ฐ๋ฐ์๋ค์ด ์ด๋ฐ ์ค์๋ฅผ ํ๋๋ฐ ์ด ๊ฐ์๋ฅผ ํตํด์ ๋ณต์กํ๊ณ ์ ํํ ํ์
์ ์ธ๋ฒ๊ณผ TypeScript๊ฐ ์ด๋ค์์ผ๋ก ํ์
์ ์ถ๋ก ํ๊ณ ์ธ์งํ๋์ง ๋ฐฐ์ธ ์ ์์ต๋๋ค.
๐ฌ JavaScript๋ ๋ฐฐ์ ๋๋ฐ, TypeScript๋ ํ๋๋ ํ ์ค ๋ชฐ๋ผ์.
์ ํ ๊ฑฑ์ ํ ํ์๊ฐ ์์ต๋๋ค. ์ฌ์ง์ด JavaScript๋ฅผ ํ ์ค ๋ชจ๋ฅด๋๋ผ๋ ์ ๊ฐ ๋ฌด๋ฃ๋ก ์ ๊ณตํด๋๋ฆฌ๋ JavaScript ๊ฐ์๋ฅผ ์๊ฐํ ํ TypeScript ๊ฐ์๋ฅผ ์๊ฐํ์๋ฉด ๋ฉ๋๋ค. TypeScript ๊ฐ์๋ JavaScript ๊ฐ์๋ง ์๊ฐํ๋ค๋ ๊ฐ์ ํ์ ์ฒ ์ ํ ์ด๋ณด์๋ ๋ฐ๋ผ๊ฐ ์ ์์ ์ ๋๋ก ๋์ด๋๋กค ์ฒ์ฒํ ์ฌ๋ฆฌ๋ฉด์ ์งํํ๊ณ ์์ต๋๋ค.
๐ฌ NestJS, NextJS ๋ฑ ์ต๊ทผ ๋ง์ด ์ฌ์ฉ๋๋ ์ธ๊ธฐ JavaScript ํ๋ ์์ํฌ๋ค์ ์ ์ฌ์ฉํ๊ณ ์ถ์ด์!
ํ๋ ์ธ๊ธฐ JavaScript ํ๋ ์์ํฌ๋ค์ ๊ธฐ๋ณธ์ ์ผ๋ก TypeScript๋ฅผ ์ฌ์ฉํ๊ณ ์์ต๋๋ค. ์ธ๊ธฐ ํ๋ ์์ํฌ๋ค์ ์ํฐํ๋ผ์ด์ฆ ๊ทธ๋ ์ด๋์์ ์ฌ์ฉ์ด ๊ฐ๋ฅํด์ผ ํ๊ธฐ ๋๋ฌธ์ ํ์
๊ณผ ์ ์ง๋ณด์์ ์ ๋ฆฌํ๊ฒ ์ค๊ณ๋๋ฉฐ TypeScript๊ฐ ํ์๋ถ๊ฐ๊ฒฐํ๊ฒ ์๊ตฌ๋ฉ๋๋ค. JavaScript ๋์ธ ํ๋ ์์ํฌ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ ์ฌ์ฉํ๊ณ ์ถ๋ค๋ฉด ๊ผญ ์ด ๊ฐ์๋ฅผ ํตํด TypeScript๋ฅผ ๋ฐฐ์๋ณด์ธ์! ์ค์ ๋ก ์ ๊ฐ ์ ์ํ NestJS ๋ฐ NextJS ๊ฐ์๋ฅผ ์งํํ๊ธฐ์ ์์ ํ์ํ ์ง์๋ค์ ๋ชจ๋ ๋ชจ์๋์์ต๋๋ค.
๊ธฐ๋ณธ๊ธฐ๊ฐ ํํํด์ผ
ํจ์ฌ ์๋ก ์ฌ๋ผ๊ฐ ์ ์์ผ๋๊น.
ํ๋ก๊ทธ๋๋ฐ ์ด๋ก ํ์ต์ ์ถฉ์คํ๊ฒ
์ ๊ฐ ์งํํ๋ ๋ชจ๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด ๊ฐ์๋ ์ด๋ก ์ ์ถฉ์คํ ๊ฐ์์
๋๋ค. ์ธ์ด ๋ฌธ๋ฒ์ ์ด๋ก ์ ์ถฉ์คํด์ผ ํ๊ณ , ์ด๊ธ ํ๋ ์์ํฌ ๊ฐ์๋ ์ฌ๋ฏธ๊ฐ ์์ด์ผ ํ๋ฉฐ, ์ค๊ธ๋ถํฐ๋ ์ง์์ ๊น์ด๊ฐ ์ค์ํ๋ค๊ณ ์๊ฐํฉ๋๋ค.
๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ์ด๋ฒ ํ์
์คํฌ๋ฆฝํธ ์
๋ฌธ ๊ฐ์์์๋ ์๊ฐ์ ์ฌ๋ฌ๋ถ์ด ์ธ์ ๋ ๋ค์ ๋์์์ ๋น ๋ฅด๊ฒ ๊ธฐ์ต๋์ง ์๋ ๋ถ๋ถ์ ์ฐพ์๋ณผ ์ ์๋๋ก ์ปค๋ฆฌํ๋ผ์ ๊ผผ๊ผผํ๊ฒ ์ ๋ฆฌํ์์ต๋๋ค.
์์ผ๋ก์ ๋น๋ ์
๊น์ง ์๊ฐํ ๊ฐ์
์ ๋ ๊ฐ์๋ฅผ ์ ์ํ ๋ ํ์ดํ๋ผ์ธ์ ๊ตฌ์ํ๋ฉฐ ์ ์ํฉ๋๋ค. JavaScript, TypeScript ๊ฐ์ ์ธ์ด ๊ฐ์ ๋ํ NextJS, NestJS ๊ฐ์๋ฅผ ์ํ ๋น๋ ์
์ผ๋ก ๊ธฐํ๋์์ต๋๋ค. ๋๋ฌธ์ ์ธ๊ธฐ JavaScript ํ๋ ์์ํฌ/๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ ์ฌ์ฉํ๊ธฐ ์ํด ๊ธฐ๋ณธ๊ธฐ๋ฅผ ์๋ ์ฉ๋๋ก๋ ์ ํฉํฉ๋๋ค. ๋ฌผ๋ก , ์์ ์ด๋ณด๋ ๋ฐ๋ผ์ฌ ์ ์๋๋ก ์ ์๋์๊ธฐ ๋๋ฌธ์ TS ๊ด๋ จ ์ง์์ด ์ ํ ์๋๋ผ๋ ๊ฐ์๋ฅผ ์งํํ๋ ๋ฐ๋ ์ ํ ๋ฌธ์ ๊ฐ ์์ต๋๋ค.
์ ์ผํ ์ ์ ์ง์์ ์ ๊ฐ ์ธํ๋ฐ์ ์์ ๋ฌด๋ฃ๋ก ๋ฐฐํฌํ JavaScript ๊ฐ์์
๋๋ค. ๊ผญ ๋จผ์ ์๊ฐํ์ ๋ค์ TypeScript ๊ฐ์๋ฅผ ์งํํด ์ฃผ์ธ์.
์์ธ ์ปค๋ฆฌํ๋ผ
.png)
1) ๊ธฐ๋ณธ๊ธฐ
TypesScript์ ๊ธฐ๋ณธ ํ์ดํ์ ๋ํด ์์๋ด
๋๋ค. ํ๋ฆฌ๋ฏธํฐ๋ธ ํ์
, ๊ธฐ๋ณธ ์ ๋์ธ ๋ฐ ํ์
์ ์ธ ๋ฑ ๊ณ ๊ธ ๊ณผ์ ์ ์งํํ๊ธฐ ์ํ ์ ์ ์ง์์ ํ์ตํฉ๋๋ค.
.png)
2) ์ ๋์ธ๊ณผ ์ธํฐ์น์
๊ทธ๋ฆฌ๊ณ ๋ด๋ก์
ํ์
์ ์กฐํฉํ ์ ์๋ ๊ธฐ๋ฅ์ธ ์ ๋์ธ๊ณผ ์ธํฐ์น์
์ ๋ํด ๊ฐ๋จํ ๋ฐฐ์๋ณด๊ณ ํ์
์ ๋์ฑ ์ธ๋ถํํ ์ ์๋ 8๊ฐ์ง ๋ด๋ก์ ๊ธฐ๋ฒ์ ์ ๋ฆฌํด ๋ด
๋๋ค.
.png)
3) ํจ์ ์๊ทธ๋์ฒ ํ์ดํ ๋ฐ ํ์
ํ๋ฆฌ๋์ผ์ดํธ
ํจ์ ์ ์ธ์ ํ์
์ ์ถ๊ฐํ๋ ๋ฒ๊ณผ ํจ์ ์๊ทธ๋์ฒ๋ฅผ ํ์
์ผ๋ก ํํํ๋ ๋ฐฉ๋ฒ์ ๋ํด ๋ฐฐ์๋ด
๋๋ค. ์ถ๊ฐ๋ก ํ์
ํ๋ฆฌ๋์ผ์ดํธ ์ ์ธ๋ฒ๊ณผ ์ฌ์ฉ๋ฒ์ ๋ํด ๋ฐฐ์๋ด
๋๋ค.
.png)
4) ํ์
๊ณผ ์ธํฐํ์ด์ค์ ์ฐจ์ด์ ๋น๊ต ๋ฐ ์ต์คํ
์
๊ณผ ์ธํฐํ์ด์ค ๋จธ์ง
TypeScript๋ฅผ ์ ๋๋ก ๋ฐฐ์ฐ์ง ์์ผ๋ฉด ๊ฐ์ฅ ๋จผ์ ํท๊ฐ๋ฆฌ๊ธฐ ์์ํ๋ ์์๊ฐ ํ์
๊ณผ ์ธํฐํ์ด์ค์ ์ฐจ์ด์
๋๋ค. ์ด ์น์
์์๋ ํ์
๊ณผ ์ธํฐํ์ด์ค์ ์ฐจ์ด์ ๋ํด ์์๋ณด๊ณ ๊ฐ๊ฐ์ ์ต์คํ
์
๋ฐฉ๋ฒ์ ๋ํด ์์๋ด
๋๋ค.
.png)
5) Any / Unknown / Never
ํน์ ํ์
์ธ any, unknown ๊ทธ๋ฆฌ๊ณ never ํ์
์ ๋ํด ๋ฐฐ์๋ด
๋๋ค. ํนํ any์ unknown์ ์ฐจ์ด์ ์ ์ ์ ๋ฆฌํด๋์ผ๋ ์ ์ ํ ์ํฉ์ ์๋ง์ ํ์
์ ์ฌ์ฉํ์ธ์!
.png)
6) Array (๋ฐฐ์ด)
Array ํ์
์ ์ธ๋ฒ์ ๋ํด ์์๋ณด๋ ์น์
์
๋๋ค. ํท๊ฐ๋ฆด ์ ์๋ ๋น์ทํ ๋ชจ์ต์ ํ์
์ ์ธ๊ณผ Multi Dimension Array ์ ์ธ๋ฒ์ ๋ํด ์์๋ด
๋๋ค.
.png)
7) Tuple (ํํ)
Tuple์ JavaScript์๋ ์กด์ฌํ์ง ์์ง๋ง TypeScript์์๋ ๋งค์ฐ ์ ์ฉํ๊ฒ ์ฌ์ฉํ ์ ์๋ ํน์ Array ํ์
์
๋๋ค. Array๋ฅผ Tuple๋ก ๊ฐ์ ์ ์ถํ๋ ๋ฒ๊ณผ ์ง์ ์ ์ธํ๋ ๋ฒ์ ๋ฐฐ์๋ด
๋๋ค.
.png)
8) Object (๊ฐ์ฒด)
JavaScript์์ ๊ฐ์ฅ ์ค์ํ ํ์
์ค ํ๋์ธ ๊ฐ์ฒด ํ์
์ TypeScript์์ ๋ค๋ฃจ๋ ๋ค์ํ ๋ฐฉ๋ฒ์ ๋ฐฐ์๋ด
๋๋ค. ๋ง์ง๋ง ๊ฐ์์์๋ ๋ค์ํ ๋ฐฉ๋ฒ์ผ๋ก Key Value Mapping ํ๋ ๋ฒ์ ํ์ตํฉ๋๋ค.
.png)
9) Class (ํด๋์ค)
Class ์ ์ธ๋ถํฐ ์ ๋ฐ์ ์ธ Typescript์ ๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ ์ง์์ ์์๋ด
๋๋ค.
.png)
10) Generic (์ ๋ค๋ฆญ)
๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ์ ๊ฝ์ธ Generic์ ๋ค์ํ ํํ๋ก ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ํด ๋ฐฐ์๋๋ค.
.png)
11) Utility Type (์ ํธ๋ฆฌํฐ ํ์
)
์ ์ธ๋ผ ์๋ ํ์
์ ๋ณด๋ค ์ฝ๊ฒ ๋ณํํ ์ ์๋ ์ ํธ๋ฆฌํฐ ํ์
๋ค์ ๋ํด ๋ฐฐ์๋ด
๋๋ค. ์์ฃผ ์ฌ์ฉํ๋ ํ์
12๊ฐ์ง๋ฅผ ์ ๋ฆฌํด๋์ต๋๋ค. ์ถํ ์ฃผ์ ํ์
๋ค์ด ์ถ๊ฐ๋๋ค๋ฉด ๊ณ์ ์์
์ด ์
๋ฐ์ดํธ๋ ์์ ์
๋๋ค.
.png)
12) Experimental Decorator (์คํ์ ๋ฐ์ฝ๋ ์ดํฐ)
๋ค์ํ ๋ฌธ๋งฅ์์ Experimental Decorator๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ํด ๋ฐฐ์๋ด
๋๋ค. Decorator๋ ์์ง ์ ๊ท TypeScript ๋ฒ์ ์ ๋ณํฉ๋์ง ์์์ง๋ง ๋งค์ฐ ์ฑ์ํ ์ํ์ด๋ฉฐ NestJS ๋ฑ ๋ค์ํ ํ๋ ์์ํฌ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ์ด๋ฏธ ์ ๊ทน์ ์ผ๋ก ์ฌ์ฉ๋๋, ๊ผญ ์ ์์๋ฌ์ผ ํ ์ง์์
๋๋ค.
.png)
13) Reflect Metadata
Reflect Metadata์ Experimental Decorator๋ฅผ ์ฌ์ฉํด์ Experimental Decorator๋ฅผ ๋์ฑ ๊ฐ๋ ฅํ๊ฒ ์ฌ์ฉํด๋ณด๋ ๋ฐฉ๋ฒ์ ๋ํด ๋ฐฐ์๋ด
๋๋ค. ์ด ๋์ ์กฐํฉํ๋ฉด ๋ฌด๊ถ๋ฌด์งํ ๊ฐ๋ฅ์ฑ์ด ์์ผ๋ ์ ์์งํด๋์ธ์!
.png)
14) Namespace
์ด์ ๋ ๋์ด์ ์ฌ์ฉ๋์ง ์์ง๋ง, ์ค๋๋ ํ๋ก์ ํธ์์ ๋ง๋ ์ ์๋ Namespace์ ๋ํด ๋ฐฐ์๋๋ค.
.png)
15) ECMA Module
Import์ Export๋ฅผ ์งํํ๋ ๋ค์ํ ๋ฐฉ๋ฒ์ ๋ํด ๋ฐฐ์๋ด
๋๋ค.
Q&A ๐ฌ
Q. ์ ๋ง ์๋ฌด๊ฒ๋ ๋ชฐ๋ผ๋ ๋ฐฐ์ธ ์ ์๋์?
JavaScript๋ ์์์ผ ๊ฐ์๋ฅผ ๋ฐ๋ผ์ฌ ์ ์์ต๋๋ค. ํ์ง๋ง ์ ๋ ๋ชจ๋ ์ ์ ์ง์์ ์ ๊ฐ์ ์ํ๊ณ ์์์ ํด๊ฒฐ ํ ์ ์๋๋ก ๊ฐ์๋ฅผ ์ ์ ์ค์
๋๋ค. ์ JavaScript ๊ฐ์๋ ํ์ ์์ ๋ฌด๋ฃ์ด๋ ๋จผ์ ์๊ฐํ ํ ์ด ๊ฐ์๋ฅผ ์๊ฐํด์ฃผ์ธ์.
Q. TypeScript๊ฐ ์
๋ฐ์ดํธ๋๋ฉด ์๋ก์ด ๊ฐ์๋ก ํ๋งคํ์๋์?
์ TypeScript ๊ฐ์๋ ์ด ๊ฐ์๊ฐ ์ฒ์์ด์ ๋ง์ง๋ง์
๋๋ค. ํ ๋ฒ ๊ตฌ๋งคํ๋ฉด ์ด ๊ฐ์์ ๋ํ ๋ชจ๋ ์
๋ฐ์ดํธ๋ฅผ ๋ฌด๋ฃ๋ก ๋ฐ์ผ์ค ์ ์์ผ๋ฉฐ ์ธํ๋ฐ์ด ๋ณด์ฅํ๋ ํ์ ์์ฅ ๊ฐ์์
๋๋ค.
Q. ์ปดํจํฐ ์คํ์ ์ด๋ ์ ๋๊ฐ ํ์ํ๊ฐ์?
์ ๋ง ๋๋ฌด ์ค๋๋ ์ปดํจํฐ๋ง ์๋๋ผ๋ฉด, ์ด์์ฒด์ ์ ๋ฒ์ ๋ง ์ต์ ๋ฒ์ ์ด๋ฉด ๋ฌธ์ ์์ต๋๋ค. Node.js์ TypeScript ๊ทธ๋ฆฌ๊ณ VSC๋ง ์ค์น๋๋ค๋ฉด ๋ฌธ์ ์์ด ๊ฐ์๋ฅผ ๋ฐ๋ผ์ฌ ์ ์์ต๋๋ค.
๐พ ์๊ฐ ์ ํ์ธํด์ฃผ์ธ์!
- ์ด ๊ฐ์๋ Typescript ๋ฌธ๋ฒ์ ์ ํํ ์ดํดํ๋ ๋ฐ ์ด์ ์ ๋ง์ท์ต๋๋ค. ๋๋ฌธ์ ์ค์ ์์ ๋ ์ค์ต์ ๋ฐ๋ก ํฌํจํ์ง ์์ต๋๋ค. (๋ง์ฝ ์์ฒญ์ด ๋ง๋ค๋ฉด ์ถํ ์
๋ฐ์ดํธ๋ ์ ์์ต๋๋ค.) ์ค์ ์ NestJS ๋ฐ NextJS ๊ฐ์ ๋ฑ ์ค์ ํ๋ ์์ํฌ๋ฅผ ๋ค๋ฃจ๋ ๊ฐ์์์ ์ง์ค์ ์ผ๋ก ์งํํ๊ฒ ๋ฉ๋๋ค.
- ์ค์ต ํ๊ฒฝ์ผ๋ก๋ Windows 10 ์ด์ ๋๋ macOS ์ต์ ๋ฒ์ ์ด ํ์ฌ๋ PC์ TypeScript, Node.js ๋ฐ VSC ์ฌ์ฉ์ด ๊ฐ๋ฅํ Linux ์ด์์ฒด์ 2๊ฐ์ง๊ฐ ํ์ํฉ๋๋ค.
- IDE๋ก๋ Visual Studio Code๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ข์ํ๋ IDE๊ฐ ๋ฐ๋ก ์๋ค๋ฉด ๋ค๋ฅธ ๊ฑธ ์ฌ์ฉํด๋ ํฐ ๋ฌธ์ ๊ฐ ์์ต๋๋ค.
- ์ต์ Stable ๋ฒ์ ์ Node.js๋ฅผ ์ฌ์ฉํฉ๋๋ค.
- ์ค์ต ๋ด์ฉ์ ๋ํ ๋ชจ๋ ์ฝ๋ ์๋ฃ๋ GitHub ๋ ํฌ์งํ ๋ฆฌ๋ฅผ ํตํด ์ ๊ณต๋ฉ๋๋ค.
- ์ฝ๋ํฉํ ๋ฆฌ ์ปค๋ฎค๋ํฐ๋ฅผ ํตํด ์ธ์ ๋ ์ง ๋์์ ๋ฐ์ ์ ์์ต๋๋ค.
๋์ ์๊ฐ์ 9,000๋ช
์ด์
์ง์๊ณต์ ์ ์ฝ๋ํฉํ ๋ฆฌ์
๋๋ค!
์ ๋ 2022๋
ํ๋ฌํฐ ๊ฐ์๋ฅผ ์์์ผ๋ก ์ธํ๋ฐ ๋ฐ ์ ํ๋ธ์์ ๊พธ์คํ ํ๋์ ํด์์ต๋๋ค. ๋น๊ต์ ์์ ์ํ๊ณ์ธ ํ๋ฌํฐ ๊ฐ์๋ง์ผ๋ก ์ธํ๋ฐ 2022 Rookie of the Year๋ฅผ ๋ฌ์ฑํ๊ณ , ์ด์ ์ ์ ๋ฉ์ธ ๊ธฐ์ ์์ญ์ธ Javascript ์คํ๊ณผ DevOps ๊ทธ๋ฆฌ๊ณ ํด๋ผ์ฐ๋ ์ชฝ์ผ๋ก ๊ฐ์ ํ์ดํ๋ผ์ธ์ ํ์ฅํ๊ธฐ ์ํด ๋ค์ํ ๊ฐ์๋ฅผ ์ค๋น ์ค์
๋๋ค.
(์ธํ๋ฐ์ด ๋ง๋ ์ฌ๋, ์ฝ๋ํฉํ ๋ฆฌ ์ธํฐ๋ทฐ >>)
Javascript ๊ฐ์๋ก ์ ๊ฐ์๋ ฅ์ ํ๋จํ๊ธฐ ์ด๋ ต๋ค๋ฉด ์ธํ๋ฐ ๋ด ์ฝ๋ํฉํ ๋ฆฌ์ ํ๋ฌํฐ ๊ฐ์ ํ๊ธฐ๋ฅผ ํ์ธํด๋ณด์ธ์! ํญ์ ๋ฐ์ ํ๊ณ ์ข์ ๊ฐ์๋ฅผ ์ ์ํ๋ ์ฝ๋ํฉํ ๋ฆฌ๊ฐ ๋๊ฒ ์ต๋๋ค.
โ
โ
โ
โ
โ
17๋
์ฐจ ๊ฐ๋ฐ์์
๋๋ค. ์ด ๊ฐ์๋ ํ๋ฌํฐ์ ์
๋ฌธํ์๋ ๋ถ๋ค์๊ฒ๋ ์ถ์ฒํ๊ณ , ์ค๋ฌด์ฉ ํ๋ก์ ํธ์๋ ๋งค์ฐ ์ ์ฉํ ๊ฐ์์
๋๋ค. ์ด๋ณด๋ค ์ข์ ๊ฐ์๊ฐ ์๋ค์. ์ฌ๊ธฐ๊ฐ ์ง์ง์
๋๋ค. ์๊ฐ๋ฃ๊ฐ ์๊น์ง ์์ ์ ๋๋ก ๊น๋ํ๊ฒ ์ค๋ช
ํด์ฃผ์๊ณ , ์ ๋ง ๋ง์ ๋์์ ๋ฐ๊ณ ์๋ ๊ฐ์์
๋๋ค.
โ
โ
โ
โ
โ
์ ๋ง ์๋ฒฝ์ ๊ฐ๊น์ด ๊ฐ์์
๋๋ค. ํ๋ฌํฐ๋ฅผ ๊ณต๋ถํ๋ ค๊ณ ๊ฑฐ์ ๋ชจ๋ ์ฑ
์ ๊ตฌ๋งคํ์๊ณ , ์จ๋ผ์ธ ํด๋ก ์ฝ๋ฉ๋ ๋ง์ด ์ ํ์์ต๋๋ค. ๋ค๋ฅธ ํ๋ซํผ์์ ํ๋ฌํฐ์ ๋ํด ์ ๋ง ์ฐจ๊ทผ์ฐจ๊ทผ ์ ์๋ ค์ฃผ๋ ๊ฐ์๋ ๋ค์ด๋ดค์ต๋๋ค. ๊ทธ๋ฐ๋ฐ ์ด๊ฒ ์ ์ผ ์ ์ฉํฉ๋๋ค. ๊ฐ์ฅ ์ค๋ฌด์ ์ด๊ณ ๊ฐ์ฑ๋น๊ฐ ์์ต๋๋ค. ์ด๊ฒ์ ๋จผ์ ๋ฐฐ์ฐ๊ณ ๋ถ์กฑํ ๋ถ๋ถ์ ์ฑ์๋๊ฐ์๊ธธ ์ง์ฌ์ผ๋ก ์กฐ์ธํฉ๋๋ค.
โ
โ
โ
โ
โ
๊ทธ ๋ง์ ๊ฐ์๋ค ์ค์์ ์ฝ๋ํฉํ ๋ฆฌ๋์ ๊ฐ์๋ ๋ฒ ์คํธ ์ค๋ธ ๋ ๋ฒ ์คํธ๋ผ๊ณ ์๊ฐํฉ๋๋ค. ์ ๊ฐ ๋ณธ ๋ค๋ฅธ ๊ฐ์๋ค์ ๋๋ถ๋ถ์ด ์ด๋ ํ ๋ถ๋ถ์์ ์ํํ๊ฑฐ๋ ํจ์คํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์์ ๋ฐฐ์ฐ๋ ์
์ฅ์์ ์ฐ๊ฒฐ์ด ๋์ง ์์ ์ดํด๋ฅผ ๋์น๊ณ ์์ฌ์ด ๊ฒฝ์ฐ๊ฐ ์ ๋ง ๋ง์๋๋ฐ ์ฝ๋ํฉํ ๋ฆฌ๋์ ๊ฐ์๋ ๊ทธ๋ฐ ๊ฒ ์์ต๋๋ค. ์ผ๋จ ๋ค์ด๋ณด์๋ฉด ํํ ์ ํ์ค ๊ฒ๋๋ค. ํํ๊ฐ ์๋๋ผ ๋ง์กฑ๊ณผ ๋๋ถ์ด ์ ์ฒ๋ผ ์ฐํฌ์ด ๋์๋ฆฌ๋ผ ์๊ฐํฉ๋๋ค.
โ
โ
โ
โ
โ
์ ์ธ๊ณ ํ๋ซํผ, ์ ํ๋ธ, ์คํ๋ผ์ธ ๊ฐ์ ํตํ์ด ํ๋ฌํฐ ๊ด๋ จ ์ ์ผ ์ข์ ๊ฐ์ ์ค ํ๋๊ฐ ์๋๊น ์ถ์ต๋๋ค. ํ๊ตญ์ด๊ฐ ๋ชจ๊ตญ์ด๋ผ ์ด ๊ฐ์๋ฅผ ๋ค์ ์ ์๋ค๋ ์ ์ ๋คํ์ด๋ค ์ถ์ ์ ๋์
๋๋ค. ์ค๋ฌด์ ์ธ ๋ถ๋ถ๊ณผ ๊ธฐ์ ์ ์ธ ๋ถ๋ถ์ด ํจ๊ป ์๋ฆฝ๋์ด ์๊ณ , ์ ๋๋ก ๊ฐ๋
์ ํ๋ํ๋ ๊นจ์ฐ์น๋ฉด์ ๋จ๊ณ๋ฅผ ๋ฐ์๋๊ฐ๋ ๊ฐ์๋ ์ด ๊ฐ์๋งํ ๊ฒ์ด ์๋ค๊ณ ์๊ฐํฉ๋๋ค.
์๊ฐ์์ ์ํ ํน๋ณํ ์ถ๊ฐ ํํ
1) ๊ฐ์์ ์ถ๊ฐ๋์ผ๋ฉด ํ๋ TypeScript ๋ฌธ๋ฒ ๊ด๋ จ ๋ด์ฉ์ด ์๋ค๋ฉด ์ง์ฒด ๋ง๊ณ ์ถ์ฒํด์ฃผ์ธ์. ์ ์ TypeScript ๊ฐ์๋ ์ด ๊ฐ์ ํ๋๋ก ๋์ด๋ฉฐ ์ถํ ์ถ๊ฐ๋๋ ๋ด์ฉ์ ๋ชจ๋ ์ด ๊ฐ์์ ์ถ๊ฐ๋ฉ๋๋ค. ๊ทธ๋ฌ๋ ํ ๋ฒ์ ๊ตฌ๋งค๋ก ์์ผ๋ก์ ๋ชจ๋ ์
๋ฐ์ดํธ๋ฅผ ๋ฐ์๋ณด์ค ์ ์์ต๋๋ค.
2) ์ ๊ธฐ์ ์ผ๋ก ์ ํ๋ธ์์ ๋ผ์ด๋ธ ๋ฐฉ์ก์ ์งํํ๊ณ ์์ต๋๋ค. ๋ชจ๋ ์ ํ์ ๊ฐ๋ฐ ๊ณ ๋ฏผ๊ณผ ์ง๋ฌธ์ ๋ฐ๊ณ ์์ผ๋ฉฐ ๊ฐ์๋ฅผ ์งํํ๋ฉฐ ์ด๋ ค์์ด ์์ ๊ฒฝ์ฐ ์ฆ๊ฐ์ ์ผ๋ก ๋๋ต์ ๋๋ฆด ์ ์๋ ์๊ฐ์ ํ ๋นํ๊ธฐ ์ํด ๋
ธ๋ ฅ ์ค์
๋๋ค. ๋์ด์ ์ํต์ด ์ ๋๋ ๊ฐ์ฌ ๋๋ฌธ์ ์คํธ๋ ์ค ๋ฐ์ง ๋ง์ธ์!

3) ๊ฐ์ ๊ตฌ๋งค ํ ์ธํ๋ฐ ์ด๋ฉ์ผ ์ธ์ฆ ์ Discord ์ ๋ฃ ์ปค๋ฎค๋ํฐ์ ์
์ฅ ๊ฐ๋ฅํฉ๋๋ค. ๋ํ ์ ํ์ฑํ๋์ด์๋ ์ฝ๋ํฉํ ๋ฆฌ ๊ณต์ ์นด์นด์ค ์ฑ๋๋ ์ ๊ทน ํ์ฉํด์ฃผ์ธ์!
4) ์ด๋ค ํ๋ก๊ทธ๋๋ฐ ๊ธฐ์ ์ ๋ฐฐ์ฐ๋ ํ๊ฒฝ์ค์ ์ ์๊ฐ์๋ค์ด ๋งค์ฐ ์ด๋ ค์ํ๋ ์์ ์ค ํ๋์
๋๋ค. ๋ฌผ๋ก ์ง์ ํด๊ฒฐํ๋ ค๊ณ ๋
ธ๋ ฅํ๋ ๋ชจ์ต์ ์ข์ ๊ฐ๋ฐ์๊ฐ ๋๊ธฐ์ํด ๋งค์ฐ ์ค์ํ ์์์ด์ง๋ง ๋์ ํ ๋ชปํ๊ฒ ๋ค๋ฉด ์ง์ฒด๋ง๊ณ ์ ๋ฅผ ํ์ฉํด์ฃผ์ธ์. ์ ํฌ ์นด์นด์ค ์ฑ๋์ ๋ค์ด์ค์
์ ๊ฐ์๋ฅผ ๋ง์ํด ์ฃผ์ ๋ค์ ์๊ฒฉ ์ ์ฒญ์ ํด์ฃผ์๋ฉด ์๊ฐ ์กฐ์จ ํ ํ๊ฒฝ์ค์ ์ ๋ชจ๋ ์ง์ ๋ด๋๋ฆฌ๊ณ ์์ต๋๋ค! ๋์ด์ ์์๋ ๋ชปํ ์ฑ ํฌ๊ธฐํ์ง ๋ง์ธ์!
์ฝ๋ํฉํ ๋ฆฌ ํตํฉ ๋งํฌ ๋ฐ๋ก๊ฐ๊ธฐ
์ฝ๋ํฉํ ๋ฆฌ์ ์ง๋ ๊ฐ์๊ฐ ๊ถ๊ธํ๋ค๋ฉด?