๋ถ๋ฅ:ํ๋ก๊ทธ๋๋ฐ ์ธ์ด
์ด ๋ฌธ์์ ์๋ณธ์ ์ธ๋ถ ์ํค์์ ๊ฐ์ ธ์์ต๋๋ค.
๊ณต์ ์ฌ์ดํธ
1. ๊ฐ์2. ์์ธ3. ๊ฐ๋ฐ ํ๊ฒฝ ๋ง๋ค๊ธฐ4. ์๋ฐ์คํฌ๋ฆฝํธ์์ ์ฐจ์ด5. ์ฌ์ฉ ์ฌ๋ก6. ํน์ฅ์
6.1. ๊ธฐ์กด ์๋ฐ์คํฌ๋ฆฝํธ ์์ค์์ ํธํ6.2. ๋ค๋ฅธ ์ธ์ด์์ ๋ฌธ๋ฒ ์ ์ฌ์ฑ6.3. IDE์์ ๊ถํฉ6.4. npm ์ฌ์ฉ
7. ์ฃผ์์ฌํญ7.1. ๊ฒฐ๊ตญ์๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ปดํ์ผ7.2. ํ์ต ๊ณก์ ๋ฐ Trade-off7.3. npm ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋นํธํ
8. ๋ผ์ด๋ธ๋ฌ๋ฆฌ9. ๊ด๋ จ ๋ฌธ์1. ๊ฐ์[ํธ์ง]
๋ง์ดํฌ๋ก์ํํธ์์ ๊ตฌํํ JavaScript์ ์ํผ์
(Superset) ํ๋ก๊ทธ๋๋ฐ ์ธ์ด. ํ์ฅ์๋ก๋ .ts๋ฅผ ์ฌ์ฉํ๋ฉฐ, ์ปดํ์ผ์ ๊ฒฐ๊ณผ๋ฌผ๋ก JavaScript ํ์ผ์ธ .js๋ฅผ ์ถ๋ ฅํ๋ค. ์ต์ข
์ ์ผ๋ก ๋ฐํ์์์๋ ์ด๋ ๊ฒ ์ถ๋ ฅ๋ JavaScript ์ฝ๋๋ฅผ ๊ตฌ๋์ํค๊ฒ ๋๋ค.
2. ์์ธ[ํธ์ง]
TypeScript๋ผ๋ ์ด๋ฆ๋ต๊ฒ ์ ์ ํ์
์ ๋ช
์ํ ์ ์๋ค๋ ๊ฒ์ด ์์ํ ์๋ฐ์คํฌ๋ฆฝํธ์์ ๊ฐ์ฅ ํฐ ์ฐจ์ด์ ์ด๋ค. ๋๋ถ์ ๊ฐ๋ฐ ๋๊ตฌ(IDE๋ ์ปดํ์ผ๋ฌ ๋ฑ)์๊ฒ ๊ฐ๋ฐ์๊ฐ ์๋ํ ๋ณ์๋ ํจ์ ๋ฑ์ ๋ชฉ์ ์ ๋์ฑ ๋ช
ํํ๊ฒ ์ ๋ฌํ ์ ์๊ณ , ๊ทธ๋ ๊ฒ ์ ๋ฌ๋ ์ ๋ณด๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์ฝ๋ ์๋ ์์ฑ์ด๋ ์๋ชป๋ ๋ณ์/ํจ์ ์ฌ์ฉ์ ๋ํ ์๋ฌ ์๋ฆผ[1] ๊ฐ์ ํ๋ถํ ํผ๋๋ฐฑ์ ๋ฐ์ ์ ์๊ฒ ๋๋ฏ๋ก ์์ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋นํด ์ด๋ง์ด๋งํ ์์ฐ์ฑ ํฅ์์ ๊พํ ์ ์๋ค. ์ฆ, '์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ค์ ๋ก ์ฌ์ฉํ๊ธฐ ์ ์ ์์๋งํ ํ์
์๋ฌ๋ค์ ๋ฏธ๋ฆฌ ์ก๋ ๊ฒ' ์ด ํ์
์คํฌ๋ฆฝํธ์ ์ฌ์ฉ ๋ชฉ์ ์ด๋ค.
๊ฐ๋ฐ์์ ๋๊ตฌ ๊ฐ์ ์ํธ์์ฉ์์ ๋ฟ๋ง ์๋๋ผ ๊ฐ๋ฐ์ ๊ฐ์ ์ํธ์์ฉ์์๋ ์๋นํ ์ด์ ์ด ์๋๋ฐ, API๋ฅผ ๊ตฌํํ๊ณ ์ฌ์ฉํจ์ ์์ด ํด๋น API์ ์ธํ๊ณผ ์์ํ์ด ๋ฌด์์ธ์ง ๋ช ํํ๊ฒ ํํํ ์ ์์ผ๋ฏ๋ก, API ํ๋ ์ฐ๋๋ฐ์๋ ์ผ์ผ์ด ๋งค๋ด์ผ์ ์ฐพ์๋ด์ผ ํ๊ฑฐ๋ ์ฌํ๋ฉด ํด๋น API์ ์ฝ๋๊น์ง ๋ค์ ๊ฑฐ๋ ค๋ด์ผ ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋นํด ํจ์จ์ ์ด๋ค.
๊ฐ๋ฐ์์ ๋๊ตฌ ๊ฐ์ ์ํธ์์ฉ์์ ๋ฟ๋ง ์๋๋ผ ๊ฐ๋ฐ์ ๊ฐ์ ์ํธ์์ฉ์์๋ ์๋นํ ์ด์ ์ด ์๋๋ฐ, API๋ฅผ ๊ตฌํํ๊ณ ์ฌ์ฉํจ์ ์์ด ํด๋น API์ ์ธํ๊ณผ ์์ํ์ด ๋ฌด์์ธ์ง ๋ช ํํ๊ฒ ํํํ ์ ์์ผ๋ฏ๋ก, API ํ๋ ์ฐ๋๋ฐ์๋ ์ผ์ผ์ด ๋งค๋ด์ผ์ ์ฐพ์๋ด์ผ ํ๊ฑฐ๋ ์ฌํ๋ฉด ํด๋น API์ ์ฝ๋๊น์ง ๋ค์ ๊ฑฐ๋ ค๋ด์ผ ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋นํด ํจ์จ์ ์ด๋ค.
3. ๊ฐ๋ฐ ํ๊ฒฝ ๋ง๋ค๊ธฐ[ํธ์ง]
ํ์
์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด npm์ด ํ์ํ๋ค. Node.js๋ฅผ ์ค์นํ๋ฉด npm์ด ์๋์ผ๋ก ์ค์น๋๋ค. npm์ ์ค์นํ๊ณ ๋๋ฉด ํฐ๋ฏธ๋์ด๋ ๋ช
๋ น ํ๋กฌํํธ์์
๋ง์ผ Windows์ ํ์์ ธ์์ ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ค๋ฉด ๊ด๋ฆฌ์ ๊ถํ์ ํ์์ ธ์์
Mac/Linux์์ Node.js์ npm์ ์ฌ์ฉํ ๋, ์์์ ์ธ๊ธํ Windowsํ๊ฒฝ์์์ ๊ถํ๋ฌธ์ ์ ์ ์ฌํ ๊ถํ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์๋ค. ๊ทธ๋ฐ ๋ฌธ์ ๋ฅผ ๋ฏธ์ฐ์ ๋ฐฉ์งํ๊ธฐ ์ํด nvm์ ๋จผ์ ์ค์นํ๊ณ npm์ ์ฌ์ฉํ๊ธฐ๋ฅผ ๊ถ์ฅํ๋ค. nvm์ ์ฐ์ง ์๊ณ Node.js์ npm์ ์ฌ์ฉํ๋๊ฑด ๋ฌผ๋ก ๊ฐ๋ฅํ์ง๋ง ํนํ Mac์ sudo๋ฅผ ์ฌ๋งํ๋ฉด ์ฌ์ฉํ์ง ๋ง๋ผ๊ณ ํ๋ OS์ธ ๋งํผ, ์ ๋ง ์ ๋ง ์ ๋ง ๊ท์ฐฎ์ ๋ฌธ์ ์ ๋ง์ด ์ฝํ ์ ์์ผ๋, ์ ์ ๊ฑด๊ฐ๊ณผ ๋ณด์์ ์ํด nvm์ ๊ผญ! ์ค์นํ๊ธฐ ๋ฐ๋๋ค. Windows์์๋ nvm์ฌ์ฉ์ ๊ฐ๋ฅํ๋ nvm-windows ๋ ์์ nvm๊ณผ ์์ ํ ๋ถ๋ฆฌ๋ ํ๋ก์ ํธ์์ ๊ฐ์ํ๊ณ ์ฌ์ฉํด์ผ ํ๋ค.
๊ทธ ๋ค๋ก๋ .ts ํ์ผ์ ํ์ ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ์ฌ ์์ฑํ๊ณ ํฐ๋ฏธ๋์ด๋ ๋ช ๋ น ํ๋กฌํํธ์์ ํด๋น ํด๋๋ก ์ด๋ํ์ฌ 'tsc ํ์ผ์ด๋ฆ(ํ์ฅ์ ์ ์ธ)'๋ฅผ ์ ๋ ฅํด์ฃผ๋ฉด ๋๋ค.
์) ํ์ผ ์ด๋ฆ์ด script.ts ์ผ ๋,
๋๋ ์๋์ ๊ฐ์ ๋ฐฉ๋ฒ๋ ์๋ค :
๋ค์ํ IDE๋ค์ด ํ์ ์คํฌ๋ฆฝํธ๋ฅผ ์ง์ํ๊ณ ์์ง๋ง, ์ญ์ ํ์ ์คํฌ๋ฆฝํธ์ ์ ์์ฌ์ธ ๋ง์ดํฌ๋ก์ํํธ์ ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋์์ ๊ฐ์ฅ ์ ํฉ์ฑ์ด ํ๋ฅญํ๋ค๊ณ ํ๊ฐ๋ฐ๊ณ ์๋ค. ์์ ์ปค๋งจ๋๋ฅผ ๋ด๋ถ ํฐ๋ฏธ๋์ ์ ๋ ฅํด ์ปดํ์ผํ ์๋ ์๊ณ , ํ๋ก์ ํธ ๋ด์ .vscode ํด๋์ launch.json๋ฐ task.json ์ค์ ํ์ผ์ ์์ฑํด์ ๋ณธ์ธ์ ํ๋ก์ ํธ์ ์ ํฉํ ์ค์ ์ ์ ๋ ฅํด์ฃผ๋ฉด ๋น์ฃผ์ผ ์คํ๋์ค์ฒ๋ผ F5, ํน์ Ctrl + F5 ๋จ์ถํค๋ก ์ปดํ์ผ๋ถํฐ ์คํ๊น์ง ์ผ์ฌ์ฒ๋ฆฌ๋ก ์งํ์ํฌ ์๋ ์๋ค.
npm i -g typescript
๋ฅผ ์
๋ ฅํ๋ฉด ํ์
์คํฌ๋ฆฝํธ ์ปดํ์ผ๋ฌ(ํ์
์คํฌ๋ฆฝํธ โ ์๋ฐ์คํฌ๋ฆฝํธ ๋ณํ๊ธฐ)๊ฐ ์ค์น๋๋ค. ๋ง์ผ Windows์ ํ์์ ธ์์ ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ค๋ฉด ๊ด๋ฆฌ์ ๊ถํ์ ํ์์ ธ์์
Set-ExecutionPolicy RemoteSigned
๋ฅผ ํตํด ํ์์
ธ์ ๊ถํ์ ์ฃผ๊ณ ์
๋ ฅํ๋ค.Mac/Linux์์ Node.js์ npm์ ์ฌ์ฉํ ๋, ์์์ ์ธ๊ธํ Windowsํ๊ฒฝ์์์ ๊ถํ๋ฌธ์ ์ ์ ์ฌํ ๊ถํ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์๋ค. ๊ทธ๋ฐ ๋ฌธ์ ๋ฅผ ๋ฏธ์ฐ์ ๋ฐฉ์งํ๊ธฐ ์ํด nvm์ ๋จผ์ ์ค์นํ๊ณ npm์ ์ฌ์ฉํ๊ธฐ๋ฅผ ๊ถ์ฅํ๋ค. nvm์ ์ฐ์ง ์๊ณ Node.js์ npm์ ์ฌ์ฉํ๋๊ฑด ๋ฌผ๋ก ๊ฐ๋ฅํ์ง๋ง ํนํ Mac์ sudo๋ฅผ ์ฌ๋งํ๋ฉด ์ฌ์ฉํ์ง ๋ง๋ผ๊ณ ํ๋ OS์ธ ๋งํผ, ์ ๋ง ์ ๋ง ์ ๋ง ๊ท์ฐฎ์ ๋ฌธ์ ์ ๋ง์ด ์ฝํ ์ ์์ผ๋, ์ ์ ๊ฑด๊ฐ๊ณผ ๋ณด์์ ์ํด nvm์ ๊ผญ! ์ค์นํ๊ธฐ ๋ฐ๋๋ค. Windows์์๋ nvm์ฌ์ฉ์ ๊ฐ๋ฅํ๋ nvm-windows ๋ ์์ nvm๊ณผ ์์ ํ ๋ถ๋ฆฌ๋ ํ๋ก์ ํธ์์ ๊ฐ์ํ๊ณ ์ฌ์ฉํด์ผ ํ๋ค.
๊ทธ ๋ค๋ก๋ .ts ํ์ผ์ ํ์ ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ์ฌ ์์ฑํ๊ณ ํฐ๋ฏธ๋์ด๋ ๋ช ๋ น ํ๋กฌํํธ์์ ํด๋น ํด๋๋ก ์ด๋ํ์ฌ 'tsc ํ์ผ์ด๋ฆ(ํ์ฅ์ ์ ์ธ)'๋ฅผ ์ ๋ ฅํด์ฃผ๋ฉด ๋๋ค.
์) ํ์ผ ์ด๋ฆ์ด script.ts ์ผ ๋,
tsc script
์์ ๊ฐ์ด ์
๋ ฅํ๋ฉด script.js ํ์ผ์ด ๊ฐ์ ํด๋์ ์์ฑ๋๋ค.๋๋ ์๋์ ๊ฐ์ ๋ฐฉ๋ฒ๋ ์๋ค :
tsc --init
๋ฅผ ์คํํ ํ, ์์ฑ๋๋ tsconfig.json์ ์์ ํ๊ณ ์๋์ ๊ฐ์ ๋ช
๋ น์ด๋ฅผ ์ฌ์ฉํด๋ ๋์ผํ ๊ฒฐ๊ณผ๊ฐ ๋์จ๋ค.tsc
๋ค์ํ IDE๋ค์ด ํ์ ์คํฌ๋ฆฝํธ๋ฅผ ์ง์ํ๊ณ ์์ง๋ง, ์ญ์ ํ์ ์คํฌ๋ฆฝํธ์ ์ ์์ฌ์ธ ๋ง์ดํฌ๋ก์ํํธ์ ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋์์ ๊ฐ์ฅ ์ ํฉ์ฑ์ด ํ๋ฅญํ๋ค๊ณ ํ๊ฐ๋ฐ๊ณ ์๋ค. ์์ ์ปค๋งจ๋๋ฅผ ๋ด๋ถ ํฐ๋ฏธ๋์ ์ ๋ ฅํด ์ปดํ์ผํ ์๋ ์๊ณ , ํ๋ก์ ํธ ๋ด์ .vscode ํด๋์ launch.json๋ฐ task.json ์ค์ ํ์ผ์ ์์ฑํด์ ๋ณธ์ธ์ ํ๋ก์ ํธ์ ์ ํฉํ ์ค์ ์ ์ ๋ ฅํด์ฃผ๋ฉด ๋น์ฃผ์ผ ์คํ๋์ค์ฒ๋ผ F5, ํน์ Ctrl + F5 ๋จ์ถํค๋ก ์ปดํ์ผ๋ถํฐ ์คํ๊น์ง ์ผ์ฌ์ฒ๋ฆฌ๋ก ์งํ์ํฌ ์๋ ์๋ค.
4. ์๋ฐ์คํฌ๋ฆฝํธ์์ ์ฐจ์ด[ํธ์ง]
- ํ์ ์ ์ธ ๊ธฐ๋ฅ์ ์กด์ฌ
ํ์
์คํฌ๋ฆฝํธ์์๋ ๋ฒ๊ทธ๊ฐ ์ผ์ด๋๊ธฐ ์ฌ์ด ์์์ ํ์
์ ์ ์ธํ์ฌ ๋ฒ๊ทธ๊ฐ ์ผ์ด๋๋ ๊ฒ์ ๋ง์์ค๋ค. ๊ฐ๋ น ์๋ฐ์คํฌ๋ฆฝํธ์์๋ ํ์
์ด ๋ค๋ฅธ ๋ ๋ณ์๋ฅผ ๊ณ์ฐ์ ์์ผ์ฃผ๋ฉด
ํ์ ์คํฌ๋ฆฝํธ์์๋
const a = 3;
const b = '5';
console.log(a*b)์ด๊ฒ ๊ณ์ฐ์ด ์๋๋์ด 15๋ฅผ ์ถ๋ ฅํ๋ ๊ธฐ๋ฅ์ด ์๋ค. ๋ง์ผ ํ๋ก๊ทธ๋๋จธ๊ฐ ์ด๊ฒ ๋ค๋ฅธ ์ธ์ด์ฒ๋ผ ๊ณ์ฐ์ด ์๋ํ์ง ์์ ๊ฒ์ ์๋ํ๊ณ ์ด๋ ๊ฒ ์ฝ๋๋ฅผ ์ง์๋ค๋ฉด ์๋์น ์์ ์์
์ด ์ด๋ฃจ์ด์ง๋ ๋ฒ๊ทธ๊ฐ ๋ฐ์ํ๋ ๊ฒ์ด๋ค.ํ์ ์คํฌ๋ฆฝํธ์์๋
const a:number = 3;
const b:string = '5';
console.log(a*b)์ด๋ ๊ฒ ์ซ์๋ฉด ์ซ์, ๋ฌธ์์ด์ด๋ฉด ๋ฌธ์์ด์ด๋ผ๊ณ ํ์
์ ์ ์ธํด์ฃผ์ด์ ๊ณ์ฐ์ด ์๋๋์ง ๋ชปํ๊ฒ ํ๊ฑฐ๋, ์ปดํ์ผ ์ ์ ์ค๋ฅ ๋ฉ์์ง๋ฅผ ๋์ฐ๊ฒ ํ๋ค.[์ค๋ฅ๋ฉ์์ง]var alist = document.querySelectorAll('a');
for (var i = 0; i < alist.length; i++) {
alist[i].style.color = '#333'
};
var example = document.querySelector('.exampleClass');
example.style.backgroundColor = "#ccc";
document.addEventListener('mousemove', function () {
var x = event.clientX;
document.querySelector('h1').style.fontSize = (x / 50) + 'px'
}); TypeScript
const alist = document.querySelectorAll('a');
for (let i: number = 0; i < alist.length; i++) {
alist[i].style.color = '#333'
};
const example: HTMLElement = document.querySelector('.exampleClass');
example.style.backgroundColor = "#ccc";
document.addEventListener('mousemove', function (event: MouseEvent) {
const x = event.clientX;
(document.querySelector('h1') as HTMLElement).style.fontSize = String(x / 50) + 'px';
});5. ์ฌ์ฉ ์ฌ๋ก[ํธ์ง]
5.1. ๋ฐฑ์๋์ ํ๋ก ํธ์๋ ํตํฉ[ํธ์ง]
ํ์
์คํฌ๋ฆฝํธ๋ Node.js ๋ฐํ์ ๋ฟ๋ง ์๋๋ผ, ์๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ๊ณ ํฅ์ธ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์์๋ ์๋นํ ์ ์ฉํ๋ค. ํนํ ํ๋ก ํธ์๋์ ๋ฐฑ์๋[6]๋ฅผ ๋ชจ๋ TypeScript๋ก ๊ตฌํํ๋ค๋ฉด ์ข
์ ๊ณผ๋ ๋น๊ตํ ์ ์์ ์ ๋๋ก ๋์ ๊ฐ๋ฐ ์์ ์ฑ๊ณผ ํธ์์ฑ์ ํ๋ณดํ ์ ์๋ค. ํ๋ก ํธ์๋-๋ฐฑ์๋ ์ํธ ๊ฐ ๋ฐ์ดํฐ ํต์ ์ ์ํด์๋ ์ผ๋ฐ์ ์ผ๋ก JSON ํ์์ REST API๋ฅผ ๊ตฌํํ๊ฒ ๋๋๋ฐ, [7] ์ด๋ ๊ฒ ์ฌ์ฉ๋๋ ๋ฐ์ดํฐ ํฌ๋งท์ ๊ฐ๋ฐ ๊ณผ์ ์ค์ ์์์ด ๋ณ๊ฒฝ๋๊ณ ๋ ๋ณ๊ฒฝ๋๊ธฐ ๋ง๋ จ์ด๋ค. ์ด๋ก ์ธํด ํ๋ก ํธ์๋์ ๋ฐฑ์๋ ๊ฐ๋ฐ์ ์ฌ์ด์์๋ ์๋ ์์ด ์ปค๋ฎค๋์ผ์ด์
๋ก์ค๊ฐ ๋ฐ์ํ๊ณ [8] ์ด๋ ๊ณ ์ค๋ํ ๊ฐ๋ฐ์์ ํผ๋ก๋ ์์น ๋ฐ ๊ฐ๋ฐ ๊ธฐ๊ฐ ์ฆ๊ฐ, ์ ์ง๋ณด์์ฑ์ ์ ํ๋ก ์ด์ด์ง๋ค. ๊ฒ๋ค๊ฐ ์ด๋ฌํ ๋ฌธ์ ์ ์ ์ค์ ๋ก ์ฝ๋๋ฅผ ๋์์ํค์ง ์ ๊น์ง๋ ์์์ฑ๊ธฐ ์ด๋ ค์ด ๊ฒฝ์ฐ๋ ๋ง๊ธฐ ๋๋ฌธ์ ์ต์
์ ๊ฒฝ์ฐ ๊ฒ์ฆ๋์ง ์์ ๋ฒ๊ทธ๊ฐ ๋จ์ ์ฑ ํ๋ก์ ํธ๋ฅผ ํผ๋ธ๋ฆฌ์ํ๊ฒ ๋ ์๋ ์๋ค. TypeScript๊ฐ ์ด๋ฌํ ์ฌํ๋ฅผ ๋ฏธ์ฐ์ ๋ฐฉ์งํ ์ ์๋ ์ด์ ๋, ํ๋ก ํธ์๋์ ๋ฐฑ์๋๊ฐ์ ๋ฐ์ดํฐ ํฌ๋งท์ ํ์
์ผ๋ก ์ ์ํ์ฌ, ์ด๋ฅผ ์์ธก์์ ๊ณตํต์ผ๋ก ์ฐธ์กฐํ๋๋ก ๊ตฌํํ๊ณ [9], ๋ฐ์ดํฐ ํฌ๋งท์ ๋ณ๊ฒฝ ์ฌํญ์ด ๋ฐ์ํ ๊ฒฝ์ฐ ์ด๋ ๊ฒ ๊ณต์ฉํ๋ ํ์
์ ์ ์๋ถ๋ฅผ ์์ ํจ์ ๋ฐ๋ผ ํ๋ก ํธ์๋์ ๋ฐฑ์๋ ์ฝ๋์ ์ปดํ์ผ ์๋ฌ๋ฅผ ๋ฐ์์ํด์ผ๋ก์จ ๋ฐ์ดํฐ ํฌ๋งท์ ํต์ผ์ ๊ฐ์ ํ๊ธฐ ๋๋ฌธ์ด๋ค.[10]
๋ฌผ๋ก ๋ฐฑ์๋ ๊ฐ๋ฐ์๋ค์, ํ์ ์คํฌ๋ฆฝํธ ์ฌ์ฉ ์ด์ ์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์์๊ฒ ์ฌ๋ฐ๋ฅธ API๋ฅผ ์ ๊ณตํ๊ณ ๋ณธ์ธ์ ์ ์ ๊ฑด๊ฐ์ ์งํค๊ธฐ ์ํด์๋ Swagger๋ฑ์ API๋ฌธ์์ ์์ฑ์ด ์ ํ๋๋ ๊ฒ ๊ถ์ฅ๋๊ธด ํ๊ฒ ์ผ๋, IDE์์ ์ ๊ณตํ๋ ์๋ ์์ฑ์ด๋ API ์๋ฌ ์๋ฆผ ๋ฑ์ ํผ๋๋ฐฑ ๋๋ถ์ ๋ฌธ์ ์ฐธ์กฐ์ ํ์์ฑ์ ์ค์ผ ์ ์๋ค๋ ๊ฒ ์์ฒด๊ฐ ์๋นํ ์ฅ์ ์ด๋ค.
๋ฌผ๋ก ๋ฐฑ์๋ ๊ฐ๋ฐ์๋ค์, ํ์ ์คํฌ๋ฆฝํธ ์ฌ์ฉ ์ด์ ์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์์๊ฒ ์ฌ๋ฐ๋ฅธ API๋ฅผ ์ ๊ณตํ
5.2. ํ๋ก ํธ์๋[ํธ์ง]
๋ฌผ๋ก ํ๋ก ํธ์๋์์๋ ๋จ๋
์ผ๋ก ์ฌ์ฉ์ด ๊ฐ๋ฅํ๋ค. ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ปดํ์ผ ๋๋ ๊ฒ์ ๋น์ฐํ๊ฑฐ๋์, Google์ Angularํ๋ ์์ํฌ๋ 2.0๋ถํฐ ์์ ํ์
์คํฌ๋ฆฝํธ๋ง ์ฌ์ฉ๊ฐ๋ฅํ๋๋ก ๋ฐ๋์๋ค๊ทธ ๋๋ฌธ์ ์ฌ์ฉ์๋ค์ด ๋ง์ด ๋จ์ด์ ธ๋๊ฐ์ง๋ง. Facebook์ ๋ฆฌ์กํธ๋ React.js์ React Native๋ฅผ ๊ฐ๋ฆฌ์ง ์๊ณ ํ์
์คํฌ๋ฆฝํธ ์ฌ์ฉ์ด ๊ฐ๋ฅํ๋ค. ํ์ฌ๋ JavaScript์ TypeScript์ง์๊ฐ์ ๊ต๋ฅ๋ ๊ต์ฅํ ํ๋ฐํ๊ณ , DefinitelyTyped ๋ฑ์ ๊ธฐ์ฌ๋ก๋ถํฐ React์์ TypeScript๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ ์ ์ ์ค์ ํ๋๋ก ์๋ฆฌ์ก์๋ค. React์ ๊ฒฝ์ฐ๋ ํนํ๋ Functional Component, Hooks์ ํจ๊ป ํ์
์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ๋ค๋ฉด ์ด์ ์ ํด๋์ค ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ ๋๋ณด๋ค ํจ์ฌ ์ฝ๊ฒ ๊ฐ๋ฐ์ด ๊ฐ๋ฅํ๋ค.
6. ํน์ฅ์ [ํธ์ง]
6.1. ๊ธฐ์กด ์๋ฐ์คํฌ๋ฆฝํธ ์์ค์์ ํธํ[ํธ์ง]
ํ์
์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ ๋, ํ์
์คํฌ๋ฆฝํธ๊ฐ ๋ฐํ์์์ ๊ทธ๋๋ก ๋์๊ฐ๋ ๊ฒฝ์ฐ๋ ๋๋ฌผ๋ค. ๊ฐ์์ ์์ ํ์๋ฏ ํ์
์คํฌ๋ฆฝํธ๋ ์ปดํ์ผ์ ํตํด ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ณํ๋๋ ๊ฒ์ด ์ผ๋จ ์ฒซ๋ฒ์งธ ๋ชฉ์ ์ธ๋ฐ, ๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ๊ธฐ์กด์ ์๋ฐ์คํฌ๋ฆฝํธ์ ํจ๊ป ์ฌ์ฉํ๋ ๊ฒ์ด ๊ฐ๋ฅํ๋ฉฐ, ์๋ฐ์คํฌ๋ฆฝํธ ๋ฐํ์์ ๊ทธ ์ปดํ์ผ๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๊ธฐ์กด์ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ๊ณผ ์คํ ๊ฐ๋ฅํ๊ฒ ๋๋ ๊ฒ์ด๋ค. ๊ธฐ์กด์ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋จธ๋ค์ ํ์
์คํฌ๋ฆฝํธ๋ฅผ ๋์
ํ ๋, ์ฒ์ ๊ณ ๋ คํด๋ด์ผ ํ ๊ฒ์ด '*.d.ts' ํ์ผ ์์ฑ์ด๋ค. ํด๋์ค, ํด๋์ค, ๋๋ ์ด๋ค ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด์ด๋ ์ง ํ์
์คํฌ๋ฆฝํธ๋ก ์ ์ ๊ฐ๋ฅํ๋ฐ, ๊ธฐ์กด์ ์๋ฐ์คํฌ๋ฆฝํธ ์์ค๋ฅผ ์ผ์ ๊ฑด๋๋ฆฌ์ง ์๊ณ *.d.ts ํ์ผ ์์ฑ๋ง์ผ๋ก ํ์
์คํฌ๋ฆฝํธ ๋์
์ ํฐ ๋์์ ์ค ์ ์๋ค. DefinitelyTyped ๋ ํฌ์งํ ๋ฆฌ์์ ๋ค์ด๋ฐ๋ @types/<ํจํค์ง์ด๋ฆ> ํจํค์ง๊ฐ ๊ทธ๊ฒ์ด๋ค. ์ด ๋ ํฌ์งํ ๋ฆฌ๋ ๊ธฐ์กด ์๋ฐ์คํฌ๋ฆฝํธ npm ํจํค์ง๋ค์ด ๊ธฐ์กด ์์ค๋ฅผ ๊ฑด๋๋ฆฌ์ง ์๊ณ ํ์
์คํฌ๋ฆฝํธ ์ง์์ ์์ฐ์ค๋ฝ๊ฒ ๋
น์๋ค ์ ์๋๋ก ๋์์ ์ฃผ์๋ค. Javascript ์ธ์ด ์ฐจ์์์ ์ง์ํ๋ API๋ค์ ์
์ถ๋ ฅ ํ์
๋ค๋ ์น์ ํ๊ฒ ์ ์๋ผ ์๊ธฐ ๋๋ฌธ์ ์ด๋ฅผ ๋ ์์ ์ ์ผ๋ก ์ฌ์ฉํ ์ ์๊ฒ ๋๊ธฐ๋ ํ๋ค.
๋ํ ํ์ ์คํฌ๋ฆฝํธ๋ const, let ๊ฐ์ ec2015 ์ด์์ ๋ฒ์ ์์ ์ฌ์ฉ๋๋ ๊ตฌ๋ฌธ์ ์ง์ํ๋๋ฐ, ์ด๊ฑธ ์ปดํ์ผ์ ์ํค๊ฒ ๋๋ฉด ec3 ๋ฒ์ ์ผ๋ก ์ปดํ์ผ์ ์์ผ์ค์ IE ๊ตฌ๋ฒ์ ์์๋ ์๋ํ ์ ์๊ฒ ํด์ค๋ค! ์ฆ, ์์ ๋ฒ์ ์ ์๋ฐ์คํฌ๋ฆฝํธ ๊ตฌ๋ฌธ์ ์ฌ์ฉํ๊ณ ๋ IE ๊ตฌ๋ฒ์ ์ ์ง์ํ ์ ์๋ค.
๋ํ ํ์ ์คํฌ๋ฆฝํธ๋ const, let ๊ฐ์ ec2015 ์ด์์ ๋ฒ์ ์์ ์ฌ์ฉ๋๋ ๊ตฌ๋ฌธ์ ์ง์ํ๋๋ฐ, ์ด๊ฑธ ์ปดํ์ผ์ ์ํค๊ฒ ๋๋ฉด ec3 ๋ฒ์ ์ผ๋ก ์ปดํ์ผ์ ์์ผ์ค์ IE ๊ตฌ๋ฒ์ ์์๋ ์๋ํ ์ ์๊ฒ ํด์ค๋ค! ์ฆ, ์์ ๋ฒ์ ์ ์๋ฐ์คํฌ๋ฆฝํธ ๊ตฌ๋ฌธ์ ์ฌ์ฉํ๊ณ ๋ IE ๊ตฌ๋ฒ์ ์ ์ง์ํ ์ ์๋ค.
6.2. ๋ค๋ฅธ ์ธ์ด์์ ๋ฌธ๋ฒ ์ ์ฌ์ฑ[ํธ์ง]
์ ์ด์ ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ C, C++, ์๋ฐ๋ C#๊ฐ์ ์ธ์ด๋ค์ฒ๋ผ (), {}, ; ๋ฑ์ ์ฌ์ฉํ๋ C-family์ธ์ด์ด๊ธฐ ๋๋ฌธ์ ๋ฌธ๋ฒ์ ์ผ๋ก ์ ์ฌํจ์ ๋ด์ธ์ฐ๋ ํ์
์คํฌ๋ฆฝํธ ์ญ์ C-family์ธ๋ฐ, ๊ทธ ์ ๋๊ฐ ํนํ ๋ ๊ฐ๊น์์ ธ์, ์๋ฅผ ๋ค๋ฉด Generic์ <> ๊ธฐํธ๋ฅผ ์ด๋ค. ํ์
์คํฌ๋ฆฝํธ๊ฐ ์๋ฐ, C#, C++์๋ ๋ณธ์ง์ ์ผ๋ก ๋น์ทํ์ง๋ ์์ง๋ง, ํ์
์คํฌ๋ฆฝํธ๋ฅผ ์ฒ์ ์
๋ฌธํ๋ ๊ธฐ์กด ๊ฐ๋ฐ์๋ค์ '์ด! ์ ๊ฑฐ ์ ๋ค๋ฆญ์ด๋ค!' ๋ผ๊ณ ๋น ๋ฅด๊ฒ ์ดํดํ ์ ์์ ๊ฒ์ด๋ค. ๊ฑฐ๊ธฐ์ interface, const ๊ฐ์ ์ง์๋ฌธ ์ญ์ ๊ธฐ์กด ์ธ์ด ์ฌ์ฉ์๋ค์ด ์ต์ํ๋ค๊ณ ๋๋๋งํ ์ฌ์ฉ๋ฐฉ๋ฒ์ ๊ฐ๊ณ ์๋ค.
6.3. IDE์์ ๊ถํฉ[ํธ์ง]
ํ์
๊ฐ๋
์ ๋์
์ ํตํด TypeScript ๊ฐ๋ฐ์ ์ง์ํ๋ IDE๋ก๋ถํฐ ํ๋ถํ ํผ๋๋ฐฑ์ ๋ฐ์ ์ ์๋ค. ์ผ๋ฐ์ ์ธ ์ฌ๋ ์ ์ ํ์
์ธ์ด๋ค์ฒ๋ผ ์๋ ์์ฑ์ ์ง์ํ๊ฑฐ๋, ํด๋น ํ์
์ด ์ง์ํ์ง ์๋ ์ฐ์ฐ[11]์ ์๋๋ ์๋ชป๋ ์ธ์๋ฅผ ์ฌ์ฉํ ํจ์ ํธ์ถ ๋ฑ์ ์ฝ๋ฉ ์ค์ ์ฆ์์์ ๊ฒ์ถํ ์ ์๋ ๊ฒ์ ๊ธฐ๋ณธ. ์ฌ๋ณผ์ ์ด๋ฆ์ ๋ณ๊ฒฝํ๋ฉด ํด๋น ์ฌ๋ณผ์ ์ฐธ์กฐํ๋ ๋ชจ๋ ์ฝ๋๋ค์ ์๋์ผ๋ก ์์ ํด์ฃผ๋ ๋ฆฌํฉํ ๋ง ๊ธฐ๋ฅ ์ญ์ JavaScript๊ฐ ์๋ TypeScript์ด๊ธฐ ๋๋ฌธ์ ์ง์๋ ์ ์๋ ๊ธฐ๋ฅ์ด๋ค. ๋ํ์ ์ธ IDE๋ก๋ JetBrains์ WebStorm์ด ์์ผ๋ฉฐ IntelliJ IDEA๋ ์ผํฐ๋ฐ ์๋์
์ ๊ตฌ์
ํ๋ฉด ์น ๊ฐ๋ฐ ๊ธฐ๋ฅ์ ์ฌ์ฉํ ์ ์๋ค.
ํนํ Microsoft์์ ๋ง๋ ์ธ์ด๋ต๊ฒ, ๊ฐ์ ํ์ฌ์์ ๋ง๋ Visual Studio Code(์ดํ VSC)์์ ๊ถํฉ์ด ์์ฒญ๋๋ค. IDE๋ ์๋์ง๋ง, ๊ฐ์ข ํ๋ฌ๊ทธ์ธ์ ํตํด TypeScript๋ก ์์ํ ์ ์๋ ๋ชจ๋ ๊ฐ๋ฐํ๊ฒฝ์ ๋๋ฌด๋ ์ฝ๊ฒ ๊ตฌ์ถ ๊ฐ๋ฅํ๋ค. VSC๋ ๊ทธ ํ๋ฌ๊ทธ์ธ ์ญ์ ๋๋ถ๋ถ TypeScript๋ก ๊ฐ๋ฐ๋๊ณ ์๊ธฐ ๋๋ฌธ์ ๋น์ฐํ๋ค๋ฉด ๋น์ฐํ ๊ฒฐ๊ณผ.
ํนํ Microsoft์์ ๋ง๋ ์ธ์ด๋ต๊ฒ, ๊ฐ์ ํ์ฌ์์ ๋ง๋ Visual Studio Code(์ดํ VSC)์์ ๊ถํฉ์ด ์์ฒญ๋๋ค. IDE๋ ์๋์ง๋ง, ๊ฐ์ข ํ๋ฌ๊ทธ์ธ์ ํตํด TypeScript๋ก ์์ํ ์ ์๋ ๋ชจ๋ ๊ฐ๋ฐํ๊ฒฝ์ ๋๋ฌด๋ ์ฝ๊ฒ ๊ตฌ์ถ ๊ฐ๋ฅํ๋ค. VSC๋ ๊ทธ ํ๋ฌ๊ทธ์ธ ์ญ์ ๋๋ถ๋ถ TypeScript๋ก ๊ฐ๋ฐ๋๊ณ ์๊ธฐ ๋๋ฌธ์ ๋น์ฐํ๋ค๋ฉด ๋น์ฐํ ๊ฒฐ๊ณผ.
6.4. npm ์ฌ์ฉ[ํธ์ง]
7. ์ฃผ์์ฌํญ[ํธ์ง]
7.1. ๊ฒฐ๊ตญ์๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ปดํ์ผ[ํธ์ง]
ํ์
์คํฌ๋ฆฝํธ๋ ๊ฒฐ๊ตญ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ปดํ์ผ๋์ด ๋์ํ๊ณ , ์ด๋ ์ญ์ '๋ฐํ์์๋ ์ฝํ์
' ์ด๋ผ๋ ์ฝ์ ์ด ์๋ค. ์๋ฅผ ๋ค๋ฉด, ํ์
์คํฌ๋ฆฝํธ๋ก ์์ฑํ Node.js ์๋ฒ๊ฐ ์ ๋์์ค์ด๊ณ , Request๋ฅผ ๋ฐ์๋ค๋ฉด ์ด ๊ฐ์ฒด์ type์ ๊ทธ๋ฅ "object"๋ผ๋ ๊ฒ์ด๋ค. ์ด๋ ๊ฒฝ์ฐ์ ๋ฐ๋ผ ์๊ฐ๋ณด๋ค ํฐ ๋ฌธ์ ๋ ์๋ ์ ์์ผ๋, ํ์
์คํฌ๋ฆฝํธ ์ฌ์ฉ์ ์ธ์ ๋ ๋ฐ๋์ ๊ณ ๋ คํด์ผ ํ ๋ฌธ์ ์ด๋ค. ๋ฌผ๋ก TypeGuard ๊ธฐ๋ฅ์ด๋, io-ts, fp-ts ๋ฑ์ ํจ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํตํด ํจ์ํ์ผ๋ก ๋ฐํ์ ํ์ดํ๊น์ง ์ก์ ์ ์์ง๋ง, ์์ ๋ฐํ์์์ ์ธ์ด ์ฐจ์์ ํ์
์ฒดํฌ๊ฐ ์ด๋ค์ง๋ ๊ฒ ๋ณด๋ค๋ ํญ์ ์ฐ์ฐํ๋ค.
7.2. ํ์ต ๊ณก์ ๋ฐ Trade-off[ํธ์ง]
์๋ฐ์คํฌ๋ฆฝํธ๋ ๊ฐ์ฒด๊ฐ ๊ฐ๋ ์์ฑ์ ์ด๋ป๊ฒ๋ ๊ฐ๋ฐ์๊ฐ ํ์
ํด์ ์ด๋ป๊ฒ๋ ์๋ฌ ์์ด ๋์ํ๋๋ก ์ค๊ณํ๋ ๊ฒ์ด ๊ธฐ๋ณธ์ ์ธ ๊ฐ๋ฐ ํ๋ฆ์ด๋ค. ๋ฐ๋ฉด ํ์
์คํฌ๋ฆฝํธ๋ ์ดํ ๋ก ์ง๋์น๊ฒ ์์ ๋ก์ด(=์ํํ) ๋ณ์/๊ฐ์ฒด ํ์ฉ์ ์๋์ ์ผ๋ก ์ ์ฝ์ ๊ฑธ์ด ๊ฐ๋ฐ์ ์์ ์ฑ ๋ฐ ํธ์์ฑ์ ์ฆ๋์ํค๋ ๊ฒ์ด ๊ทธ ์กด์ฌ์์์์ ์ ์ํ ํ์๊ฐ ์๋ค.
ํนํ ๋ณต์กํ ๊ฐ์ฒด๋ฅผ ์์ ํ๊ฒ ํ์ฉํ ์ ์๋๋ก ์ ๊ณต๋๋ ํ์ ์คํฌ๋ฆฝํธ์ ๋ํ์ ์ธ ๋๊ตฌ๊ฐ Advanced Type๊ณผ Utility Type์ธ๋ฐ, ์ด ๊ธฐ๋ฅ๋ค์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฟ๋ง์ด ์๋๋ผ ๋ค๋ฅธ ์ธ์ด์์๋ ์์ํ ๊ฐ๋ [12]์ด๊ธฐ ๋๋ฌธ์ ๊ฐ๋ฐ์๋ค์๊ฒ ์ต์ํ์ง ์์ ๊ฐ๋ฅ์ฑ์ด ์๋นํ ๋๋ค. ๋ชจ๋ ๊ฐ๋ฐ์๊ฐ ๋ฌธ์๋ฅผ ํ๋ฒ ๋ณด๊ณ ์์ฉ ๊ฐ๋ฅํ ์ ๋๊ฐ ์๋๊ธฐ ๋๋ฌธ์, ์ฒซ ๋์ ์์ ์ด ๋ถ๋ถ์ ๊ฐ๊ณผํ๋ฉด ์คํ๋ ค ๋์ ์ ๋ณด๋ค ์์ฐ์ฑ์ด ์์ข์์ง ์๋ ์๋ค๋ ์ ์ ์ ์ํ๋ ๊ฒ์ด ์ข๋ค.
๋ํ ์์ ๊ฐ์ ๋๊ตฌ๋ฅผ ํ์ฉํด์ ๊ธฐ๊ป ์๋ฐํ๊ฒ typing์ ํด๋จ๋๋์
๊ณ์์ ํํ ์๋์๊ตฌ ์ฌํญ ๋ฐ ๊ธฐ๋ฅ ๋ณ๊ฒฝ, ๋ฆฌํฉํ ๋ง ์์
๋ฑ์ผ๋ก ์ธํด ๊ธฐ๋ฅ ๊ตฌํ์ ๋ํด typing๊น์ง ๋ค์ผ๋ก ๋ค์ ํด์ผ ํ๋ ๋ถ์์ฌ๊ฐ ์๊ธธ ์๋ ์๋ค. ๊ฒฝ์ฐ์ ๋ฐ๋ผ์๋ ์์ any ํ์
[13]๋ก ๋๋ฐฐํ๋ ๊ฒ๋ง๋ ๋ชปํ ๊ฒฐ๊ณผ๊ฐ ์ด๋๋ ์๋ ์๋ค๋ ๊ฒ. ๋ฐ๋ผ์ ์ ์ฌ์ ์์ ํ์
์คํฌ๋ฆฝํธ์ ๊ธฐ๋ฅ์ ๋์
ํ๋ ์๋ชฉ์ด ํ์ํด์ง ์ ์๋ค.
ํนํ ๋ณต์กํ ๊ฐ์ฒด๋ฅผ ์์ ํ๊ฒ ํ์ฉํ ์ ์๋๋ก ์ ๊ณต๋๋ ํ์ ์คํฌ๋ฆฝํธ์ ๋ํ์ ์ธ ๋๊ตฌ๊ฐ Advanced Type๊ณผ Utility Type์ธ๋ฐ, ์ด ๊ธฐ๋ฅ๋ค์ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฟ๋ง์ด ์๋๋ผ ๋ค๋ฅธ ์ธ์ด์์๋ ์์ํ ๊ฐ๋ [12]์ด๊ธฐ ๋๋ฌธ์ ๊ฐ๋ฐ์๋ค์๊ฒ ์ต์ํ์ง ์์ ๊ฐ๋ฅ์ฑ์ด ์๋นํ ๋๋ค. ๋ชจ๋ ๊ฐ๋ฐ์๊ฐ ๋ฌธ์๋ฅผ ํ๋ฒ ๋ณด๊ณ ์์ฉ ๊ฐ๋ฅํ ์ ๋๊ฐ ์๋๊ธฐ ๋๋ฌธ์, ์ฒซ ๋์ ์์ ์ด ๋ถ๋ถ์ ๊ฐ๊ณผํ๋ฉด ์คํ๋ ค ๋์ ์ ๋ณด๋ค ์์ฐ์ฑ์ด ์์ข์์ง ์๋ ์๋ค๋ ์ ์ ์ ์ํ๋ ๊ฒ์ด ์ข๋ค.
๋ํ ์์ ๊ฐ์ ๋๊ตฌ๋ฅผ ํ์ฉํด์ ๊ธฐ๊ป ์๋ฐํ๊ฒ typing์ ํด๋จ๋๋
7.3. npm ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋นํธํ[ํธ์ง]
npm ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ Typescript์์ ์ฌ์ฉํ๊ธฐ ์ํด์๋ ํด๋น ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ Typescript๋ก ์์ฑ๋์๊ฑฐ๋, d.ts๋ฅผ ํตํด ๋ง๋ค์ด์ง Typescript์ฉ ํ์
์ง์ ํจํค์ง๊ฐ ๋ณ๋๋ก ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ง ์ ์์ ์ผ๋ก ์ฌ์ฉํ ์ ์๋ค. ์ ๋ช
ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ ๋๋ถ๋ถ Typescript ํ์
์ง์ ํจํค์ง๋ฅผ ์ง์ํ์ง๋ง, ์ผ๋ถ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๊ฒฝ์ฐ ์ด๋ฐ ๊ฒ๋ค์ ์ง์ํ์ง ์๋ ๊ฒฝ์ฐ๊ฐ ์๋ค.
์ด๋ฐ ๊ฒฝ์ฐ //@ts-ignore ์ฃผ์์ import๋ฌธ ์์ ๋ถ์ด๊ฑฐ๋ JS์ ๋์ผํ๊ฒ require()๋ฅผ ์ฌ์ฉํ์ฌ ์ปดํ์ผ ์ค๋ฅ ์์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ ์๋ ์๋ค. ๋ฌผ๋ก ์ด๋ ๊ฒ ๋ถ๋ฌ์จ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ฌ๋ณผ๋ค์ ๋ํด์๋ ํ์ ํ๊ฐ๊ฐ ์ด๋ฃจ์ด์ง์ง ์๊ธฐ ๋๋ฌธ์ Typescript์ ์ฅ์ ์ ํ์ฉํ๊ธฐ ์ด๋ ต๋ค.
์ด๋ฐ ๊ฒฝ์ฐ //@ts-ignore ์ฃผ์์ import๋ฌธ ์์ ๋ถ์ด๊ฑฐ๋ JS์ ๋์ผํ๊ฒ require()๋ฅผ ์ฌ์ฉํ์ฌ ์ปดํ์ผ ์ค๋ฅ ์์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ ์๋ ์๋ค. ๋ฌผ๋ก ์ด๋ ๊ฒ ๋ถ๋ฌ์จ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ฌ๋ณผ๋ค์ ๋ํด์๋ ํ์ ํ๊ฐ๊ฐ ์ด๋ฃจ์ด์ง์ง ์๊ธฐ ๋๋ฌธ์ Typescript์ ์ฅ์ ์ ํ์ฉํ๊ธฐ ์ด๋ ต๋ค.
8. ๋ผ์ด๋ธ๋ฌ๋ฆฌ[ํธ์ง]
- Angular - ๊ตฌ๊ธ์์ ๋ง๋ ํ์ ์คํฌ๋ฆฝํธ ํ๋ ์์ํฌ์ด๋ค. ๊ตฌ๋ฒ์ ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋์์ผ๋ก ํ์ผ๋ ํ๋ฒ์ ์์๋ ํ์ ์คํฌ๋ฆฝํธ๋ฅผ ๋์์ผ๋ก ํ๊ณ ์๋ค.
- React - ํ์ด์ค๋ถ์์ ๋ง๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ ์์ํฌ์ง๋ง --template typescript ์ต์ ์ ์ฌ์ฉํ๋ฉด ํ์ ์คํฌ๋ฆฝํธ๋ก ์ฌ์ฉํ ์ ์๋ค.
- Vue - ๋ฒ ์ด์ค๋ ์๋ฐ์คํฌ๋ฆฝํธ์ด์ง๋ง ์ต๊ทผ์ ๋ฆด๋ฆฌ์ฆ๋ 3.0๋ฒ์ ์ดํ๋ถํฐ ts๋ฅผ ๊ณต์์ ์ผ๋ก ์ง์ํ๋ค. 2.x ๋ฒ์ ์์๋ ์ฌ์ฉ์ด ๋ถ๊ฐ๋ฅํ ๊ฒ์ ์๋์์ผ๋, ๊ฐ์ข ํ๋ฌ๊ทธ์ธ๋ค์ ์ฌ์ฉํด์ผ ํ๋ค. ๊ณต์์ ์ผ๋ก ์ง์ํจ์ ๋ฐ๋ผ ts ์ฌ์ฉ์ ํ๋ ฅ์ด ๋ถ์ ๊ฐ๋ฅ์ฑ์ด ๋์์ก๋ค.
9. ๊ด๋ จ ๋ฌธ์[ํธ์ง]
[1] ๊ฐ๋ น ์ซ์๊ฐ ๋ค์ด์์ผ ํ ๊ณณ์ ๋ฌธ์๊ฐ ๋ค์ด์จ๋ค๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ๋ ๊ทธ ์ฝ๋๋ฅผ ์๋ฌด ์์ฌ์์ด ์คํํด์ ๋ฐํ์์์ ์ ์ ์๋ ๋์์ ํ๋ค. ์ด๋ป๊ฒ๋ ๋์ ์์ฒด๋ ํ๊ธฐ ๋๋ฌธ์ ์ด๋ฌํ ๋ฒ๊ทธ๋ฅผ ๋๋ฒ๊น
ํ๋ ๊ฑด ๋งค์ฐ ๊ท์ฐฎ์ ์ผ์ธ๋ฐ, ํ์
์คํฌ๋ฆฝํธ๋ ์ด๋ฐ ์ฝ๋์ ๋ํด์๋ ์ปดํ์ผํ์์ ์๋ฌ๋ฅผ ๋ฐ์์์ผ ๊ฐ๋ฐ์์๊ฒ ์๋ ค์ฃผ๋ฏ๋ก ๊ฐ๋ฐ์๊ฐ ์์ ์ ์ค์๋ฅผ ์ฝ๊ฒ ํ์
ํ ์ ์๋ค. ๋ณดํต์ ๊ฒฝ์ฐ, ๋ช
์์ ์ผ๋ก ๋ช
๋ น์ ๋ฃ์ด ์ปดํ์ผํ๊ธฐ๋ ์ ์ ์๋ชป๋ ๋ถ๋ถ์ ์๋ป๊ฑด ๋ฐ์ค์ ์ซ์ซ ์ณ์ ์ ์ด์ ์ปดํ์ผ ์์ฒด๊ฐ ๋ถ๊ฐ๋ฅํ๊ฒ ๋ง๋ ๋ค.
[์ค๋ฅ๋ฉ์์ง] "The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.; ์๋ฆฌ ์ฐ์ฐ์ ์ฐํญ ํ์
์ 'any', 'number', 'bigint' ํน์ ์ด๊ฑฐํ์ด์ด์ผ ํฉ๋๋ค."
[3] ํ์
์คํฌ๋ฆฝํธ์ ์ต์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ด์ ๋ง ์์ํ๋ ์ด๋ณด ๊ฐ๋ฐ์๋ค์ ์ํด ์กฐ์ธํ์๋ฉด, ์๋ ์์ค์ฝ๋์ ์๋๊ฒ๊ณผ ๊ฐ์ var ์ง์์ด์ let ์ง์์ด๋ ์ฒซ ํ์ต์๋ง ์ตํ๊ณ var๋ ์์ ์ฌ์ฉํ์ง ๋ง๊ณ let์ ๋ฐ๋ณต๋ฌธ ๊ฐ์ด ๊ผญ ํ์ํ ๊ณณ์ ์ ์ธํ๊ณ ์ฌ์ฉํ์ง ์๋ ํธ์ด ์ข๋ค. ์ธ์ , ์ด๋ป๊ฒ ๋ณ์๊ฐ ๋ณํ๋์ง, ๊ทธ๋ฆฌ๊ณ ์ธ์ ๊ทธ ๋ณ์๋ฅผ ๋ค์๋ ์ฌ์ฉํ์ง ์๊ฒ ๋๋์ง, ์ธ์ ์ด๋ป๊ฒ ๋ณ์๊ฐ ํ์์์ด์ง๋์ง ๋ช
ํํ๊ฒ ์ ์ํ๊ธฐ ์ํด์๋ const, ์์ ์ง์์ด๋ง ์ฌ์ฉํ๋ ํธ์ด ํจ์ฌ ์ข๊ธฐ ๋๋ฌธ์ด๋ค. const๋ '{}์ผ๋ก ๋๋ฌ์ธ์ธ ๊ณณ ์์์ ๋ณํ์ง ์๋ ์์'์ ๊ฐ๋
์ด๋ค. ๋ํ const๋ก ์์๋ฅผ ์ ์ธํ์ ๋์๋ ๊ตณ์ด ํ์
์ ์ ์ธํ ํ์๊ฐ ์๋ ๊ฒฝ์ฐ๊ฐ ๋ง์๋ฐ ๋ค๋ฅธ ๊ฐ์ ๋์
ํ ์ผ์ด ์๊ธฐ ๋๋ฌธ์ด๋ค. ์๋ ์์์ฒ๋ผ const์ ํ์
์ ๊ตณ์ด ์ ์ธํ๋ ๊ฒฝ์ฐ๋ ์ปดํ์ผ๋ฌ๊ฐ ํ์
์ถ๋ก ์ ์คํจํด์ ํ๋ ๊ฒฝ์ฐ ๋ฑ์ด๋ค.
[4] ๋ํ ์๋ ์์์์์ฒ๋ผ as๋ก Casting์ ํด์ฃผ๋ ๊ฒฝ์ฐ๋ ์ข์ ์ฌ๋ก์ด์ง๋ง, ์ ์ด์ ์ ๋ฐ Casting์์ด ์ปดํ์ผ๋ฌ์ ํ์
์ถ๋ก ๋ง์ผ๋ก ํจ์๋ ๋ณ์, ํด๋์ค๋ฅผ ์ฌ์ฉํ ์ ์๊ฒ๋ ํ์
์ ์ ์ํ๋ ๊ฒ์ด ๋ ์ค์ํ๋ค. ๊ทธ๋ฐ ํ์
์ ์์ ์๊ฐ์ด ์ค๋ ๊ฑธ๋ฆฌ๋๊ฒ ๊ฐ์๋ ๊ฒฐ๊ตญ์๋ ์๊ฐ์ ๋ช์ญ๋ฐฐ ์ ์ฝํ ์ ์๋ค.
[5] tsc์์ ์ต์
์ ์ ํด์ฃผ์ง ์์ผ๋ฉด TypeScript๋ JavaScript ES5๋ก ๋ณํ๋๊ธฐ ๋๋ฌธ์ const๋ let์ด var๋ก ๋ฐ๋๋ค.
[6] Express ํ๋ ์์ํฌ ๋ฑ.
[7] XML์ ์ฐ๋ ๊ฒฝ์ฐ๋ ์์ง๋ง, ๋ก์ง ๊ฐ๋ฐ์ JavaScript ํน์ ๊ทธ ํ์ ์ธ์ด๋ก ์งํํ๋ฉด์ ๊ตณ์ด XML์ ์ฌ์ฉํด์ผ ํ ์ด์ ๋ ๊ฑฐ์ ์๋ค. ์๋๋ถํฐ JSON ํ์์ ๊ฐ์ถ JavaScript ๊ฐ์ฒด๋ฅผ ๊ตณ์ด XML๋ก ์ง๋ ฌํํ๊ฑฐ๋ ๋ฐ๋๋ก XML์ JavaScript ๊ฐ์ฒด ํ์์ผ๋ก ํ์ฑํด์ผ๋ง ํ๋ ๋ฒ๊ฑฐ๋ก์์ ๊ฒช์ด์ผ ํ๊ธฐ ๋๋ฌธ.
[8] ์ฌ์ง์ด ํ๋ก ํธ์๋์ ๋ฐฑ์๋๋ฅผ ๊ฐ์ ์ฌ๋์ด ๊ฐ๋ฐํด๋ ํ์ชฝ์ ๋ณ๊ฒฝ ์ฌํญ์ด ์๋ค๋ ๊ฑธ ๊น๋จน๊ณ (...) ๋ฐ๋์ชฝ์ ์ด๋ฅผ ๋ฐ์ํ์ง ์๋ ์ผ์ด์ค๊ฐ ๊ฒฐ์ฝ ๋๋ฌผ์ง ์๋ค.
[9] ํ๋ก์ ํธ ์์ค ์ฝ๋ ๋ด๋ถ์ ๋ณ๋ ํด๋๋ฅผ ๋ง๋ค์ด ๋ฐ์ดํฐ ํฌ๋งท์ฉ ํ์
์ ์ ์ํ ์ฝ๋๋ฅผ ๋ชจ์๋ ์๋ ์๊ณ , npm ํจํค์ง ๋ฑ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ๊ตฌํํ ์๋ ์๋ค.
[10] ๊ฐ๋ น User๋ผ๋ ํ์
์ id๋ผ๋ ํ๋๋ฅผ name์ผ๋ก ์์ ํ๋ค๊ณ ํ ๋, ๊ธฐ์กด์ user.id๋ฅผ ์ฐธ์กฐํ๊ณ ์๋ ํ๋ก ํธ์๋์ ๋ฐฑ์๋์ ์ฝ๋๋ค์ ์ปดํ์ผ ์๋ฌ๋ฅผ ๋ฐ์์ํค๊ณ ๊ฐ๋ฐ์๋ ๋ฐ์ดํฐ ํฌ๋งท์ ๋ณ๊ฒฝ์ ๋ฐ๋ผ ์ด๋ค ์ฝ๋๋ค์ด ์์ ๋์ด์ผ ํ๋์ง๋ฅผ ์ฝ๊ฒ ํ์
ํ ์ ์๋ค. IDE์ ๋ฆฌํฉํ ๋ง ๊ธฐ๋ฅ์ ํ์ฉํ๋ฉด ์ฐ๊ด๋ ๋ชจ๋ ์ฝ๋๋ค์ ์๋ ์์ ํด์ฃผ๊ธฐ๊น์ง ํ๋ฏ๋ก ์ผ์ผํ ๊ณ ์น ํ์์กฐ์ฐจ ์๋ ๊ฒฝ์ง์ ์ด๋ฅธ๋ค.
[11] ๊ฐ๋ น number ํ์
์ผ๋ก ์ ์ธ๋ ๋ฐฐ์ด์ string์ ์ฝ์
ํ๋ ๋ฑ.
[12] ๊ตณ์ด ์ต์ง๋ก ๋น๊ตํ์๋ฉด Java๋ C# ๋ฑ ์ธ์ด์ reflection ๊ฐ๋
๊ณผ ๊ฒน์น๋ ๋ถ๋ถ์ด ์๊ธด ํ๊ฒ ์ง๋ง, ์ ์ด์ reflection ์์ฒด๋ ์์ ์์ฌ๋ก ํ์ฉํ ์ ์๋ ๊ฐ๋ฐ์๊ฐ ํ์น ์๋ค.
[13] ๋ง ๊ทธ๋๋ก ์ด ๋ณ์๋ ์์๋ฅผ ์ด๋ค ํ์
์ผ๋ก์จ ํ์ฉํ๋ ์ ๊ฒฝ์ฐ์ง ์๊ฒ ๋ค๋ ์๋ฏธ์ ํ์
์ผ๋ก์จ, ์ด ํ์
์ผ๋ก ๋ณ์๋ฅผ ์ ์ธํ๋ฉด ์ปดํ์ผ๋ฌ๊ฐ ๋ณ์์ ์์ฑ์ ํ์
ํ ์ ์์ผ๋ฏ๋ก ์ด๋ป๊ฒ๋ ๊ฐ๋ฐ์๊ฐ ํ์
ํด์ ์ด๋ป๊ฒ๋ ์๋ฌ ์์ด ๋์ํ๋๋ก ๋ง๋ค์ด์ผ ํ๋ค. ์ฆ ์ด๊ฑธ ๋จ์ฉํ๋ฉด ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ค๋ฅผ ๊ฒ ์์ด์ง๋ค.ํ๋ง๋ฒ