{"id":1995,"date":"2017-12-06T11:09:07","date_gmt":"2017-12-06T02:09:07","guid":{"rendered":"https:\/\/beta.gitple.io\/?p=1995"},"modified":"2017-12-06T11:09:07","modified_gmt":"2017-12-06T02:09:07","slug":"techstack_frontend","status":"publish","type":"post","link":"https:\/\/gitple.io\/ko\/techstack_frontend","title":{"rendered":"\uae43\ud50c \uae30\uc220 \uc2a4\ud0dd \uc18c\uac1c (\ud504\ub860\ud2b8\uc5d4\ub4dc \ud3b8)"},"content":{"rendered":"<p>Gitple\uc740 SaaS(Software as a Service) \ud615\ud0dc\uc758 \uc804\ud615\uc801\uc778 \ud074\ub77c\uc6b0\ub4dc \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc785\ub2c8\ub2e4. \uac1c\ubc1c\ud300\uc740 \ub450\ubc88\uc9f8\uc758 \uacbd\ud5d8\uc774\ub77c \uc774\ubc88\uc5d0\ub294 \ub354\uc6b1 \uc815\uad50\ud558\uac8c \uae30\uc220\uc2a4\ud0dd\uc744 \uc313\uc544 \ub098\uac00\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uc774\uc804 \uae00\uc5d0 \uc774\uc5b4\uc11c \uae30\uc220\uc2a4\ud0dd \ud504\ub860\ud2b8\uc5d4\ub4dc \ubd80\ubd84\uc744 \uc124\uba85\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uac01\uac01\uc758 \uae30\uc220\uc5d0 \ub300\ud55c \uc0c1\uc138 \ub0b4\uc6a9\uc740 \uc55e\uc73c\ub85c \ube14\ub85c\uadf8 \ud3ec\uc2a4\ud305 \ud560 \uc608\uc815\uc785\ub2c8\ub2e4.<\/p>\n<p>\uae43\ud50c \uc11c\ube44\uc2a4\uc5d0\uc11c\ub294 \ub2e4\uc74c \uae30\uc220 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n<ul>\n<li>Angular 2+ &amp; Typescript<\/li>\n<li>Bootstrap 4+ &amp; SASS<\/li>\n<li>Ionic : \uc2a4\ub9c8\ud2b8\ud3f0 UI look&amp;feel<\/li>\n<li>Webpack: \ubaa8\ub4c8 bundler<\/li>\n<li>Yarn : \ud328\ud0a4\uc9c0 \uad00\ub9ac<\/li>\n<li>Nightwatch.js : \ube0c\ub77c\uc6b0\uc800 \uc790\ub3d9 \ud14c\uc2a4\ud2b8<\/li>\n<\/ul>\n<p>\uae43\ud50c \uc11c\ube44\uc2a4\uc758 \ud504\ub860\ud2b8\uc5d4\ub4dc \uae30\uc220\uc740 <code>SPA(Single Page Application)<\/code>\uc744 \uae30\ubcf8\uc73c\ub85c \ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. SPA \ubc29\uc2dd\uc740 \uc11c\ubc84 \ub80c\ub354\ub9c1 \ubc29\uc2dd\uc5d0 \ube44\ud574\uc11c \ube60\ub978 \uc778\ud130\ub799\uc158\uac00 \uc11c\ubc84\uc758 \ubd80\ud558\ub97c \uc904\uc77c \uc218 \uc788\uace0 \uc11c\ubc84\uc758 \uc2ec\ud50c\ud55c \uad6c\uc870\uc640 \ud074\ub77c\uc774\uc5b8\ud2b8 \ub2e8\uc758 \ubdf0\ub97c \uc644\uc804\ud788 \ubd84\ub9ac\ud558\ub294 \ub4f1\uc758 \uc7a5\uc810\uc774 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\ubc18\uba74\uc5d0 \ucd08\uae30 \ub85c\ub529 \uc18d\ub3c4\uac00 \ub290\ub9ac\uace0 \uac80\uc0c9 \uc5d4\uc9c4 \ucd5c\uc801\ud654\uac00 \uc5b4\ub835\ub2e4\ub294 \ub2e8\uc810\uc774 \uc788\uc9c0\ub9cc \uae43\ud50c \uc11c\ube44\uc2a4\ub294 \ub85c\uadf8\uc778\ud55c \uc0ac\uc6a9\uc790 \uc704\uc8fc\uc758 \uc0ac\uc6a9\uc73c\ub85c SPA\uac00 \ub354 \uc801\ud569\ud558\ub2e4\uace0 \ud310\ub2e8\ub418\uc5b4\uc11c \uc120\ud0dd\uc744 \ud558\uac8c \ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n<h2>Angular 2+ &amp; Typescript<\/h2>\n<p>SPA\ub97c \uc704\ud55c \ub300\ud45c\uc801\uc778 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c\uc740 \uba87 \uac00\uc9c0\uac00 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<ul>\n<li><a href=\"https:\/\/angular.io\" target=\"_blank\">Angular<\/a><\/li>\n<li><a href=\"https:\/\/reactjs.org\" target=\"_blank\">ReactJS<\/a><\/li>\n<li><a href=\"https:\/\/vuejs.org\" target=\"_blank\">Vue.js<\/a><\/li>\n<li><a href=\"https:\/\/www.emberjs.com\" target=\"_blank\">Ember.js<\/a><\/li>\n<li><a href=\"https:\/\/www.meteor.com\" target=\"_blank\">Meteor.js<\/a><\/li>\n<\/ul>\n<p>\ub2e4\uc591\ud55c \ud504\ub808\uc784\uc6cc\ud06c\uac00 \uc788\uace0 \uac01\uac01\uc758 \uc7a5\ub2e8\uc810\uc774 \uc788\uc9c0\ub9cc \uae43\ud50c \uc11c\ube44\uc2a4\uc5d0\uc11c\ub294 <code>Angular<\/code>\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<div id=\"attachment_2008\" style=\"width: 830px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/beta.gitple.io\/wp-content\/uploads\/2017\/12\/angular-big-picture.png\"><img aria-describedby=\"caption-attachment-2008\" class=\"size-full wp-image-2008\" src=\"https:\/\/beta.gitple.io\/wp-content\/uploads\/2017\/12\/angular-big-picture.png\" alt=\"\" width=\"820\" height=\"412\" srcset=\"https:\/\/gitple.io\/wp-content\/uploads\/2017\/12\/angular-big-picture.png 820w, https:\/\/gitple.io\/wp-content\/uploads\/2017\/12\/angular-big-picture-300x151.png 300w, https:\/\/gitple.io\/wp-content\/uploads\/2017\/12\/angular-big-picture-768x386.png 768w, https:\/\/gitple.io\/wp-content\/uploads\/2017\/12\/angular-big-picture-705x354.png 705w, https:\/\/gitple.io\/wp-content\/uploads\/2017\/12\/angular-big-picture-450x226.png 450w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><p id=\"caption-attachment-2008\" class=\"wp-caption-text\">Angular big picture<\/p><\/div>\n<p>Angular\ub294 2009\ub144 \uad6c\uae00\uc5d0\uc11c \ub9cc\ub4e0 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c\ub85c DOM\uc5d0 \ub300\ud55c \uc9c1\uc811 \uc870\uc791 \ubcf4\ub2e4\ub294 \ub370\uc774\ud130\uc758 \ubc14\uc778\ub529\uc5d0 \ucd08\uc810\uc744 \ub9de\ucd94\uc5b4 \uac1c\ubc1c\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uadf8 \ud6c4\ub85c MVC\uad6c\uc870, \uc591\ubc29\ud5a5 \ub370\uc774\ud130 \ubc14\uc778\ub529\ub4f1 \uc5ec\ub7ec\uac00\uc9c0 \uc7a5\uc810\uc73c\ub85c \ub9ce\uc774 \uc0ac\uc6a9\ub418\uc5b4 \uc624\ub2e4\uac00 \uc131\ub2a5 \ubb38\uc81c\ub4f1\uc73c\ub85c \uc778\ud574\uc11c <code>Angular2<\/code>\ub97c \uc0c8\ub86d\uac8c \ub9b4\ub9ac\uc988 \ud588\uc2b5\ub2c8\ub2e4.(\ubc84\uc804\uad00\ub9ac \ubc29\uc2dd\uc774 \ubcc0\uacbd\ub418\uc5b4\uc11c \ud604\uc7ac\ub294 Angular 4 \ubc84\uc804\uae4c\uc9c0 \ub9b4\ub9ac\uc988 \ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4.)<\/p>\n<p>\uc0c8\ub85c\uc6b4 \ubc84\uc804\uc5d0\uc11c\ub294 <code>Typescript<\/code> \uae30\ubc18\uc73c\ub85c \ucf54\uc5b4\ubd80\ud130 \ub2e4\uc2dc \ub9cc\ub4e4\uc5b4\uc838\uc11c \ubc84\uc804 1.x \uacfc\ub294 \uc804\ud600 \ub2e4\ub978 \ud504\ub808\uc784\uc6cc\ud06c\uac00 \ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n<p>Angular \uc0c8\ub85c\uc6b4 \ucd9c\uc2dc\uc5d0\uc11c \uac00\uc7a5 \ud654\uc81c\uac00\ub41c \ubd80\ubd84\uc740 <code>Typescript<\/code>\ub97c \uae30\ubcf8\uc73c\ub85c \uc9c0\uc6d0\uc774\uc600\uc2b5\ub2c8\ub2e4.<\/p>\n<div id=\"attachment_2009\" style=\"width: 455px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/beta.gitple.io\/wp-content\/uploads\/2017\/12\/typescript-superset.png\"><img aria-describedby=\"caption-attachment-2009\" class=\"size-full wp-image-2009\" src=\"https:\/\/beta.gitple.io\/wp-content\/uploads\/2017\/12\/typescript-superset.png\" alt=\"\" width=\"445\" height=\"445\" srcset=\"https:\/\/gitple.io\/wp-content\/uploads\/2017\/12\/typescript-superset.png 445w, https:\/\/gitple.io\/wp-content\/uploads\/2017\/12\/typescript-superset-80x80.png 80w, https:\/\/gitple.io\/wp-content\/uploads\/2017\/12\/typescript-superset-300x300.png 300w, https:\/\/gitple.io\/wp-content\/uploads\/2017\/12\/typescript-superset-36x36.png 36w, https:\/\/gitple.io\/wp-content\/uploads\/2017\/12\/typescript-superset-180x180.png 180w, https:\/\/gitple.io\/wp-content\/uploads\/2017\/12\/typescript-superset-120x120.png 120w\" sizes=\"(max-width: 445px) 100vw, 445px\" \/><\/a><p id=\"caption-attachment-2009\" class=\"wp-caption-text\">Typescript superset<\/p><\/div>\n<p>&nbsp;<\/p>\n<p><code>Typescript<\/code>\ub294 Microsoft\uc5d0\uc11c 2012\ub144 \ubc1c\ud45c\ud55c \uc624\ud508\uc18c\uc2a4\ub85c \uc815\uc801 \ud0c0\uc774\ud551\uc744 \uc9c0\uc6d0\ud558\uba70 ES6(ECMAScript 2015)\uc758 \ud074\ub798\uc2a4, \ubaa8\ub4c8 \ub4f1\uacfc ES7\uc758 Decorator \ub4f1\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4.<\/p>\n<p><code>Typescript<\/code>\ub294 \uae30\ubcf8\uc801\uc73c\ub85c Javascript\uc758 \uc288\ud37c\uc14b\uc73c\ub85c ES5, ES6\uc758 \uc7a5\uc810\uc744 \uadf8\ub300\ub85c \uac00\uc9c0\uace0 \uc815\uc801 \ud0c0\uc785\uccb4\ud06c\uc640 Type annotation, Interface \uc744 \ucd94\uac00\ub85c \uc81c\uacf5\ud568\uc73c\ub85c \uc0dd\uc0b0\uc131\uc744 \ub192\uc77c \uc218 \uc788\uc5b4\uc11c \uae43\ud50c \uc11c\ube44\uc2a4\uc5d0\uc11c\ub294 \ud504\ub860\ud2b8\uc5d4\ub4dc \ubfd0\ub9cc \uc544\ub2c8\ub77c \uc11c\ubc84\uc5d0\uc11c\ub3c4 <code>Typescript<\/code>\ub97c \uae30\ubcf8\uc73c\ub85c \uc0ac\uc6a9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h2>Bootstrap 4+ &amp; Sass<\/h2>\n<p><a href=\"http:\/\/getbootstrap.com\" target=\"_blank\">\ubd80\ud2b8\uc2a4\ud2b8\ub7a9<\/a>\uc740 \ud2b8\uc704\ud130\uc758 \uac1c\ubc1c\uc790\uc640 \ub514\uc790\uc774\ub108\uac00 \uc6f9 \uc0ac\uc774\ud2b8\ub97c \uc27d\uac8c \ub9cc\ub4e4\uc218 \uc788\ub3c4\ub85d CSS, Javascript\ub85c \ub9cc\ub4e0 \ud504\ub808\uc784\uc6cc\ud06c\uc785\ub2c8\ub2e4. \uae30\ubcf8\uc801\uc778 \ub808\uc774\uc544\uc6c3\uacfc \uba54\ub274, \ubc84\ud2bc, \ub9ac\uc2a4\ud2b8, \ud0ed\ub4f1\uc758 \ub2e4\uc591\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc81c\uacf5\ud558\uace0 \ubc18\uc751\ud615 \uc6f9\uacfc \ubaa8\ubc14\uc77c \uc9c0\uc6d0\ub4f1 \ub2e4\uc591\ud558\uac8c \ud65c\uc6a9 \uac00\ub2a5\ud569\ub2c8\ub2e4.<\/p>\n<p>\ud604\uc7ac \uc548\uc815 \ubc84\uc804\uc778 v3\uacfc v4.0.0-beta \ub450 \uac00\uc9c0 \ubc84\uc804\uc774 \uc788\ub294\ub370 v4.0.0\uc740 \uc544\uc9c1 \ubca0\ud0c0 \uc0c1\ud0dc\uc774\uc9c0\ub9cc Sass \uc9c0\uc6d0, \ud5a5\uc0c1\ub41c Grid \uc2dc\uc2a4\ud15c, Flexbox \uc9c0\uc6d0\ub4f1\uc758 \uc7a5\uc810\uc73c\ub85c \uc778\ud574\uc11c \uae43\ud50c \uc11c\ube44\uc2a4\ub294 v4.0.0 \ubc84\uc804\uc744 \uc0ac\uc6a9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p><a href=\"http:\/\/sass-lang.com\" target=\"_blank\">Sass(Syntactically Awesome StyleSheets)<\/a>\ub294 CSS\ub97c \uc0ac\uc6a9\ud560 \ub54c \ubcf5\uc7a1\ud55c Selector\uc640 CSS Value\ub4e4\uc758 \uc911\ubcf5\uc801\uc778 \uc0ac\uc6a9\ub4e4\uc758 \ubb38\uc81c\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574\uc11c \ub9cc\ub4e4\uc5b4\uc9c4 CSS pre-processor \uc785\ub2c8\ub2e4.<\/p>\n<p>\ubd80\ud2b8\uc2a4\ud2b8\ub7a9\uacfc \ud568\uaed8 Sass\uc758 <code>variable<\/code>, <code>extend<\/code>, <code>mixins<\/code> \uae30\ub2a5\uc744 \uc720\uc6a9\ud558\uac8c \uc0ac\uc6a9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<h2>Ionic : \uc2a4\ub9c8\ud2b8\ud3f0 UI look&amp;feel<\/h2>\n<p><a href=\"https:\/\/ionicframework.com\" target=\"_blank\">Ionic<\/a>\uc740 \ub2e4\uc591\ud55c \ud50c\ub7ab\ud3fc\uc5d0 \ubaa8\ubc14\uc77c \uc571\uc744 \ub9cc\ub4dc\ub294 \ud504\ub808\uc784\uc6cc\ud06c\uc785\ub2c8\ub2e4. <code>HTML<\/code>, <code>CSS<\/code>, <code>Javascript<\/code>\ub97c \uc774\uc6a9\ud574\uc11c \ubaa8\ubc14\uc77c\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc81c\uacf5\ud558\uace0 <a href=\"https:\/\/cordova.apache.org\/\" target=\"_blank\">Apache Cordova<\/a> \uc774\uc6a9\ud574\uc11c \ubaa8\ubc14\uc77c\uc758 \ud50c\ub7ab\ud3fc\uc758 API\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uae43\ud50c \uc11c\ube44\uc2a4\uc5d0\uc11c\ub294 \ucc44\ud305\uc571\uc5d0 \uc0ac\uc6a9\uc790 \uce5c\ud654\uc801\uc778 \ubaa8\ubc14\uc77c UI\ub97c \uc81c\uacf5\ud558\uae30 \uc704\ud574\uc11c \uc0ac\uc6a9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>Ionic\uc758 \uae30\ubcf8\uc571\uc744 \ub9cc\ub4e4\uae30 \uc704\ud574\uc11c \ub2e4\uc74c\uacfc \uac19\uc774 \uc27d\uac8c \ud14c\uc2a4\ud2b8\uc571\uc744 \ub9cc\ub4e4\uc5b4 \uc2e4\ud589\ud560 \uc218 \uc788\ub294 CLI\ub97c \uc81c\uacf5\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<ul>\n<li>Ionic Install\n<pre style=\"padding: 1em; background-image: none; background-color: rgba(0, 0, 0, .05);\"><code>npm install -g cordova ionic<\/code><\/pre>\n<\/li>\n<li>Start an App\n<pre style=\"padding: 1em; background-image: none; background-color: rgba(0, 0, 0, .05);\"><code>ionic start myApp tabs<\/code><\/pre>\n<\/li>\n<li>Run App\n<pre style=\"padding: 1em; background-image: none; background-color: rgba(0, 0, 0, .05);\"><code>cd myApp\r\nionic serve<\/code><\/pre>\n<\/li>\n<\/ul>\n<h2>Webpack: \ubaa8\ub4c8 bundler<\/h2>\n<p>\ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc5d0\uc11c\ub294 Angular, bootstrap, Sass, Images \ub4f1\uc758 \ub2e4\uc591\ud55c \ub9ac\uc18c\uc2a4\ub4e4\uc744 \uc0ac\uc6a9\ud558\uace0 \uc774 \ub9ac\uc18c\uc2a4\ub97c \ud558\ub098\uc758 \ud328\ud0a4\uc9c0\ub85c \ub9cc\ub4e4\uc5b4\uc11c \ubc30\ud3ec\ud558\uc5ec\uc11c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uc774\ub807\uac8c \uc815\uc801\uc778 \ud30c\uc77c\ub4e4\ub85c \ub9cc\ub4e4\uae30 \uc704\ud574\uc11c \ub2e4\uc591\ud55c \ubc88\ub4e4\ub7ec\ub4e4(<code>'Grunt'<\/code>, <code>'Gulp'<\/code>..)\uc774 \uc788\ub294\ub370 \uadf8 \uc911\uc5d0 \uae43\ud50c \uc11c\ube44\uc2a4\uc5d0\uc11c\ub294 <a href=\"https:\/\/webpack.js.org\" target=\"_blank\">webpack<\/a> \ubc88\ub4e4\ub7ec\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n<div id=\"attachment_2010\" style=\"width: 789px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/beta.gitple.io\/wp-content\/uploads\/2017\/12\/what-is-webpack.png\"><img aria-describedby=\"caption-attachment-2010\" class=\"size-full wp-image-2010\" src=\"https:\/\/beta.gitple.io\/wp-content\/uploads\/2017\/12\/what-is-webpack.png\" alt=\"\" width=\"779\" height=\"390\" srcset=\"https:\/\/gitple.io\/wp-content\/uploads\/2017\/12\/what-is-webpack.png 779w, https:\/\/gitple.io\/wp-content\/uploads\/2017\/12\/what-is-webpack-300x150.png 300w, https:\/\/gitple.io\/wp-content\/uploads\/2017\/12\/what-is-webpack-768x384.png 768w, https:\/\/gitple.io\/wp-content\/uploads\/2017\/12\/what-is-webpack-705x353.png 705w, https:\/\/gitple.io\/wp-content\/uploads\/2017\/12\/what-is-webpack-450x225.png 450w\" sizes=\"(max-width: 779px) 100vw, 779px\" \/><\/a><p id=\"caption-attachment-2010\" class=\"wp-caption-text\">webpack \ubc88\ub4e4\ub7ec<\/p><\/div>\n<blockquote><p>\uc6f9\ud329\uc740 \ubaa8\ub4c8 \ubc88\ub4e4\ub7ec \uc785\ub2c8\ub2e4. \uc6f9\ud329\uc740 \uc0c1\ud638 \uc758\uc874\uc131\uc774 \uc788\ub294 \ubaa8\ub4c8\ub4e4\uc744 \uc0ac\uc6a9\ud574 \uadf8 \ubaa8\ub4c8\ub4e4\uacfc \uac19\uc740 \uc5ed\ud560\uc744 \ud558\ub294 \uc815\uc801 \uc5d0\uc14b\ub4e4\uc744 \uc0dd\uc131\ud574\ub0c5\ub2c8\ub2e4. (Webpack is a module bundler. Webpack takes modules with dependencies and generates static assets representing those modules.) &#8211; <a href=\"http:\/\/webpack.github.io\/docs\/what-is-webpack.html\" target=\"_blank\">\uacf5\uc2dd \uc0ac\uc774\ud2b8<\/a><\/p><\/blockquote>\n<p>\uae43\ud50c \uc6cc\ud06c\uc2a4\ud398\uc774\uc2a4\uc640 \ucc44\ud305\uc571\uc758 Typescript \ucef4\ud30c\uc77c, \uc5ec\ub7ec\uac1c\uc758 Sass \ud30c\uc77c\uc744 CSS\ub85c \ucef4\ud30c\uc77c, \uc774\ubbf8\uc9c0 \uadf8\ub9ac\uace0 \uadf8\uc678 \ud30c\uc77c\uc744 \ubc30\ud3ec\uac00\ub2a5 \ud558\ub098\uc758 \ubc88\ub4e4\ub85c \ub9cc\ub4e4\uc5b4\uc11c \ubc30\ud3ec\ub97c \ud569\ub2c8\ub2e4.<\/p>\n<h2>Yarn : \ud328\ud0a4\uc9c0 \uad00\ub9ac<\/h2>\n<p><a href=\"https:\/\/yarnpkg.com\/lang\/en\/\" target=\"_blank\">Yarn<\/a>\uc740 \ud398\uc774\uc2a4\ubd81\uc5d0\uc11c \ub9cc\ub4e0 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ud328\ud0a4\uc9c0 \ub9e4\ub2c8\uc800\uc785\ub2c8\ub2e4.<\/p>\n<p>\uae30\uc874\uc758 \ub110\ub9ac \uc0ac\uc6a9\ub418\ub294 \ud328\ud0a4\uc9c0 \uad00\ub9ac\uc790\uc778 npm\uc744 \uc0ac\uc6a9\ud560 \ub54c <code>\uc77c\uad00\uc131<\/code>, <code>\ubcf4\uc548<\/code>, <code>\uc131\ub2a5<\/code>\uc5d0 \ubb38\uc81c\ub97c \uacaa\uc5d0 \ub418\uc5c8\uc11c \uc774\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574\uc11c \ub9cc\ub4e4\uc5b4\uc84c\uc2b5\ub2c8\ub2e4. \uae43\ud50c \uc11c\ube44\uc2a4\ub294 \ub2e4\ub978 \ubb38\uc81c\ubcf4\ub2e4\ub3c4 <code>\uc77c\uad00\uc131<\/code>\uc5d0\uc11c npm \uc0ac\uc6a9\uc2dc\uc5d0 \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud558\uc5ec\uc11c \ud504\ub860\ud2b8\uc5d4\ub4dc\uc640 \uc11c\ubc84\uc5d0 yarn\uc73c\ub85c \ubcc0\uacbd\ud558\uc600\uc2b5\ub2c8\ub2e4.<\/p>\n<p>yarn\uc758 \uc0ac\uc6a9\uc740 \uc774\ubbf8 npm\uc744 \uc0ac\uc6a9\ud558\uace0 \uc788\ub2e4\uba74 \ud06c\uac8c \ubd80\ub2f4\uc5c6\uc774 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<ul>\n<li>\ucd08\uae30\ud654\n<pre style=\"padding: 1em; background-image: none; background-color: rgba(0, 0, 0, .05);\"><code>yarn init<\/code><\/pre>\n<\/li>\n<li>\ud328\ud0a4\uc9c0 \uc124\uce58\n<pre style=\"padding: 1em; background-image: none; background-color: rgba(0, 0, 0, .05);\"><code>yarn install<\/code><\/pre>\n<\/li>\n<li>\ud328\ud0a4\uc9c0 \ucd94\uac00\n<pre style=\"padding: 1em; background-image: none; background-color: rgba(0, 0, 0, .05);\"><code>yarn add {\ud328\ud0a4\uc9c0\uba85}<\/code><\/pre>\n<\/li>\n<li>\ud328\ud0a4\uc9c0 \uc0ad\uc81c\n<pre style=\"padding: 1em; background-image: none; background-color: rgba(0, 0, 0, .05);\"><code>yarn remove {\ud328\ud0a4\uc9c0\uba85}<\/code><\/pre>\n<\/li>\n<li>\ud328\ud0a4\uc9c0 \uc5c5\uadf8\ub808\uc774\ub4dc\n<pre style=\"padding: 1em; background-image: none; background-color: rgba(0, 0, 0, .05);\"><code>yarn upgrade {\ud328\ud0a4\uc9c0\uba85}<\/code><\/pre>\n<\/li>\n<\/ul>\n<h2>Nightwatch.js : \ube0c\ub77c\uc6b0\uc800 \uc790\ub3d9 \ud14c\uc2a4\ud2b8<\/h2>\n<p><a href=\"http:\/\/nightwatchjs.org\" target=\"_blank\">\ub098\uc774\ud2b8\uc640\uce58<\/a>\ub294 \ud504\ub860\ud2b8\uc5d4\ub4dc\uc758 \ube0c\ub77c\uc6b0\uc800 \ud14c\uc2a4\ud2b8(End-to-End)\ub97c \uc704\ud574\uc11c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n<div id=\"attachment_2011\" style=\"width: 810px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/beta.gitple.io\/wp-content\/uploads\/2017\/12\/nightwatchjs-operation.png\"><img aria-describedby=\"caption-attachment-2011\" class=\"size-full wp-image-2011\" src=\"https:\/\/beta.gitple.io\/wp-content\/uploads\/2017\/12\/nightwatchjs-operation.png\" alt=\"\" width=\"800\" height=\"350\" srcset=\"https:\/\/gitple.io\/wp-content\/uploads\/2017\/12\/nightwatchjs-operation.png 800w, https:\/\/gitple.io\/wp-content\/uploads\/2017\/12\/nightwatchjs-operation-300x131.png 300w, https:\/\/gitple.io\/wp-content\/uploads\/2017\/12\/nightwatchjs-operation-768x336.png 768w, https:\/\/gitple.io\/wp-content\/uploads\/2017\/12\/nightwatchjs-operation-705x308.png 705w, https:\/\/gitple.io\/wp-content\/uploads\/2017\/12\/nightwatchjs-operation-450x197.png 450w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><p id=\"caption-attachment-2011\" class=\"wp-caption-text\">\ub098\uc774\ud2b8\uc640\uce58 \ucd08\uae30\ud654 \ub3d9\uc791 \ud750\ub984<\/p><\/div>\n<p>\ub098\uc774\ud2b8\uc640\uce58\ub294 <a href=\"https:\/\/www.w3.org\/TR\/webdriver\/\" target=\"_blank\">WebDriver API<\/a>\ub97c \uc774\uc6a9\ud574\uc11c \ube0c\ub77c\uc6b0\uc800\uc758 \uc790\ub3d9\ud654 \ud14c\uc2a4\ud2b8\ub97c \ud558\uac8c \ub429\ub2c8\ub2e4. \ubaa8\ub4e0 \ud14c\uc2a4\ud2b8\ub294 Javascript \ud658\uacbd\uc5d0\uc11c \uc2e4\ud589 \uac00\ub2a5\ud558\uace0 CSS \ub610\ub294 Xpath \uc140\ub809\ud130, BDD(Behavior-Driven Development)-style assertion \ub4f1\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n<p>\uae43\ud50c \uc11c\ube44\uc2a4\uc5d0\uc11c\ub294 \uc6cc\ud06c\uc2a4\ud398\uc774\uc2a4\uc640 \uc0ac\uc6a9\uc790 \ucc44\ud305\uc571 \ubaa8\ub450\uc5d0\uc11c \uc2e4\uc81c \ub3d9\uc791\uc744 \ud14c\uc2a4\ud2b8\ud558\uace0 \uadf8 \uacb0\uacfc\ub97c \uc800\uc7a5\ud569\ub2c8\ub2e4. \ucd94\uac00\ub85c \ub098\uc774\ud2b8\uc640\uce58 \ud14c\uc2a4\ud2b8\ub97c \ud654\uba74\uc744 \ube44\ub514\uc624\ub85c \uc800\uc7a5\ud574\uc11c \uc624\ub958\uac00 \ubc1c\uc0dd\ud560 \ub54c \uc7ac\ud604\ub418\ub294 \ub3d9\uc601\uc0c1\uc744 \ubc14\ub85c \ud655\uc778\ud560 \uc218 \uc788\ub3c4\ub85d \uc124\uc815\ud574\uc11c \uc0ac\uc6a9\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. <a href=\"https:\/\/github.com\/blueimp\/nightwatch-video-recorder\" target=\"_blank\">nightwatch-video-recorder<\/a><\/p>\n<h2>\ub9c8\uce58\uba74\uc11c&#8230;<\/h2>\n<p>\ud504\ub860\ud2b8\uc5d4\ub4dc\uc5d0\uc11c \uc801\uc6a9\ud558\uace0 \uc788\ub294 \uae30\uc220\uc5d0 \ub300\ud574\uc11c \uc804\ubc18\uc801\uc778 \ub0b4\uc6a9\uc744 \uc18c\uac1c\ud588\ub294\ub370 \uc0c1\uc138\ud55c \uae30\uc220 \uc801\uc6a9\uc5d0 \ub300\ud574\uc11c\ub294 \uc55e\uc73c\ub85c \ucd94\uac00\ud574 \uac00\ub3c4\ub85d \ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gitple\uc740 SaaS(Software as a Service) \ud615\ud0dc\uc758 \uc804\ud615\uc801\uc778 \ud074\ub77c\uc6b0\ub4dc \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc785\ub2c8\ub2e4. \uac1c\ubc1c\ud300\uc740 \ub450\ubc88\uc9f8\uc758 \uacbd\ud5d8\uc774\ub77c \uc774\ubc88\uc5d0\ub294 \ub354\uc6b1 \uc815\uad50\ud558\uac8c \uae30\uc220\uc2a4\ud0dd\uc744 \uc313\uc544 \ub098\uac00\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc774\uc804 \uae00\uc5d0 \uc774\uc5b4\uc11c \uae30\uc220\uc2a4\ud0dd \ud504\ub860\ud2b8\uc5d4\ub4dc \ubd80\ubd84\uc744 \uc124\uba85\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uac01\uac01\uc758 \uae30\uc220\uc5d0 \ub300\ud55c \uc0c1\uc138 \ub0b4\uc6a9\uc740 \uc55e\uc73c\ub85c \ube14\ub85c\uadf8 \ud3ec\uc2a4\ud305 \ud560 \uc608\uc815\uc785\ub2c8\ub2e4. \uae43\ud50c \uc11c\ube44\uc2a4\uc5d0\uc11c\ub294 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2006,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[47],"tags":[81,82,83,86,84,85,80],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v16.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\uae43\ud50c \uae30\uc220 \uc2a4\ud0dd \uc18c\uac1c (\ud504\ub860\ud2b8\uc5d4\ub4dc \ud3b8) - \ucc57\ubd07\uacfc \uc0c1\ub2f4\uc0ac\ub97c \ub118\ub098\ub4dc\ub294 \uc634\ub2c8\ucc44\ub110 \uace0\uac1d\uc0c1\ub2f4 \uc194\ub8e8\uc158, \uae43\ud50c\ucc57<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/gitple.io\/ko\/techstack_frontend\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\uae43\ud50c \uae30\uc220 \uc2a4\ud0dd \uc18c\uac1c (\ud504\ub860\ud2b8\uc5d4\ub4dc \ud3b8) - \ucc57\ubd07\uacfc \uc0c1\ub2f4\uc0ac\ub97c \ub118\ub098\ub4dc\ub294 \uc634\ub2c8\ucc44\ub110 \uace0\uac1d\uc0c1\ub2f4 \uc194\ub8e8\uc158, \uae43\ud50c\ucc57\" \/>\n<meta property=\"og:description\" content=\"Gitple\uc740 SaaS(Software as a Service) \ud615\ud0dc\uc758 \uc804\ud615\uc801\uc778 \ud074\ub77c\uc6b0\ub4dc \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc785\ub2c8\ub2e4. \uac1c\ubc1c\ud300\uc740 \ub450\ubc88\uc9f8\uc758 \uacbd\ud5d8\uc774\ub77c \uc774\ubc88\uc5d0\ub294 \ub354\uc6b1 \uc815\uad50\ud558\uac8c \uae30\uc220\uc2a4\ud0dd\uc744 \uc313\uc544 \ub098\uac00\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc774\uc804 \uae00\uc5d0 \uc774\uc5b4\uc11c \uae30\uc220\uc2a4\ud0dd \ud504\ub860\ud2b8\uc5d4\ub4dc \ubd80\ubd84\uc744 \uc124\uba85\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uac01\uac01\uc758 \uae30\uc220\uc5d0 \ub300\ud55c \uc0c1\uc138 \ub0b4\uc6a9\uc740 \uc55e\uc73c\ub85c \ube14\ub85c\uadf8 \ud3ec\uc2a4\ud305 \ud560 \uc608\uc815\uc785\ub2c8\ub2e4. \uae43\ud50c \uc11c\ube44\uc2a4\uc5d0\uc11c\ub294 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/gitple.io\/ko\/techstack_frontend\" \/>\n<meta property=\"og:site_name\" content=\"\ucc57\ubd07\uacfc \uc0c1\ub2f4\uc0ac\ub97c \ub118\ub098\ub4dc\ub294 \uc634\ub2c8\ucc44\ub110 \uace0\uac1d\uc0c1\ub2f4 \uc194\ub8e8\uc158, \uae43\ud50c\ucc57\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/gitple\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/gitple\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-06T02:09:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/beta.gitple.io\/wp-content\/uploads\/2017\/12\/web-1935737_1280.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"596\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"1\ubd84\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/gitple.io\/ko\/#organization\",\"name\":\"\\uae43\\ud50c\\ucc57\",\"url\":\"https:\/\/gitple.io\/ko\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/gitple\/\",\"https:\/\/www.youtube.com\/channel\/UCpQv2iWYRmk4xxES_LATVdg\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/gitple.io\/ko\/#logo\",\"inLanguage\":\"ko-KR\",\"url\":\"https:\/\/gitple.io\/wp-content\/uploads\/2016\/12\/logo_gitple.png\",\"contentUrl\":\"https:\/\/gitple.io\/wp-content\/uploads\/2016\/12\/logo_gitple.png\",\"width\":583,\"height\":347,\"caption\":\"\\uae43\\ud50c\\ucc57\"},\"image\":{\"@id\":\"https:\/\/gitple.io\/ko\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/gitple.io\/ko\/#website\",\"url\":\"https:\/\/gitple.io\/ko\/\",\"name\":\"\\ucc57\\ubd07\\uacfc \\uc0c1\\ub2f4\\uc0ac\\ub97c \\ub118\\ub098\\ub4dc\\ub294 \\uc634\\ub2c8\\ucc44\\ub110 \\uace0\\uac1d\\uc0c1\\ub2f4 \\uc194\\ub8e8\\uc158, \\uae43\\ud50c\\ucc57\",\"description\":\"\\uace0\\uac1d \\uc0c1\\ub2f4 \\uc790\\ub3d9\\ud654, \\ucc57\\ubd07, \\uc2dc\\ub098\\ub9ac\\uc624 \\ubd07, FAQ \\ubd07\",\"publisher\":{\"@id\":\"https:\/\/gitple.io\/ko\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/gitple.io\/ko\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/gitple.io\/ko\/techstack_frontend#primaryimage\",\"inLanguage\":\"ko-KR\",\"url\":\"https:\/\/gitple.io\/wp-content\/uploads\/2017\/12\/web-1935737_1280.png\",\"contentUrl\":\"https:\/\/gitple.io\/wp-content\/uploads\/2017\/12\/web-1935737_1280.png\",\"width\":1280,\"height\":596},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/gitple.io\/ko\/techstack_frontend#webpage\",\"url\":\"https:\/\/gitple.io\/ko\/techstack_frontend\",\"name\":\"\\uae43\\ud50c \\uae30\\uc220 \\uc2a4\\ud0dd \\uc18c\\uac1c (\\ud504\\ub860\\ud2b8\\uc5d4\\ub4dc \\ud3b8) - \\ucc57\\ubd07\\uacfc \\uc0c1\\ub2f4\\uc0ac\\ub97c \\ub118\\ub098\\ub4dc\\ub294 \\uc634\\ub2c8\\ucc44\\ub110 \\uace0\\uac1d\\uc0c1\\ub2f4 \\uc194\\ub8e8\\uc158, \\uae43\\ud50c\\ucc57\",\"isPartOf\":{\"@id\":\"https:\/\/gitple.io\/ko\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/gitple.io\/ko\/techstack_frontend#primaryimage\"},\"datePublished\":\"2017-12-06T02:09:07+00:00\",\"dateModified\":\"2017-12-06T02:09:07+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/gitple.io\/ko\/techstack_frontend#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/gitple.io\/ko\/techstack_frontend\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/gitple.io\/ko\/techstack_frontend#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/gitple.io\/ko\",\"url\":\"https:\/\/gitple.io\/ko\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@id\":\"https:\/\/gitple.io\/ko\/techstack_frontend#webpage\"}}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/gitple.io\/ko\/techstack_frontend#article\",\"isPartOf\":{\"@id\":\"https:\/\/gitple.io\/ko\/techstack_frontend#webpage\"},\"author\":{\"@id\":\"https:\/\/gitple.io\/ko\/#\/schema\/person\/4f4d719e5038dc90cc1d148d52a86d1b\"},\"headline\":\"\\uae43\\ud50c \\uae30\\uc220 \\uc2a4\\ud0dd \\uc18c\\uac1c (\\ud504\\ub860\\ud2b8\\uc5d4\\ub4dc \\ud3b8)\",\"datePublished\":\"2017-12-06T02:09:07+00:00\",\"dateModified\":\"2017-12-06T02:09:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/gitple.io\/ko\/techstack_frontend#webpage\"},\"publisher\":{\"@id\":\"https:\/\/gitple.io\/ko\/#organization\"},\"image\":{\"@id\":\"https:\/\/gitple.io\/ko\/techstack_frontend#primaryimage\"},\"keywords\":[\"angular\",\"bootstrap\",\"ionic\",\"nightwatch\",\"webpack\",\"yarn\",\"\\ud504\\ub860\\ud2b8\\uc5d4\\ub4dc\"],\"articleSection\":[\"\\ud14c\\ud06c\\ub180\\ub85c\\uc9c0\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/gitple.io\/ko\/#\/schema\/person\/4f4d719e5038dc90cc1d148d52a86d1b\",\"name\":\"gitple\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/gitple.io\/ko\/#personlogo\",\"inLanguage\":\"ko-KR\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2246d743a5174534bc59a54997f334a1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2246d743a5174534bc59a54997f334a1?s=96&d=mm&r=g\",\"caption\":\"gitple\"},\"sameAs\":[\"https:\/\/www.facebook.com\/gitple\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/gitple.io\/ko\/wp-json\/wp\/v2\/posts\/1995"}],"collection":[{"href":"https:\/\/gitple.io\/ko\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gitple.io\/ko\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gitple.io\/ko\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gitple.io\/ko\/wp-json\/wp\/v2\/comments?post=1995"}],"version-history":[{"count":21,"href":"https:\/\/gitple.io\/ko\/wp-json\/wp\/v2\/posts\/1995\/revisions"}],"predecessor-version":[{"id":2023,"href":"https:\/\/gitple.io\/ko\/wp-json\/wp\/v2\/posts\/1995\/revisions\/2023"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gitple.io\/ko\/wp-json\/wp\/v2\/media\/2006"}],"wp:attachment":[{"href":"https:\/\/gitple.io\/ko\/wp-json\/wp\/v2\/media?parent=1995"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gitple.io\/ko\/wp-json\/wp\/v2\/categories?post=1995"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gitple.io\/ko\/wp-json\/wp\/v2\/tags?post=1995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}