Angular 2 ๊ทธ๋ฆฌ๊ณ ์น ํ๋ก ํธ์๋ (2/2)
์ด๋ฒ ์๊ฐ์๋ Angular๊ฐ ๋ฌด์์ธ์ง ์์๋ณด๋๋ก ํ์
Angular 2 ๊ทธ๋ฆฌ๊ณ ์น ํ๋ก ํธ์๋ (1/2)
Angular 2 ๊ทธ๋ฆฌ๊ณ ์น ํ๋ก ํธ์๋ (2/2) - ํ์ฌ ๊ธ
Continue Reading
์ด ๊ธ์ Angular์ ํน์ง์ ์ต๋ํ ๊ฐ๋ตํ๊ฒ ์ค๋ช
ํ๋ค.
๋ฐ๋ผ์ ์ต๊ทค๋ฌ ์ฝ๋๋ฅผ ์์ธํ๋ณด๊ณ ์ถ์ ๋ถ๋ค
Angular ์ฝ๋๋ฅผ ๋ณด๋ฉฐ ํ์
ํ์
ํ๊ณ ์ถ์ดํ์๋ ๋ถ๋ค์ ์ํ ๊ธ์ด ์๋๋ค.
๊ฐ๋จํ๊ฒ ์๋ฐ์คํฌ๋ฆฝํธ์ Angular ์ฝ๋๋ฅผ ๋น๊ตํด๋ณด๊ณ
์ฐจ์ด์ ์ ์ค๋ช
ํ๋ ์ ๋๋ก ์ฝ๋ ์ฒจ๋ถ๋ ๋๋ ๊ฒ์ด๋ค.
ํ์
์์ Angular ๋์
์ ๊ณ ๋ คํ๊ฑฐ๋,
์ด์ Angular๊ฐ ๋ฌด์์ธ์ง ์์๋ณด๋ ค๋ ๋
์๋ฅผ ์ํด ๊ธ์ ์์ฑํ๊ณ ์๋ค.
๋ง์ฝ ์ฌ๋ฌ๋ถ์ด Angular์ ๋ํด ์์ธํ ์์๋ณด๊ณ ์ถ๋ค๋ฉด
Angular 2 ๊ทธ๋ฆฌ๊ณ ์น ํ๋ก ํธ์๋ (3/3)์ ์ฝ์ด๋ณด์๊ธฐ ๋ฐ๋๋ค.
์์์์ Angular์ ๋ํด ๊ฐ๋จํ๊ฒ(30๋ถ) ์ค๋ช
ํ๋ค.
๋์์์ด ๊ธธ๊ธฐ ๋๋ฌธ์ ์ฌ๋ผ์ด๋ ์๋ฃ๋ฅผ ๋ณด๋ ๊ฒ์ ๊ถ์ฅํ๋ค.
ํ๋ ์์ํฌ vs ๋ผ์ด๋ธ๋ฌ๋ฆฌ
ํ๋ ํ์๊ฐ ์ด์ํ๋ ํ์ด์ค๋ถ ํ์ด์ง์์
๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ํ๋ ์์ํฌ ํ๋ก์ ํธ๋ฅผ ๋น๊ตํ๋ฉด์ ํ๋ ์์ํฌ ํ๋ก์ ํธ์์
๋ ๋ง์ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ค๊ณ ์ฌ๋ ธ๋ ์ ์ด ์๋๋ฐ.
๊ฒฐ๊ณผ์ ์ผ๋ก ๊ฐ๋ฃจ๊ฐ ๋๋๋ก ํธ๋ ธ๋ค. (์์)
ํ๋ ์์ํฌ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ๊ฐ๋ ํผ์ฉ๋์ด ์ฌ์ฉ๋๋ฉด์ ์คํด๊ฐ ์๊ฒผ๋ค๊ณ ์๊ฐํ๋ค.
๋์ ๊ฐ๋
์ ์์ฐํ ๋ค๋ฅธ ๊ฐ๋
์ด๊ธฐ ๋๋ฌธ์ ์ด ์๋ฆฌ๋ฅผ ๋น์ด ๊ฐ๋จํ๊ฒ ์ค๋ช
์ ํด๋ณผ๊น ํ๋ค.
(์ฌ์ง์ถ์ฒ: ํธ์ํฐย @jaffathecake)
ํ๋ ์์ํฌ(Framework):ย
ํฐ ํ(Frame)์์์ ๊ทธ ๊ท์น์ ๋ง๊ฒ ์ ์๋ ๊ธฐ๋ฅ๊ณผ ๋ผ์ดํ์ฌ์ดํด์ ์งํค๋ฉฐ ๊ธฐ๋ฅ์ ๊ฐ๋ฐํ ์ ์๋ ๋๊ตฌ.
๋ผ์ด๋ธ๋ฌ๋ฆฌ(Library):ย
๊ธฐ์กด ๊ฐ๋ฐ๋ ๊ธฐ๋ฅ์ ์งํค๋ฉด์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์ ๊ณตํ๋ ๊ธฐ๋ฅ์ ์ถ๊ฐ์ ์ผ๋ก ์ฌ์ฉํ์ฌ ํ์์
ํ ์ ์๋ ๋๊ตฌ.
๋๊ฒ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ณด๋ค ํ๋ ์์ํฌ๊ฐ ์ ๊ณตํ๋ ๊ธฐ๋ฅ์ด ๋ ํฐ ํธ์ด๋ฉฐ
๋ฌ๋์ปค๋ธ๋ ํ๋ ์์ํฌ๊ฐ ๋ ๋์ ํธ์ด๋ค.
์ ๊ทธ๋ผ ์ฃผ์ ๋ก ๋์์์ Angular๋ฅผ ์์๋ณด์.
Angular๋ Google์์ 2009๋
Feedback ์๋น์ค๋ฅผ ๊ฐ๋ฐํ๋ ๋์ค ํ์๋ ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ ์์ํฌ์ด๋ค.
๋น์๋งํด๋ ํ๋ฉด(View)์ด ๋์ ์ผ๋ก ๋ฐ๋๋ ํ์ด์ง๋ฅผ ๋ง๋ค๊ณ
๊ทธ๊ณณ์ ์ด๋ฒคํธ ํจ์๋ค์ ๋ฐ์ธ๋ฉ(์ด๋ฒคํธ๋ฅผ ์ฐ๊ฒฐํ๋ ๊ณผ์ )ํ๋ ๋ก์ง์ ์ถ๊ฐํ๋ ๊ฒ์ ์ง๋ ๊ณผ์ ์
๊ณ ์ค๋ํ ์์ ์๋ฐ์คํฌ๋ฆฝํธ ํน์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ์์ฑํ๊ธฐ ๋๋ฌธ์ ๊ต์ฅํ ์ฝ๋๋ผ์ธ์ด ๊ธธ์๋ค.
๊ทธ ๋์ผ์ ์ต๊ณ ์กด์ ๊ตฌ๊ธ ์์ง๋์ด๋ค๋ ์ด๋ฐ ๊ฐ๋ฐ๋ฐฉ์์ ํผ๊ณคํจ์ ๋๊ผ์ํ
๊ณ
๊ทธ๋ ๊ฒ ์กฐ๊ธ ๋ ํธ๋ฆฌํ ๋ฐฉ๋ฒ์ ๋ชจ์ํ๋ ๋์ค Angular๊ฐ ๋ง๋ค์ด์ก๋ค.
๊ทธ๋์ ๊ฒฐ๊ตญ ์ต๊ทค๋ฌ๋ผ๋ ์น๊ตฌ๋ ๋ฌด์์ผ๊น?
๊ณผ๊ฑฐ์ ํ์๋ ์ต๊ทค๋ฌ๋ฅผ ๊ฐ๋ฐ ์์ฐ์ฑ์ ๊ทน๋ํ์์ผ์ฃผ๋ ํ๋ ์์ํฌ๋ผ๊ณ ์ค๋ช
ํ๋ค.
๋ฌผ๋ก ๋ง๋ ๋ง์ด๋ค. ํ์ง๋ง ์ต๊ทค๋ฌ๋ฅผ ์ฌ์ฉํด์ค์ง ์์๋ ์ฌ๋๋ค์ ์ด๊ฒ์ด ๋๋์ฒด ์ด๋ค ๋ฐฉ๋ฒ์ผ๋ก ์์ฐ์ฑ์ ๊ทน๋ํ ์์ผ์ฃผ๋ ๊ฒ์ธ์ง ์๋ฟ์ง ์๋๋ค.
์ต๊ทค๋ฌ๋ ๊ธฐ์กด ๋ฐฉ์๊ณผ๋ ๋๋ฌด๋๋ ๋ค๋ฅธ ๋ฐฉํฅ์ ๊ฐ์ง๊ณ ์๋ค.
๊ทธ๋์ ์ต๊ทค๋ฌ๋ฅผ ์ค์ ๋ก ์ฌ์ฉํด๋ณด์ง ์์ ๋ถ๋ค์๊ฒ ์ด๋ฅผ ์ค๋ช
ํ๋ ๊ฒ์ด ๋๋ฌด๋ ํ๋ค๋ค.
ํ์๋ ์์ผ๋ก ์ต๊ทค๋ฌ๋ฅผ
โ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ฌธ์ ๋ฅผ ๋ค ๋ฎ์ด์ฃผ๋ ํ๋ ์์ํฌ"๋ผ๊ณ ์ค๋ช
ํ๊ณ ์ถ๋ค.
์ฌ๋ฌ๋ถ์ ์ด ๋ค์ ์น์
์์ ๊ตฌ์ฒด์ ์ผ๋ก ์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์ด๋ค ๋ฌธ์ ๋ฅผ ๊ฐ์ง๊ณ ์๋์ง ์๊ฒ ๋ ๊ฒ์ด๋ค.ย
๋ค์ ๊ธ์ด ๊ธธ์ด์ง ์ ์์ผ๋ ์ฐ๋ฆฌ ๋ธ๋ก๊ทธย ํผ๊ทธ๋
ธ์ฆ ์คํ์ผ๋๋ก ๋ง์ ๋งํฌ์ ๊ทธ๋ฆผ์ ์ฒจ๋ถํ๋ค.
ํ์๋ IT ๊ฐ๋ฐ๊ด๋ จ ๋ถ์ผ์์ ์๋ฃจ์
์ ๊ฐ๋ฐํ๊ณ ์๋ ๊ฐ๋ฐ์์ด๋ค.ย
C#์ผ๋ก ASP.NET์ ์ด์ฉํ์ฌ ์น ์๋น์ค๋ฅผ ๊ฐ๋ฐํ๊ณ ์์ผ๋ฉฐ
๋ด๊ฐ ์ํ ํ ์ธ์๋ ํ์ฌ์์๋ ๋ฉ์ด์ ์ธ์ด๋ C#์ ์ฃผ๋ก ์ด๋ฃฌ๋ค.
๋ฌผ๋ก JAVA๋ ์ฌ์ฉํ๊ณ ์์ง๋ง ๊ฒฐ๊ณผ์ ์ผ๋ก ๊ฐ์ฒด ์ค์ฌ์ ๊ฐ๋ฐ์ด ์ฃผ๋ก ์ด๋ฃจ์ด์ง๋ค.
๋ด ์
์ฅ์์ ๋ณผ ๋ ๊ฐ์ฒด ์ค์ฌ ๊ฐ๋ฐ์ ํ์
์ ์์ด ์๋นํ ์ ์๋ ฅ์ ๋์ฌ์ฃผ๊ณ
๊ฐ๋ฐ์ ๋ํ ๊ด์ ์ ์ง์ ์ ์ผ๋ก ์๋ ค ์ค๋ค.
๋ค์ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ์ฃผ์ ๋ฅผ ์ฎ๊ฒจ๋ณด์ย
ํ์๋ ํ๋ก ํธ์๋ ๊ฐ๋ฐ๋ ๊ฐ์ด ํ๊ณ ์๊ณ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ๋ํ๊ณ ์์ฃผ ์ฌ์ฉํ๊ณ ์๋ ์ธ์ด์ด๋ค.
(ํ์๋ ์ด์ ์ง์ฅ์์๋ Node.js๋ก ์น์๋น์ค๋ฅผ ๊ฐ๋ฐํ๊ณ ์์๋ค.)
ํ์ง๋ง ์๋ฐ์คํฌ๋ฆฝํธ์๋ ๊ต์ฅํ ๋ฌธ์ ์ ๋ค์ด ์์์ผ๋!!
์ฒซ ๋ฒ์งธ๋ก ํ์
์ด ์ด๋ ต๋ค.
์์ ๊ฑฐ๋ก ํ C#๊ณผ ๊ฐ์ ํ์
์ ์ ๊ณตํ๋ ๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ์ย
๋ค๋ฅธ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์์ ์ตํ ์ฌ์ฉํ๋ ํด๋์ค, ์์, ์ถ์ํ๊ฐ๋
์ ๋ฐ์๋ค์ด๊ธฐ ๋๋ฌธ์ ํ์
์์ ์ฌ์ฉํ๋ ํํ๊ฐ ์ ์ฌํ๋ค.ย
(๋ฐ๋ผ์ ๋ค๋ฅธ์ฌ๋์ ์ฝ๋๋ฅผ ์ฝ๊ฒ ์ดํด ํ ์ ์๊ณ ์ด๋ก์ธํด ํ์
์ ์ฉ์ดํ๋ค.)
ํ์ง๋ง ์ฐ๋ฆฌ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ ๋ณ์์ ๋ํ ํ์
์ ์ ๊ณตํ์ง ์๋๋ค.
๋ง์ฐฌ๊ฐ์ง๋ก ์๋ฐ์คํฌ๋ฆฝํธ๋ ํด๋์ค๋ฅผ ์ฌ์ฉํ์ง ์๊ณ
ํ๋กํ ํ์
์ด๋ผ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๊ณ ์ ์ ๊ฐ์ฒด ์ฌ์ฉ ํํ๋ฅผ ์ ๊ณตํ๊ณ ์๋ค.
๊ทธ๋ฆฌ๊ณ C#๊ณผ ๊ฐ์ด ๊ฐ์ฒด ์ฌ์ฉ์ ๋ฌด์กฐ๊ฑด ํ๋กํ ํ์
์ ์ ๊ณตํ๋ ๊ฒ๋ ์๋๋ค.
(๋ฆฌํฐ๋ด ์ค๋ธ์ ํธ๋ฅผ ์ฌ์ฉํ๋ค.)
์๋ฐ์คํฌ๋ฆฝํธ ๋์์ธํจํด์ ๋ณด์
์ฐ๋ฆฌ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ ์ต๋ช
ํจ์๋ก ์๋ง์ ๋์์ธํจํด์ ์ฑ๊ณต์ (?)์ผ๋ก ์ ๊ณตํ๋ค!
์ด๋ฐ ๋ฌด์ํ ์ต๋ช
ํจ์์ ์ฌ์ฉํํ๋
๋ค๋ฅธ ํ์
์ ์์ด ๊ฐ๋
์ฑ์ ๋จ์ดํธ๋ฆฌ๊ฒ ๋๊ณ ์ฌ์ง์ด ์ฝ๋ ์ธํ
๋ฆฌ์ ํธ ๊ธฐ๋ฅ์ผ๋ก๋ ํ์ธ ํ ์ ์์ด ํผ๋์ ์ผ๊ธฐํ๋ค.
์ฌ๋ฌ๋ถ์ด ํ์
๊ฐ๋ฐ์ ํ์ง ์๋๋ค๊ณ ํด๋
์ฌ๋ฌ๋ถ์ ์ฌ๋ฌ๋ถ์ด ์ง ์ฝ๋ ๊ฐ๋
์ฑ์ ์ค์ํ๊ฒ ์๊ฐํ๋ค๋ฉด
์๋ฐ์คํฌ๋ฆฝํธ๊ฐ ์ผ๋ง๋ ๋ง์ ๊ฐ๋
์ฑ ๋ฌธ์ ๊ฐ ์๋์ง ์๊ณ ๊ณ์ค ๊ฒ์ด๋ค.
๋ ์์ธํ ์ฌํญ์ ์ด ๊ธ์ ๋ณด์๊ธธ(์๋ฌธ)
๋ ๋ฒ์งธ๋ก ์ฝ์คํธ๊ฐ ๋ฐ์ํ๋ค.
์ฐ๋ฆฌ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ JSDoc๊ณผ ๋จ์ํ
์คํธ, JSLint์ ๊ฐ์ด ๊ฐ๋ฐ ๋๊ตฌ๋ฅผ ์ด์ฉํ์ฌ
์์ ์ค๋ช
ํ ๋ฌธ์ ๋ฅผ ๋ง๊ณ ํ๋กํ ํ์
๊ธฐ๋ฐ์ผ๋ก ๊ฐ๋ฐ์ฝ๋๋ฅผ ์์ฑํ๋ฉด ํ์
๋ฌธ์ ๊ฐ ๊ฐ์ ๋๋ค.
ํ์๋ ๊ทธ๋ ๊ฒ ์๊ฐํ๊ณ ์๊ณ ๊ทธ๋ ๊ฒ ๊ฐ๋ฐํ๊ณ ์๋ค.
์ด๋ฏธ ์ด๋ฌํ ๋ฌธ์ ๋ ์ค๋์ ๋ถํฐ ๊ฑฐ๋ก ๋์ด ์๊ณ
๊ทธ๊ฒ์ ํด๊ฒฐํ๊ธฐ ์ํ ์๋ฃจ์
๋ ์๋๋ฐ ์ ์ด์ฉ์ ์ํ๋๊ฐ?
๊ฒฐ๋ก ์ ๊ทธ๋ฐ ๊ฒ์ ์์ง๋ ๋ชปํ๊ณ ๊ทธ๋ฐ๊ฒ์ ์๊ธฐ๋ ์ซ์ดํ๋ ๊ฐ๋ฐ์๊ฐ ์กด์ฌํ๊ธฐ ๋๋ฌธ์ด๋ค. (ใ
..๋ญ?)
์ฐ๋ฆฌ๋ ๊ฒฝ๊ฑดํ๊ฒ(?) ๋์์ ๋ชจ์ ๋ฐ๋ฅด๊ฒ(ํ์ค์ ์ผ๋ก) ์๊ฐํด๋ณผ ํ์๊ฐ ์๋ค.
์ค๋ฌด์์ ๊ฐ๋ฐ์์ ์ญํ ์ค ๊ฐ์ฅ ์ค์ํ ๊ฒ์ ์๋น์ค๋ฅผ ์ฑ๊ณต์ ์ผ๋ก ์์ฑ์ํค๋ ๊ฒ์ด๋ค.
์ ์ฌ์ง์ โDone is better than perfectโ
(๋จ์ง ๋๋ด๋ ๊ฒ์ด ์๋ฒฝํ ๊ฒ๋ณด๋ค ๋ซ๋ค.)
์ด๋ ์น ์๋น์ค ํ์ฌ(ํ์ด์ค๋ถ)์ ๊ฑธ๋ ค์๋ ๋ฌธ๊ตฌ์ด๋ค.
์ด ๊ธ์ ์ฝ๋ ์ฌ๋ฌ๋ถ์ ๋๋ฌด๋๋ ๋๋ํ๊ธฐ ๋๋ฌธ์
์
๋ฌด๋ฅผ ํ๋ ๋ณธ์ง์ ์ด๋ฏธ ์ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ ์ค๋ช
์ ์๋ตํ๋ค.
ํตํฉ ๊ฐ๋ฐํ๊ฒฝ(IDE) ๊ธฐ๋ณธ์ต์
์์ ์ด๋์ ๋ ๋น๋๊ณผ์ ์์ ๋ฐํ์์์ ๋ฐ์ํ ๋งํ ๋ฌธ์ ๋ฅผ ์ก์์ฃผ๋ ์ธ์ด(C#, JAVA, C, C++, go, rust, haskell etc)๋
ํ์
์์๋ ๊ทธ ๊ท์น์ ์งํค๋ฉด ๋๊ธฐ์ ์์ ์ ์ธ ๊ฐ๋ฐ์ ์ํ ํ ์ ์๋ค.
๋ค๋ง ๋ณ์ ํ์
์ ํ์ด ์๊ณ ๊ฐ๋ฐ์ ์คํ์ผ๋ณ๋ก ์ฝ๋ฉ๋ฐฉ์์ด ์์ ๋๋ ์ ธ์๋ ์ธ์ด๋ค(Javascript, PHP, ruby etc)๋ ๊ฒฐ๊ตญ ์ฑ์ํ ๊ฐ๋ฐํ๊ฒฝ์ด ์๋๋ฉด ํ์
๋ถ๊ฐ๋ฅํ ์ฝ๋์์ฐ์ด ๊ฐ๋ฅํ๋ค.
์์ ๋งํ๋ฏ์ด ์ฑ์ํ ๊ฐ๋ฐํ๊ฒฝ์ ๋ง๋ค๊ธฐ ์ํด์๋ ์ด๋ฏธ ์์ ์ ์ธ ์๋น์ค ์ด์์ ํ๊ณ ์๋ ์
์ฒด์์ ์คํ์ด ๊ฐ๋ฅํ๋ค.
๋ฐ๋ผ์ ๊ทธ ์ด์ ์ ๋จ๊ณ์ ์๋ ์
์ฒด๋ค์ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๊ฐ๋ฐํ๋ ๋ชจ๋ ํ๋ก์ ํธ์์ ํ๋์ ๋ฃฐ์ ์ ํ๊ณ ๊ทธ๊ฒ์ ๋ฐ๋ฅด๊ฒ ๊ฐ์ ํด์ผํ๋ค.
๊ด๋ฆฌ์ ์
์ฅ์์๋ ๋ค๋ฅธ์ธ์ด์ ๋น๊ตํ ๋ ๊ทธ๊ฒ์ด ๋ถํ์ํ ์ฝ์คํธ๊ฐ ๋ ์ ์๋ค.
๊ทธ๋ฆฌ๊ณ ๊ฐ๋ฐ ์์ ํ๋ฅผ ์ํ ์์คํ
๋์
๋ํ ์ฝ์คํธ๋ก ์ฐ์ ์ด ๋ ์ ์๋ค.
(์ด๊ฒ์ด ์๋ฐ์คํฌ๋ฆฝํธ์ ๋จ์ ์ผ๋ก ์ง๋ชฉ ๋ ์ ์๋ค.)
์ต๊ทค๋ฌ๋ฅผ ์ค๋ช
ํ๊ธฐ ์ํด์๋ ๊ฒฐ๊ตญ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ณธ์ง์ ์ธ ๋ฌธ์ ๋ฅผ ํ์
ํ ํ์๊ฐ ์์๋ค.
์ต๊ทค๋ฌ๋ ํ๋ ์์ํฌ์ด๋ค.
ํ๋ ์์ํฌ๋ ๋ชจ๋ ๊ทธ ํ๋ ์์ํฌ์ ๊ท์น๋ด์์ ๊ฐ๋ฐ์ ์งํ ํ๊ฒ ๋์ด์๋ค.
ํ๋ ์์ํฌ๋ต๊ฒ ์ฌ๋ฌ ๊ฐ๋ฐ ํจํด๋ค์ ์ ๊ณตํ๊ณ ์๋๋ฐ
๋ฒ์ 1์์๋ service, provider, factory์ ๊ฐ์ด
์ผ๋ฐ์ ์ผ๋ก ๋ง์ด ์ฌ์ฉํ๋ ๋์์ธํจํด์ ์์ ์ต๊ทค๋ฌ ์์ฒด ์ ์ํ์์ผ๋ก ์ ๊ณตํ๋ค. ์ด๊ณณ์์ ํ์ธํ์ธ์
์ฌ์ง์ด ์ต๊ทค๋ฌ ๋ฒ์ 2์์๋ ํ์
์คํฌ๋ฆฝํธ(Typescript)๋ฅผ ์ง์ํ๋ค.
๊ธฐ์กด์ ์๋ฐ์คํฌ๋ฆฝํธ์์๋ ๋ถ๊ฐ๋ฅ ํ ๋ฐ์ฝ๋ ์ดํฐ, ํด๋์ค, ๋ณ์ํ์
๋ฑ์ ์ฌ์ฉ ํ ์ ์๋ค.
์ ์ฌ์ง์ ์๋ฐ์คํฌ๋ฆฝํธ๋ก Ajax ๊ธฐ๋ฅ์ ์ด์ฉํด์
์๊ฒฉ์ง JSON ํ์ผ์ ๋ง๋ UI๋ฅผ ๋ฐ์ํ๋ ๊ธฐ์ ์ ๋ํ ๋์์ด๋ค.
JSON ํ์ผ์ ํ์ฑํด์ for in ํํ์ ๋ฐ๋ณต๋ฌธ์ผ๋ก
๊ฐ๊ฐ์ ์์ดํ
์ ๋ง๋ ์๋ฆฌ๋จผํธ ์์๋ฅผ ์์ฑํ์ฌ ๊ทธ ์๋ฆฌ๋จผํธ์ ๋ง๋ ์ด๋ฒคํธ๋ฅผ ์ฐ๊ฒฐํด์ผ ํ๋ค.
์ ์ด์ฟผ๋ฆฌ๋ก ์ฌ์ฉํด๋ ๋ฉ์๋ ์ฌ์ฉ์ด ์กฐ๊ธ ํธ๋ฆฌํด์ง๋ ์ ์ธ์ ํฐ ๋ณํ๋ ์๋ค.
์ฌํ๊ป ๊ฐ๋ฐ์๋ค์ ์ด๋ฐ ๊ฐ๋ฐ๋ฐฉ๋ฒ์ ๋ํด์ ํฌ๊ฒ ๋ถํธ์ฌํญ์ ๋๋ผ์ง ๋ชปํ๋ค.
ํ์ง๋ง ์ด๋ฐ ์คํ์ผ์ ๊ฐ๋ฐ ๋ก์ง์ ๋ฌธ์ ์ ์ด ์กด์ฌํ๋ค.
๋ง์ฝ ๋๊ฐ ์ด์์ ์๊ฒฉ์ง์์ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์์ ๊ฐ์ UI์ ๋ฐ์ํด์ผ ํ๋ค๋ฉด ์ด๋ป๊ฒ ํ ๊ฒ์ธ๊ฐ?
์๊ฒฉ์ง์์ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์จ ์ดํ ์ฒ๋ฆฌ๋ก์ง์ ํจ์๋ก ๋ง๋ค์ด ๊ทธ๊ฒ์ ์ฌํ์ฉ ํ ์ ์๋ค.
ํ์ง๋ง ๋ค๋ฅธ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ผ์์๋ ๊ฐ์ ์ฒ๋ฆฌ๋ฐฉ์์ ์ฌ์ฉํ๋ฉด ์ ํธ๋ฆฌํฐ ํํ์ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ๋ฐ๋ก ๋ชจ์ ์ ๋ฆฌํด์ผํ๊ณ
๋ค๋ฅธ ๊ฐ๋ฐ์๊ฐ ์ด ์ ํธ๋ฆฌํฐ ํ์ผ์ ์ฌ์ฉํ๋ ์ฝ๋๋ค์ ๋ชจ๋ ํ์
ํ์ง ์์ ํํ์์ ์์ ํด๋ฒ๋ฆฌ๋ฉด? ์ฌ์ด๋ ์ดํํธ๊ฐ ๋ฐ์ํ๊ฒ ๋๋ค.
2. ๋ณต์กํ ์๋ฆฌ๋จผํธ์ ๋ณํ
์ฌ์ฉ์ ํ๋ฉด์ ์ ์ฉ๋ UI์์ ํ๋์ ์์ดํ
์ญ์ ๊ฐ์ ๊ธฐ๋ฅ์ ์ถ๊ฐํ๋ฉด
์์ดํ
๊ณ ์ ์ ๊ตฌ๋ถ์๋ฅผ ์ด์ฉํด ์ญ์ ์ฒ๋ฆฌ๋ฅผ ํ๋ ๋ก์ง์ ์ถ๊ฐ ํด์ผํ๋ค.
์ญ์ ๊ฐ ์ฑ๊ณตํ๋ฉด UI์์ ์ญ์ ๋ ์๋ฆฌ๋จผํธ๋ฅผ ์ฐพ์ ์ง์์ฃผ๋ ๋ก์ง์ ์ถ๊ฐํด์ผ ํ๋ค.
๊ทธ๋ฆฌ๊ณ ์์ดํ
๊ณ ์ ์ ๊ตฌ๋ถ์๋ฅผ ์๋ฆฌ๋จผํธ data attribute๋ก ์ ๊ณตํ๋ ๋ก์ง๊ณผ ์ญ์ ์ด๋ฒคํธ๋ฅผ ์ฐ๊ฒฐํ๋ ๋ก์ง์ ์๋ฆฌ๋จผํธ๋ฅผ ์ถ๊ฐํ๋ ๋ก์ง์ ์ถ๊ฐํด์ผํ๋ค. (์ด์ฏค๋๋ฉด ํด๊น๋ฆฌ๊ธฐ ์์ํ๋ค.)
๊ทธ ์ฌ์ด์ ๋๋ณด๊ธฐ ๊ธฐ๋ฅ๊ณผ ๋ก๋ฉ ๊ธฐ๋ฅ์ ์ถ๊ฐํ๋ค๊ณ ํด๋ณด์.
๋ก๋ฉ์ด ๋ฐ์ ์ ์์ดํ
๋ฆฌ์คํธ ํ์์ ๋ก๋ฉ ์ด๋ฏธ์ง๋ฅผ ๋ณด์ฌ์ฃผ๋ ์๋ฆฌ๋จผํธ๋ฅผ ์ถ๊ฐํ๊ณ , ๋ก๋ฉ์ด ๋๋๋ฉด ๊ทธ ์๋ฆฌ๋จผํธ๋ฅผ ์ญ์ ํด์ผ ํ๋ค.
๋๋ณด๊ธฐ๋ฅผ ๋๋ฅด๋ฉด ํ์ฌ๊น์ง ๊ฐ์ง๊ณ ์๋ ํ์ด์ง ์ ๋ณด๋ฅผ ์ด์ฉํ์ฌ ๋ค์ ์์ดํ
๋ชฉ๋ก์ ๋ฐ์์ค๊ณ ์๋ฆฌ๋จผํธ๋ฅผ ์ถ๊ฐํ๊ณ ์ด๋ฒคํธ๋ฅผ ์ฐ๊ฒฐํ๋ ๋ก์ง์ผ๋ก ์ ๋ฌํด์ผ ํ๋ค.
์ด ๊ณผ์ ์์ ๊ธฐ์กด์ ์๋ฆฌ๋จผํธ๋ฅผ ์ถ๊ฐํ๊ณ ๋ณ๊ฒฝํ๋ ๋ก์ง์ด ๋ค๋ฅธ ๊ฐ๋ฐ์์ ์ํด ๋ณ๊ฒฝ๋๋ฉด ์ฌ์ด๋ ์ดํํธ๊ฐ ๋ฐ์ ํ ์ ์๋ค.
์๋ฐ์คํฌ๋ฆฝํธ์ ์ฐ๊ฒฐ๋ ์๋ฆฌ๋จผํธ๋ฅผ ์ฐพ์ผ๋ ค๋ฉด ์๋ฆฌ๋จผํธ๋ฅผ ์ง์ ํ์ํด์ผ ํ๋ค.
์๋ฅผ๋ค์ด ๊ตฌ๋ถ์๊ฐ 36๋ฒ์ธ ์๋ฆฌ๋จผํธ๋ฅผ ํ์ํ๋ ค๋ฉด ํ์ ์๋ฆฌ๋จผํธ ์ค 36์ ๊ฐ์ผ๋ก ๊ฐ์ง๊ณ ์๋ ์์ฑ์ ๊ฐ์ง ์๋ฆฌ๋จผํธ๋ฅผ ์ฐพ์์ผํ๋ค.
์๋ฆฌ๋จผํธ๊ฐ ๊ฐ์ง๊ณ ์๋ ์์ฑ์ ์์กดํ๊ธฐ ๋๋ฌธ์ ์์ฑ ์ด๋ฆ์ด ๋ณ๊ฒฝ ๋์ด์๋ ์๋๊ณ
์์ฑ ๊ฐ์ ํ์
์ด ๋ณ๊ฒฝ๋์ด์๋ ์๋๋ค.
(๋ถ๋ช
์ซ์ ํ์
์ธ์ค ์์๋๋ฐ ๋ฌธ์ํ์
์ผ๋ก ์ ๊ณต ๋์์ผ๋ฉด ํ๋ณํ ๋ก์ง์ด ์ถ๊ฐ๋์ผ ํ๋ค.)
๊ทธ๋ฆฌ๊ณ ์ด๊ฒ์ ๋ค๋ฅธ ๊ฐ๋ฐ์๊ฐ ์์ฑ ์ด๋ฆ์ ๋ณ๊ฒฝํด๋ฒ๋ฆฌ๋ฉด ์ฌ์ด๋ ์ดํํธ๊ฐ ๋ฐ์ํ๋ค.
See the Pen BWzdOb by Kenneth Ceyer (@PIGNOSE) on CodePen.
์ดํด๋ฅผ ๋๊ธฐ์ํด ์์ค๋ฅผ ์ฒจ๋ถํ๋ค.
์ต๊ทค๋ฌ๋ ์ด๋ฐ ๋ฌธ์ ๋ฅผ ํ๋ช
ํ๊ฒ ๋์ฒํ๋ค.ย
์ต๊ทค๋ฌ๋ ์ฌ์ฉ์ ํ๋ฉด ๊ด์ ์์ ๊ฐ๋ฐ ํ ์ ์๋ ํน์ง์ ๊ฐ์ง๊ณ ์๋ค.
์ฌ์ฉ์ ํ๋ฉด๊ณผ ์๋ฐ์คํฌ๋ฆฝํธ(ํน์ ํ์
์คํฌ๋ฆฝํธ)๋ย
๋ณด์ด์ง ์๋ ๋ฌด์ธ๊ฐ๋ก ์ฐ๊ฒฐ๋์ด ์๋ค.
์ฐ๋ฆฌ๋ ์ด๊ฒ์ ๋ฐ์ธ๋ฉ ๋์ด์๋ค. ๋ผ๊ณ ํํํ๋ค.
๊ฐ๋ฐ์๊ฐ ์ฝ๋ ์์ผ๋ก ์ด๋ค ๊ฐ์ ๊ฐ์ ธ์ค๋ฉด ์ฌ์ฉ์ ํ๋ฉด(HTML)์ ๊ฐ์ ๊ฐ์ ธ์จ ๊ฒ์ ์๋์ผ๋ก ์ธ์งํ๊ณ
๊ทธ๊ฒ์ ๋ง๋ ์๋ฆฌ๋จผํธ๋ฅผ ์๋์ผ๋ก ์์ฑํ๋ค.
๊ทธ๋ฆฌ๊ณ ์์ฑ๋ ์๋ฆฌ๋จผํธ์ ์ด๋ฒคํธ๋ฅผ ์๋์ผ๋ก ์ฐ๊ฒฐํ๋ค.
๋ณ์์ ์ฌ์ฉ์ ํ๋ฉด์ด 1:1๋ก ์ฐ๊ฒฐ๋์ด์๊ธฐ ๋๋ฌธ์
๊ฐ๋ฐ์๋ ์ฌ์ฉ์ ํ๋ฉด์ ์ ์ดํ๊ธฐ ์ํด์ ์๋ฆฌ๋จผํธ๋ฅผ ํ์ ํ ํ์๊ฐ ์๋ค.ย
์๋ฅผ๋ค์ด 36๋ฒ ๊ตฌ๋ถ์๋ฅผ ๊ฐ์ง ์๋ฆฌ๋จผํธ๋ฅผ ์ญ์ ํ๊ณ ์ ํ๋ค๋ฉด
๋ฐฐ์ด์ค์ ๊ตฌ๋ถ์๊ฐ 36๋ฒ์ธ ์์๋ฅผ ์ญ์ ํ๋ฉด ์ฌ์ฉ์ ํ๋ฉด์ ์ด๋ฅผ ๊ฐ์งํด์ ์ญ์ ๋ ๋ฐฐ์ด ์์์ ๋งค์นญ๋ ์๋ฆฌ๋จผํธ๋ฅผ ์๋์ ์ผ๋ก ์ญ์ ํ๋ค.
๋ณ์์ ์ฐ๊ด๋ ์ฒ๋ฆฌ๋ก์ง์ ์ฌ์ฉ์ํ๋ฉด์์ ์ ์ดํ๊ธฐ ๋๋ฌธ์ ์ฝ๋์ฌํ์ฉ์ ๋ํด์ ์ ๊ฒฝ ์ธ ํ์๊ฐ ์ฌ๋ผ์ง๋ค.ย
๊ทธ๋ฆฌ๊ณ ์ฌ์ฉ์ ํ๋ฉด ์ ์ด์ ๊ด๋ จํ ๋ก์ง์ ์ฌ์ฉ์ ํ๋ฉด์ ๋ช
์ ๋์ด ์๊ธฐ ๋๋ฌธ์
๋ค๋ฅธ ๊ฐ๋ฐ์๋ ์ค์ง ์ฌ์ฉ์ ํ๋ฉด์ ์ดํด๋ณด๋ฉด ๋๋ค.
์ด๋ ํ์
์์ ์ฝ๋ ๋ฌธ์ํ๋ฅผ ํ์ง ์์๋ ์ง๊ด์ ์ผ๋ก ์ฝ๋๋ฅผ ๋ณผ ์ ์๊ธฐ ๋๋ฌธ์ ์ ๋ฆฌํ๋ค.
See the Pen mWEMNa by Kenneth Ceyer (@PIGNOSE) on CodePen.
์๊น์ ์ ์ฝ๋๋ฅผ ์ด๋ฒ์๋ ์ต๊ทค๋ฌ v1.6์ผ๋ก ํํํด๋ดค๋ค.
์ ์ด์ฟผ๋ฆฌ ์ฝ๋์์ ๊ฑฐ๋ก ๋์๋ ๋ฌธ์ ์ ์ด ์ด๋ป๊ฒ ํด๊ฒฐ๋์๋์ง ๋ณด์ด๋๊ฐ?
์ฌ๋ฌ๋ถ์ด ์ต๊ทค๋ฌ๋ก ์ฝ๋๋ฅผ ์์ฑํ๋ฉด์ ์ผ๋ง๋ ๋ง์ ์ฆ๊ฑฐ์์ด ์์์ง ์์ํด๋ด๋ผ!
์ต๊ทค๋ฌ๋ ๊ทธ๋ฅ ์ฉ๋ค.
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ๋ฉฐ ๋ฌด์์์ ์ผ๋ก ๋ถํธํ ๊ธฐ๋ฅ๋ค์
์ต๊ทค๋ฌ๋ ๋ฉ์๊ณ ๋๋ํ๊ฒ ํด๊ฒฐํ๋ค.
์ต๊ทค๋ฌ์ ์ฅ์ ๋ค์ ์ด ํฌ์คํธ์ ๋ชจ๋ ๋
น์ด๊ธฐ์๋ ๋๋ฌด ๋ง๊ธฐ ๋๋ฌธ์
์ถํ ์ต๊ทค๋ฌ JS ๊ฐ์๋ฅผ ํตํด ์ฌ๋ฌ๋ถ์๊ฒ ๊ทธ ์ฅ์ ๋ค์ ์๊ฐํ๋๋ก ํ๊ฒ ๋ค.
์ต๊ทค๋ฌ๋ ์ ๋ง ๋ฉ์๋ ์ธ์ด์ด์ง๋ง ๊ธฑ(Geek)์ ์ํ ์ธ์ด๊ฐ ์๋๋ค.
๋ถํ์ํ๊ฒ ์ฐ์ํ์ง๋ ์๊ณ , ์ผ๋ถ๋ฌ ์ด๋ ต๊ฒ ํํํ์ง๋ ์๋๋ค.
์ฌ๋ฌ๋ถ์ด ํ์คํฐ๋ฅผ ์ซ์ดํ๊ณ ์ผ๋ฆฌ์ด๋ตํฐ๋ฅผ ์ซ์ดํ๋๋ผ๋
์ต๊ทค๋ฌ๋ ๋ฐฐ์์ ๋์ ๊ฒ์ด ์๋ค.
๋ค๋ค ์ด ๊ธ์ ์ฝ์๋ค๋ฉด
์ต๊ทค๋ฌ ๊ณต์๋ฌธ์๋ก ๋ค์ด๊ฐ ์ต๊ทค๋ฌ์ ๋ํด์ ๋ ์์ธํ ์์๋ณด๊ธฐ๋ฅผ ๋ฐ๋๋ค.