{"id":122,"date":"2025-07-16T15:06:57","date_gmt":"2025-07-16T06:06:57","guid":{"rendered":"http:\/\/34.64.61.65\/?p=122"},"modified":"2025-07-16T15:06:57","modified_gmt":"2025-07-16T06:06:57","slug":"angular%eb%b3%b5%ed%98%b8%ed%99%94%ec%95%94%ed%98%b8%ed%99%94-%ed%95%b4%ec%a0%9c","status":"publish","type":"post","link":"https:\/\/hed-g.me\/?p=122","title":{"rendered":"[Angular]\ubcf5\ud638\ud654(\uc554\ud638\ud654 \ud574\uc81c)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading is-style-text-subtitle is-style-text-subtitle--1\">Angular\uc5d0\uc11c \uc554\ud638\ud654\ub41c \ub370\uc774\ud130 \ubcf5\ud638\ud654(Decryption)<\/h2>\n\n\n\n<p>\ubc31\uc5d4\ub4dc(Node.js)\uc5d0\uc11c \uc554\ud638\ud654\ub41c \ub370\uc774\ud130\ub97c \ud504\ub860\ud2b8\uc5d4\ub4dc(Angular)\uc5d0\uc11c \ubcf5\ud638\ud654\ud558\uc5ec \uc0ac\uc6a9\uc790\uc5d0\uac8c \ubcf4\uc5ec\uc8fc\ub294 \ubc29\ubc95\uc744 \uc815\ub9ac\ud588\uc74c.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udce6 1. <code>crypto-js<\/code> \ubaa8\ub4c8 \uc124\uce58<\/h3>\n\n\n\n<p>Angular \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c <code>crypto-js<\/code>\ub97c \uc0ac\uc6a9\ud558\ub824\uba74 \uba3c\uc800 \ubaa8\ub4c8\uc744 \uc124\uce58\ud574\uc57c \ud568.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\uc124\uce58 \uba85\ub839\uc5b4<\/strong>:<br><pre><code class=\"language-bash\">npm i -d crypto-js<\/code><\/pre><br><\/li>\n\n\n\n<li><strong>TypeScript \uc0ac\uc6a9 \uc2dc \ucd94\uac00 \uc124\uce58<\/strong>:<br><pre><code class=\"language-bash\">npm i --save-dev @types\/crypto-js<\/code><\/pre><br><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udd11 2. \uc554\ud638\ud654\/\ubcf5\ud638\ud654 \uc11c\ube44\uc2a4 \uc124\uc815 (<code>cryptoJs.service.ts<\/code>)<\/h3>\n\n\n\n<p><code>@Injectable()<\/code> \ub370\ucf54\ub808\uc774\ud130\ub97c \uc0ac\uc6a9\ud558\uc5ec <code>CryptoJsService<\/code>\ub97c \uc815\uc758\ud558\uace0, \uc554\ud638\ud654 \ud0a4\ub97c \uc124\uc815\ud588\uc74c.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ cryptols.service.ts\nimport { Injectable } from \"@angular\/core\";\nimport * as CryptoJS from \"crypto-js\"; \/\/ crypto-js \ubaa8\ub4c8 \uc784\ud3ec\ud2b8\n\n@Injectable()\nexport class CryptoJsService {\n  private encryptionKey: string = \"YOUR_ENCRYPTION_KEY\"; \/\/ \uc554\ud638\ud654 \ud0a4 \uc124\uc815. \uc2e4\uc81c \ud0a4\ub85c \ub300\uccb4 \ud544\uc694\n\n  constructor() {}\n\n  \/\/ \ub370\uc774\ud130 \uc554\ud638\ud654 \uba54\uc11c\ub4dc (Node.js\uc640 \ub3d9\uc77c\ud55c \ubc29\uc2dd\uc73c\ub85c \uc554\ud638\ud654)\n  encrypt(value: string) {\n    return CryptoJS.AES.encrypt(value, this.encryptionKey).toString();\n  }\n\n  \/\/ \ub370\uc774\ud130 \ubcf5\ud638\ud654 \uba54\uc11c\ub4dc\n  decrypt(value: string, isIpFormat: boolean) {\n    \/\/ isIpFormat\uc740 IP \ud615\uc2dd\uc744 \uccb4\ud06c\ud558\ub294 \uc0ac\uc6a9\uc790 \uc815\uc758 \ud568\uc218\uc77c \uc218 \uc788\uc74c\n    let rtnValue = value;\n    if (!isIpFormat) {\n      \/\/ IP \ud615\uc2dd\uc774 \uc544\ub2cc \uacbd\uc6b0\uc5d0\ub9cc \ubcf5\ud638\ud654 \uc2dc\ub3c4\n      try {\n        rtnValue = CryptoJS.AES.decrypt(value, this.encryptionKey).toString(CryptoJS.enc.Utf8);\n        return rtnValue;\n      } catch (e) {\n        console.log(e, value);\n        return rtnValue; \/\/ \uc5d0\ub7ec \ubc1c\uc0dd \uc2dc \uc6d0\ubcf8 \uac12 \ubc18\ud658\n      }\n    } else {\n      return rtnValue;\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>encryptionKey<\/code>: \ubc31\uc5d4\ub4dc\uc5d0\uc11c \uc0ac\uc6a9\ud55c \uc554\ud638\ud654 \ud0a4\uc640 \ub3d9\uc77c\ud574\uc57c \ud568.<\/li>\n\n\n\n<li><code>decrypt<\/code> \uba54\uc11c\ub4dc\ub294 <code>isIpFormat<\/code>\uc774\ub77c\ub294 \ucd94\uac00 \ud30c\ub77c\ubbf8\ud130\ub97c \ubc1b\uc544 \ud2b9\uc815 \uc870\uac74(<code>!isIpFormat<\/code>)\uc5d0\uc11c\ub9cc \ubcf5\ud638\ud654\ub97c \uc2dc\ub3c4\ud568<br><br>\uc774\ub294 IP \uc8fc\uc18c\uc640 \uac19\uc740 \ud2b9\uc815 \ud615\uc2dd\uc758 \ub370\uc774\ud130\ub294 \ubcf5\ud638\ud654\ud558\uc9c0 \uc54a\uae30 \uc704\ud568\uc73c\ub85c \ubcf4\uc784.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udcbb 3. \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \ubcf5\ud638\ud654 \uc801\uc6a9<\/h3>\n\n\n\n<p><code>CryptoJsService<\/code>\ub97c \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc8fc\uc785\ud558\uc5ec \ub370\uc774\ud130\ub97c \ubcf5\ud638\ud654\ud588\uc74c.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ import {CryptoJsService} from \"@app\/core\/service\/cryptoJs.service\"; \/\/ \uc11c\ube44\uc2a4 \uc784\ud3ec\ud2b8\n\n\/\/ constructor \ub4f1\uc5d0\uc11c \uc11c\ube44\uc2a4 \uc8fc\uc785\n\/\/ private cryptoJsService: CryptoJsService\n\n\/\/ \ub370\uc774\ud130 \uc0ac\uc6a9 \uc608\uc2dc\n\/\/ testdata.push(this.cryptoJsService.decrypt(test.testdata)); \/\/ \ub370\uc774\ud130\ub97c \ubcf5\ud638\ud654\ud558\uc5ec \uc0ac\uc6a9<\/code><\/pre>\n\n\n\n<p>\uc774\ub807\uac8c \uc801\uc6a9 \uc2dc \uc77c\ubc18\uc801\uc778 \ud654\uba74\uc5d0\uc11c\ub294 \ub370\uc774\ud130\uac00 \uc815\uc0c1 \ucd9c\ub825\ub428<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">\u26a0\ufe0f 4. \ud31d\uc5c5\ucc3d \ubcf5\ud638\ud654 \ubb38\uc81c \ubc0f \ud574\uacb0<\/h3>\n\n\n\n<p>\uac04\ud639 \ud31d\uc5c5\ucc3d\uc5d0\uc11c\ub294 \uc554\ud638\ud654\ub41c \ub370\uc774\ud130\uac00 \uadf8\ub300\ub85c \ucd9c\ub825\ub418\ub294 \ubb38\uc81c\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\uc5c8\uc74c<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">4.1. \ubb38\uc81c \ud574\uacb0\uc744 \uc704\ud55c \ucd94\uac00 \ucf54\ub4dc<\/h4>\n\n\n\n<p>\ud31d\uc5c5\ucc3d\uc73c\ub85c \ub370\uc774\ud130\ub97c \ubcf4\ub0bc \ub54c \ud2b9\uc815 \ub370\uc774\ud130\ub9cc \ucd94\ucd9c\ud558\uc5ec \ub2e4\uc2dc \ub123\uc5b4\uc8fc\ub294 \ubc29\uc2dd\uc73c\ub85c \ud574\uacb0\ud588\uc74c<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \ud31d\uc5c5\ucc3d\uc73c\ub85c \ub370\uc774\ud130\ub97c \ubcf4\ub0bc \ub54c \uc801\uc6a9\nif (e.colDef.field === \"modi\") {\n  \/\/ 'modi' \ud544\ub4dc\uc5d0 \ud574\ub2f9\ud558\ub294 \uacbd\uc6b0\n  if (Array.isArray(e.data.test)) {\n    \/\/ e.data.test\uac00 \ubc30\uc5f4\uc778 \uacbd\uc6b0\n    let tests = &#91;];\n    e.data.test.map((ip) =&gt; tests.push(ip.testtest)); \/\/ \ubc30\uc5f4 \ub0b4 \uac1d\uccb4\uc5d0\uc11c 'testtest' \ud544\ub4dc\ub9cc \ucd94\ucd9c\n    e.data.test = tests.toString(); \/\/ \ucd94\ucd9c\ub41c \ub370\uc774\ud130\ub97c \ubb38\uc790\uc5f4\ub85c \ubcc0\ud658\ud558\uc5ec \ub2e4\uc2dc \ud560\ub2f9\n  }\n  this.updateRow(e.data, e.colDef.field); \/\/ \ud589 \uc5c5\ub370\uc774\ud2b8\n}<\/code><\/pre>\n\n\n\n<p>\uc774 \ucf54\ub4dc\ub294 <code>e.data.test<\/code>\uac00 \ubc30\uc5f4\uc774\uace0 \uadf8 \uc548\uc5d0 <code>testtest<\/code>\ub77c\ub294 \ud544\ub4dc\ub97c \uac00\uc9c4 \uac1d\uccb4\ub4e4\uc774 \uc788\uc744 \ub54c, \ud574\ub2f9 \ud544\ub4dc\ub4e4\uc758 \uac12\uc744 \ucd94\ucd9c\ud558\uc5ec \ud558\ub098\uc758 \ubb38\uc790\uc5f4\ub85c \ubcc0\ud658\ud55c \ub4a4 \ub2e4\uc2dc <code>e.data.test<\/code>\uc5d0 \ud560\ub2f9\ud558\ub294 \ub85c\uc9c1\uc73c\ub85c \ubcf4\uc784.<br>\n\uc774 \uacfc\uc815\uc744 \ud1b5\ud574 \ud31d\uc5c5\ucc3d\uc5d0\uc11c\ub3c4 \uc815\uc0c1\uc801\uc73c\ub85c \ubcf5\ud638\ud654\ub41c \ub370\uc774\ud130\uac00 \ucd9c\ub825\ub420 \uc218 \uc788\ub3c4\ub85d \uc870\uce58\ud588\uc74c<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular\uc5d0\uc11c \uc554\ud638\ud654\ub41c \ub370\uc774\ud130 \ubcf5\ud638\ud654(Decryption) \ubc31\uc5d4\ub4dc(Node.js)\uc5d0\uc11c \uc554\ud638\ud654\ub41c \ub370\uc774\ud130\ub97c \ud504\ub860\ud2b8\uc5d4\ub4dc(Angular)\uc5d0\uc11c \ubcf5\ud638\ud654\ud558\uc5ec \uc0ac\uc6a9\uc790\uc5d0\uac8c \ubcf4\uc5ec\uc8fc\ub294 \ubc29\ubc95\uc744 \uc815\ub9ac\ud588\uc74c. \ud83d\udce6 1. crypto-js \ubaa8\ub4c8 \uc124\uce58 Angular \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c crypto-js\ub97c \uc0ac\uc6a9\ud558\ub824\uba74 \uba3c\uc800 \ubaa8\ub4c8\uc744 \uc124\uce58\ud574\uc57c \ud568. \ud83d\udd11 2. \uc554\ud638\ud654\/\ubcf5\ud638\ud654 \uc11c\ube44\uc2a4 \uc124\uc815 (cryptoJs.service.ts) @Injectable() \ub370\ucf54\ub808\uc774\ud130\ub97c \uc0ac\uc6a9\ud558\uc5ec CryptoJsService\ub97c \uc815\uc758\ud558\uace0, \uc554\ud638\ud654 \ud0a4\ub97c \uc124\uc815\ud588\uc74c. \ud83d\udcbb 3. \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \ubcf5\ud638\ud654 \uc801\uc6a9 CryptoJsService\ub97c \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc8fc\uc785\ud558\uc5ec \ub370\uc774\ud130\ub97c \ubcf5\ud638\ud654\ud588\uc74c. \uc774\ub807\uac8c \uc801\uc6a9 \uc2dc \uc77c\ubc18\uc801\uc778 \ud654\uba74\uc5d0\uc11c\ub294 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[39],"tags":[126,127],"class_list":["post-122","post","type-post","status-publish","format-standard","hentry","category-angular","tag-angular","tag-127"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/122","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=122"}],"version-history":[{"count":1,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/122\/revisions"}],"predecessor-version":[{"id":139,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/122\/revisions\/139"}],"wp:attachment":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=122"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=122"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}