NPM์ด๋ ๋ฌด์์ ๋๊น? ๋น์ ์ด ํ ์ ์๋ค๊ณ ์๊ฐํฉ๋๊น?
"npm"์ UPNG.js๋ฅผ ๊ฒ์ํ๋ ค๋ฉด ํน์ ์ํํธ์จ์ด๋ฅผ ๋ค์ด๋ก๋ํ์ฌ ์ค์นํด์ผ ํ๋ ๊ฒ ๊ฐ์ต๋๋ค. ๋ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ ๋ฐ์ดํธํ ๋ GitHub์ npm์์ ๋ชจ๋ ์ ๋ฐ์ดํธํด์ผ ํฉ๋๊น? ์๋๋ฉด npm์ด GitHub์ ์ฐ๊ฒฐํ์ฌ ์ต์ ๋ฒ์ ์ ๋ค์ด๋ก๋ํ ์ ์์ต๋๊น?
์ฌ๋ณด์ธ์! ์ฃ์กํฉ๋๋ค. NodeJS/NPM์ ๋ชจ๋ฅด์๋ ์ค ๋ชฐ๋์ต๋๋ค. NPM์ ์ง๊ตฌ์์์ ๊ฐ์ฅ ํฐ ํจํค์ง/์ข
์์ฑ ๊ด๋ฆฌ ์๋ฃจ์
์
๋๋ค. ์ฝ๋๋ ์ฌ์ ํ github์ ์์ผ๋ฏ๋ก ๊ฐ๋ฐ์๋ ์ฝ๋๋ฅผ ๋ ํธ์ํ๊ฒ ๋ค์ด๋ก๋ํ๊ณ ์ฌ์ฉํ ์ ์์ต๋๋ค.
์ฆ: ์ฝ์ ๋ช
๋ น์ ํตํด ์ค์น( npm install upng
)
์๋ฅผ ๋ค์ด require('upng')
๋ฅผ ํตํ ์ฌ์ฉ. ๋ํ ์ ์ญ ๊ฐ์ฒด ๋ค์์คํ์ด์ค( window.upng
)๋ฅผ ์ด์ง๋ฝํ๋ ๊ฒ์ ๋ฐฉ์งํ๊ณ ์ถ์ต๋๋ค.
์ด ์ฝ๋๊ฐ echojs.com ์ ๊ฒ์
NPM์ ๊ฒ์ํ๊ธฐ ์ํด pull ์์ฒญ์ ์์ฑํ ์๊ฐ์ ์ฐพ์ ์ ์๋์ง ์์๋ณด๊ฒ ์ต๋๋ค. ๊ทธ๋ฌ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ง๋ค์์ผ๋ฏ๋ก NPM์ ๊ฒ์ํด์ผ ํฉ๋๋ค. ๋ฌธ์๋ https://docs.npmjs.com/cli/publish ์์ ์ฐพ์ ์ ์์ต๋๋ค.
NPM์์ ์ฌ์ฉํ ์ ์๋๋ก ํจํค์ง๋ฅผ ๋ง๋๋ ๊ฒ์ ๋งค์ฐ ๊ฐ๋จํฉ๋๋ค.
์ฌ๊ธฐ์์ ๋ ๋ง์ ์ ๋ณด๋ฅผ ํ์ธํ์ธ์: https://docs.npmjs.com/cli/init
์น ์ธํฐํ์ด์ค๊ฐ ์์ต๋๊น? ์น ์ธํฐํ์ด์ค๋ฅผ ํตํด GitHub๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ผ๋ถ ์๋ฒ์ 12kB๋ฅผ ๋ณด๋ด๊ธฐ ์ํด ์ผ๋ถ ์ํํธ์จ์ด๋ฅผ ๋ค์ด๋ก๋ํ๋ ๊ฒ์ ๋์๊ฒ ๋ฏธ์น ๊ฒ ๊ฐ์ต๋๋ค.
์๋, ๊ทธ๋ค์ํ์ง ์์ต๋๋ค. ์์ฒด ๊ฐ์ ๋จธ์ ( node.js )์์ ์คํ๋๊ณ ํจ๊ป ์ ๊ณต๋๋ ์ด ํจํค์ง ๊ด๋ฆฌ์ ์ํํธ์จ์ด( npm )๋ฅผ ์ค์นํด์ผ ํฉ๋๋ค. ํ์๋ ์น ์๋ฒ, ๋ฐ์คํฌํ ์ ํ๋ฆฌ์ผ์ด์ ์ ์คํํ๊ธฐ ์ํ ํ๋ซํผ ๋๋ Arduino ๋๋ Raspberry Pi๋ฅผ ํตํด ๋ฌผ๋ฆฌ์ ์ฅ์น ๋ฅผ ํ๋ซํผ ์ผ๋ก ์์ฃผ ์ฌ์ฉ ๋ฉ๋๋ค.
๋ ์ด์ ๊ถ์ฅ๋์ง ์๋ "์ ์ญ ๋ด๋ณด๋ด๊ธฐ" ํจํด์ ์ฝ๋์์ ์ฌ์ฉํ๋ ๊ฒ์ ๋ณผ ์ ์์ต๋๋ค. Webpack , Brunch ๋๋ Rollup ๊ณผ ๊ฐ์ ๋ฒ๋ค๋ฌ์ ์ํด UMD๋ก ๋ณํ๋ UMD ๋๋ ์ด์์ ์ผ๋ก๋ ES6 ๋ชจ๋์ด ๋ ์ข์ CommonJS ๋ชจ๋์ด ํ์ํฉ๋๋ค.
๋ชจ๋ ์ฌ๋์ด ์ฝ๋๋ฅผ ์ฝ๊ณ ์กด๊ฒฝํ ์ ์๋๋ก ํ๋ ค๋ฉด EcmaScript ์ธ์ด์ ์ต์ ๊ธฐ๋ฅ์ ์ฌ์ฉํ ๋ค์ ์๋ง๋ Babel์ ์ฌ์ฉ ํ์ฌ ES5๋ก ๋ณํ ํด์ผ ํฉ๋๋ค.
๋น๋ํ๋ ๊ฒ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ฏ๋ก TypeScript ๋ฅผ ์ฌ์ฉํ๊ณ ์ถ์ ์๋ ์์ต๋๋ค. ์ด๋ ๊ธฐ๋ณธ์ ์ผ๋ก EcmaScript์ ์์ ์งํฉ์ด๋ฉฐ, ์ ํ ์๋ช ๊ณผ ์ปดํ์ผ ์๊ฐ ์ ํ ๊ฒ์ฌ๋ฅผ ์ ๊ณตํฉ๋๋ค(TypeScript๋ ES5 ๋๋ ES6 JavaScript๋ก ์ปดํ์ผ๋๋ฏ๋ก ์ฌ์ฉ์๊ฐ ํ ์๋ ์๊ณ ํ ์๋ ์์ต๋๋ค. ๊ทธ์ ํจ๊ป Babel์ ์ฌ์ฉํ์ง ๋ง์ญ์์ค). TypeScript๋ฅผ ์์ฑํ์ง ์๋ ์ฌ๋๋ค๋ VSCode์ ๊ฐ์ ์ต์ ํธ์ง๊ธฐ๊ฐ TypeScript ์ ํ์ ๊ธฐ๋ฐ์ผ๋ก ์ ํ ํํธ๋ฅผ ํ์ํ ์ ์์ผ๋ฏ๋ก ์ฌ์ ํ ์ด์ ์ ๋๋ฆด ์ ์์ต๋๋ค.
๋ณ๋์ ์ฃผ์ ๋ ํ
์คํธ ์ฃผ๋ ๊ฐ๋ฐ์
๋๋ค. ์คํ ์์ค ์ปค๋ฎค๋ํฐ์์ ๋ ์ด์ ํ์ฉ๋์ง ์๋ ์ฝ๋์ ๋ํ ํ
์คํธ๋ฅผ ์์ฑํ์ง ์์์์ ์ ์ ์์ต๋๋ค. ์ด์ค์
๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค ํ๋์ ํจ๊ป Mocha , Jasmine ๋๋ Ava ์ ๊ฐ์ ํ
์คํธ ์คํ๊ธฐ๋ฅผ ์ ํํด์ผ ํฉ๋๋ค. Chai , PowerAssert ๋๋ ์ด๋ฏธ ์ค์น๋์ด ์๋ node.js์ ๋ด์ฅ assert
๊ธฐ๋ฅ . ์ด์์ ์ผ๋ก๋ ๊ฐ ๋ฐฐํฌ ์ ์ Karma๋ฅผ ํตํด BrowserStack ๋๋ SauceLabs ์์ ๋ธ๋ผ์ฐ์ ๊ฐ ํ
์คํธ๋ฅผ ์คํํ์ฌ ์ฝ๋๊ฐ ๋ชจ๋ ๊ณณ์์ ์๋ํ๋์ง ํ์ธํฉ๋๋ค.
๋ชจ๋ ๋ฒ์ญ, ๋น๋ ๋ฐ ํ ์คํธ์ ์ง์์ ํตํฉ ์๋ฒ๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ GitHub ์ ์ฅ์ ๋๋ GitHub ํ์ด์ง์ README์ ๋ฉ์ง ๋ฐฐ์ง ๋ฅผ ์ถ๊ฐํ ์ ์์ต๋๋ค.
๊ทธ๊ฒ์ ๋น์ฐ์ ์ผ๊ฐ์ ๋ถ๊ณผํฉ๋๋ค. ํ๋ฐํธ ์๋ ๊ฐ๋ฐ AD 2017์ ์ค์ ๊ฒ์ ํ์ํฉ๋๋ค.
์ถ์
๋น์ ์ ๋ํ ์ด ๋ชจ๋ ๊ฒ์ ๋ฌด์ํ๊ณ ์ง๊ธ๊น์ง ํ๋ ๊ฒ์ฒ๋ผ ๋ฉ์ง ์ผ์ ๊ณ์ํ ์ ์์ต๋๋ค!
๊ทํ์ ์๊ฒฌ์ ์ง์ฌ์ผ๋ก ๊ฐ์ฌ๋๋ฆฝ๋๋ค. ์ด ๋ชจ๋ ํ๋ก๊ทธ๋จ์ ๋ค์ด๋ก๋, ์ค์น ๋ฐ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์ฐ๋ ๋ฐ UPNG.js๋ฅผ ๊ฐ๋ฐํ๋ ๋ฐ ๋ณด๋ธ ์๊ฐ๋ณด๋ค ๋ ๋ง์ ์๊ฐ์ด ์์๋๋ ๊ฒ ๊ฐ์ต๋๋ค. ๋ค๋ฅธ ๋ชฉ์ ์ผ๋ก๋ ํ์ํ์ง ์์ต๋๋ค. ๋ฐ๋ผ์ ์ ๋ ๊ทธ ์์ ์ ๋ค๋ฅธ ์ฌ๋์๊ฒ ๋งก๊ธฐ๊ธฐ๋ก ๊ฒฐ์ ํ์ต๋๋ค(npm ๋๋ ๊ธฐํ "์ฝ๋ ๋ฐ์ดํฐ๋ฒ ์ด์ค"/์น์ฌ์ดํธ์ UPNG.js๋ฅผ ์์ ๋กญ๊ฒ ๊ฒ์ํ ์ ์์).
์ถ์ : "ํ์ค ์๋ฐ์คํฌ๋ฆฝํธ ํ๊ฒฝ"์ ์์ํ ๋๋ณด๋ค ์์ฒ ๋ช ์ ์ฌ๋๋ค์ด ๊ฐ์ง๊ณ ์๋ Node.js๊ฐ ์๋๋ผ ์์ญ์ต ๋ช ์ ์ฌ๋๋ค์ด ๊ฐ์ง๊ณ ์๋ ์น ๋ธ๋ผ์ฐ์ ๋ฅผ ์์ํด์ผ ํ๋ค๊ณ ์๊ฐํฉ๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์๋, ๊ทธ๋ค์ํ์ง ์์ต๋๋ค. ์์ฒด ๊ฐ์ ๋จธ์ ( node.js )์์ ์คํ๋๊ณ ํจ๊ป ์ ๊ณต๋๋ ์ด ํจํค์ง ๊ด๋ฆฌ์ ์ํํธ์จ์ด( npm )๋ฅผ ์ค์นํด์ผ ํฉ๋๋ค. ํ์๋ ์น ์๋ฒ, ๋ฐ์คํฌํ ์ ํ๋ฆฌ์ผ์ด์ ์ ์คํํ๊ธฐ ์ํ ํ๋ซํผ ๋๋ Arduino ๋๋ Raspberry Pi๋ฅผ ํตํด ๋ฌผ๋ฆฌ์ ์ฅ์น ๋ฅผ ํ๋ซํผ ์ผ๋ก ์์ฃผ ์ฌ์ฉ ๋ฉ๋๋ค.
๋ ์ด์ ๊ถ์ฅ๋์ง ์๋ "์ ์ญ ๋ด๋ณด๋ด๊ธฐ" ํจํด์ ์ฝ๋์์ ์ฌ์ฉํ๋ ๊ฒ์ ๋ณผ ์ ์์ต๋๋ค. Webpack , Brunch ๋๋ Rollup ๊ณผ ๊ฐ์ ๋ฒ๋ค๋ฌ์ ์ํด UMD๋ก ๋ณํ๋ UMD ๋๋ ์ด์์ ์ผ๋ก๋ ES6 ๋ชจ๋์ด ๋ ์ข์ CommonJS ๋ชจ๋์ด ํ์ํฉ๋๋ค.
๋ชจ๋ ์ฌ๋์ด ์ฝ๋๋ฅผ ์ฝ๊ณ ์กด๊ฒฝํ ์ ์๋๋ก ํ๋ ค๋ฉด EcmaScript ์ธ์ด์ ์ต์ ๊ธฐ๋ฅ์ ์ฌ์ฉํ ๋ค์ ์๋ง๋ Babel์ ์ฌ์ฉ ํ์ฌ ES5๋ก ๋ณํ ํด์ผ ํฉ๋๋ค.
๋น๋ํ๋ ๊ฒ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ฏ๋ก TypeScript ๋ฅผ ์ฌ์ฉํ๊ณ ์ถ์ ์๋ ์์ต๋๋ค. ์ด๋ ๊ธฐ๋ณธ์ ์ผ๋ก EcmaScript์ ์์ ์งํฉ์ด๋ฉฐ, ์ ํ ์๋ช ๊ณผ ์ปดํ์ผ ์๊ฐ ์ ํ ๊ฒ์ฌ๋ฅผ ์ ๊ณตํฉ๋๋ค(TypeScript๋ ES5 ๋๋ ES6 JavaScript๋ก ์ปดํ์ผ๋๋ฏ๋ก ์ฌ์ฉ์๊ฐ ํ ์๋ ์๊ณ ํ ์๋ ์์ต๋๋ค. ๊ทธ์ ํจ๊ป Babel์ ์ฌ์ฉํ์ง ๋ง์ญ์์ค). TypeScript๋ฅผ ์์ฑํ์ง ์๋ ์ฌ๋๋ค๋ VSCode์ ๊ฐ์ ์ต์ ํธ์ง๊ธฐ๊ฐ TypeScript ์ ํ์ ๊ธฐ๋ฐ์ผ๋ก ์ ํ ํํธ๋ฅผ ํ์ํ ์ ์์ผ๋ฏ๋ก ์ฌ์ ํ ์ด์ ์ ๋๋ฆด ์ ์์ต๋๋ค.
๋ณ๋์ ์ฃผ์ ๋ ํ ์คํธ ์ฃผ๋ ๊ฐ๋ฐ์ ๋๋ค. ์คํ ์์ค ์ปค๋ฎค๋ํฐ์์ ๋ ์ด์ ํ์ฉ๋์ง ์๋ ์ฝ๋์ ๋ํ ํ ์คํธ๋ฅผ ์์ฑํ์ง ์์์์ ์ ์ ์์ต๋๋ค. ์ด์ค์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ค ํ๋์ ํจ๊ป Mocha , Jasmine ๋๋ Ava ์ ๊ฐ์ ํ ์คํธ ์คํ๊ธฐ๋ฅผ ์ ํํด์ผ ํฉ๋๋ค. Chai , PowerAssert ๋๋ ์ด๋ฏธ ์ค์น๋์ด ์๋ node.js์ ๋ด์ฅ
assert
๊ธฐ๋ฅ . ์ด์์ ์ผ๋ก๋ ๊ฐ ๋ฐฐํฌ ์ ์ Karma๋ฅผ ํตํด BrowserStack ๋๋ SauceLabs ์์ ๋ธ๋ผ์ฐ์ ๊ฐ ํ ์คํธ๋ฅผ ์คํํ์ฌ ์ฝ๋๊ฐ ๋ชจ๋ ๊ณณ์์ ์๋ํ๋์ง ํ์ธํฉ๋๋ค.๋ชจ๋ ๋ฒ์ญ, ๋น๋ ๋ฐ ํ ์คํธ์ ์ง์์ ํตํฉ ์๋ฒ๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ GitHub ์ ์ฅ์ ๋๋ GitHub ํ์ด์ง์ README์ ๋ฉ์ง ๋ฐฐ์ง ๋ฅผ ์ถ๊ฐํ ์ ์์ต๋๋ค.
๊ทธ๊ฒ์ ๋น์ฐ์ ์ผ๊ฐ์ ๋ถ๊ณผํฉ๋๋ค. ํ๋ฐํธ ์๋ ๊ฐ๋ฐ AD 2017์ ์ค์ ๊ฒ์ ํ์ํฉ๋๋ค.
์ถ์
๋น์ ์ ๋ํ ์ด ๋ชจ๋ ๊ฒ์ ๋ฌด์ํ๊ณ ์ง๊ธ๊น์ง ํ๋ ๊ฒ์ฒ๋ผ ๋ฉ์ง ์ผ์ ๊ณ์ํ ์ ์์ต๋๋ค!