Angular 2 ๊ทธ๋ฆฌ๊ณ ์น ํ๋ก ํธ์๋ (1/2)
ํ๋์ ๋ง๋ฌด๋ฆฌ ์ง์ด์ผ ํ๋ ์ผ๋๋ฌธ์ ์ ์ ์ด ์๋ค๊ฐ ์ด์ ์์ผ ์ ๋ฆฌ๋ฅผ ํ ์๊ฐ์ด ์ค๊ฒ ๋์๋ค..
์ด ํฌ์คํธ์์๋ย Angular๊ฐ ๋ฌด์์ธ์ง ๋ชจ๋ฅด๋ ๋ถ๋ค์ ์ํด Angular๋ฅผ ์ค๋ช ํ๋ ๋ด์ฉ์ ์ฑ์ธ๊น ํ๋ค.
Angular 2 ๊ทธ๋ฆฌ๊ณ ์น ํ๋ก ํธ์๋ (1/2) - ํ์ฌ ๊ธ
Angular 2 ๊ทธ๋ฆฌ๊ณ ์น ํ๋ก ํธ์๋ (2/2)
Angular๋ ๊ตฌ๊ธ์์ ๋ง๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ ์์ํฌ์ด๋ค.
ํ๋ ์์ํฌ์ด๊ธฐ ๋๋ฌธ์ ์ผ๋ฐ์ ์ผ๋ก ์ฌ๋ฌ๋ถ์ด ์์๋ jQuery, underscore, lodash ๋ณด๋ค ๊ท๋ชจ๊ฐ ํฐ ํ๋ก์ ํธ๋ค. (์ง์๋๋ ๊ธฐ๋ฅ์ ํญ๋ ๋์ผ๋ฉฐ ์ฑํํ ์์กด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค๋ ๋ง๋ค.)
ํ๊ธ ๋ฐ์์ผ๋ก โ์ต๊ทค๋ฌ ์ ์ด์์ค"๋ผ๊ณ ๋ฐ์ํ๋ฉด ๋๋ฉฐ ์ฌ๊ธฐ์ Angular๋ โ์์ํ" ์ด๋ผ๋ ๋จ์ด๋ฅผ ๊ฐ์ง๊ณ ์๋๋ฐ,
์๋ฌด๋๋ ๋ผ๋๋ฅผ ๊ฐ์ถฐ์ฃผ๋ ํ๋ ์์ํฌ๋ผ๋ ์๋ฏธ๋ก ์ฌ์ฉํ์ ๊ฒ์ด๋ผ๊ณ ์๊ฐ๋๋ค.
Angular ๊ณต์ํ์ด์ง์ ๊ธฐ์ฌ๋ ์๋ฉ์ด ย โOne frameworkโ (ํ๋์ ํ๋ ์์ํฌ)์ธ๋ฐ, ์ด๋ Mobile๊น์ง ๋์ํ๊ฒ ๋ค๋ Angular์ ๋ชฉํ๊ฐ ๊น๋ค์ด์๋ค.
Angular์ ๋ํด์ ๋์ฒด ๋ฌด์จ ํ๋ ์์ํฌ์ธ๊ฐ, ์ด๋ค ๋ชฉ์ ๊ณผ ์ฅ์ ์ ๊ฐ์ง๊ณ ์๋๊ฐ์ ๋ํด์ ๊ถ๊ธ์ฆ์ด ๋ง์ผ์ค ๊ฒ์ด๋ผ ์๊ฐ๋๋ค.
์ฌ์ค ์ด ๋ฌผ์์ ํ์ด๋๋ฆฌ๊ธฐ ์ํด์๋ ์์ ์น ํ๋ก ํธ์๋ ๊ฐ๋ฐ ๋ํฅ์ ๋จผ์ ์ค๋ช ํด์ผ ํ ๊ฒ ๊ฐ๋ค.
์น ํ๋ก ํธ์๋์ ๋ณํ
ํ์ฌ ์น ํ๋ก ํธ์๋ ๊ฐ๋ฐ์์ ์ฌ์ฉ๋๋ ํด์ด ๋ง๋ค! ๋๋ฌด ๋ง๋ค! (๊ทธ๋ฆฌ๊ณ ๋ง์์ง๊ณ ์๋ค!!)
(ํ์๋ ์ด ์ฌ์ง์ ๋ณด์ฌ์ง๋ ์ฑ๋ณด๋ค ๋ง์ ์ฑ์ ์ฌ์ฉํ์์๋ ์ ์ฒด์ ๋นํด์๋ ์ ๋ฐ๋ ์ฑ ๋์ง ์๋๋ค.)
์ผ๋ถ ๊ฐ๋ฐ์๋ ์ ํต์ ์ธ ํ๋ก ํธ์๋ ๊ฐ๋ฐ ๋ฐฉ์๋๋ก html๊ณผ javascript ๊ทธ๋ฆฌ๊ณ css๋ฅผ ๊ฐ๋ฐํ๊ณ ,
javascript ์๋ฆฌ๋จผํธ๋ฅผ ์ฝ๊ฒ ์ฐพ์ ์ ์๋ jQuery์ jQueryUI๋ฅผ ์ฐ๋ํ์ฌ ์๋น์ค๋ฅผ ์์ฑ ํ์ ๊ฒ์ด๋ค ๊ทธ๋ฆฌ๊ณ ๊ทธ๋ ๊ฒ ๊ฐ๋ฐํ๋ ๋ฐฉ๋ฒ์ ํฐ ๋ถํธํจ์ด ์์์ ๊ฒ์ด๋ค.
๊ฒฐ๊ณผ์ ์ผ๋ก ์ค๋์์ ์ด๋ ๊ฒ ๊ฐ๋ฐ์ ๋์์ฃผ๋ ์ฑ์ด ๋ง์์ง ๊ฒ์ย ECMA 5์์ ECMA 6๋ก ์๋ฐ์คํฌ๋ฆฝํธ ํ์ค์ด ๋ณ๊ฒฝ๋๊ณ ์๋ ์ํฉ๊ณผ,
Node.js ๋ณด๊ธ์ผ๋ก ์ธํด ๋ฐฑ์๋ ์๋ฒ ๊ฐ๋ฐ์๊ฐ ์ ์ javascript๋ฅผ ์ฌ์ฉํ๊ฒ ๋๋ฉด์ ๋ฐฑ์๋ ๊ธฐ์ ํ๋ก ํธ์๋์์ ๊ฒฝ๊ณ๊ฐ ํ๋ฌผ์ด์ง๊ณ ์๋ ์ .
๊ทธ๋ฆฌ๊ณ ๊ฑฐ๋ํ ์น ์๋น์ค ๋ฒค๋์ฌ(๊ตฌ๊ธ, ํ์ด์ค๋ถ)์์ ํ๋ก ํธ์๋ ํ๋ก์ ํธ์ ๊ธฐ์ฌ๋ฅผ ํ๊ณ ์๋ ์ ์ด๊ฒ๋ค์ด ๋ญ์น๋ฉด์ ์๋์ ๊ฐ์ ๊ฒฐ๊ณผ๋ฅผ ๋ด์๋ค.
์น ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ๋ฐฑ์๋ ๊ฐ๋ฐ์์ ์๊ตฌ๋๋ ๊ธฐ๋ฅ์ด ์ถ๊ฐ๋๊ณ ์๋ค.
ECMA6์ ์ง์์ ์ํ ์๋ธ ํด์ด ์๊ฒจ๋๊ณ ์๋ค.
๋ง์ ๋ชจ๋ฐ์ผ๊ธฐ๊ธฐ ์ง์์ผ๋ก ๋ณด๋ค ๋น ๋ฅธ ์น์ ์์ฅ์ด ์ํ๊ณ ์๋ค.
๋ง์ ๊ธฐ์กด ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ด ์ต์ ๊ธฐ์ ์ ์์ฉํ๊ณ ์๋ค.
(์น ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ค์ ๊ณต๋ถํ ๊ฒ์ด ์์ฒญ๋๊ฒ ๋์ด๋ ๋ฒ๋ ธ๋ค.)
๋ํ ์ด๋ฌํ ๋ณํ๊ฐ ํ๋ก ํธ์๋์ ๋ฌ๋์ปค๋ธ๋ฅผ ๋๋ ธ์ผ๋ฉฐ,
๊ธฐ์กด ๊ฐ๋ฐ ํ๊ฒฝ์ ์ต์ํ์ฌ ์ต์ ๋ํฅ์ ์ดํด๋ณด์ง ์๋ ๊ฐ๋ฐ์๋ค์
์๋ฆฌ๋ฅผ ์ํ๋ฐ๋ ์ํฉ์ด ์ค์ง์์๋ ์กฐ์ฌ์ค๋ฝ๊ฒ ์ถ์ธกํด๋ณธ๋ค.
์น ํ๋ก ํธ์๋ ๋๊ตฌ๋ค
๊ทธ๋ฌ๋ฉด ์๊น ์ฌ์ง์ ๋ณด์ฌ๋๋ฆฐ ์๋ง์ ์ฑ ๋ค์ด ๋๋์ฒด ๋ฌด์จ์ญํ ์ ํ๋?
๊ทธ๋ฆฌ๊ณ ๊ทธ๊ฒ์ด ๋ฐ๋์ ํ์ํ๊ฐ์ ๋ํด์๋ ์ค๋ช ์ ๋๋ฆด๊น ํ๋ค.
์๋นํ ์ง๋ฃจํ๊ณ ๋ฑ๋ฑํ ๋ด์ฉ์ด ๋ ๊ฒ ๊ฐ์ ๋ง์ ๋งํฌ์ ์ฌ์ง์ ์ฒจ๋ถํ๋ค.
ย ย 1.ย npm, bower, yoman, yarn
์ด 4๊ฐ์ง ์๋น์ค๋ Pakcage Manager(ํจํค์ง ๋งค๋์ )๋ผ๊ณ ๋ถ๋ฅด๋ ์๋น์ค๋ค.
(yoman์ ์ ํํ ๋งํ๋ฉด ์ค์บํด๋ฉ(Scaffolding - ์ค์ ์์ ์ ํ๊ธฐ ์ ์ฒ ๊ณจ์ ๋ง๋๋ฏ์ด ์์ ์ ํ์ํ ์ต์ํ์ ๊ตฌ์กฐ๋ฅผ ๋ง๋ค์ด์ฃผ๋ ๋จ๊ณ)๋ง ํด์ฃผ๋ ์๋น์ค.)
์ฝ๊ฒ ํ์ด๋ณด์๋ฉด ํ๋ก์ ํธ์ ์ฌ์ฉํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ง์ ์ฐพ์ ํด๋น ํ์ผ์ ์๊ฒฉ์ง์์ ๋ค์ด๋ฐ์ ๋ก์ปฌ ํ์ผ์ ์ฎ๊ธฐ์ง ์์๋, ๊ฐ๋จํ ๋ช ๋ น์ด๋ก ์ถ๊ฐ/์์ /์ญ์ ๋ฅผ ์ง์ํ๊ณ ์์กด์ฑ(Dependency)์ ๊ด๋ฆฌํด์ฃผ๋ ์๋น์ค๋ค์ ์๋ฏธํ๋ค.
๋ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฐฐํฌ์ ํธ์คํ /๋น๋/ํ ์คํธ ์คํฌ๋ฆฝํธ ์ ์๋ ๊ฐ๋ฅํ๋ค.
ย ย ย ย 2.ย Typescript, Flow
ํ์ ์คํฌ๋ฆฝํธ๋ ์๋ฐ์คํฌ๋ฆฝํธ์์ ๋ฐ์ํ ์ ์๋ ๋ฌธ์ (ํ์ ๊ฒ์ฆ)๋ฅผ ํด๊ฒฐํด์ฃผ๋ ๋์์ ECMA6์ ์คํ์ ํฌํจํ์ฌ ์ง์ํ๊ณ ์์ผ๋ฉฐ Microsoft์ Google์ด ํ๋ ฅํ์ฌ ๊ฐ๋ฐํ๊ณ ์๋ ์ธ์ด์ด๋ค. Typescript๋ฅผ ํตํด ๊ฐ๋ฐ์ ์งํํ๊ฒ๋๋ฉด ๋ฐํ์ ๋จ๊ณ์์ ๋ฐ์ํ ์ ์๋ ์ค๋ฅ๋ฅผ ๋ฏธ์ฐ์ ๋ฐฉ์งํ ์ ์๊ณ OOPย ์งํฅํ ๊ฐ๋ฐ๊ณผ Dependency Injection(DI)๋ฑ์ ํจํด์ ๊ตฌํํ ์ ์๊ฒ ๋๋ค. React ํ๋ก์ ํธ์ Flow๋ํ ํ์ ๊ฒ์ฆ์ ์ง์ํด์ค๋ค.
ย ย ย ย 3.ย Reactive Programming
๊ณผ๊ฑฐ์๋ ์น ํ์ด์ง ์ด๋ (๋น ํ๋ฉด์์ ๋ก๋ฉ์ด ๊ฑธ๋ฆฌ๊ณ ์๋ก์ด ํ์ด์ง๊ฐ ๋ณด์ฌ์ง๋) ์์ด ๋ฐ์ดํฐ๋ฅผ ์ ๋ฐ์ดํธ ํ๋ ์ฌ์ดํธ๋ ๋๋ฌผ์์ง๋ง ์ง๊ธ์ ์ฌ๋งํ ์๋น์ค์์ ์ด ๊ธฐ์ ์ ์ ์ฉํ๊ณ ์๋ค. ์ด๋ฌํ ๋น๋๊ธฐ ํต์ ์ ์ฝ๋ฐฑํจ์๋ฅผ ํตํด ์ ๋ฌ์ด ๋์ด์ผ ํ์ผ๋ฉฐ ์ด ๋๋ฌธ์ ์ฝ๋ฐฑ์ง์ฅ์ด ๋ฐ์ํ๊ธฐ๋ ํ๋ค. RX(ReactiveX) ํ๋ก์ ํธ๋ ์ด๋ฌํ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํด์ฃผ๋ฉฐ, ์ต์ ๋ฒ ํจํด์ ์ ๊ณตํ์ฌ ์๋ก๋ค๋ฅธ ์ปจํ ์คํธ์ ๋ฐ์ดํฐ๋ฅผ ๋์์ ์ผ๋ก ์ ๊ณตํด์ค ์ ์๋ค. ย Redux, Flux ์๋น์ค๋ ์ด๋ฌํ ๋ฐ์ดํฐ๋ฅผ ํจ์จ์ ์ผ๋ก ๋์์๊ฒ ์ ๋ฌํ ์ ์๋ค. ์ฐธ๊ณ ๋ก AngularJS 2๋ RxJS๋ฅผ ํฌํจ ํ ์ ์๋ค.
ย ย ย 4.ย grunt, gulp, webpack
์ฌ๋ฌ๋ถ์ด ๋ง์ฝ ๋ฐ๋ณต๋๋ ์์ ์ ์กฐ๊ธ์ด๋ผ๋ ์ฌํ์ฉํ์ฌ ํจ์จ์ ์ธ ํ๋ก๊ทธ๋๋ฐ์ ์ํ๋ค๋ฉด CSS์ ์์ฑ์ด ๊ต์ฅํ ํผ๊ณคํ๊ฒ ๋๊ปด์ก์ ์ ์๋ค, LESS์ SASS,ย Stylus์ ๊ฐ์ ๊ธฐ์ ์ ์ด๋ฌํ ๋ฐ๋ณต๋๋ ์์ ์ ์์ ์ฃผ๊ณ ๋๋ถ์ด ์์ ์ฝ๋๋ฅผ ํน์ % (๋ฐ๊ฒ, ์ด๋ก๊ฒ)์ ๊ฐ์ ํธ์ ํจ์๋ฅผ ์ ๊ณตํ๋ค. ๋ค๋ง ๊ฒฐ๊ตญ ๋ธ๋ผ์ฐ์ ๋ CSS ๋ฌธ์๋ง์ ์ธ์ํ๊ธฐ ๋๋ฌธ์ .less .sass์ ๊ฐ์ ํ์ฅ์๋ ๋น๋๋จ๊ณ์์ ๋ณ๊ฒฝ์ด ์ด๋ฃจ์ด์ ธ์ผ ํ๋ค, ๊ทธ ๋ฐ์๋ ๋น๋ ๋จ๊ณ์์ ์งํ๋์ผ ํ๋ ์์ ๋ค (ECMA6 ํ์ผ์ ECMA5 ํ์ผ๋ก ๋ณ๊ฒฝ, ๋ฌธ์ ์ต์ ํ, ์ฝ๋ ํ ์คํธ, ์นดํผ๋ผ์ดํ ์ฝ์ , ๋ฌธ์ ๋ฌธ๋ฒ ๊ฒ์ฆ, ๋ฒ๋ค๋ง ๋ฑ)์ ๋์์ฃผ๋ ๋๊ตฌ๊ฐ grunt, gulp, webpack๊ณผ ๊ฐ์ ๋๊ตฌ์ด๋ฉฐ ์ด๋ ๋ค์ npm๋ฑ์ ํจํค์ง ๋งค๋์ ๋๊ตฌ์ ์ฐ๋ํ์ฌ ์ฌ์ฉํ๊ฑฐ๋ IDE(ํตํฉ ๊ฐ๋ฐํ๊ฒฝ)์์ ์ฐ๋ํ์ฌ ๋น๋๊ณผ์ ์ ์ผ๊ดํ ์ํฌ ์ ์๋ค. ์ด๋ ๊ฒ ๋๋ฉด ํํธํ ๋์๋ JS, CSS, HTML ๋ฌธ์๋ฅผ ํ๋๋ก ํฉ์ณ์ฃผ๋ฉฐ ํ์ค์ฝ๋ฉ์ ์งํฅํ๊ฒ ๋๋ฉฐ ํ์ ํธํ ์ฌ๋ถ ๊ฒํ ๊ฐ ์์ํ๊ณ ์๊ธฐ์น ๋ชปํ ๋ฒ๊ทธ์ ์ฌ์ด๋์ดํํธ๋ฅผ ๋ฏธ์ฐ์ ๋ฐฉ์ง ํ ์ ์๊ฒ ๋๋ค.
ย ย ย 5.ย RequireJS ๊ทธ๋ฆฌ๊ณ CommonJS์ AMD(Asynchronous Module Definition)
Node.js์ ์ํฅ ์ค ํ๋๋ผ๊ณ ํ์๋ ์๊ฐํ๋ค.
๋ค์ด๋ฒ D2์์ ์์ฑํ ๊ธ์ด ๋ณด๊ธฐ ์ข์ ๋งํฌ๋ฅผ ๊ณต์ ํ๋ค.
์น ํ์ด์ง์์ ์๋น์ค๋ฅผ ๊ฐ๋ฐํ ๋ ์ฌ๋ฌ Javascript ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํฉ์ณ ํ๋์ ์์ฑ๋ ์๋น์ค๋ฅผ ๋ง๋ ๋ค. ์ด๋ ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ํ๋์ ๋ชจ๋๋ก ๋ณผ ๋ ๊ทธ ๋ชจ๋์ ๋ํ ํ์ค์ด ์๋ค๋ ๊ฒ์ด๋ค. ๋ฐ๋ผ์ ๊ฐ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ ์๋ก๋ค๋ฅธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ ๊ณต๋ฐฉ์์ ์ฌ์ฉํ๊ณ ์๊ณ ์ด๋ฅผ ์ด์ฉํ๋ ๊ฐ๋ฐ์๋ ๊ฐ๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ง๋ค ๋ค๋ฅธ ๋ฐฉ์์ ์ฌ์ฉ๋ฒ (๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ผ๋ ๋ฒ์ ๋ง๋ค ๋ฌ๋ผ์ง๊ธฐ๋ ํ๋ค.)์ ์ด์ฉํด์ผํ๊ณ ๋ ์ด๋ฌํ ๋ถ๋ถ์ ๊ต์ฅํ ๋นํจ์จ์ ์ผ๋ก ์ด์ฉ๋๋ค. (์ผ์ต ํ์กฐ๊ฐ์ ๋จน๊ธฐ์ํด ์ผ์ต ์ ์ฒด๋ฅผ ์ฌ์ผํ๋ ์ํฉ)
์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ๋์จ ๋ชจ๋ ์ ๊ณต ๋ฐฉ์์ด CommonJS์ AMD์ด๋ค.
๊ฐ๊ฐ์ ์ฌ์ฉํํ๊ฐ ๋ค๋ฅธ ๋ชจ๋๋ค์ ์ ๊ณตํ๋ ํ๋์ ํ์ค์ ๋ง๋ค์ด ๊ทธ๊ฒ์ ์งํฅํ๋ฉด ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ถ๊ฐ์ ํ์ฅ์ด ํจ์ฌ ์ฌ์์ง๋ฉฐ ์ด๋ ํฐ ํ๋ก์ ํธ์์๋ ๋ชจ๋์ ๊ด๋ฆฌ๊ฐ ์ฉ์ดํ๋ฉฐ ํจ์จ์ ์ด๋ค. ํ์ง๋ง ์ด ๋ฐฉ์์ ์ฌ์ฉํด๋ ๋ง์ฐฌ๊ฐ์ง๋ก ๋ธ๋ผ์ฐ์ ์์๋ ์ง์ํ์ง ์๊ธฐ ๋๋ฌธ์ (๋ค๋ง ECMA6๋ import ํค์๋๋ฅผ ์ ๊ณตํ๋ค.) ์ด๋ฅผ ๋ฒ๋ค๋ง ํ๊ธฐ ์ํ systemjs, Jspm, Rollup.js, Webpack๋ฑ์ ์๋น์ค๊ฐ ์กด์ฌํ๋ค
ย ย ย ย 6.ย jasmin, chai, mocha
๊ท๋ชจ๊ฐ ํฐ ํ๋ก์ ํธ ์ผ์๋ก ์์ค๊ด๋ฆฌ๊ฐ ์ค์ํ์ฌ ์์นซ ํ๋์ ์์ ์ฌํญ์ด ์ฌ์ด๋์ดํํธ(๋ค๋ฅธ ๋น์ฆ๋์ค ๋ก์ง์ ์ง/๊ฐ์ ์ ์ผ๋ก ์ํฅ์ด ๊ฐ๋ ๊ฒ)๊ฐ ๋ฐ์ ํ ์ ์๋ค.
์ด๋ ๋ผ์ด๋ธ์๋น์ค์ ์ปค๋ค๋ ์ด์์ด๋ฉฐ ์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด QA์ ํ ์คํธ์ผ์ด์ค๊ฐ ์กด์ฌํ๋ค. ๋ค๋ง ๊ท๋ชจ๊ฐ ํฌ๊ณ ์ง์ํ๋ ํ๋ซํผ์ด ๋์ผ๋ฉฐ ์๋ง์ ํ์ด์ง์ ๋ฒ๊ทธ๊ฐ ๋ฐ์ํ๋ ํ๊ฒฝ์ ์์ฐํ๊ธฐ ์ด๋ ค์ด ์์๊ฐ ๋ฐ์๋๋ฉด ์ด๋ฌํ ํ ์คํธ๋ ์ฌ๋์ด ์ง์ ํ๊ธฐ ์ด๋ ต๊ณ ํนํ ์ ์์ผ ๋ฐฉ๋ฒ๋ก ์ ์ฌ์ฉํ๋ ๊ฐ๋ฐ ํ๊ฒฝ์์๋ ์ด๋ฌํ ๊ณผ์ ์ด ๊ฑฐ์ ๋ถ๊ฐ๋ฅ์ ๊ฐ๊น๋ค. ๊ฒฐ๊ตญ ์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด์๋ ์๋ํ๋ ๊ฐ๋ฐ ํ ์คํธ ํ๊ฒฝ์ด ํ์ํ๋ค.
ํ๋ก ํธ์๋ ๊ฐ๋ฐ๋ ๋ง์ฐฌ๊ฐ์ง๋ก ์ ๋ ํ ์คํธ๋ฅผ ์ง์ํ๋ ์๋น์ค๊ฐ ์๋ค. ๊ฐ์์ DOM Mock์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ชจ๋ ์ผ์ด์ค๋ฅผ ํ ์คํธํด๋ณด๊ณ ๊ฒฐ๊ณผ์ ์ผ๋ก ํ ์คํธ์ ๊ฒฐ๊ณผ๋ฅผ ํ์ธํ ์ ์๊ฒ ์ ๊ณตํ์ฌ ์๋น์ค ๋ฐฐํฌ์ด์ ์ ๋ชจ๋ ๊ธฐ๋ฅ์ ์์ ์ฑ์ ๊ฒํ ํ ์ ์๋ค.
ย ย ย ย 7.ย istanbul, blanket, JSCoverage
์ด์ ์ ๋งํ ์ ๋ํ ์คํธ๋ ์๋น์ค ๋๊ณ ์๋ ์์ค์ฝ๋์ ์ผ๋ง๋ ๋ง์ ๋ถ๋ถ์ ํ ์คํธ ํด์ฃผ๋์ง์ ๋ํ ๋ถ๋ถ์ด ์๋นํ ์ค์ํ๋ค. (๋ง์ ๋ถ๋ถ์ด ์๋ํ ํ ์คํธ๋ฅผ ์ง์ํ ์๋ก ์๋น์ค๋ ์์ ์ ์ด๊ณ ์ ๋ขฐ๋ฅผ ๋ณด์ฅํ๊ธฐ ๋๋ฌธ) ํ์ง๋ง ์ผ๋ง๋ ๋ง์ ๋ถ๋ถ์ ์์ค์ฝ๋์ ํ ์คํธ๋ฅผ ์ง์ํ๋์ง ์ฌ๋์ด ์๊ธฐ์๋ ์ด๋ ต๋ค๊ณ ๋ณผ ์ ์๋ค. ์ด ๋๋ฌธ์ ์ผ๋ง๋ ๋ง์ ๋ถ๋ถ์ด ํ ์คํธ๊ฐ ๋์๋์ง, ๋ค์๋งํด ์ผ๋ง๋ ์ฝ๋๊ฐ ์ปค๋ฒ(Cover)๋์๋๋๋ ์ปค๋ฒ๋ฆฌ์ง(Coverage)๋ผ๋ ์ฉ์ด๋ฅผ ์ฌ์ฉํ์ฌ ์งํ๋ฅผ ๊ฒฐ์ ํ๋ค. ์ ๋ ํ ์คํธ ๋๊ตฌ์ ์ฐ๋ํ์ฌ ์ปค๋ฒ๋ฆฌ์ง ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๊ฒ ๋๋ฉด ์ปค๋ฒ๋ฆฌ์ง ์งํ๋ฅผ ๋ฆฌํฌํธ๋ก ์ ๊ณต๋ฐ๊ฒ ๋๋ค.
ย ย ย ย 8.ย JSDoc
JSDoc์ javascript ๋ชจ๋์์ ์ฌ์ฉ๋๋ ๊ฐ๊ฐ์ ํด๋์ค, ํจ์๋ค์ ๋ํ ์ ์๋ฅผ JSDoc์์ ์ ์ํ ํ์ค ์ฃผ์์์์ ๋ง์ถฐ ์์ฑํ๊ฒ ๋๋ฉด ๊ทธ์๋ฐ๋ฅธ ์๋ํ๋ ๊ฐ๋ฐ ๋ํผ๋ฐ์ค ๋ฌธ์๊ฐ ๋ง๋ค์ด์ง๊ฒ ๋๋ค. ๋งํฌ๋ค์ด ๋ฌธ์๋ก ๋ํผ๋ฐ์ค ๋ฌธ์๋ฅผ ์ ๊ณตํ์ฌ gitbookย ๊ฐ์ ํธ์คํ ์๋น์ค์ ๋ฑ์ฌํ๊ฒ ๋๋ฉด ํ๋์ ์ธ์๋ฌผ๋ก์ ์ถ๋ ฅ๋ ๊ฐ๋ฅํ๋ค. ์ด๋ฌํ ๋ฐฉ๋ฒ์ ๊ฐ๋ฐ์๊ฐ ์ผ์ผํ ๋ํผ๋ฐ์ค ๋ฌธ์๋ฅผ ๋ง๋ค์ง ์์๋ ๋ํผ๋ฐ์ค ๋ฌธ์๋ฅผ ๋ง๋ค ์ ์๋ ์ด์ ์ด ์์ผ๋ฉฐ ํ์คํ๋ ์ฃผ์ ์ฌ์ฉ์ผ๋ก ํ์ ๋ฐ ์ธ์์ธ๊ณ๊ฐ ์ํ ํ๊ฒ ๋๋ค. ์ฌ์ค ๋ค๋ฅธ Doc ํด๋ ์์ง๋ง ํด๋น ์๋น์ค๊ฐ ๊ฐ์ฅ ์ ๋ ฅํ๋ค.
AngularJS 2์ ๋ํ ์ค๋ช ์ ์ํ ํฌ์คํ ์ด์์ผ๋, ์ต๊ทผ๋ค์ด ์น ํ๋ก ํธ์๋ ๊ฐ๋ฐ ๋ํฅ์ด ๋ง์ด ๋ณํ๊ณ ์์ด ๊ทธ ๋ถ๋ถ์ ์ค์ ์ ์ผ๋ก ์ ๋ฆฌํด๋ณด์๋ค.
๋ค์์๊ฐ์๋ Angular 2์ Angular 1 ๊ทธ๋ฆฌ๊ณ ReactJS๋ฅผ ์ฃผ์ ๋ก ์ค์ ์ ์ผ๋ก ๋ค๋ค๋ณด๋ ์๊ฐ์ ๊ฐ์ ธ๋ณด๋๋ก ํ์. ์๋์ค์ค!












