{"id":4499,"date":"2018-12-03T11:25:28","date_gmt":"2018-12-03T02:25:28","guid":{"rendered":"https:\/\/jennifersoft.com\/ko\/?p=4499"},"modified":"2019-10-11T17:55:35","modified_gmt":"2019-10-11T08:55:35","slug":"2018-12-03","status":"publish","type":"post","link":"https:\/\/jennifersoft.com\/ko\/blog\/tech\/2018-12-03\/","title":{"rendered":"\ub808\uac70\uc2dc \uc2dc\uc2a4\ud15c\uc758 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\ud658\uacbd \ucd5c\uc2e0\ud654 \ud6c4\uae30"},"content":{"rendered":"\n<figure class=\"wp-block-image wide\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1000\" src=\"https:\/\/jennifersoft.com\/ko\/wp-content\/uploads\/sites\/2\/2019\/10\/blog-image-5-jennifer-soft-development-culture.jpg\" alt=\"\" class=\"wp-image-5629\" srcset=\"https:\/\/jennifersoft.com\/ko\/wp-content\/uploads\/sites\/2\/2019\/10\/blog-image-5-jennifer-soft-development-culture.jpg 1600w, https:\/\/jennifersoft.com\/ko\/wp-content\/uploads\/sites\/2\/2019\/10\/blog-image-5-jennifer-soft-development-culture-300x188.jpg 300w, https:\/\/jennifersoft.com\/ko\/wp-content\/uploads\/sites\/2\/2019\/10\/blog-image-5-jennifer-soft-development-culture-1024x640.jpg 1024w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\ud544\uc790\uc758 \uc62c\ud574 \ubaa9\ud45c \uc911 \ud558\ub098\ub294 \uc624\ub79c\uae30\uac04 \uc870\uae08\uc529 \uc9c4\ud589\ud574\uc654\ub358 \uc81c\ub2c8\ud37c \ubdf0\uc11c\ubc84 \ud50c\ub7ab\ud3fc\ud654\ub97c \ub9c8\ubb34\ub9ac\ud558\ub294 \uac83\uc774\uc5c8\ub2e4. \uae30\ud68d\ud588\ub358 \ud50c\ub7ab\ud3fc \uc694\uc18c\ub294 \uc5ec\ub7ec\uac00\uc9c0\uac00 \uc788\uc9c0\ub9cc \uadf8 \uc911\uc5d0\uc11c\ub3c4 \uc81c\ub2c8\ud37c \ud654\uba74\uc744 \ub3c5\ub9bd\uc801\uc778 \uac1c\ubc1c\ud658\uacbd\uc5d0\uc11c \uad6c\ud604\ud560 \uc218 \uc788\uac8c \ud558\ub294 \uae30\ub2a5\uc774 \uc81c\uc77c \uc911\uc694\ud588\ub2e4. \uadf8\ub798\uc11c \uc0dd\uac01\ud574\ub0b8 \uac83\uc774 \uc11c\ubc84 \ud658\uacbd\uc740 \uc2a4\ud504\ub9c1\ubd80\ud2b8\ub85c \uc2ec\ud50c\ud558\uac8c \uad6c\uc131\ud558\uace0, \ubaa8\ub358\ud55c \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc744 \uc704\ud574 \ubaa8\ub4c8 \ubc88\ub4e4\ub7ec\ub85c \uc6f9\ud329\uc744 \uc120\ud0dd\ud588\ub2e4. \uad00\ub828\ud574\uc11c\ub294 \ud544\uc790\uac00 \uc4f4 \u201c<a href=\"https:\/\/medium.com\/@alvin.h\/%EC%9B%B9%ED%8C%A9-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8-%EA%B8%B0%EB%B0%98%EC%9D%98-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0-87cd758e1eae\" target=\"_blank\" rel=\"noreferrer noopener\">\uc6f9\ud329+\uc2a4\ud504\ub9c1\ubd80\ud2b8 \uae30\ubc18\uc758 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\ud658\uacbd \uad6c\ucd95\ud558\uae30<\/a>\u201d\ub97c \ucc38\uace0\ud558\uc790.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc0c8\ub85c \uac16\ucdb0\uc9c4 \uac1c\ubc1c\ud658\uacbd\uc5d0\uc11c \uae30\uc874\uc758 \uc81c\ub2c8\ud37c \ubdf0\uc11c\ubc84 \ud50c\ub7ec\uadf8\uc778 \uc911 \uc77c\ubd80\ub97c \ud14c\uc2a4\ud2b8 \uc0bc\uc544 \ub9c8\uc774\uadf8\ub808\uc774\uc158 \ud574\ubcf4\ub2c8\uae4c \ub098\ub984 \uc2e0\uc120\ud558\ub354\ub77c. \uae30\uc874\uc758 JSP \ud15c\ud50c\ub9bf\uc5d0 \ub9c8\ud06c\uc5c5\uacfc \uacf5\uc874\ud558\uace0 \uc788\ub358 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ucf54\ub4dc\ub294 ES6 \uc2a4\ud399\uc5d0 \ub9de\ucdb0\uc11c \uc218\uc815\ud558\uace0, \ubaa8\ub4c8 \ubcc4\ub85c \ubd84\ub9ac\ub97c \ud558\uace0\ub098\ub2c8 \ud544\uc790\uac00 \uc0ac\uc6a9\ud558\uace0 \uc788\ub294 IntelliJ IDEA\uc758 \uc815\uc801 \ucf54\ub4dc \ubd84\uc11d\uc774\ub098 \uba54\uc18c\ub4dc \ud78c\ud2b8 \uac19\uc740 \uae30\ub2a5\ub4e4\uc744 \uc81c\ub300\ub85c \ud65c\uc6a9\ud560 \uc218 \uc788\uac8c \ub418\uc5c8\ub2e4. \uc694\uc998 \uac19\uc740 \uc138\uc0c1\uc5d0\uc11c\ub294 \ub108\ubb34 \ub2f9\uc5f0\ud55c \uac83\uc774\uc9c0\ub9cc \uc218\ub144\uac04 \uc313\uc544\uc628 \ub808\uac70\uc2dc\ub780 \ubcbd\uc740 \uc774\ubbf8 \ub118\uc744 \uc218 \uc5c6\uc744\ub9cc\ud07c \ub192\uc544\uc9c4 \uc0c1\ud0dc\uc600\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud544\uc790\ub294 \uc9c0\ub09c 8\uc6d4\uc5d0 \u201c<a href=\"https:\/\/medium.com\/@alvin.h\/%EB%A0%88%EA%B1%B0%EC%8B%9C-legacy-%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%97%90-%EC%9B%B9%ED%8C%A9-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-edc899c26b7e\" target=\"_blank\" rel=\"noreferrer noopener\">\ub808\uac70\uc2dc(Legacy) \uc2dc\uc2a4\ud15c\uc5d0 \uc6f9\ud329 \uac1c\ubc1c\ud658\uacbd \uc801\uc6a9\ud558\uae30<\/a>\u201d\ub97c \uc4f0\uba74\uc11c \uc5b8\uc820\uac00\ub294 \uc2e4\ubb34\uc5d0 \uaf2d \uc801\uc6a9\ud574\ubcf4\uaca0\ub2e4\ub294 \ub2e4\uc9d0\uc744 \ud588\uc5c8\ub2e4. \uadf8\ub9ac\uace0 \uc5bc\ub9c8\uc9c0\ub098\uc9c0 \uc54a\uc544 \uc5ec\uc720 \uc77c\uc815\uc774 \uc0dd\uacbc\uace0, \ub354 \uc774\uc0c1 \ubbf8\ub8f0 \uc218 \uc5c6\ub294 \uc77c\uc774\uae30\uc5d0 \ubc14\ub85c \uc2dc\uc791\ud588\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"75e3\">(1) \ub9c8\uc774\uadf8\ub808\uc774\uc158 \ub300\uc0c1&nbsp;\uc120\ud0dd\ud558\uae30<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\uc81c\ub2c8\ud37c \ud654\uba74\uc740 \ud06c\uac8c \uba54\uc778 \ub300\uc2dc\ubcf4\ub4dc\uc640 \uc0ac\uc6a9\uc790\uc815\uc758 \ub300\uc2dc\ubcf4\ub4dc, \ub9ac\uc5bc\ud0c0\uc784, \ubd84\uc11d, \ud1b5\uacc4, \uad00\ub9ac, \ubcf4\uace0\uc11c \ud15c\ud50c\ub9bf, \uc0ac\uc6a9\uc790 \uba54\ub274\ub85c \ub098\ub20c \uc218 \uc788\ub2e4. \ucc38\uace0\ub85c \uc0ac\uc6a9\uc790\uc815\uc758 \ub300\uc2dc\ubcf4\ub4dc\uc640 \ubcf4\uace0\uc11c \ud15c\ud50c\ub9bf\uc740 \ud654\uba74 \ub2e8\uc704\uac00 \uc544\ub2c8\ub77c \ucef4\ud3ec\ub10c\ud2b8 \ub2e8\uc704\uc758 \uae30\ub2a5\uc73c\ub85c \ubcf5\uc7a1\ud558\uac8c \uc5bd\ud600\uc788\uc5b4\uc11c \ub9c8\uc774\uadf8\ub808\uc774\uc158 \ub300\uc0c1\uc5d0\uc11c \uc81c\uc678\ud588\ub2e4. \ub2e4\uc74c\uc740 \uc81c\ub2c8\ud37c\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 \ud0c0\uc785 \ubcc4 \ud654\uba74 \uac1c\uc218\uc774\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>\uba54\uc778 \ub300\uc2dc\ubcf4\ub4dc 6\uc885, \ub9ac\uc5bc\ud0c0\uc784 8\uc885, \ubd84\uc11d 21\uc885, \ud1b5\uacc4 6\uc885, \uad00\ub9ac 44\uc885<\/p><\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">\uc81c\ub2c8\ud37c\ub294 \ud55c\ub2ec\uc5d0 \ucd5c\uc18c \ub450\ubc88 \uc774\uc0c1\uc758 \ub9c8\uc774\ub108 \ubc84\uc804\uc774 \ub9b4\ub9ac\uc988 \ub418\ub294 \uc628-\ud504\ub808\ubbf8\uc2a4(On-premise) \uc81c\ud488\uc774\ub2e4\ubcf4\ub2c8 \ubb38\uc81c\uac00 \ub418\ub294 \ubc84\uc804\uc774 \uace0\uac1d\uc0ac\uc5d0 \uc124\uce58\ub418\uba74 \ub418\ub3cc\ub9ac\uae30\uac00 \uc27d\uc9c0 \uc54a\ub2e4. \uc11c\ube44\uc2a4\ud615 \uc81c\ud488\ucc98\ub7fc \ud53c\ub4dc\ubc31\uc774 \uc989\uac01\uc801\uc73c\ub85c \ub098\ud0c0\ub098\uc9c4 \uc54a\uc9c0\ub9cc \uc218\uc5c6\uc774 \ub9ce\uc740 \uacfc\uac70 \ubc84\uc804\ub4e4 \uc18d\uc5d0\uc11c \ub2e4\uc591\ud55c \ubb38\uc81c\uc5d0 \uc9c1\uba74\ud558\uac8c \ub41c\ub2e4. \ud544\uc790\ub294 \uc9c0\ub09c \uc218\ub144\uac04 \uc218\ub9ce\uc740 \uace0\uac1d\uc0ac\uc5d0 \uc124\uce58\ub418\uc5b4 \uc5b4\ub290 \uc815\ub3c4 \uc548\uc815\uc131\uc774 \ud655\ubcf4\ub41c 85\uc885\uc758 \ud654\uba74\ub4e4\uc744 \ub9c8\uc774\uadf8\ub808\uc774\uc158 \ud574\uc57c\ud55c\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"8408\">(2) \ubaa9\ud45c&nbsp;\uc124\uc815\ud558\uae30<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ubaa8\ub4e0 \uc77c\uc758 \uc2dc\uc791\uc740 \ubaa9\ud45c\ub97c \uc798 \uc815\ud558\ub294 \uac83\uc774\ub2e4. \ub108\ubb34 \ub2f9\uc5f0\ud55c \ub9d0\uc774\uc9c0\ub9cc \uc77c\uc758 \uaddc\ubaa8\uac00 \ud06c\uac70\ub098 \uc55e\uc5d0\uc11c \ub9d0\ud55c \uac83\ucc98\ub7fc \uc774\ubbf8 \uac80\uc99d\ub41c \uc77c\uc744 \ub4a4\uc5ce\uace0 \uc0c8\ub85c\uc6b4 \uac83\uc744 \uc801\uc6a9\ud558\ub294 \uc77c\uc740 \uc9c4\ud589\ud558\ub294 \uc0ac\ub78c\uc774\ub098 \uc9c1\ucc45\uc790 \ub610\ub294 \uad6c\uc131\uc6d0\ub4e4\uc5d0\uac8c \ud070 \ubd80\ub2f4\uc744 \uc548\uaca8\uc900\ub2e4. \uadf8\ub798\uc11c \ud544\uc790\ub294 \ub2e4\uc74c\uacfc \uac19\uc740 \ubaa9\ud45c\ub97c \uc815\ud558\uace0, \uc77c\uc758 \ub2f9\uc704\uc131\uc744 \ud655\ubcf4\ud558\uae30 \uc704\ud55c \ub17c\ub9ac\ub97c \uc815\ub9ac\ud588\ub2e4.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>\uc720\ub2db \ud14c\uc2a4\ud2b8\uc640 \uc2a4\ub0c5\uc0f7 \ud14c\uc2a4\ud2b8\uac00 \uac00\ub2a5\ud574\uc57c \ud568<\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\"><li>\ud234\uc5d0\uc11c \ub514\ubc84\uae45\uc774 \uac00\ub2a5\ud55c \ucf54\ub4dc\ub97c \uac1c\ubc1c\ud560 \uc218 \uc788\uc5b4\uc57c \ud568<\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\"><li>\ud654\uba74 \ub2e8\uc704\ub85c \ud504\ub808\uc784\uc6cc\ud06c\ub098 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc790\uc720\ub86d\uac8c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc5b4\uc57c \ud568<\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\"><li>\ub9c8\uc774\uadf8\ub808\uc774\uc158 \ub41c \ud654\uba74\uacfc \uae30\uc874\uc758 \ud654\uba74\uc774 \ubaa8\ub450 \uc798 \ub3d9\uc791\ud574\uc57c \ud568<\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">4\ubc88\uc5d0 \ub300\ud574 \uc870\uae08 \ub354 \uc124\uba85\uc744 \ud558\uc790\uba74 \ud55c\ubc88\uc5d0 \ubaa8\ub4e0 \ud654\uba74\uc744 \ub9c8\uc774\uadf8\ub808\uc774\uc158 \ud560 \uc218 \uc788\ub2e4\uba74 \uc815\ub9d0 \uc88b\uaca0\uc9c0\ub9cc \ud604\uc2e4\uc801\uc73c\ub85c \ubd88\uac00\ub2a5\ud55c \uc77c\uc774\uae30 \ub54c\ubb38\uc5d0 \uc0c8\ub85c \uac16\ucdb0\uc9c4 \uac1c\ubc1c\ud658\uacbd\uc5d0\uc11c\ub294 \uae30\uc874\uc758 \ud654\uba74\uacfc \ub9c8\uc774\uadf8\ub808\uc774\uc158 \ub41c \ud654\uba74\uc774 \ubaa8\ub450 \uc798 \ub3d9\uc791\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ed58\">(3) \uae30\uc220 \uc2a4\ud399&nbsp;\uc815\ud558\uae30<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ubaa9\ud45c \uc124\uc815\uc774 \ub05d\ub0ac\uc73c\ub2c8 \uc774\uc81c\ub294 \uc0c8\ub85c \uac16\ucdb0\uc9c8 \uac1c\ubc1c\ud658\uacbd\uc758 \uae30\uc220 \uc2a4\ud399\uc744 \uc815\ud574\uc57c \ud55c\ub2e4. \ubcf8\ubb38\uc5d0\uc11c\ub294 \uac01\uac01\uc758 \uae30\uc220 \uc2a4\ud399\uc5d0 \ub300\ud55c \uc124\uba85\uc740 \uc0dd\ub7b5\ud558\uaca0\uc73c\uba70, \uc11c\ub860\uc5d0\uc11c\ub3c4 \uc5b8\uae09\ud55c \ud544\uc790\uac00 \uc791\uc131\ud55c \uae00\uc744 \ucc38\uace0\ud558\uba74 \ub3c4\uc6c0\uc774 \ub420 \uac83\uc774\ub2e4.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>\ubaa8\ub4c8 \ubc88\ub4e4\ub7ec&nbsp;: webpack 4<\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\"><li>\uac1c\ubc1c\ud658\uacbd \uc11c\ubc84&nbsp;: webpack-dev-server<\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\"><li>JavaScript \ucef4\ud30c\uc77c\ub7ec&nbsp;: babel 6<\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\"><li>JavaScript \ud504\ub808\uc784\uc6cc\ud06c&nbsp;: vuejs 2<\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\"><li>CSS \ucef4\ud30c\uc77c\ub7ec&nbsp;: sass<\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\"><li>\ud14c\uc2a4\ud2b8 \ub3c4\uad6c&nbsp;: jest<\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\"><li>\uae30\ud0c0&nbsp;: eslint, prettier&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">(4) \ub808\uc774\uc5b4 \uae30\ubc18\uc758 \ud654\uba74&nbsp;\uc815\ub9ac\ud558\uae30<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ubaa9\ud45c\uc640 \uae30\uc220 \uc2a4\ud399\uc774 \uc815\ud574\uc84c\uc73c\ub2c8 \ud604\uc7ac \uc2dc\uc810\uc5d0\uc11c \ubc14\ub85c \ubcf8\ub860\uc73c\ub85c \ub118\uc5b4\uac00\uc57c \ud558\ub294\ub370, \ub72c\uae08\uc5c6\uc774 \ub808\uc774\uc5b4 \uae30\ubc18\uc758 \ud654\uba74\uc5d0 \ub300\ud55c \uc124\uba85\uc744 \ubcf4\uac8c \ub418\uc11c \ub2f9\ud639\uc2a4\ub7fd\uaca0\uc9c0\ub9cc \uc81c\ub2c8\ud37c\ub294 \uc5b8\uc81c \uc5b4\ub514\uc11c\ub4e0 \uad00\ub9ac \ud654\uba74\uc744 \ub744\uc6b8 \uc218 \uc788\ub3c4\ub85d \ub808\uc774\uc5b4 \uae30\ubc18\uc73c\ub85c \uad6c\ud604\ub418\uc5c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc989, \ub9c8\uc774\uadf8\ub808\uc774\uc158 \ub300\uc0c1 \ud654\uba74\uc758 \uc808\ubc18\uc774 \ub808\uc774\uc5b4 \uae30\ubc18\uc778 \uac83\uc774\ub2e4. \ud544\uc790\uc758 \uacc4\ud68d\uc740 \ud654\uba74 \ub2e8\uc704(URL \ubcc4)\ub85c \uc5d4\ud2b8\ub9ac\ub97c \uc124\uc815\ud558\uace0, \uacf5\ud1b5 \ubaa8\ub4c8\uc744 \uc81c\uc678\ud55c \uc544\uc6c3\ud48b \ud30c\uc77c\ub4e4\uc744 \ud654\uba74 \ubcc4 \ub514\ub809\ud1a0\ub9ac \uc548\uc5d0 \uc0dd\uc131\ud574\ub450\ub824\uace0 \ud588\uc5c8\ub2e4. \ud558\uc9c0\ub9cc \uad00\ub9ac \ud654\uba74\ub4e4\uc774 \ub808\uc774\uc5b4 \uae30\ubc18\uc774\uae30 \ub54c\ubb38\uc5d0 \uc2dc\uc791\ubd80\ud130 \ud070 \ub09c\uad00\uc5d0 \ubd80\ub52a\uce58\uac8c \ub418\uc5c8\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"558\" src=\"https:\/\/jennifersoft.com\/ko\/wp-content\/uploads\/sites\/2\/2018\/11\/1-1024x558.png\" alt=\"1\" class=\"wp-image-4507\" srcset=\"https:\/\/jennifersoft.com\/ko\/wp-content\/uploads\/sites\/2\/2018\/11\/1-1024x558.png 1024w, https:\/\/jennifersoft.com\/ko\/wp-content\/uploads\/sites\/2\/2018\/11\/1-300x164.png 300w, https:\/\/jennifersoft.com\/ko\/wp-content\/uploads\/sites\/2\/2018\/11\/1.png 2000w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>&lt;\uc81c\ub2c8\ud37c \uad00\ub9ac \ud654\uba74&gt;&nbsp;<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\uace0\ubbfc \ub05d\uc5d0 \ud544\uc790\ub294 \ubaa8\ub4e0 \uad00\ub9ac \ud654\uba74\uc744 iFrame \uae30\ubc18\uc73c\ub85c \ubcc0\uacbd\ud558\uae30\ub85c \ud588\ub2e4. \ubb3c\ub860 \ub9ac\uc18c\uc2a4 \uc911\ubcf5 \ub85c\ub4dc\uc5d0 \ub530\ub978 \ub85c\ub529 \uc18d\ub3c4 \ubb38\uc81c\ub098 \ucee8\ud150\uce20\uc5d0 \ub530\ub77c iFrame \ud06c\uae30\ub97c \uc720\ub3d9\uc801\uc73c\ub85c \ubcc0\uacbd\ud574\uc57c \ud558\ub294 \ub4f1\uc758 \uba87\uac00\uc9c0 \ubb38\uc81c\uc810\uc774 \uc788\uc5c8\uc9c0\ub9cc \uc5b4\ub835\uc9c0 \uc54a\uac8c \ud574\uacb0\ud560 \uc218 \uc788\uc5c8\ub2e4. \uac04\ub2e8\ud558\uac8c \uc815\ub9ac\ud558\uc790\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>\uad00\ub9ac \ud654\uba74 \ud2b9\uc131\uc0c1 \ub2e4\ub978 \uc885\ub958\uc758 \ud654\uba74\uc5d0 \ube44\ud574 \uacf5\ud1b5 \ubaa8\ub4c8\uc774\ub098 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc801\uac8c \uc0ac\uc6a9\ud558\uae30 \ub54c\ubb38\uc5d0 \ub9c8\uc774\uadf8\ub808\uc774\uc158\uc774 \uc644\ub8cc\ub418\uba74 \ub85c\ub529 \uc18d\ub3c4 \ubb38\uc81c\uac00 \uc5b4\ub290 \uc815\ub3c4 \uac1c\uc120\ub420 \uac83\uc774\ub2e4.<\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\"><li><a href=\"https:\/\/github.com\/davidjbradshaw\/iframe-resizer\" rel=\"noreferrer noopener\" target=\"_blank\">\u201ciFrame Resizer<\/a>\u201d\ub77c\ub294 \uc644\uc131\ub3c4\uac00 \ub192\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud588\uae30 \ub54c\ubb38\uc5d0 \ucee8\ud150\uce20\uc5d0 \ub530\ub978 iFrame \ud06c\uae30 \uc870\uc808\uc744 \uc790\uc5f0\uc2a4\ub7fd\uac8c \ucc98\ub9ac \ud560 \uc218 \uc788\uc5c8\ub2e4.<\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\ucc38\uace0\ub85c \ud398\uc774\uc9c0 \uae30\ubc18\uc73c\ub85c \ud654\uba74\uc774 \ubcc0\uacbd\ub418\uba74\uc11c \uace0\uc815 \ud06c\uae30\uc758 \uc708\ub3c4\uc6b0 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \ubc97\uc5b4\ub098 \ubcc4\ub3c4\uc758 \ud31d\uc5c5\uc774\ub098 URL\ub85c \uc811\uadfc\ud560 \uc218 \uc788\uac8c \ub418\uc5b4 \uc0ac\uc6a9\uc131\uc774 \ub9ce\uc774 \uac1c\uc120\ub418\uc5c8\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3fac\">(5) \ub808\uc774\uc544\uc6c3 \uad6c\uc870&nbsp;\uc0b4\ud3b4\ubcf4\uae30<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\uc81c\ub2c8\ud37c \ud654\uba74\uc740 JSTL \ucee4\uc2a4\ud140 \ud0dc\uadf8\ub85c \uacf5\ud1b5 \ub808\uc774\uc544\uc6c3\uc744 \ud654\uba74 \ubcc4\ub85c \uad6c\uc131\ud558\ub294\ub370, \ud654\uba74 \ud0c0\uc785 \ubcc4\ub85c \uc870\uae08\uc529 \ub2e4\ub974\uac8c \ucc98\ub9ac\ub418\uc5b4 \uc788\ub2e4. \ubb38\uc81c\ub294 \ub9c8\ud06c\uc5c5 \ubfd0\ub9cc\uc774 \uc544\ub2c8\ub77c \ud15c\ud50c\ub9bf, \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8, \uc2a4\ud0c0\uc77c\uae4c\uc9c0 \ud568\uaed8 \ud3ec\ud568\ub418\uc5b4 \uc788\uae30 \ub54c\ubb38\uc5d0 \uc6b0\uc120 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub97c \ubd84\ub9ac\ud558\uba74\uc11c ES6 \ubaa8\ub4c8\ub85c \ub9c8\uc774\uadf8\ub808\uc774\uc158\uc744 \uc9c4\ud589\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc77c\ub2e8 \uae30\uc874\uc758 \ud654\uba74 \ud0c0\uc785 \ubcc4 \ub808\uc774\uc544\uc6c3\uc5d0 \ub300\ud55c \uc124\uba85\uc744 \ud558\uc790\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>\ud654\uba74_\ud0c0\uc785_header.jsp&nbsp;: default_css.jsp\uc640 default_js.jsp\ub97c \ub85c\ub4dc\ud568<\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\"><li>\ud654\uba74_\ud0c0\uc785_body_start.jsp&nbsp;: toolbar.jsp\ub97c \ub85c\ub4dc\ud568<\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\"><li>\ud654\uba74_\ud0c0\uc785_body.end.jsp&nbsp;: \ud654\uba74 \ud0c0\uc785 \ubcc4\ub85c \uacf5\ud1b5\uc73c\ub85c \uc0ac\uc6a9\ub418\ub294 \ub9c8\ud06c\uc5c5\uacfc \uc2a4\ud06c\ub9bd\ud2b8\uac00 \ub4e4\uc5b4\uac00\uace0, footer.jsp\ub97c \ub85c\ub4dc\ud568<\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\"><li>common_ui.jsp&nbsp;: \uc81c\ub2c8\ud37c\uc5d0\uc11c \uc0ac\uc6a9\ub418\ub294 \ubaa8\ub4e0 \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc5d0 \ub300\ud55c \ud15c\ud50c\ub9bf\uacfc \uc2a4\ud06c\ub9bd\ud2b8\uac00 \ud3ec\ud568\ub418\uc5b4 \uc788\uc74c<\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\ub2e4\uc74c\uc740 \ud654\uba74 \ud0c0\uc785 \ubcc4 \ub808\uc774\uc544\uc6c3 \ub0b4\ubd80\uc5d0\uc11c \ub85c\ub4dc\ud558\ub294 \uacf5\ud1b5 \ub808\uc774\uc544\uc6c3\uc5d0 \ub300\ud55c \uc124\uba85\uc774\ub2e4.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>default_css.jsp&nbsp;: \uc81c\ub2c8\ud37c \ud654\uba74 \uad6c\uc131\uc5d0 \ud544\uc694\ud55c css \ud30c\uc77c\uacfc JUI \ub77c\uc774\ube0c\ub7ec\ub9ac\uc758 css \ud30c\uc77c\ub4e4\uc744 \ub85c\ub4dc\ud568<\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\"><li>default_js.jsp&nbsp;: \uc81c\ub2c8\ud37c \uce94\ubc84\uc2a4 \ucc28\ud2b8\uc640 \uc720\ud2f8\ub9ac\ud2f0 js \ud30c\uc77c\uacfc jQuery\ub098 JUI \uac19\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc758 js \ud30c\uc77c\ub4e4\uc744 \ub85c\ub4dc\ud568<\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\"><li>toolbar.jsp&nbsp;: \uc81c\ub2c8\ud37c \ud654\uba74 \uc0c1\ub2e8\uc5d0 \ubcf4\uc774\ub294 \ud234\ubc14 \uc601\uc5ed\uc5d0 \ub300\ud55c \ub9c8\ud06c\uc5c5\uacfc \uc2a4\ud06c\ub9bd\ud2b8\uac00 \ud3ec\ud568\ub418\uc5b4 \uc788\uc74c<\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">\uc608\ub97c \ub4e4\uc5b4 EVENT \ubd84\uc11d \ud654\uba74\uc740&nbsp;<strong>\/analysis\/event<\/strong>\uc73c\ub85c \uc811\uadfc\ud560 \uc218 \uc788\ub294\ub370, \ud574\ub2f9 JSP \ud15c\ud50c\ub9bf \ud30c\uc77c\uc740 \/WEB-INF\/jsp\/analysis\/event.jsp\uc5d0 \uc704\uce58\ud55c\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"564\" height=\"586\" src=\"https:\/\/jennifersoft.com\/ko\/wp-content\/uploads\/sites\/2\/2018\/11\/2.png\" alt=\"2\" class=\"wp-image-4515\" srcset=\"https:\/\/jennifersoft.com\/ko\/wp-content\/uploads\/sites\/2\/2018\/11\/2.png 564w, https:\/\/jennifersoft.com\/ko\/wp-content\/uploads\/sites\/2\/2018\/11\/2-289x300.png 289w\" sizes=\"auto, (max-width: 564px) 100vw, 564px\" \/><figcaption>&lt;EVENT \ubd84\uc11d \ud654\uba74\uc758 \ub808\uc774\uc544\uc6c3&nbsp;\uad6c\uc870&gt;<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4db1\">(6) \ub808\uc774\uc544\uc6c3 \uad6c\uc870&nbsp;\ubd84\ub9ac\ud558\uae30<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\uc77c\ub2e8 default_css.jsp\ub294 \ud654\uba74 \ubcc4 \uc2a4\ud0c0\uc77c\uacfc ES6\ub85c \ub9c8\uc774\uadf8\ub808\uc774\uc158 \ub41c \ucef4\ud3ec\ub10c\ud2b8 \uc2a4\ud0c0\uc77c\ub9cc \ubd84\ub9ac\ud588\uae30 \ub54c\ubb38\uc5d0 \uc0dd\uac01\ubcf4\ub2e4 \uac04\ub2e8\ud558\uac8c \ub05d\ub0ac\ub2e4. \ud558\uc9c0\ub9cc \ubb38\uc81c\ub294 default_js.jsp\uc640 toolbar.jsp, analysis_body_end.jsp, common_ui.jsp\uc600\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uae30\uc874\uc758 \ud654\uba74\ub4e4\uc740 \uc798 \ub3d9\uc791\ud574\uc57c\ud558\ubbc0\ub85c \uadf8\ub300\ub85c \ub450\uace0, \ub9c8\uc774\uadf8\ub808\uc774\uc158 \ub300\uc0c1 \ud654\uba74\uc5d0 \ub300\ud574\uc11c\ub9cc \ub808\uc774\uc544\uc6c3\uc744 \ub2e4\ub974\uac8c \uad6c\uc131\ud558\uae30\ub85c \ud588\ub2e4. \ud544\uc790\ub294 \ubaa8\ub4c8 \ubc88\ub4e4\ub7ec\ub85c \uc6f9\ud329\uc744 \uc120\ud0dd\ud588\uae30 \ub54c\ubb38\uc5d0 development \ubaa8\ub4dc\uc640 production \ubaa8\ub4dc\uc5d0 \ub530\ub77c output.path\ub97c \ub2e4\ub974\uac8c \uc0dd\uc131\ud588\ub2e4.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>development \ubaa8\ub4dc&nbsp;: ${project.basedir}\/.webpack\/bundles<\/li><\/ol>\n\n\n\n<ol class=\"wp-block-list\"><li>production \ubaa8\ub4dc&nbsp;: ${project.basedir}\/src\/main\/webapp\/bundles<\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">JSP \ud15c\ud50c\ub9bf\uc5d0\uc11c\ub294 pageConext \ub0b4\uc7a5 \uac1d\uccb4\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294\ub370, \uc694\uccad \ud5e4\ub354 \uc815\ubcf4 \uc911\uc5d0 request.getServletPath() \uba54\uc18c\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec, \ud654\uba74 \ud0c0\uc785\uacfc \ud654\uba74 \uc774\ub984\uc744 \ubd84\ub958\ud588\ub2e4. \uc81c\ub2c8\ud37c \ubdf0\uc11c\ubc84\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \ub2e8\uc21c\ud55c URL \uad6c\uc870\ub97c \uac00\uc9c4\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>URL&nbsp;: http:\/\/127.0.0.1:8080\/analysis\/event<br>(\ud654\uba74 \ud0c0\uc785\uc740 analysis, \ud654\uba74 \uc774\ub984\uc740 event)<\/p><\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">\ub9cc\uc57d\uc5d0 development \ubaa8\ub4dc\uc774\uace0, EVENT \ubd84\uc11d \ud654\uba74\uc774\ub77c\uba74 ${project.basedir}\/.webpack\/bundles\/analysis\/event\uc5d0 \ub514\ub809\ud1a0\ub9ac\uac00 \uc0dd\uc131\ub41c\ub2e4. \uc0ac\uc6a9\uc790\uac00 \ud2b9\uc815 \ud654\uba74\uc5d0 \uc811\uadfc\ud588\uc744 \ub54c, \uc55e\uc5d0\uc11c \ub9d0\ud55c pageContext \ub0b4\uc7a5 \uac1d\uccb4\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud654\uba74 \ud0c0\uc785\uacfc \ud654\uba74 \uc774\ub984\uc744 \ubd84\ub958\ud558\uace0, output.path\uc5d0 \ud574\ub2f9 \ub514\ub809\ud1a0\ub9ac\uac00 \uc874\uc7ac\ud558\ub294\uc9c0 \ud655\uc778\ud55c\ub2e4. \ub9cc\uc57d\uc5d0 \ub514\ub809\ud1a0\ub9ac\uac00 \uc874\uc7ac\ud55c\ub2e4\uba74 \ub9c8\uc774\uadf8\ub808\uc774\uc158 \ub300\uc0c1 \ud654\uba74\uc774\ub77c\uace0 \uac04\uc8fc\ud558\uace0, \ub2e4\uc74c\uacfc \uac19\uc740 \ub808\uc774\uc544\uc6c3 \uad6c\uc870\ub85c \ubcc0\uacbd\ud55c\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"564\" height=\"586\" src=\"https:\/\/jennifersoft.com\/ko\/wp-content\/uploads\/sites\/2\/2018\/11\/3.png\" alt=\"3\" class=\"wp-image-4517\" srcset=\"https:\/\/jennifersoft.com\/ko\/wp-content\/uploads\/sites\/2\/2018\/11\/3.png 564w, https:\/\/jennifersoft.com\/ko\/wp-content\/uploads\/sites\/2\/2018\/11\/3-289x300.png 289w\" sizes=\"auto, (max-width: 564px) 100vw, 564px\" \/><figcaption>&lt;\uc0c8\ub85c\uc6b4 EVENT \ubd84\uc11d \ud654\uba74\uc758 \ub808\uc774\uc544\uc6c3&nbsp;\uad6c\uc870&gt;<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\uae30\uc874\uc5d0\ub294 \ubaa8\ub4e0 \ud654\uba74\uc5d0\uc11c default_js.jsp\uc5d0 \uc815\uc758\ub41c js \ud30c\uc77c\ub4e4\uc744 \ub85c\ub4dc\ud588\uc5c8\ub2e4. jquery\ub098 moment, lodash \uac19\uc740 \uc720\uba85\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\ub3c4 \ud3ec\ud568\ub418\uc5b4 \uc788\uace0, \uc81c\ub2c8\ud37c \uce94\ubc84\uc2a4 \ucc28\ud2b8\ub098 \uc720\ud2f8\ub9ac\ud2f0, JUI \ub4f1 \ub0b4\ubd80\uc5d0\uc11c \uc0ac\uc6a9\ub418\ub294 \ubaa8\ub4c8\ub4e4\ub3c4 \ud3ec\ud568\ub41c\ub2e4. \ud544\uc790\ub294 \ub9c8\uc774\uadf8\ub808\uc774\uc158 \ub300\uc0c1 \ud654\uba74\uc5d0\uc11c \uc758\uc874\uc131\uc774 \ub108\ubb34 \ub192\uc740 jquery\ub97c \uc81c\uc678\ud558\uace0, \ubc88\ub4e4 \ud30c\uc77c\ub4e4\ub9cc \ub85c\ub4dc\ud560 \uc218 \uc788\ub3c4\ub85d \uc81c\ub2c8\ud37c \ubdf0\uc11c\ubc84\ub97c \ub300\ub300\uc801\uc73c\ub85c \uc218\uc815\ud558\uc600\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"bffe\">(7) \uc6f9\ud329 \uae30\ubcf8&nbsp;\uc124\uc815\ud558\uae30<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ubcf8\ubb38\uc5d0\uc11c\ub294 \uc6f9\ud329 \uc124\uc815 \ubc29\ubc95\uc5d0 \ub300\ud574\uc11c \uc790\uc138\ud788 \ub2e4\ub8e8\uc9c0\ub294 \uc54a\uace0, \uc911\uc694\ud558\ub2e4\uace0 \uc0dd\uac01\ud558\ub294 \ubd80\ubd84\ub9cc \uc9da\uace0 \ub118\uc5b4\uac00\ub824\uace0 \ud55c\ub2e4. \uba3c\uc800 \ubaa8\ub4dc\uc5d0 \ub530\ub77c output.path\ub97c \ub2e4\ub974\uac8c \uc124\uc815\ud574\uc8fc\uace0, \ub9c8\uc774\uadf8\ub808\uc774\uc158 \ub300\uc0c1 \ud654\uba74\uc740 \uacc4\uc18d \ub298\uc5b4\ub0a0 \uac83\uc774\uae30 \ub54c\ubb38\uc5d0 entry\ub97c \uba40\ud2f0\ub85c \uc124\uc815\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const path = require('path');\n\nmodule.exports = (env) => {\n  const clientPath = path.resolve(__dirname, 'src\/main\/client');\n  const outputPath = path.resolve(__dirname, (env == 'production') ? \n                                  'src\/main\/webapp' : '.webpack');\n  const publicPath = '\/bundles';\n  \n  return {\n        mode: env,\n        entry: {\n          'analysis\/event\/app': `${clientPath}\/analysis\/event\/index.js`,\n          'realtime\/event\/app': `${clientPath}\/realtime\/event\/index.js`,\n          ...\n        },\n        output: {\n            path: outputPath + publicPath,\n            publicPath: publicPath,\n            filename: '[name].js'\n        },\n    ...\n  }\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uba3c\uc800 clientPath\uc5d0\ub294 JSP \ud15c\ud50c\ub9bf \ud30c\uc77c\uc5d0\uc11c \ubd84\ub9ac\ud55c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ucf54\ub4dc\ub97c ES6 \ubaa8\ub4c8\ub85c \ub9c8\uc774\uadf8\ub808\uc774\uc158 \ud55c index.js \ud30c\uc77c\ub4e4\uc774 \uc704\uce58\ud55c\ub2e4. \ud654\uba74 \ubcc4 index.js \ud30c\uc77c\ub4e4\uc740 entry\uac00 \ub418\ub294\ub370, \uc5ec\uae30\uc11c entry \ud0a4\uc5d0 \uc8fc\ubaa9\ud558\uc790.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">output.filename\uc774 [name].js\ub85c \uc124\uc815\ub418\uc5b4 \uc788\ub294\ub370, [name]\uc740 entry \ud0a4\ub85c \uce58\ud658\ub418\uc5b4 output.path \ub514\ub809\ud1a0\ub9ac\uc5d0 \uc0dd\uc131\ub41c\ub2e4. \ub9cc\uc57d\uc5d0 analysis\/event\/index.js \ud30c\uc77c\uc744 production \ubaa8\ub4dc\uc5d0\uc11c \ube4c\ub4dc\ub97c \ud558\uba74 \ubc88\ub4e4\ub9c1 \ub41c \ud30c\uc77c \uacbd\ub85c\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>${project.basedir}\/src\/main\/webapp\/bundles\/analysis\/event\/app.js<\/p><\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">\ucc38\uace0\ub85c output.publicPath\ub97c \/bundles\ub85c \uc124\uc815\ud588\uae30 \ub54c\ubb38\uc5d0 \uc6f9\uc5d0\uc11c\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \uc811\uadfc\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>http:\/\/127.0.0.1:8080\/bundles\/analysis\/event\/app.js<\/p><\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\uc81c entry \ubaa8\ub4c8\uc5d0\uc11c \ud654\uba74 \ubcc4\ub85c \ud544\uc694\ud55c \ub77c\uc774\ube0c\ub7ec\ub9ac\ub9cc import\ud574\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\uac8c \ub418\uc5c8\ub2e4. \ubb3c\ub860 jquery\ub294 \uc5ec\uc804\ud788 webpack_default_js.jsp\uc5d0\uc11c \ub85c\ub4dc\ub418\uace0 \uc788\uae30 \ub54c\ubb38\uc5d0 \ub2e4\uc74c \uc124\uc815\uc744 \ud1b5\ud574\uc11c \ubc88\ub4e4 \ud30c\uc77c\uc5d0 \ud3ec\ud568\ub418\uc9c0 \uc54a\uac8c \ud574\uc57c\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">...\nreturn {\n  ...\n  externals: {\n      jquery: 'jQuery'\n  },\n  ...\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">(8) \uc6f9\ud329 \uac1c\ubc1c\uc11c\ubc84&nbsp;\uc124\uc815\ud558\uae30<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ud544\uc790\ub294 development \ubaa8\ub4dc\uc77c \ub54c, webpack-dev-server\ub97c \uc0ac\uc6a9\ud558\uae30\ub85c \uacb0\uc815\ud588\ub294\ub370, \uc774\uc720\ub294 HMR(Hot Module Replacement)\ub97c \uc801\uc6a9\ud574\ubcf4\uace0 \uc2f6\uc5c8\uae30 \ub54c\ubb38\uc774\ub2e4. \ud558\uc9c0\ub9cc \uba87\uac00\uc9c0 \ubb38\uc81c\ub85c \uc778\ud574 \ud604\uc7ac\ub294 Live-Reload\ub9cc \uc801\uc6a9\ud55c \uc0c1\ud0dc\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">webpack-dev-server\ub294 \ubc88\ub4e4 \ud30c\uc77c\uc744 \uba54\ubaa8\ub9ac \uc0c1\uc5d0\uc11c \uc81c\uacf5\ud558\uae30 \ub54c\ubb38\uc5d0 output.path\ub85c \uc124\uc815\ud55c&nbsp;.webpack \ub514\ub809\ud1a0\ub9ac\uac00 \ud544\uc694\uc5c6\ub2e4. \ud558\uc9c0\ub9cc \ud2b9\uc815 \ud654\uba74\uc73c\ub85c \uc811\uadfc\ud588\uc744 \ub54c, \uc81c\ub2c8\ud37c \ubdf0\uc11c\ubc84\uac00 \ub9c8\uc774\uadf8\ub808\uc774\uc158 \ub300\uc0c1 \ud654\uba74\uc778\uc9c0 \ud310\ub2e8\ud558\uae30 \uc704\ud574\uc11c\ub294 \uc2e4\uc81c \ud30c\uc77c\uc774 \ud544\uc694\ud588\uace0, JSP \ud15c\ud50c\ub9bf\uc5d0\uc11c \ub85c\ub4dc\ud574\uc57c \ud558\ub294 \ud30c\uc77c\ub4e4\uc740 \ud654\uba74 \ubcc4\ub85c \uc870\uae08\uc529 \ub2e4\ub974\uae30 \ub54c\ubb38\uc5d0 \uad6c\ubd84\uc774 \ud544\uc694\ud588\ub2e4. \uadf8\ub798\uc11c \ub9c8\uc74c\uc5d0 \ub4e4\uc9c4 \uc54a\uc9c0\ub9cc webpack \uba85\ub839\uc5b4\ub97c \ud568\uaed8 \uc0ac\uc6a9\ud588\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>webpack &#8211;watch &#8211;env=development &amp; webpack-dev-server &#8211;env=development<\/p><\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">\uc2e4\uc740 webpack-dev-server\uac00 \ucef4\ud30c\uc77c \ud560 \ub54c, \ubc88\ub4e4 \ud30c\uc77c \uacbd\ub85c\ub97c \uc5bb\uc5b4\uc624\ub294 \ubc29\ubc95\uc744 \uc5f4\uc2ec\ud788 \uc54c\uc544\ubd24\uc73c\ub098 \uc544\uc9c1\uae4c\uc9c0\ub3c4 \ub2f5\uc744 \ucc3e\uc9c0 \ubabb\ud588\ub2e4. \ud558\uc9c0\ub9cc Express\ub294 webpack-dev-server\ub97c \ubbf8\ub4e4\uc6e8\uc5b4\ub85c \ucd94\uac00\ud558\uba74, \ubc88\ub4e4 \ud30c\uc77c \uacbd\ub85c\ub97c \uac00\uc9c0\uace0 \uc62c \uc218 \uc788\uc5b4\uc11c \ucc38 \uc544\uc26c\uc6e0\ub2e4. (\uc81c\ub2c8\ud37c \ubdf0\uc11c\ubc84\ub294 \uc790\ubc14 \uc2a4\ud504\ub9c1\uc744 \uc0ac\uc6a9\ud568 \u315c\u315c)<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">...\nreturn {\n  ...\n  devServer: {\n      host: '127.0.0.1',\n      port: 8081,\n      progress: true,\n      inline: true,\n      hot: false,\n      proxy: [{\n          context: [ '**', '!\/ws\/**' ],\n          target: 'http:\/\/127.0.0.1:8080'\n      }, {\n          context: [ '\/ws\/**' ],\n          target: 'ws:\/\/127.0.0.1:8080',\n          ws: true\n      }]\n  },\n  ...\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">webpack-dev-server \ud3ec\ud2b8\ub85c \uc81c\ub2c8\ud37c \ud654\uba74\uc5d0 \uc811\uadfc\ud588\uc744 \ub54c, \uc6f9\uc18c\ucf13\uc73c\ub85c \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\ub294 \ub300\uc2dc\ubcf4\ub4dc\uac00 \uc81c\ub300\ub85c \ub3d9\uc791\ud558\uc9c0 \uc54a\uc558\ub2e4. \uadf8\ub798\uc11c \uc870\uae08 \ud5e4\ub9f8\uc5c8\ub294\ub370, http\uc640 ws \ud504\ub85d\uc2dc \ucee8\ud14d\uc2a4\ud2b8\ub9cc \uacb9\uce58\uc9c0 \uc54a\uac8c \uc124\uc815\ud558\uba74 \ud574\uacb0\ub418\ub294 \ubb38\uc81c\uc600\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aae4\">(9) \uacf5\ud1b5 \ubaa8\ub4c8&nbsp;\uccad\ud06c\ud558\uae30<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\uc55e\uc5d0\uc11c entry\ub97c \uba40\ud2f0\ub85c \uc124\uc815\ud558\uc5ec \ud654\uba74 \ubcc4\ub85c \ubc88\ub4e4 \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc54c\uc544\ubd24\ub2e4. \ud558\uc9c0\ub9cc \ub124\ube44\uac8c\uc774\uc158 \ubc14\ub098 \uc0ac\uc6a9\uc790 \uba54\ub274, \uc54c\ub9bc \ub4f1 \ubaa8\ub4e0 \ud654\uba74\uc5d0\uc11c \uacf5\ud1b5\uc73c\ub85c \uc0ac\uc6a9\ub418\ub294 \uae30\ub2a5\uc774\ub098 \uc720\ud2f8\ub9ac\ud2f0 \ubaa8\ub4c8\ub4e4\uc740 \uc5b4\ub5bb\uac8c \ubc88\ub4e4\ub9c1 \ub420\uae4c? \uc6f9\ud329 \uae30\ubc18\uc73c\ub85c \uac1c\ubc1c\ud558\ub294 \uc0ac\ub78c\uc740 \ub204\uad6c\ub098 \uc54c\uace0 \uc788\ub294 splitChunks \uc635\uc158\uc744 \uc0ac\uc6a9\ud558\uba74 \ub418\ub294\ub370, \uc77c\ub2e8 \ub2e4\uc74c \uc124\uc815\uc744 \ubcf4\uc790.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">module.exports = (env) => {\n  const clientPath = path.resolve(__dirname, 'src\/main\/client');\n  ...\n  return {\n    ...\n    optimization: {\n      splitChunks: {\n          cacheGroups: {\n              common: {\n                  test: clientPath + '\/common',\n                  chunks: 'all',\n                  name: 'base\/common'\n              },\n              modules: {\n                  test: clientPath + '\/modules',\n                  chunks: 'all',\n                  name: 'base\/modules'\n              }\n          }\n      },\n      ...\n    }\n  }\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">&lt;\uc6f9\ud329 \uc124\uc815 \ud30c\uc77c 4&gt;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc5ec\uae30\uc11c \uc911\uc694\ud55c \ubd80\ubd84\uc740 cacheGroups \ubaa8\ub4c8\uc758 name \uc124\uc815 \ubd80\ubd84\uc778\ub370, \uc55e\uc5d0\uc11c \uc124\uba85\ud55c output.filename\uc758 [name]\uacfc \uce58\ud658\ub418\uc5b4 output.path \ub514\ub809\ud1a0\ub9ac\uc5d0 \ubc88\ub4e4 \ud30c\uc77c\uc774 \uc0dd\uc131\ub418\ub294 \uac83\uc774\ub2e4. production \ubaa8\ub4dc\uc77c \ub54c, \ubc88\ub4e4\ub9c1 \ub41c \ud30c\uc77c \uacbd\ub85c\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>${project.basedir}\/src\/main\/webapp\/bundles\/base\/common.js<br>${project.basedir}\/src\/main\/webapp\/bundles\/base\/modules.js<\/p><\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2bc1\">(10) \uc774\ubbf8\uc9c0 \ud30c\uc77c&nbsp;\uad00\ub9ac\ud558\uae30<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ubcf4\ud1b5\uc740 \uc2a4\ud504\ub77c\uc774\ud2b8 \uc774\ubbf8\uc9c0\ub97c \uc0ac\uc6a9\ud558\ub294\ub370, \ubd80\ub4dd\uc774\ud558\uac8c \ud2b9\uc815 \uc2a4\ud0c0\uc77c\uc5d0 \ub2e8\uc77c \uc774\ubbf8\uc9c0\ub97c \uc0ac\uc6a9\ud574\uc57c \ud558\ub294 \uacbd\uc6b0\uac00 \uc885\uc885 \ubc1c\uc0dd\ud55c\ub2e4. \uadf8\ub798\uc11c \ud544\uc790\ub294 \uc6f9\ud329\uc73c\ub85c \ubc88\ub4e4\ub9c1 \ud560 \ub54c, development \ubaa8\ub4dc\uc5d0\uc11c\ub294 url-loader\ub97c \uc0ac\uc6a9\ud558\uace0, production \ubaa8\ub4dc\uc5d0\uc11c\ub294 file-loader\ub97c \uc0ac\uc6a9\ud588\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ubbf8\uc9c0\uac00 base64\ub85c \uc778\ucf54\ub529\ub418\uc11c CSS \ud30c\uc77c\uc5d0 \ud3ec\ud568\ub418\uae30 \ub54c\ubb38\uc5d0 \uac1c\ubc1c\ud560 \ub54c\ub294 \ub9e4\uc6b0 \ud3b8\ub9ac\ud558\uc9c0\ub9cc \uc6a9\ub7c9\uc774 \ub9ce\uc774 \ucee4\uc9c0\ub294 \ubb38\uc81c\uac00 \uc788\ub2e4. \uadf8\ub798\uc11c \uac1c\ubc1c\uc774 \uc644\ub8cc\ub418\uba74 file-loader\ub97c \uc0ac\uc6a9\ud558\uae30\ub85c \ud588\ub2e4. \ub2e4\ub9cc \uc5ec\uae30\uc11c \uc8fc\uc758\ud560 \uc810\uc740 \uc774\ubbf8\uc9c0 \ud30c\uc77c\ub4e4\uc740 \ud654\uba74 \ubcc4 \ub514\ub809\ud1a0\ub9ac\uc5d0 \ud3ec\ud568\ub418\uc5b4 \uc788\uc9c0\ub9cc \ubc30\ud3ec \ud560\ub54c\ub294 \ub2e4\ub978 \ud654\uba74\uc758 \uc774\ubbf8\uc9c0 \ud30c\uc77c\uacfc \ud568\uaed8 \ub3d9\uc77c\ud55c \ub514\ub809\ud1a0\ub9ac\uc5d0 \ubcf5\uc0ac\ub41c\ub2e4.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">...\nreturn {\n  ...\n  module: {\n    rules: [].concat([ env == 'production' ?\n        {\n            test: \/\\.(jpe?g|png|gif|svg)$\/i,\n            use: [{\n                loader: 'file-loader',\n                options: {\n                    name: '[hash].[ext]',\n                    outputPath: '\/images',\n                    publicPath: '\/bundles\/images'\n                }\n            }]\n        } : {\n            test: \/\\.(jpe?g|png|gif|svg)$\/i,\n            use: [{\n                loader: 'url-loader',\n                options: {\n                    limit: 1024 * 1024\n                }\n            }]\n        }\n    ])\n  },\n  ...\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\uc774\ubbf8\uc9c0\uac00 \ubcf5\uc0ac\ub418\ub294 \ub514\ub809\ud1a0\ub9ac\ub294 \uc55e\uc5d0\uc11c \uc124\uba85\ud55c output.path\uc5d0 options.outputPath\uac00 \ub354\ud574\uc9c4 \uacbd\ub85c\uc774\ubbc0\ub85c \ub2e4\uc18c \ud5f7\uac08\ub9b4 \uc218\ub3c4 \uc788\uae30 \ub54c\ubb38\uc5d0 \uc8fc\uc758\ud574\uc11c \uc124\uc815\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>${project.basedir}\/src\/main\/webapp\/bundles\/images<\/p><\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">\ubaa8\ub4e0 \ud654\uba74\uc758 \uc774\ubbf8\uc9c0 \ud30c\uc77c\uc774 \ub3d9\uc77c\ud55c \ub514\ub809\ud1a0\ub9ac\uc5d0 \ubcf5\uc0ac\ub418\uae30 \ub54c\ubb38\uc5d0 \ud30c\uc77c\uba85\uc774 \uacb9\uce58\uc9c0 \uc54a\ub3c4\ub85d options.name\uc744 [name] \ub300\uc2e0 [hash]\ub85c \ubcc0\uacbd\ud558\uc600\ub2e4. \uadf8\ub9ac\uace0 options.publicPath\ub97c \/bundles\/images\ub85c \uc124\uc815\ud588\uae30 \ub54c\ubb38\uc5d0 \uc6f9\uc5d0\uc11c\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \uc811\uadfc\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>http:\/\/127.0.0.1:8080\/bundles\/images\/[hash].jpg<\/p><\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"c212\">(11) JavaScript \ud504\ub808\uc784\uc6cc\ud06c&nbsp;\uc120\ud0dd\ud558\uae30<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Vue.js\ub97c \uc120\ud0dd\ud55c \uc774\uc720\ub294 \uc5ec\ub7ec\uac00\uc9c0\uac00 \uc788\ub294\ub370, \uc77c\ub2e8 \ud544\uc790\ub294 \ud15c\ud50c\ub9bf \ubc29\uc2dd\uc744 \uc120\ud638\ud55c\ub2e4. 2.x \ubc84\uc804\ubd80\ud130 render \ud568\uc218\ub97c \uc9c0\uc6d0\ud558\uc9c0\ub9cc \uc774\uac74 \uac1c\uc778 \ucde8\ud5a5\uc774\ub2c8 \uadf8\ub0e5 \ub118\uc5b4\uac00\uace0, \uac00\uc7a5 \ud070 \uc774\uc720\ub294 \uae30\uc874\uc758 \ub808\uac70\uc2dc \ud654\uba74\uacfc \uacf5\uc874\ud574\uc57c \ud558\ub294 \ud2b9\uc218\ud55c \uacbd\uc6b0\ub77c\uc11c \uacbd\ub7c9 \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uc120\ud0dd\ud558\ub294 \uac83\uc774 \uc633\uc740 \ud310\ub2e8\uc774\ub77c\uace0 \uc0dd\uac01\ud588\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">JSP \ud15c\ud50c\ub9bf\uc5d0 \ud3ec\ud568\ub41c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ucf54\ub4dc\ub294 ES6 \ubaa8\ub4c8\ub85c \ub9c8\uc774\uadf8\ub808\uc774\uc158 \ud588\uc9c0\ub9cc \uc5ec\uc804\ud788 \ub9c8\ud06c\uc5c5 \ucf54\ub4dc\ub294 \ub0a8\uc544\uc788\uc5c8\ub2e4. \ud558\uc9c0\ub9cc \uc2f1\uae00 \ud30c\uc77c \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uac70\uc758 \uc218\uc815\ud558\uc9c0 \uc54a\uace0 \uc62e\uae38 \uc218 \uc788\uc5c8\uae30 \ub54c\ubb38\uc5d0 \ub9c8\uc774\uadf8\ub808\uc774\uc158 \uc18d\ub3c4\uac00 \ub9ce\uc774 \ud5a5\uc0c1\ub418\uc5c8\ub2e4. \ucc38\uace0\ub85c \uc81c\ub2c8\ud37c \ud654\uba74\uc740 \uc11c\ubc84\uc5d0\uc11c \ub118\uaca8\uc8fc\ub294 \ud544\uc218 \ub370\uc774\ud130\ub4e4\uc774 \ub9ce\uc544\uc11c JSP \uac19\uc740 \uc11c\ubc84 \ud15c\ud50c\ub9bf\uc744 \uc644\uc804\ud788 \uc81c\uac70\ud560 \uc218\ub294 \uc5c6\uc5c8\ub2e4. \uadf8\ub798\uc11c \ucd5c\uc18c\ud55c\uc758 \ub9c8\ud06c\uc5c5\ub9cc \ub0a8\uaca8\ub450\uace0, \ucd5c\ub300\ud55c \ubdf0 \ucef4\ud3ec\ub10c\ud2b8 \ub2e8\uc704\ub85c \ud654\uba74\uc744 \ubd84\ub9ac\ud574\uc11c \uac1c\ubc1c\ud588\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc5b4\ucc28\ud53c \ud14c\uc2a4\ud2b8\uac00 \uac00\ub2a5\ud55c \ucf54\ub4dc\ub97c \ub9cc\ub4dc\ub294 \uac83\uc774 \ucd5c\uc885 \ubaa9\ud45c\uc774\uae30 \ub54c\ubb38\uc5d0 \ubdf0 \ucef4\ud3ec\ub10c\ud2b8 \ub2e8\uc704\ub85c \ud14c\uc2a4\ud2b8\ub97c \uc9c4\ud589\ud558\uae30\ub85c \uacb0\uc815\ud588\ub2e4. \uadf8\ub9ac\uace0 \ud544\uc790\ub294 Vue.js \ud558\uc704 \ud504\ub85c\uc81d\ud2b8\uc778 \u201c<a href=\"https:\/\/github.com\/vuejs\/vue-test-utils\" rel=\"noreferrer noopener\" target=\"_blank\">vue-test-utils<\/a>\u201d\ub97c \uc544\uc8fc \uc798 \uc0ac\uc6a9\ud558\uace0 \uc788\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"f2f8\">(12) \ubdf0 \ucef4\ud3ec\ub10c\ud2b8\ub85c \ub9c8\uc774\uadf8\ub808\uc774\uc158&nbsp;\ud558\uae30<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\uc81c\ub2c8\ud37c \ud654\uba74\uc5d0\uc11c\ub294 \uc790\uccb4 \uac1c\ubc1c\ud55c \uc218\ub9ce\uc740 \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc744 \uc0ac\uc6a9\ud55c\ub2e4. \ud06c\uac8c \ub300\uc2dc\ubcf4\ub4dc\uc640 \ub9ac\uc5bc\ud0c0\uc784 \ud654\uba74\uc5d0\uc11c \uc0ac\uc6a9\ub418\ub294 \uce94\ubc84\uc2a4 \ucc28\ud2b8\uac00 \uc788\uace0, \ubd84\uc11d\uc774\ub098 \ud1b5\uacc4, \ubcf4\uace0\uc11c \ud15c\ud50c\ub9bf \ud654\uba74\uc5d0\uc11c \uc0ac\uc6a9\ub418\ub294 SVG \ucc28\ud2b8\uac00 \uc788\ub2e4. \uadf8\ub9ac\uace0 \ubaa8\ub4e0 \ud654\uba74\uc5d0\uc11c \uadf8\ub9ac\ub4dc, \ub2ec\ub825, \ucf64\ubcf4\ubc15\uc2a4 \ub4f1\ub4f1 \uc218\ub9ce\uc740 \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc744 \ub450\ub8e8 \uc0ac\uc6a9\ud558\uace0 \uc788\ub2e4. JUI \ub77c\uc774\ube0c\ub7ec\ub9ac\ub294 \uadf8 \uc911\uc5d0\uc11c \uc77c\ubd80\ub97c \uacf5\uac1c\ud55c \uac83\uc774\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub9c9\uc0c1 Vue.js\ub85c \ud654\uba74 \uac1c\ubc1c\uc744 \ud558\ub2e4\ubcf4\ub2c8 ES6 \ubaa8\ub4c8\ub85c \ub9c8\uc774\uadf8\ub808\uc774\uc158 \ub41c \uae30\uc874\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc744 \uc0ac\uc6a9\ud558\uae30\uac00 \uc5b4\ub824\uc6e0\ub2e4. \uc544\ubb34\ub798\ub3c4 \uc81c\ub2c8\ud37c \ud654\uba74\uc740 \ucef4\ud3ec\ub10c\ud2b8 \ube44\uc911\uc774 \ub192\uae30 \ub54c\ubb38\uc5d0 Vue.js\uac00 \uc81c\uacf5\ud558\ub294 \uae30\ub2a5\ub4e4\uc744 \uc81c\ub300\ub85c \ud65c\uc6a9\ud558\uc9c0 \ubabb\ud588\ub2e4. \uadf8\ub798\uc11c \uba3c\uc800 JUI \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \ubdf0 \ucef4\ud3ec\ub10c\ud2b8\ub85c \ub9c8\uc774\uadf8\ub808\uc774\uc158 \ud558\uae30\ub85c \uacb0\uc815\ud588\ub2e4. \ubd88\ud589(?) \uc911 \ub2e4\ud589\uc73c\ub85c \ucc28\ud2b8\ub294 \uba87\ub2ec \uc804\ubd80\ud130 \uc2dc\uc791\ud574\uc11c \uc5b4\ub290 \uc815\ub3c4 \ub9c8\ubb34\ub9ac\uac00 \ub41c \uc0c1\ud0dc\uc600\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">JUI \ub77c\uc774\ube0c\ub7ec\ub9ac\uac00 \uac00\uc9c0\ub294 \uae30\uc874\uc758 \uc0c9\uc740 \ubaa8\ub450 \ubc84\ub9ac\uace0, \ucd5c\ub300\ud55c Vue.js \ud2b9\uc131\uc5d0 \ub9de\uac8c \ub9c8\uc774\uadf8\ub808\uc774\uc158 \ud558\ub824\uace0 \uc2e0\uacbd\uc37c\ub2e4. \uc27d\uc9c0 \uc54a\uc740 \uc77c\uc774\uc5c8\uc9c0\ub9cc \uacb0\uad6d \ucc28\ud2b8(<a href=\"https:\/\/codepen.io\/collection\/nWpqoB\/\" rel=\"noreferrer noopener\" target=\"_blank\">23\uc885<\/a>), \uadf8\ub9ac\ub4dc(<a href=\"https:\/\/codepen.io\/collection\/nWjJdG\/\" rel=\"noreferrer noopener\" target=\"_blank\">2\uc885<\/a>), UI(<a href=\"https:\/\/codepen.io\/collection\/AWjJbN\/\" rel=\"noreferrer noopener\" target=\"_blank\">13\uc885<\/a>)\uc758 \ubdf0 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc81c\uacf5\ud558\uac8c \ub418\uc5c8\uace0, GitHub\uc5d0 \ud504\ub85c\uc81d\ud2b8\ub97c \uacf5\uac1c\ud588\ub2e4. \ud604\uc7ac\ub294 \uc81c\ub2c8\ud37c \ud654\uba74\uc5d0 \uc758\uc874\uc131\uc774 \ub192\uc740 \uc804\uc6a9 \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc744 \ub9c8\uc774\uadf8\ub808\uc774\uc158 \ud558\uace0 \uc788\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"560\" src=\"https:\/\/jennifersoft.com\/ko\/wp-content\/uploads\/sites\/2\/2018\/12\/\uc81c\ub2c8\ud37c-\ubd84\uc11d-\ud654\uba74-1024x560.png\" alt=\"\uc81c\ub2c8\ud37c \ubd84\uc11d \ud654\uba74\" class=\"wp-image-4539\" srcset=\"https:\/\/jennifersoft.com\/ko\/wp-content\/uploads\/sites\/2\/2018\/12\/\uc81c\ub2c8\ud37c-\ubd84\uc11d-\ud654\uba74-1024x560.png 1024w, https:\/\/jennifersoft.com\/ko\/wp-content\/uploads\/sites\/2\/2018\/12\/\uc81c\ub2c8\ud37c-\ubd84\uc11d-\ud654\uba74-300x164.png 300w, https:\/\/jennifersoft.com\/ko\/wp-content\/uploads\/sites\/2\/2018\/12\/\uc81c\ub2c8\ud37c-\ubd84\uc11d-\ud654\uba74.png 2000w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>&lt;\uc81c\ub2c8\ud37c EVENT \ubd84\uc11d&nbsp;\ud654\uba74&gt;<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"81c5\">(13) Jest \uc124\uc815\uc2dc&nbsp;\uc8fc\uc758\uc0ac\ud56d<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\ud14c\uc2a4\ud2b8 \ud504\ub808\uc784\uc6cc\ud06c\ub294 \uc694\uc998 \ub9ce\uc774 \uc0ac\uc6a9\ud558\uace0 \uc788\ub294 Jest\ub97c \uc120\ud0dd\ud588\ub294\ub370, \uae30\ubcf8 \uc124\uc815\uc744 \ud558\ub294 \uacfc\uc815\uc5d0\uc11c \uba87\uc77c\ub3d9\uc548 \uc0bd\uc9c8\ud55c \ubd80\ubd84\ub9cc \uc9e7\ub9c9\ud558\uac8c \uc9da\uace0 \ub118\uc5b4\uac00\ub824\uace0 \ud55c\ub2e4. \ub9cc\uc57d\uc5d0 \ud14c\uc2a4\ud2b8 \ub300\uc0c1 \ubaa8\ub4c8\uc5d0\uc11c NPM\uc73c\ub85c \uc124\uce58\ud55c \ubaa8\ub4c8\uc744 \uc0ac\uc6a9\ud558\uace0 \uc788\ub2e4\uba74 SyntaxError: Unexpected identifier \uc5d0\ub7ec\uac00 \ubc1c\uc0dd\ud55c\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud544\uc790\uac00 \uacf5\uc2dd \ub9e4\ub274\uc5bc\ub9cc \uc81c\ub300\ub85c \uc77d\uc5c8\ub2e4\uba74 \uc27d\uac8c \ud574\uacb0\ud560 \uc218 \uc788\ub294 \uac04\ub2e8\ud55c \ubb38\uc81c\uc600\ub2e4. \uadf8\uac83\uc740 \ubc14\ub85c transformIgnorePatterns \uc635\uc158\uc758 \uae30\ubcf8\uac12\uc774 [\u201c\/node_modules\/\u201d]\ub85c \uc124\uc815\ub418\uc5b4 \uc788\uae30 \ub54c\ubb38\uc774\ub2e4. \uac04\ub2e8\ud558\uac8c \ube48 \ubc30\uc5f4\ub85c \ubcc0\uacbd\ud558\uac70\ub098 \uac01\uc790\uc758 \ud504\ub85c\uc81d\ud2b8\uc5d0 \ub9de\ub294 \ud328\ud134\uc744 \uc124\uc815\ud558\uba74 \ub41c\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2ada\">\uae00\uc744 \ub9c8\uce58\uba70\u2026<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\uacb0\uacfc\ub294 \ub9cc\uc871\uc2a4\ub7ec\uc6e0\uc9c0\ub9cc \uc870\uae08\ub9cc \ub354 \ube68\ub9ac \uc2dc\uc791\ud588\uc73c\uba74 \uc88b\uc558\uc744\ud150\ub370, \ud6c4\ud68c\ub3c4 \uc544\uc26c\uc6c0\ub3c4 \ub9ce\uc774 \ub0a8\ub294 \uc77c\uc774\uc5c8\ub2e4. \uc77c\uc744 \uc9c4\ud589\ud558\uba74\uc11c \ubb38\uc81c\uac00 \uc0dd\uaca8 \uba87\ubc88\uc758 \ud56b\ud53d\uc2a4 \ubc84\uc804\uc744 \ub9b4\ub9ac\uc988 \ud588\uc5c8\ub2e4. \uadf8\ub9cc\ud07c \ub808\uac70\uc2dc \uc2dc\uc2a4\ud15c\uc744 \uc5ce\ub294\ub2e4\ub294\uac74 \uc870\uc2ec\uc2a4\ub7fd\uace0 \uc608\ubbfc\ud55c \uc77c\uc774\ub2e4. \ud558\uc9c0\ub9cc \uc55e\uc73c\ub85c \uba87\ub144\uc744 \uc0dd\uac01\ud558\uba74 \uc5b8\uc820\uac00\ub294 \ud574\uc57c\ub9cc \ud558\ub294 \uc77c\uc774\ub2e4. \ub2a6\uc73c\uba74 \ub2a6\uc744\uc218\ub85d \uc704\ud5d8\ubd80\ub2f4\uc774 \ucee4\uc9c0\uae30 \ub54c\ubb38\uc5d0 \uae30\ud68c\uac00 \uc624\uba74 \ubc14\ub85c \uc2dc\uc791\ud574\uc57c \ud55c\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"\ud544\uc790\uc758 \uc62c\ud574 \ubaa9\ud45c \uc911 \ud558\ub098\ub294 \uc624\ub79c\uae30\uac04 \uc870\uae08\uc529 \uc9c4\ud589\ud574\uc654\ub358 \uc81c\ub2c8\ud37c \ubdf0\uc11c\ubc84 \ud50c\ub7ab\ud3fc\ud654\ub97c \ub9c8\ubb34\ub9ac\ud558\ub294 \uac83\uc774\uc5c8\ub2e4. \uae30\ud68d\ud588\ub358 \ud50c\ub7ab\ud3fc \uc694\uc18c\ub294 \uc5ec\ub7ec\uac00\uc9c0\uac00 \uc788\uc9c0\ub9cc \uadf8 \uc911\uc5d0\uc11c\ub3c4&#8230;","protected":false},"author":11,"featured_media":5629,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[204],"tags":[49,161,163,55,160,162],"class_list":["post-4499","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech","tag-apm","tag-161","tag-163","tag-55","tag-160","tag-162"],"acf":[],"_links":{"self":[{"href":"https:\/\/jennifersoft.com\/ko\/wp-json\/wp\/v2\/posts\/4499","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jennifersoft.com\/ko\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jennifersoft.com\/ko\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jennifersoft.com\/ko\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/jennifersoft.com\/ko\/wp-json\/wp\/v2\/comments?post=4499"}],"version-history":[{"count":49,"href":"https:\/\/jennifersoft.com\/ko\/wp-json\/wp\/v2\/posts\/4499\/revisions"}],"predecessor-version":[{"id":5631,"href":"https:\/\/jennifersoft.com\/ko\/wp-json\/wp\/v2\/posts\/4499\/revisions\/5631"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jennifersoft.com\/ko\/wp-json\/wp\/v2\/media\/5629"}],"wp:attachment":[{"href":"https:\/\/jennifersoft.com\/ko\/wp-json\/wp\/v2\/media?parent=4499"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jennifersoft.com\/ko\/wp-json\/wp\/v2\/categories?post=4499"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jennifersoft.com\/ko\/wp-json\/wp\/v2\/tags?post=4499"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}