{"id":1121,"date":"2019-12-31T19:36:59","date_gmt":"2019-12-31T10:36:59","guid":{"rendered":"https:\/\/amati.io\/?p=1121"},"modified":"2019-12-31T19:36:59","modified_gmt":"2019-12-31T10:36:59","slug":"my-2019-frontend-trends","status":"publish","type":"post","link":"https:\/\/blog.neue.nz\/?p=1121","title":{"rendered":"\ub0b4\ub9d8\ub300\ub85c \ub3cc\uc544\ubcf4\ub294 2019 Frontend \ud2b8\ub80c\ub4dc"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\uc624\ub7ab\ub3d9\uc548 \ud504\ub860\ud2b8\uc5d4\ub4dc \ucabd\uc758 \uc77c\uc744 \ud574\uc654\uc9c0\ub9cc, \uc774 \ubd84\uc57c\ub294 \uc0c8\ub85c\uc6b4 \uac83\ub4e4\uc774 \ub4f1\uc7a5\ud558\ub294 \uc18d\ub3c4\uac00 \uc815\ub9d0 \ube60\ub984\uc744 \ub290\ub07c\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc5b4\ub290\ub367 \ud55c\ud574\ub97c \uc815\ub9ac\ud558\uace0 \ub2e4\uc74c \ud574\ub97c \uc900\ube44\ud558\ub294 \uc5f0\ub9d0\uc774 \uc654\ub294\ub370\uc694, \ub098\ub984\ub300\ub85c 2019\ub144\uc5d0 \ud504\ub860\ud2b8\uc5d4\ub4dc \ubd84\uc57c\uc5d0\uc11c \ud654\uc81c\uac00 \ub418\uc5c8\ub358 \uac83\ub4e4\uc744 \ub3cc\uc544\ubcf4\uace0, \uad00\uc2ec\uc788\ub294 \ubd84\uc57c\uc640 \uacf5\ubd80\ud574\uc57c \ud560 \uac83\ub4e4\uc744 \uac1c\uc778\uc801\uc73c\ub85c \uc815\ub9ac\ud574\ubd24\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc790\uc138\ud55c \uc124\uba85\uc740 \uad6c\uae00\ub9c1\uc73c\ub85c \ud6e8\uc52c \uc88b\uc740 \uc790\ub8cc\ub97c \ucc3e\uc744 \uc218 \uc788\uae30 \ub54c\ubb38\uc5d0 \uc774\ub860 \uc124\uba85\ubcf4\ub2e4\ub294 \uac1c\uc778\uc801\uc778 \uc758\uacac\uc744 \uc880 \ub354 \ub2f4\uc544\ubd24\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud568\uc218\ud615 \ud504\ub85c\uadf8\ub798\ubc0d<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\ud604\uc7ac\uc758 \ud504\ub85c\uadf8\ub798\ubc0d \ud328\ub7ec\ub2e4\uc784\uc740 \uc808\ucc28\ud615\uc5d0\uc11c \uac1d\uccb4\uc9c0\ud5a5\ud615, \uac1d\uccb4\uc9c0\ud5a5\ud615\uc5d0\uc11c \ud568\uc218\ud615\uc73c\ub85c \uc774\ub3d9\ud558\uace0 \uc788\ub294\ub370\uc694, \uc62c\ud574\uc5d4 \uc720\ub09c\ud788 \ud568\uc218\ud615 \ud504\ub85c\uadf8\ub798\ubc0d (Functional Programming, FP) \ub3c4\uc785\uc5d0 \ub300\ud55c \ub17c\uc758\uac00 \ub9ce\uc558\ub358 \uac83 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud568\uc218\ud615 \ud504\ub85c\uadf8\ub798\ubc0d\uc740 \uae30\uc874\uc758 \uc808\ucc28\ud615 \/ \uac1d\uccb4\uc9c0\ud5a5\ud615 \ud504\ub85c\uadf8\ub798\ubc0d\uacfc \ub2e4\ub978 \uc0ac\uace0\ubc29\uc2dd\uc73c\ub85c \ubb38\uc81c\ub97c \ud574\uacb0\ud569\ub2c8\ub2e4. \uac04\ub2e8\ud558\uac8c \uc815\ub9ac\ud558\uc790\uba74 \uc5b4\ub5a4 \ubb38\uc81c\ub97c \ud574\uacb0\ud560 \ub54c \ud574\uacb0\uc5d0 \ud544\uc694\ud55c \ub3d9\uc791\uc744 \uc544\uc8fc \uc791\uc740 \ub2e8\uc704\uae4c\uc9c0 \ub098\ub208 \ud6c4 \uc21c\uc218 \ud568\uc218(Pure function)\ub85c \ub9cc\ub4e4\uace0 \uc774\ub97c \uc870\ud569\ud558\uc5ec \ud574\uacb0\ud558\ub294 \ubc29\uc2dd\uc785\ub2c8\ub2e4. \ub610\ud55c \uc21c\uc218 \ud568\uc218\ub294 \uacf5\uc720 \uc0c1\ud0dc, \ub370\uc774\ud130\uc758 \ubcc0\uacbd, \ubd80\uc791\uc6a9\uc744 \ucd5c\uc18c\ud654\ud558\uac70\ub098 \uc81c\uac70\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table><thead><tr><th>\uac1d\uccb4\uc9c0\ud5a5\ud615 \ud504\ub85c\uadf8\ub798\ubc0d<\/th><th>\ud568\uc218\ud615 \ud504\ub85c\uadf8\ub798\ubc0d<\/th><\/tr><\/thead><tbody><tr><td>\uc5b4\ub5a4 \ubc29\ubc95\uc73c\ub85c \ud574\uc57c\ud558\ub294\uac00? (How)<\/td><td>\ubb34\uc5c7\uc744 \ud560 \uac83\uc778\uac00? (What)<\/td><\/tr><tr><td>\uba85\ub839\uc758 \uc218\ud589<\/td><td>\ud568\uc218\uc758 \uc870\ud569<\/td><\/tr><tr><td>\uc54c\uace0\ub9ac\uc998\uc744 \uba85\uc2dc\ud558\uace0 \ubaa9\ud45c\ub97c \uba85\uc2dc\ud558\uc9c0 \uc54a\uc74c<\/td><td>\ubaa9\ud45c\ub97c \uba85\uc2dc\ud558\uace0 \uc54c\uace0\ub9ac\uc998\uc744 \uba85\uc2dc\ud558\uc9c0 \uc54a\uc74c<\/td><\/tr><tr><td>\ub3d9\uc791\ud558\ub294 \ubd80\ubd84\uc744 \ucea1\uc290\ud654\ud558\uc5ec \uc774\ud574\ud560\uc218 \uc788\uc74c<\/td><td>\ub3d9\uc791\ud558\ub294 \ubd80\ubd84\uc744 \ucd5c\uc18c\ud654\ud558\uc5ec \uc774\ud574\ud560 \uc218 \uc788\uc74c<\/td><\/tr><tr><td>\ucd94\uc0c1\ud654, \ucea1\uc290\ud654, \uc0c1\uc18d, \ub2e4\ud615\uc131<\/td><td>1\uae09 \uac1d\uccb4, \uc21c\uc218\ud568\uc218, \uace0\ucc28\ud568\uc218, \ubd88\ubcc0\uc131, \ud569\uc131<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\ub2e4\ub9cc \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub294 \ud568\uc218\ud615 \ud504\ub85c\uadf8\ub798\ubc0d\uc5d0 \uc801\ud569\ud558\uc9c0 \uc54a\ub2e4\ub294 \uac83\ub3c4 \uc798 \uc54c\ub824\uc838 \uc788\ub294\ub370\uc694,<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\ud568\uc218\ud615 \ud504\ub85c\uadf8\ub798\ubc0d\uc5d0\uc11c\ub294 \uc785\ucd9c\ub825\uc774 \uc644\ubcbd\ud788 \uc81c\ud55c\ub41c \uc21c\uc218 \ud568\uc218\uac00 \ud544\uc218\uc774\uc9c0\ub9cc, \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub294 \uc5b4\ub5a4 \ud568\uc218\ub77c\ub3c4 <code>this<\/code> \ub54c\ubb38\uc5d0 \uc774\ubbf8 \uc678\ubd80 \uc785\ub825\uc774 \ub4e4\uc5b4\uac00\uac8c \ub429\ub2c8\ub2e4.<\/li><li>\uac12\uc758 \ubd88\ubcc0\uc131(immutable) \uc5ed\uc2dc \ubcf4\uc7a5\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4. <code>let<\/code>\uacfc <code>var<\/code> \ubb38\ubc95\uc740 \ub9d0\uadf8\ub300\ub85c &#8220;\ubcc0\uc218&#8221;\uc774\uae30 \ub54c\ubb38\uc5d0 \ubd88\ubcc0\uc131\uc744 \ubd80\uc5ec\ud560 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4. <code>const<\/code> \uc5ed\uc2dc \uac1d\uccb4\uac00 \ud560\ub2f9\ub418\uba74 \ubcc0\uacbd\uc774 \uac00\ub2a5\ud558\uae30 \ub54c\ubb38\uc5d0 \ubd88\ubcc0\uc131\uacfc\ub294 \uad00\ub828\uc774 \uc5c6\uc2b5\ub2c8\ub2e4. <code>Object.freeze()<\/code> \ub97c \uc0ac\uc6a9\ud574\ub3c4 \uc644\ubcbd\ud55c immutable \uac1d\uccb4\ub97c \ub9cc\ub4dc\ub294 \uac83\uc740 \ubd88\uac00\ub2a5\ud569\ub2c8\ub2e4.<\/li><li>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \uac1d\uccb4\ub294 call by reference (\uc815\ud655\ud788\ub294 <a rel=\"noreferrer noopener\" aria-label=\"call by sharing (opens in a new tab)\" href=\"https:\/\/www.google.com\/search?q=call+by+sharing+javascript\" target=\"_blank\">call by sharing<\/a>) \ud2b9\uc131\uc774 \uc788\uae30 \ub54c\ubb38\uc5d0 \uc774 \uc5ed\uc2dc \ubd88\ubcc0\uc131\uacfc \uc5b4\uae0b\ub098\uac8c \ub429\ub2c8\ub2e4.<\/li><li>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \ubcc0\uc218\ub294 \ub3d9\uc801 \ud0c0\uc774\ud551\uc774\uae30 \ub54c\ubb38\uc5d0 \ud30c\ub77c\uba54\ud130\uc758 \ud0c0\uc785\uc5d0 \ub530\ub77c \ud568\uc218\uc758 \uacb0\uacfc\uac00 \ub2ec\ub77c\uc9c0\ub294 \uac83\ub3c4 \ubb38\uc81c\uc785\ub2c8\ub2e4. \uac19\uc740 \ud568\uc218\ub77c\ub3c4 \ubcc0\uc218\uc5d0 \ub530\ub77c 3, &#8220;12&#8221;\ub97c \ucd9c\ub825\ud560 \uc218 \uc788\ub2e4\ub294 \uac83\uc740 \ud568\uc218\ud615 \ud504\ub85c\uadf8\ub798\ubc0d\uc5d0 \uc788\uc5b4\uc11c \ubc29\ud574\uac00 \ub418\ub294 \uc694\uc18c\uc785\ub2c8\ub2e4.<\/li><li>\ud568\uc218\ud615 \ud504\ub85c\uadf8\ub798\ubc0d\uc744 \ub3c4\uc785\ud574\uc11c \uc5bb\uc744 \uc218 \uc788\ub294 \uc7a5\uc810\uc740 \ubcd1\ub82c \ucef4\ud4e8\ud305, \uc989 \uc694\uc998 CPU\uc758 \ucd94\uc138\uc5d0 \ub9de\ub294 \uba40\ud2f0\ucf54\uc5b4 \ud504\ub85c\uadf8\ub798\ubc0d\uc5d0 \uc720\ub9ac\ud558\ub2e4\ub294 \uac83\uc778\ub370, \uc194\uc9c1\ud788 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0 \uc801\uc6a9\ud558\uae30\uc5d4 \uc880 \uc560\ub9e4\ud569\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\uc704\uc640 \uac19\uc740 \uc774\uc720\ub85c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \ud2b9\uc9d5\uacfc \ub9de\uc9c0 \uc54a\ub294 \ud504\ub85c\uadf8\ub798\ubc0d \ud328\ub7ec\ub2e4\uc784\uc744 \ub3c4\uc785\ud558\ub294 \uac83\uc5d0\ub294 \ubd80\uc815\uc801\uc774\uc9c0\ub9cc, \ud568\uc218\ud615 \ud504\ub85c\uadf8\ub798\ubc0d \uc790\uccb4\uac00 \uc88b\uc740 \ubc29\uc2dd\uc784\uc5d0\ub294 \ub3d9\uc758\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc5b4\ub835\uc9c0\ub9cc \uc775\uc219\ud574\uc9c4\ub2e4\uba74 \ubb38\uc81c \ud574\uacb0\uc5d0 \uc544\uc8fc \uc720\uc5f0\ud558\uac8c \ub300\ucc98\ud560 \uc218 \uc788\ub294 \uc88b\uc740 \ubc29\uc2dd\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub610\ud55c, \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc790\uccb4\uac00 \uc5b4\ub5a4 \ud328\ub7ec\ub2e4\uc784\uc774\ub4e0 \uc218\uc6a9\ud560 \uc218 \uc788\ub294 \uc720\uc5f0\ud55c \uc5b8\uc5b4\uc785\ub2c8\ub2e4. ES6\uc5d0\uc11c \uac1d\uccb4\uc9c0\ud5a5 \ud504\ub85c\uadf8\ub798\ubc0d\uc744 \uc704\ud574 <code>Class<\/code>\uac00 \ucd94\uac00\ub418\uc5c8\ub4ef, \ud568\uc218\ud615 \ud504\ub85c\uadf8\ub798\ubc0d\uc5d0 \uc801\ud569\ud55c \ubb38\ubc95\ub3c4 \ucd94\uac00\ub418\uace0 \uc788\uc2b5\ub2c8\ub2e4. (\ub300\ud45c\uc801\uc73c\ub85c array\uc758 <code>map<\/code>, <code>filter<\/code>, <code>reduce<\/code> \ub4f1) \uadf8\ub9ac\uace0 \ud568\uc218\ud615 \ud504\ub85c\uadf8\ub798\ubc0d\uc744 \uc9c0\uc6d0\ud558\ub294 Ramda.js \ub77c\ub358\uac00 Lodash FP\ub3c4 \uc774\ubbf8 \ub098\uc640\uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud604\uc7ac\ub294&#8230; \ud568\uc218\ud615 \ud328\ub7ec\ub2e4\uc784\uc744 \ub118\uc5b4 \ubc18\uc751\ud615(ex. RxJS), \ud568\uc218\ud615 \ubc18\uc751\ud615(\uc751?) \uc73c\ub85c \ub118\uc5b4\uac00\uace0 \uc788\ub294 \uc911\uc774\ub77c\uace0 \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"># <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/github.com\/Functional-JavaScript\/FunctionalES\" target=\"_blank\">https:\/\/github.com\/Functional-JavaScript\/FunctionalES<\/a><br># <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/velog.io\/@kyusung\/%ED%95%A8%EC%88%98%ED%98%95-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-%EC%9A%94%EC%95%BD\" target=\"_blank\">https:\/\/velog.io\/@kyusung\/%ED%95%A8%EC%88%98%ED%98%95-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-%EC%9A%94%EC%95%BD<\/a><br># <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/codeburst.io\/functional-programming-in-javascript-e57e7e28c0e5\" target=\"_blank\">https:\/\/codeburst.io\/functional-programming-in-javascript-e57e7e28c0e5<\/a><br># <a href=\"https:\/\/medium.com\/javascript-scene\/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a0\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">https:\/\/medium.com\/javascript-scene\/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a0<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">React\uc640 Vue, Angular\uc758 \ud504\ub808\uc784\uc6cc\ud06c \uc804\uc7c1<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">frontend\ub97c \uc704\ud55c \uc5b8\uc5b4\ub85c css, html, javascript \ub294 \ub2f9\uc5f0\ud55c \uc120\ud0dd\uc785\ub2c8\ub2e4. \ud558\uc9c0\ub9cc, \uc694\uc998\uc5d0\ub294 \uadf8\uac83 \uc678\uc5d0\ub3c4 \ud504\ub85c\uc81d\ud2b8 \/ \ud504\ub85c\ub355\ud2b8\uc758 \uc131\uaca9\uc5d0 \ub530\ub77c \uc5b4\ub5a4 \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uc0ac\uc6a9\ud560\uc9c0 <s>\ub300\ubd80\ubd84 react\uaca0\uc9c0\ub9cc<\/s>, \uc800\uc7a5\uc18c \ud328\ud134\uc744 \uc0ac\uc6a9\ud560 \uacbd\uc6b0 \uc5b4\ub5a4 \uc0c1\ud0dc\uad00\ub9ac \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud560\uc9c0 <s>\ub300\ubd80\ubd84 redux\uaca0\uc9c0\ub9cc<\/s>, \ud544\uc694\ud55c \uae30\ub2a5\uc5d0 \ub530\ub77c node.js, babel, css pre-processor, \ud14c\uc2a4\ud2b8 \ub3c4\uad6c, \ube4c\ub4dc \ub3c4\uad6c <s>\ub300\ubd80\ubd84 webpack\uc774\uaca0\uc9c0\ub9cc<\/s> \ub4f1\uc744 \uc120\ud0dd\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ucd5c\uadfc\uc5d0\ub294 \uc5b4\uc9c0\uac04\ud55c \uc18c\uaddc\ubaa8 \ud504\ub85c\uc81d\ud2b8, \uc720\ud2f8\ub9ac\ud2f0\uac00 \uc544\ub2c8\ub77c\uba74 \uc21c\uc218\ud55c es6 vanilla\ub85c \uc9c4\ud589\ub418\ub294 \uacbd\uc6b0\ub294 \uc5c6\ub2e4\ubcf4\ub2c8, \uacb0\uad6d \ud504\ub808\uc784\uc6cc\ud06c \uc120\ud0dd\uc774 \uac00\uc7a5 \uba3c\uc800 \uc120\ud589\ub418\uc5b4\uc57c \ud560 \uc5c5\ubb34\uc774\uae30\ub3c4 \ud558\uc8e0.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2019\ub144\ub3c4 \ud2b9\ubcc4\ud55c \uc774\ubcc0 \uc5c6\uc774 React, Vue, Angular \uc758 \ud504\ub808\uc784\uc6cc\ud06c 3\ub300\uc7a5\uc774 \ud604\uc5c5\uc744 \ub9ac\ub4dc\ud558\uace0 \uc788\ub294 \uac83 \uac19\uc2b5\ub2c8\ub2e4. <a rel=\"noreferrer noopener\" aria-label=\"React hooks (opens in a new tab)\" href=\"https:\/\/www.google.com\/search?q=react+hooks\" target=\"_blank\">React hooks<\/a> \ub54c\ubb38 \ub9cc\uc740 \uc544\ub2c8\uaca0\uc9c0\ub9cc, \uc5ed\uc2dc React\ub294 \ubd80\ub3d9\uc758 1\uc704\ub97c \uc720\uc9c0\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. 2020\ub144\uc5d4 \uc5b4\ub5bb\uac8c \ub420\uc9c0\ub294 \ubaa8\ub974\uaca0\uc9c0\ub9cc, \ud504\ub85c\uc81d\ud2b8\uc758 \ud2b9\uc131\uacfc \uc2a4\ud399\uc5d0 \ub530\ub77c\uc11c \ud504\ub808\uc784\uc6cc\ud06c\ub97c \uc2e0\uc911\ud558\uac8c \uc120\ud0dd\ud560 \ud544\uc694\uac00 \uc788\ub2e4\uace0 \uc0dd\uac01\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/amati.io\/wp-content\/uploads\/2019\/12\/framework-trend.png?fit=620%2C259&amp;ssl=1\" alt=\"\" class=\"wp-image-1131\"\/><figcaption><a href=\"https:\/\/www.npmtrends.com\/angular-vs-react-vs-vue\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">https:\/\/www.npmtrends.com\/angular-vs-react-vs-vue<\/a><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\uc5ec\ub2f4\uc774\uc9c0\ub9cc, 12\uc6d4 \ub9d0\uc774 \ub418\uba74 npm trends\uc758 \uadf8\ub798\ud504\uac00 \uae09\uaca9\ud788 \uaebe\uc774\ub294\ub370 \uc544\ub9c8\ub3c4 \uc5f0\ub9d0\uc5d0 \ub9ce\uc774 \ub180\uc544\uc11c \uadf8\ub7f0 \uac83 \uac19\uc2b5\ub2c8\ub2e4. \u314b\u314b\u314b<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"># <a rel=\"noreferrer noopener\" aria-label=\"Thinking in React (opens in a new tab)\" href=\"https:\/\/reactjs.org\/docs\/thinking-in-react.html\" target=\"_blank\">Thinking in React<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">css-in-js<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\ud604\uc7ac\uc758 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c \ud2b8\ub80c\ub4dc\ub294 \ube60\ub974\uac8c \ubcc0\ud654\ud558\uace0 \uc788\uc9c0\ub9cc, CSS\uc758 \uac1c\ubc1c \ubc29\uc2dd\uc740 \uc774\uc804\uacfc \ub2e4\ub97c\ubc14 \uc5c6\uc774 \uacc4\uc18d \uc815\uccb4\ub418\uc5b4 \uc788\ub294 \uc0c1\ud669\uc785\ub2c8\ub2e4. \ubaa8\ub4e0 \uc2a4\ud0c0\uc77c\uc744 \ud558\ub098\uc758 CSS\ud30c\uc77c\uc5d0 \ub123\uc5b4 \uad00\ub9ac\ud558\ub294 \uc804\ud1b5\uc801\uc778 \ubc29\uc2dd\uc774 \uac00\uc7a5 \ub9ce\uc774 \uc0ac\uc6a9\ub418\uace0 \uc788\uc8e0.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud558\uc9c0\ub9cc \ud504\ub860\ud2b8\uc5d4\ub4dc\uc5d0 \uc694\uad6c\ub418\ub294 \uc2a4\ud399\uc774 \ubcf5\uc7a1\ud558\uace0 \ubc29\ub300\ud574\uc9c4 \ub9cc\ud07c, \uae30\uc874 \ubc29\uc2dd\ub9cc\uc73c\ub85c\ub294 CSS\uc758 \uac1c\ubc1c\uacfc \uad00\ub9ac\uac00 \uc5b4\ub824\uc6cc\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4. \ud2b9\ud788 \uc720\uc9c0\ubcf4\uc218\uac00 \ud798\ub4e4\uc5b4\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc8fc\uc758\ub97c \uae30\uc6b8\uc774\uc9c0 \uc54a\uc73c\uba74 \uc0ac\uc6a9\ub418\uc9c0 \uc54a\ub294 \ucf54\ub4dc\uac00 \uacc4\uc18d \ub0a8\ub294 \uc77c\ub3c4 \ud5c8\ub2e4\ud569\ub2c8\ub2e4. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud504\ub808\uc784\uc6cc\ud06c \uae30\ubc18\uc73c\ub85c \uac1c\ubc1c\ud55c\ub2e4\uba74, css-in-js \uac1c\ubc1c \ubc29\uc2dd\uc744 \ud568\uaed8 \ub3c4\uc785\ud558\ub294 \uac83\ub3c4 \uace0\ub824\ud560 \ub9cc \ud569\ub2c8\ub2e4. \ud604\uc7ac\ub294 <a rel=\"noreferrer noopener\" aria-label=\"styled-components (opens in a new tab)\" href=\"https:\/\/www.styled-components.com\/\" target=\"_blank\">styled-components<\/a>\uac00 \ub9ce\uc740 \uc778\uae30\ub97c \uc5bb\uace0 \uc788\ub294\ub370, css\ub97c \uac1c\ubc1c\ud574\ubd24\ub2e4\uba74 \ud56d\uc0c1 \ud588\ub358 \uace0\ubbfc\uc744 \ud574\uacb0\ud574\uc8fc\ub294 \uc88b\uc740 \uc194\ub8e8\uc158\uc774\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4. \ud2b9\ud788 \ub2e4\ub978 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc5d0 \ube44\ud574 CSS\ubb38\ubc95\uc744 \uac70\uc758 \uadf8\ub300\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4\ub294 \uc7a5\uc810\ub3c4 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>CSS\ub97c \ucef4\ud3ec\ub10c\ud2b8 \ub2e8\uc704\ub85c \ubd84\ub9ac\ud560 \uc218 \uc788\uc73c\uba70, \uc720\uc9c0\ubcf4\uc218\uc5d0 \uc720\ub9ac\ud569\ub2c8\ub2e4.<\/li><li>CSS\ud30c\uc77c\uc740 \ud56d\uc0c1 \uc804\uc5ed scope\ub85c \ub3d9\uc791\ud558\uae30 \ub54c\ubb38\uc5d0 naming\uc774 \ub9e4\uc6b0 \uc911\uc694\ud558\uc9c0\ub9cc, css-in-js\uc5d0\uc11c\ub294 \uadf8\ub7f4 \ud544\uc694\uac00 \uc5c6\uc73c\uba70 naming\uc73c\ub85c \uace0\ubbfc\ud558\uc9c0 \uc54a\uc544\ub3c4 \ub429\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/i1.wp.com\/amati.io\/wp-content\/uploads\/2019\/12\/css-in-js-trend-1.png?fit=620%2C259&amp;ssl=1\" alt=\"\" class=\"wp-image-1132\"\/><figcaption><a href=\"https:\/\/www.npmtrends.com\/emotion-vs-jss-vs-styled-components\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">https:\/\/www.npmtrends.com\/emotion-vs-jss-vs-styled-components<\/a><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\ub2e4\ub9cc \ub2e8\uc810\ub3c4 \uc788\uc2b5\ub2c8\ub2e4. \ud604\uc7ac\ub294 css, js\uc758 \uac1c\ubc1c\uc790\uac00 \ub2ec\ub77c\uc11c \uac1c\ubc1c \uc601\uc5ed\uc774 \ubd84\ub9ac\ub418\uace0 \ud611\uc5c5\uc774 \ud544\uc694\ud55c \uacbd\uc6b0\uac00 \ub9ce\uc740\ub370 (\ud300\uc6d0\uc774\ub4e0 \ud300\uc774\ub4e0 \ud68c\uc0ac\ub4e0) \ud611\uc5c5\uc5d0\ub294 \ubd88\ub9ac\ud55c \ubc29\uc2dd\uc774\ub77c\ub294 \uc810\uc774 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub9ac\uace0 \uae30\uc874\uc758 CSS\ub97c \uc644\ubcbd\ud558\uac8c \ub300\uccb4\ud560 \uc218 \uc5c6\ub2e4\ub294 \uc810(\ub300\ud45c\uc801\uc73c\ub85c css sprite)\ub3c4 \ubb38\uc81c\uc600\uc2b5\ub2c8\ub2e4. \ud30c\uc77c \ud06c\uae30 \uba74\uc5d0\uc11c\ub3c4 \uc774\uc804\ucc98\ub7fc CSS\ud30c\uc77c\ub85c \ubd84\ub9ac\ud558\uc5ec \uad00\ub9ac\ud558\ub294 \uac83\uc774 \uc544\uc9c1\uc740 \uac00\uc7a5 \ud6a8\uc728\uc801\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud655\uc2e4\ud788 js\ubcf4\ub2e4\ub294 html, css\ub97c \ub354 \uc624\ub798 \uac1c\ubc1c\ud574\uc654\ub358 \uc785\uc7a5\uc73c\ub85c\uc11c \uc544\uc9c1\uc740 \ubc1c\uc804 \uc5ec\uc9c0\uac00 \uc880 \uc788\ub294 \ubd84\uc57c\ub77c\uace0 \uc0dd\uac01\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">TypeScript<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">TypeScript\ub294 \ub9c8\uc774\ud06c\ub85c\uc18c\ud504\ud2b8\uc5d0\uc11c \uac1c\ubc1c\ud55c \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 superset(\uc0c1\uc704 \ud655\uc7a5)\uc785\ub2c8\ub2e4. \uc989 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0 \uc815\uc801 \ud0c0\uc774\ud551\uc744 \ucd94\uac00\ud55c \uac83\uc785\ub2c8\ub2e4. \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uac1c\ubc1c \uc911 \ubc84\uadf8\ub294 \uc0ac\uc2e4 \ub3d9\uc801 \ud0c0\uc774\ud551 \ub54c\ubb38\uc5d0 \ubc1c\uc0dd\ud558\ub294 \uac83\uc774 \ub9ce\uae30 \ub54c\ubb38\uc5d0 TypeScript\uc758 \ub3c4\uc785 \ub9cc\uc73c\ub85c \uac1c\ubc1c\uc911 \ubc84\uadf8\ub97c \ub9ce\uc774 \uc7a1\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud504\ub85c\uc81d\ud2b8\uac00 \ub300\uaddc\ubaa8\uc774\uace0 \uc7a5\uae30\uac04 \uc720\uc9c0\ubcf4\uc218\ud574\uc57c \ud560 \uacbd\uc6b0 \ub354\uc6b1 \ud070 \uc7a5\uc810\uc774 \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/amati.io\/wp-content\/uploads\/2019\/12\/typescript-ex.png?fit=620%2C243&amp;ssl=1\" alt=\"\" class=\"wp-image-1140\"\/><figcaption>from <a href=\"https:\/\/www.typescriptlang.org\/docs\/handbook\/typescript-in-5-minutes.html\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">https:\/\/www.typescriptlang.org\/docs\/handbook\/typescript-in-5-minutes.html<\/a><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\uc544\uc774\ub7ec\ub2c8\uceec\ud55c \uc77c\uc774\uc9c0\ub9cc, \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \ub3d9\uc801 \ud0c0\uc774\ud551\uc740 \ub2e4\ub978 \uc5b8\uc5b4 \uac1c\ubc1c\uc790\ub4e4\uc774 \uc774\ud574\ud558\uc9c0 \ubabb\ud558\ub294 \ucd5c\ub300\uc758 \uc7a5\uc560\ubb3c\uc778\ub370 TypeScript\ub85c \uc778\ud574 \uc880\ub354 \uc811\uadfc\uc774 \uc26c\uc6cc\uc84c\ub2e4\uace0 \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Typescript\uc640 \ube44\uc2b7\ud55c \uc815\uc801 \ud0c0\uc774\ud551\uc744 \uc9c0\uc6d0\ud558\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c \ud398\uc774\uc2a4\ubd81\uc758 Flow\uac00 \uc788\uc9c0\ub9cc, \uc0ac\uc2e4\uc0c1 Typescript\uc758 \uc2b9\ub9ac(?)\ub77c\uace0 \ud45c\ud604\ud560 \uc218 \uc788\uc744 \uac83 \uac19\uc2b5\ub2c8\ub2e4. 2019\ub144 12\uc6d4 \uae30\uc900 \ucd5c\uc2e0 \ubc84\uc804\uc740 <a rel=\"noreferrer noopener\" aria-label=\"3.7 (opens in a new tab)\" href=\"https:\/\/devblogs.microsoft.com\/typescript\/announcing-typescript-3-7\/\" target=\"_blank\">3.7<\/a>\uc778\ub370, optional chaning, nullish coalescing operator\uc758 \uc9c0\uc6d0\uc774 \uc2dc\uc791\ub418\uba74\uc11c \ud55c\ubc88 \ub354 \ud654\uc81c\uac00 \ub418\uae30\ub3c4 \ud588\uc8e0.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/amati.io\/wp-content\/uploads\/2019\/12\/typescript-vs-flow.png?fit=620%2C259&amp;ssl=1\" alt=\"\" class=\"wp-image-1129\"\/><figcaption><a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/www.npmtrends.com\/typescript-vs-flow-bin\" target=\"_blank\">https:\/\/www.npmtrends.com\/typescript-vs-flow-bin<\/a><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"># <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/www.typescriptlang.org\/\" target=\"_blank\">https:\/\/www.typescriptlang.org\/<\/a><br># <a href=\"https:\/\/ahnheejong.gitbook.io\/ts-for-jsdev\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">https:\/\/ahnheejong.gitbook.io\/ts-for-jsdev\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">TC39\uc758 \ud65c\uc57d<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \ucd5c\uadfc \ud2b8\ub80c\ub4dc\uc5d0 \uad00\uc2ec\uc774 \uc788\ub2e4\uba74 optional chaning, nullish coalescing operator\uc5d0 \ub300\ud574\uc11c \ub9ce\uc774 \ub4e4\uc5b4\ubd24\uc744 \uac81\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\ub294 \uc8fc\ub85c &#8220;\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8&#8221;\ub77c\uace0 \ubd88\ub9ac\uae30\ub294 \ud558\uc9c0\ub9cc, \uc0ac\uc2e4 ECMA script (ECMA-262)\uac00 \uc815\uc2dd \uba85\uce6d\uc778 \uac83\uc740 \ub2e4\ub4e4 \uc544\ub294 \uc0ac\uc2e4\uc778\ub370\uc694, \uc774 \ud45c\uc900\uc758 \uba85\uc138\ub97c \uad00\ub9ac\ud558\ub294 \ub2e8\uccb4\uac00 TC39 \uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/blog.neue.nz\/wp-content\/uploads\/2019\/12\/1725583.png\" alt=\"\" class=\"wp-image-1142\"\/><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">github repository\ub85c\ub9cc \uc6b4\uc601\ud558\ub2e4\uac00 \uc62c\ud574\uc5d0 <a href=\"https:\/\/tc39.es\/\">https:\/\/tc39.es\/<\/a> \ub77c\ub294 \uc8fc\uc18c\ub85c \uacf5\uc2dd \ud648\ud398\uc774\uc9c0\uac00 \uac1c\uc124\ub418\uc5c8\uace0, \uc5ec\uae30\uc11c\ub3c4 \uc81c\uc548\uacfc \ud1a0\ub860\uc774 \uc9c4\ud589\ub418\uace0 \uc788\ub294 \uc2a4\ud399\uc744 \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub300\ubd80\ubd84 \uc798 \uc544\ub294 \ubc84\uc804\uc740 \ud070 \ubcc0\ud654\uac00 \uc788\uc5c8\ub358 ES6(2015), async \/ await\ub97c \ub3c4\uc785\ud55c ES8(2017)\uc774 \uc788\uc2b5\ub2c8\ub2e4. \uc774\uac83 \uc774\uc678\uc5d0\ub294 \ud070 \ubcc0\ud654\uac00 \uc5c6\uae30 \ub54c\ubb38\uc5d0 \uc798 \uc5b8\uae09\ub418\uc9c0 \uc54a\uace0 \uc788\uae34 \ud558\uc9c0\ub9cc, ES10(2019)\ub3c4 \ub2f9\uc5f0\ud788 \ubc1c\ud45c\ub418\uc5c8\uc5c8\uace0, \ub0b4\ub144\uc5d0\ub294 ES11\uc774 \ub098\uc624\uaca0\uc9c0\uc694. \uc544\ub9c8\ub3c4 optional chaning (stage4), nullish coalescing operator (stage3) \ub4f1\uc774 \ud3ec\ud568\ub420 \uac83 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"># <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/github.com\/tc39\/proposal-optional-chaining\" target=\"_blank\">https:\/\/github.com\/tc39\/proposal-optional-chaining<\/a><br># <a href=\"https:\/\/github.com\/tc39\/proposal-nullish-coalescing\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">https:\/\/github.com\/tc39\/proposal-nullish-coalescing<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">GraphQL<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">RESTful Api \uac1c\ubc1c \ubc29\uc2dd\uc740 \uc9c4\uc785\uc810(endpoint)\uc774 \uc5ec\ub7ec\uac1c\uc774\uace0 \ud558\ub098\uc758 \uc9c4\uc785\uc810\uc5d0\uc11c\ub294 \ud55c\uac00\uc9c0 \uc885\ub958\uc758 \uc751\ub2f5\ub9cc \ubc1b\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. GraphQL\uc740 \uc774\ub7f0 \ud55c\uacc4\ub97c \uadf9\ubcf5\ud558\uae30 \uc704\ud574 \ud398\uc774\uc2a4\ubd81\uc5d0\uc11c \ub9cc\ub4e0 API\ud1b5\uc2e0\uc6a9 query language\uc778\ub370, RESTful Api\uc5d0 \ube44\ud574 \ub9ce\uc740 \uc7a5\uc810\uc744 \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\ud074\ub77c\uc774\uc5b8\ud2b8 \uce21\uc5d0\uc11c \uc9c1\uc811 \ucffc\ub9ac\ub97c \uc791\uc131\ud558\uae30 \ub54c\ubb38\uc5d0 \uc11c\ubc84\ub97c \uc218\uc815\ud560 \ud544\uc694\uac00 \uc5c6\uace0 API\ub97c \uc7ac\uc124\uacc4, \ubcc0\uacbd\ud558\ub294 \ube44\uc6a9\uc744 \uc5c6\uc568 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/li><li>\ud074\ub77c\uc774\uc5b8\ud2b8\uc5d0\uc11c \uaf2d \ud544\uc694\ub85c \ud558\ub294 \ub370\uc774\ud130\ub9cc \ubc1b\uc744 \uc218 \uc788\uace0, \ud074\ub77c\uc774\uc5b8\ud2b8\uc758 \uc2a4\ud399\uc774 \ubcc0\uacbd\ub418\uc5b4\ub3c4 \uc720\uc5f0\ud558\uac8c \ub300\ucc98\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc989 \uc790\uc720\ub3c4\uac00 \ub192\uc544\uc9d1\ub2c8\ub2e4.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/blog.neue.nz\/wp-content\/uploads\/2019\/12\/graphql-org.png\" alt=\"\" class=\"wp-image-1136\" width=\"417\" height=\"318\"\/><figcaption>from <a href=\"https:\/\/graphql.org\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">https:\/\/graphql.org\/<\/a><\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\ub300\ud45c\uc801\uc73c\ub85c <a rel=\"noreferrer noopener\" aria-label=\"Github API v4 (opens in a new tab)\" href=\"https:\/\/developer.github.com\/v4\/\" target=\"_blank\">Github API v4<\/a>\uac00 GraphQL\uc744 \uc9c0\uc6d0\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ub2e4\ub9cc, \ub9c8\ub0e5 \uc7a5\uc810\ub9cc \uc788\ub294 \uac83\uc740 \uc544\ub2d9\ub2c8\ub2e4. \ud504\ub860\ud2b8\uc5d4\ub4dc \uc785\uc7a5\uc5d0\uc11c\ub294 API\uae4c\uc9c0 \uc124\uacc4\ud574\uc57c \ud558\ub294 \ucc45\uc784\uc774 \ub118\uc5b4\uc624\uac8c \ub418\uc5b4 \ud560\uc77c\uc774 \ub354 \ub298\uc5b4\ub098\ub294 \uac83\uc774 \ub418\uae30\ub3c4 \ud569\ub2c8\ub2e4. \ub610\ud55c \uc11c\ubc84\uc758 \uc131\ub2a5\ub3c4 \uace0\ub824\ud558\uc5ec \uc815\uad50\ud558\uac8c \ucffc\ub9ac\ub97c \ub9cc\ub4e4\uc5b4\uc57c \ud569\ub2c8\ub2e4. \uc11c\ubc84\uc640\uc758 \ud611\uc5c5\ub3c4 \ub354 \uae34\ubc00\ud574\uc9c8 \ud544\uc694\uac00 \uc788\uc9c0\uc694.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">RESTful \ubc29\uc2dd\uacfc GraphQL\uc758 \uc7a5\ub2e8\uc810\uc774 \uac08\ub9ac\uace0, GraphQL\uc758 \uba85\uc138\ub3c4 \uacc4\uc18d \ucd94\uac00\ub418\uace0 \uc788\ub294 \uc0c1\ud669\uc774\uae30 \ub54c\ubb38\uc5d0 GraphQL\ub85c \uc644\uc804\ud788 \uc804\ud658\ud558\ub294 \uac83\uc740 \uc2dc\uae30\uc0c1\uc870\ub85c \ubcf4\uc785\ub2c8\ub2e4. \uadf8\ub798\ub3c4, \uc0c8\ub85c\uc6b4 \ud504\ub85c\uc81d\ud2b8\ub97c \uc2dc\uc791\ud558\ub294 \uc124\uacc4 \uc2dc\uc810\uc5d0\uc11c \ubc31\uc5d4\ub4dc\uc640 \ud568\uaed8 GraphQL\uc758 \ub3c4\uc785\uc5d0 \ub300\ud574 \ub17c\uc758\ud574\ubcf4\ub294 \uac83\ub3c4 \uc88b\uc744 \uac83 \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud604\uc7ac GraphQL\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc787\ub294 \ud50c\ub7ab\ud3fc\uc73c\ub85c\ub294 <a rel=\"noreferrer noopener\" aria-label=\"Apollo (opens in a new tab)\" href=\"https:\/\/www.apollographql.com\/\" target=\"_blank\">Apollo<\/a> (client\/server)\uac00 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"># <a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/graphql.org\/\" target=\"_blank\">https:\/\/graphql.org\/<\/a><br># <a href=\"https:\/\/tech.kakao.com\/2019\/08\/01\/graphql-basic\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">https:\/\/tech.kakao.com\/2019\/08\/01\/graphql-basic\/<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">devops \uc9c0\uc2dd\uc758 \ud544\uc694\uc131<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uac00 node.js\ub77c\ub294 \uc804\ud658\uc810\uc744 \ub9de\uc544 \ud504\ub860\ud2b8\uc5d4\ub4dc \ubfd0\ub9cc \uc544\ub2c8\ub77c \ubc31\uc5d4\ub4dc \uc601\uc5ed\uae4c\uc9c0 \ud655\uc7a5\ud558\uac8c \ub418\uc5c8\ub294\ub370\uc694, \uc774\uc820 \ud504\ub860\ud2b8\uc5d4\ub4dc \ubfd0\ub9cc \uc544\ub2c8\ub77c backend, devops \uc601\uc5ed\uc758 \uc9c0\uc2dd\uae4c\uc9c0 \ud544\uc694\ud558\uac8c \ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc6f9\uc11c\ube44\uc2a4\uc758 Client to Server \uad6c\uc870 \ud558\uc5d0\uc11c \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc790\uc758 \uc5ed\ud560\uc740 css, image, js \ud30c\uc77c\uc744 \uc6f9\uc11c\ubc84\uc5d0 \uc5c5\ub85c\ub4dc\ud558\ub294 \uac83 \ubfd0\uc785\ub2c8\ub2e4. \ud558\uc9c0\ub9cc, \ubc31\uc5d4\ub4dc \uc601\uc5ed\uae4c\uc9c0 \ud655\uc7a5\ud558\uac8c \ub41c \uc774\uc0c1 \ubc31\uc5d4\ub4dc \uac1c\ubc1c, \uc11c\ubc84\uc758 \uad6c\ucd95, \ub354 \ub098\uc544\uac00 devops \uc601\uc5ed\uc758 \uc9c0\uc2dd\ub3c4 \ud544\uc694\ud558\uac8c \ub429\ub2c8\ub2e4. \ud2b9\ud788 1000tps\uac00 \ub118\ub294 \ub300\uc6a9\ub7c9 \uc11c\ube44\uc2a4\ub97c \uace0\ub824\ud558\ub2e4 \ubcf4\uba74 \uc0dd\uac01\ubcf4\ub2e4 \ub9ce\uc740 \uc6b4\uc601 \uc9c0\uc2dd\uc774 \ud544\uc694\ud558\uac8c \ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc778\ud504\ub77c \uc601\uc5ed\uc740 \ud070 IT \ud68c\uc0ac\ub77c\uba74 \uc804\ub2f4 \uba64\ubc84\uac00 \uc788\uc744 \uc815\ub3c4\ub85c \uae4a\uc774\uac00 \uc788\ub294 \uc601\uc5ed\uc778\ub370, \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc790\uac00 \uc774 \ubaa8\ub4e0 \ubd84\uc57c\ub97c \ub2e4 \ucc59\uae38 \uc218 \uc5c6\ub294 \uac83\uc740 \ub2f9\uc5f0\ud569\ub2c8\ub2e4. \uadf8\ub798\ub3c4 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc790\ub85c\uc11c \ub300\ub7b5\uc801\uc778 \uc9c0\uc2dd\uc774 \uc788\uc73c\uba74, \uc6b4\uc601 \ubb38\uc81c \ub4f1\uc774 \ubc1c\uc0dd\ud574\ub3c4 \ub2f4\ub2f9\uc790\uc640 \ud568\uaed8 \ube60\ub974\uac8c \ub300\uc751\ud558\ub294 \uac83\uc774 \uac00\ub2a5\ud558\uc9c0 \uc54a\uc744\uae4c\uc694?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">nginx\/apache, http(s), \uce90\uc2dc(CDN), DNS, Load balancer(L4\/L7), domain, \ubcf4\uc548, CI, \ubaa8\ub2c8\ud130\ub9c1 \ub4f1\ub4f1 \uacf5\ubd80\ud560 \uac70\ub9ac\uac00 \uc544\uc8fc \ub9ce\uc544\uc84c\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\uc6f9\uc5b4\uc148\ube14\ub9ac<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\uc6f9\uc5b4\uc148\ube14\ub9ac(Web Assembly, wasm)\ub294 C\uc640 C++, RUST \uac19\uc740 \ud504\ub85c\uadf8\ub798\ubc0d \uc5b8\uc5b4\ub85c \uc791\uc131\ub41c \ud504\ub85c\uadf8\ub7a8\uc744 \uc5b4\ub290 \ube0c\ub77c\uc6b0\uc800\ub4e0 \ube60\ub974\uac8c \uc2e4\ud589\ub418\ub294 byte code\ub85c \ucef4\ud30c\uc77c\ud558\ub294 \uae30\uc220\uc758 \ud45c\uc900\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc989 \uc5b4\ub5a4 \uc5b8\uc5b4\ub85c \uc791\uc131\ud55c \ud504\ub85c\uadf8\ub7a8\uc774\ub4e0 \uc6f9\uc5d0\uc11c \uc2e4\ud589\ud560 \uc218 \uc788\uae30 \ub54c\ubb38\uc5d0 \uc6f9\uacfc \uc571\uc758 \uacbd\uacc4\uac00 \ud5c8\ubb3c\uc5b4\uc9c0\ub294 \uc774\uc815\ud45c, \uadf8\ub9ac\uace0 html \/ css \/ javascript \uc758 \ub4a4\ub97c \uc787\ub294 \uc81c 4\uc758\uc5b8\uc5b4\ub77c\uace0 \uc5b8\uae09\ub418\uae30\ub3c4 \ud569\ub2c8\ub2e4. \ud604\uc7ac <a rel=\"noreferrer noopener\" aria-label=\"W3C Web Assembly working group (opens in a new tab)\" href=\"https:\/\/www.w3.org\/wasm\/\" target=\"_blank\">W3C Web Assembly working group<\/a>\uc744 \ud1b5\ud574 \uc6f9\ud45c\uc900\uc73c\ub85c \uac1c\ubc1c\uc774 \ub418\uace0 \uc788\uc73c\uba70 \uc0dd\uac01\ubcf4\ub2e4 \ub9ce\uc740 \uc6f9\ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uc9c0\uc6d0\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/amati.io\/wp-content\/uploads\/2019\/12\/wasm-caniuse.png?fit=620%2C149&amp;ssl=1\" alt=\"\" class=\"wp-image-1143\"\/><figcaption>from <a href=\"https:\/\/caniuse.com\/#feat=wasm\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">https:\/\/caniuse.com\/#feat=wasm<\/a><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\uc0ac\uc2e4 \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c\uc790\ub85c\uc11c \uc9c1\uc811 wasm\uc744 \uac1c\ubc1c\ud560 \uc77c\uc740 \ub9ce\uc9c0 \uc54a\uc744 \uac83 \uac19\uc2b5\ub2c8\ub2e4. \ud504\ub860\ud2b8\uc5d4\ub4dc \uac1c\ubc1c \uc785\uc7a5\uc5d0\uc11c\ub294 C, C++, RUST \uac19\uc740 \uc5b8\uc5b4\ub85c \uc791\uc131\ub41c \ud504\ub85c\uadf8\ub7a8\uc774 wasm\uc73c\ub85c \ucef4\ud30c\uc77c\ub418\uba74 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c\ub294 \ud45c\uc900 API\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub85c\ub529\ud55c \ud6c4 \uc2e4\ud589\ud558\uae30\ub9cc \ud558\uba74 \ub429\ub2c8\ub2e4. \uc5b4\ucc0c \ubcf4\uba74 \ub2e4\ub978 \uc5b8\uc5b4\ub85c \uac1c\ubc1c\ub41c web worker \uac19\ub2e4\ub294 \ub290\ub08c\ub3c4 \ub4ed\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\uc5ec\ub7ec \uc5b8\uc5b4\ub85c \uc791\uc131\ub41c \ucf54\ub4dc\ub4e4\uc774 \uc6f9\ube0c\ub77c\uc6b0\uc800 \uc548\uc5d0\uc11c \ub124\uc774\ud2f0\ube0c\uc5d0 \uac00\uae4c\uc6b4 \uc18d\ub3c4\ub85c \uc2e4\ud589\ub418\ub294 \ud1a0\ub300\uac00 \ub9c8\ub828\ub418\uc5c8\uae30 \ub54c\ubb38\uc5d0 \uc55e\uc73c\ub85c \uc5b4\ub5bb\uac8c \ubc1c\uc804\ub420 \uc9c0 \uae30\ub300\uac00 \ub418\ub294 \ubd84\uc57c\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"># <a rel=\"noreferrer noopener\" aria-label=\"WebAssembly becomes a W3C Recommendation (opens in a new tab)\" href=\"https:\/\/www.w3.org\/2019\/12\/pressrelease-wasm-rec.html.en\" target=\"_blank\">WebAssembly becomes a W3C Recommendation<\/a><br># <a href=\"https:\/\/developer.mozilla.org\/ko\/docs\/WebAssembly\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">https:\/\/developer.mozilla.org\/ko\/docs\/WebAssembly<\/a><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">\ud504\ub860\ud2b8\uc5d4\ub4dc \ubd84\uc57c\ub294 &#8220;\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uac00 github \ub0b4\uc758 \ubd80\ub3d9\uc758 \uc810\uc720\uc728 1\uc704&#8221;\ub77c\ub294 \uc18c\uc2dd\uc740 \ub354\uc774\uc0c1 \uc2e0\uc120\ud558\uc9c0 \uc54a\uc744 \uc815\ub3c4\ub85c \ub9ce\uc740 \ubcc0\ud654\uac00 \uc788\uc2b5\ub2c8\ub2e4. \ub0b4\ub144\uc5d0\ub294 \uc5b4\ub5a4 \uc0c8\ub85c\uc6b4 \ub3c4\uad6c\uc640 \ud504\ub808\uc784\uc6cc\ud06c\uac00 \ub098\uc62c\uc9c0&#8230;. \ud55c\uc21c\uac04\ub3c4 \uacf5\ubd80\ub97c \uac8c\uc744\ub9ac \ud560 \uc218\uac00 \uc5c6\uac8c \ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\ud3c9\uc0dd \ud504\ub860\ud2b8\uc5d4\ub4dc \uc77c\ub9cc \ud574\ub3c4 \ub9c8\uc2a4\ud130\ud560 \uc218 \uc5c6\uaca0\uc9c0\ub9cc, \ub0b4\ub144\ub3c4&#8230; \ud798\uc744 \ub0b4\uc11c \uc5f4\uc2ec\ud788 \ub2ec\ub824\ubcf4\ub824\uace0 \ud569\ub2c8\ub2e4. \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc624\ub7ab\ub3d9\uc548 \ud504\ub860\ud2b8\uc5d4\ub4dc \ucabd\uc758 \uc77c\uc744 \ud574\uc654\uc9c0\ub9cc, \uc774 \ubd84\uc57c\ub294 \uc0c8\ub85c\uc6b4 \uac83\ub4e4\uc774 \ub4f1\uc7a5\ud558\ub294 \uc18d\ub3c4\uac00 \uc815\ub9d0 \ube60\ub984\uc744 \ub290\ub07c\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc5b4\ub290\ub367 \ud55c\ud574\ub97c \uc815\ub9ac\ud558\uace0 \ub2e4\uc74c \ud574\ub97c \uc900\ube44\ud558\ub294 \uc5f0\ub9d0\uc774 \uc654\ub294\ub370\uc694, \ub098\ub984\ub300\ub85c 2019\ub144\uc5d0 \ud504\ub860\ud2b8\uc5d4\ub4dc \ubd84\uc57c\uc5d0\uc11c \ud654\uc81c\uac00 \ub418\uc5c8\ub358 \uac83\ub4e4\uc744 \ub3cc\uc544\ubcf4\uace0, \uad00\uc2ec\uc788\ub294 \ubd84\uc57c\uc640 \uacf5\ubd80\ud574\uc57c \ud560 \uac83\ub4e4\uc744 \uac1c\uc778\uc801\uc73c\ub85c \uc815\ub9ac\ud574\ubd24\uc2b5\ub2c8\ub2e4. \uc790\uc138\ud55c \uc124\uba85\uc740 \uad6c\uae00\ub9c1\uc73c\ub85c \ud6e8\uc52c \uc88b\uc740 \uc790\ub8cc\ub97c \ucc3e\uc744 \uc218 \uc788\uae30 \ub54c\ubb38\uc5d0 \uc774\ub860 \uc124\uba85\ubcf4\ub2e4\ub294 \uac1c\uc778\uc801\uc778 \uc758\uacac\uc744 \uc880 \ub354 \ub2f4\uc544\ubd24\uc2b5\ub2c8\ub2e4. [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":1131,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[46,52,67,72,118,122,138,299],"class_list":["post-1121","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-dev-story","tag-css-in-js","tag-devops","tag-frontend-trends","tag-graphql","tag-tc39","tag-typescript","tag-web-assembly","tag-299"],"_links":{"self":[{"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/posts\/1121","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1121"}],"version-history":[{"count":0,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=\/wp\/v2\/posts\/1121\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.neue.nz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1121"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.neue.nz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}