{"id":3873,"date":"2017-08-08T07:00:18","date_gmt":"2017-08-08T14:00:18","guid":{"rendered":"https:\/\/www.couchbase.com\/blog\/?p=3873"},"modified":"2025-06-13T20:15:13","modified_gmt":"2025-06-14T03:15:13","slug":"creating-front-end-user-profile-store-angular-typescript","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/ko\/creating-front-end-user-profile-store-angular-typescript\/","title":{"rendered":"\uc0ac\uc6a9\uc790 \ud504\ub85c\ud544 \uc2a4\ud1a0\uc5b4\uc758 \ud504\ub7f0\ud2b8\uc5d4\ub4dc\ub85c \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8, \uc575\uade4\ub7ec \uc0ac\uc6a9"},"content":{"rendered":"

\uc800\ub294 \ucd5c\uadfc\uc5d0 \uc774 \uc81c\ubaa9\uc758 \ud29c\ud1a0\ub9ac\uc5bc\uc744 \uc791\uc131\ud588\uc2b5\ub2c8\ub2e4,\u00a0Node.js \ubc0f NoSQL \ub370\uc774\ud130\ubca0\uc774\uc2a4\ub85c \uc0ac\uc6a9\uc790 \ud504\ub85c\ud544 \uc2a4\ud1a0\uc5b4 \ub9cc\ub4e4\uae30<\/a>\ub294 NoSQL \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc640 \uad00\ub828\ud558\uc5ec \ub9e4\uc6b0 \uc778\uae30 \uc788\ub294 \uc8fc\uc81c\uc774\uc790 \uc0ac\uc6a9 \uc0ac\ub840\uc774\uae30 \ub54c\ubb38\uc785\ub2c8\ub2e4. \uc774 \ud29c\ud1a0\ub9ac\uc5bc\uc5d0\uc11c\ub294 API Node.js \uc0ac\uc6a9<\/a> \uadf8\ub9ac\uace0 \uce74\uc6b0\uce58\ubca0\uc774\uc2a4<\/a> \ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0ac\uc6a9\uc790, \ud2b9\uc815 \uc0ac\uc6a9\uc790\uc640 \uad00\ub828\ub41c \uc815\ubcf4\ub97c \uc800\uc7a5\ud558\uace0 \uc138\uc158\uc744 \ub9cc\ub8cc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\uac00 \uc5c6\ub294 \ubc31\uc5d4\ub4dc \uad00\ub828 \uae30\ub2a5\uc5d0 \ubd88\uacfc\ud588\uc2b5\ub2c8\ub2e4.<\/p>\n

\uc0ac\uc6a9\uc790 \ud504\ub85c\ud544 \uc800\uc7a5\uc18c API\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub2e4\uc74c\uc744 \uc774\ud574\ud558\uace0 \uc2f6\uc5c8\uc2b5\ub2c8\ub2e4. \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8\uc640 \uc575\uade4\ub7ec\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub9cc\ub4dc\ub294 \ubc29\ubc95, <\/span>\uac01 API \uc5d4\ub4dc\ud3ec\uc778\ud2b8\uc640 \ud1b5\uc2e0\ud558\ub294 \ud504\ub85c\ud544 \ud398\uc774\uc9c0\uc785\ub2c8\ub2e4.<\/p>\n

\uc774 \ud29c\ud1a0\ub9ac\uc5bc\uc740 2021\ub144 1\uc6d4 7\uc77c \uae30\uc900\uc73c\ub85c \ub2e4\uc74c\uacfc \uac19\uc774 \uc5c5\ub370\uc774\ud2b8\ub418\uc5c8\uc2b5\ub2c8\ub2e4. \uc5d0\ub9ad \ube44\uc0e4\ub4dc<\/a> \ub97c \uc0ac\uc6a9\ud558\uc5ec Angular 11\uacfc \ud568\uaed8 \uc791\uc5c5\ud558\uc138\uc694!<\/strong><\/p>\n

<\/p>\n

\uacc4\uc18d \uc9c4\ud589\ud558\uae30 \uc804\uc5d0 \ub2e4\uc74c \uc0ac\ud56d\uc744 \uc900\uc218\ud588\ub2e4\uace0 \uac00\uc815\ud569\ub2c8\ub2e4. \uc774\uc804 \ud29c\ud1a0\ub9ac\uc5bc<\/a>. \ub610\ud55c \ub2e4\uc74c\uacfc \uac19\uc774 \uac00\uc815\ud569\ub2c8\ub2e4. \uc575\uade4\ub7ec CLI<\/a> \uc124\uce58\ub418\uc5c8\uc2b5\ub2c8\ub2e4.<\/p>\n

\ud544\uc694\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub85c Angular \ud504\ub85c\uc81d\ud2b8 \ub9cc\ub4e4\uae30<\/h2>\n

\ud074\ub77c\uc774\uc5b8\ud2b8 \ud504\ub7f0\ud2b8\uc5d4\ub4dc\ub294 \ucd08\ubcf4\uc801\uc778 \uc218\uc900\uc774\uc9c0\ub9cc \ucc98\uc74c\ubd80\ud130 \ub2e4\uc2dc \ub9cc\ub4e4 \uac83\uc785\ub2c8\ub2e4. \ub514\uc790\uc778 \uad00\uc810\uc5d0\uc11c \ubcf4\uba74 \uc774 \ud29c\ud1a0\ub9ac\uc5bc\uc740 \uae30\ub2a5\uacfc API \uc791\uc5c5\uc5d0 \uad00\ud55c \uac83\uc774\ubbc0\ub85c \uba4b\uc9c0\uac8c \ubcf4\uc774\uc9c0\ub294 \uc54a\uc744 \uac83\uc774\uc9c0\ub9cc, \uba4b\uc9c0\uac8c \ubcf4\uc774\uac8c \ud558\uace0 \ub354 \ub098\uc740 UX\ub97c \uc81c\uacf5\ud558\ub824\ub294 \uac83\uc740 \uc5ec\ub7ec\ubd84\uc758 \ubaab\uc785\ub2c8\ub2e4.<\/p>\n

Angular CLI\uc5d0\uc11c \ub2e4\uc74c \uba85\ub839\uc744 \uc2e4\ud589\ud569\ub2c8\ub2e4:<\/p>\n

\uc0c8\ub85c\uc6b4 \uce74\uc6b0\uce58\ubca0\uc774\uc2a4-\uac01\ud615 \ube14\ub85c\uadf8 \uc571<\/pre>\n
\uc704 \uba85\ub839\uc740 CLI \uacbd\ub85c\uc5d0 \uc0c8 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \ud504\ub85c\uc81d\ud2b8\uac00 \uc0dd\uc131\ub418\uba74 \uc608\uc0c1\ub418\ub294 \uac01 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ud398\uc774\uc9c0\uc5d0 \ub300\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\uc5b4\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
Angular CLI\ub85c \ub2e4\uc74c\uc744 \uc2e4\ud589\ud569\ub2c8\ub2e4:<\/p>\n
ng g \ucef4\ud3ec\ub10c\ud2b8 \ub85c\uadf8\uc778\r\nng g \ucef4\ud3ec\ub10c\ud2b8 \ub4f1\ub85d\r\nng g \ucef4\ud3ec\ub10c\ud2b8 \ube14\ub85c\uadf8\r\nng g \ucef4\ud3ec\ub10c\ud2b8 \ube14\ub85c\uadf8<\/pre>\n
\uac01\uac01 \uc801\uc808\ud55c \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8 \ubc0f HTML \ud30c\uc77c\uacfc \ud568\uaed8 \ub124 \uac1c\uc758 Angular \uc0ac\uc6a9\uc790 \ud504\ub85c\ud544 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub9cc\ub4e4\uc5b4\uc9d1\ub2c8\ub2e4. \ub85c\uc9c1\uc744 \ucd94\uac00\ud558\uae30 \uc804\uc5d0 \uc544\ub798\uc758 \uac01\ub3c4 \uc0ac\uc6a9\uc790 \ud504\ub85c\ud544 \ud15c\ud50c\ub9bf\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud0d0\uc0c9 \ubaa9\uc801\uc73c\ub85c \uc774\ub4e4\uc744 \ud558\ub098\ub85c \ubb36\uc5b4\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
\ud504\ub85c\uc81d\ud2b8\uc758\u00a0src\/app\/app.module.ts<\/strong> \ud30c\uc77c\uc744 \uc5f4\uace0 \ub2e4\uc74c\uc744 \ud3ec\ud568\ud558\uc138\uc694:<\/p>\n
'@angular\/platform-browser'\uc5d0\uc11c { BrowserModule }\uc744 \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n'@angular\/core'\uc5d0\uc11c { NgModule }\uc744 \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n'@angular\/forms'\uc5d0\uc11c { FormsModule }\uc744 \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n'@angular\/common\/http'\uc5d0\uc11c { HttpClientModule }\uc744 \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n\r\n'.\/app.component'\uc5d0\uc11c { AppComponent }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n'.\/login\/login.component'\uc5d0\uc11c { LoginComponent }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n'.\/register\/register.component'\uc5d0\uc11c { RegisterComponent }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n'.\/blogs\/blogs.component'\uc5d0\uc11c { BlogsComponent }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n'.\/blog\/blog.component'\uc5d0\uc11c { BlogComponent }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n'@angular\/router'\uc5d0\uc11c { RouterModule }\uc744 \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n\r\nlet routes = [\r\n  { path: '', redirectTo: '\/login', pathMatch: 'full' },\r\n  { path: 'login', component: LoginComponent },\r\n  { path: 'register', component: RegisterComponent },\r\n  { path: 'blogs', component: BlogsComponent },\r\n  { \uacbd\ub85c: 'blog', \ucef4\ud3ec\ub10c\ud2b8: BlogComponent }\r\n];\r\n\r\n@NgModule({\r\n  \uc120\uc5b8: [\r\n    AppComponent,\r\n    LoginComponent,\r\n    RegisterComponent,\r\n    \ube14\ub85c\uadf8 \ucef4\ud3ec\ub10c\ud2b8,\r\n    BlogComponent\r\n  ],\r\n  import: [\r\n    BrowserModule,\r\n    FormsModule,\r\n    HttpClientModule,\r\n    \ub77c\uc6b0\ud130 \ubaa8\ub4c8,\r\n    \ub77c\uc6b0\ud130\ubaa8\ub4c8.forRoot(\uacbd\ub85c)\r\n  ],\r\n  providers: [],\r\n  \ubd80\ud2b8\uc2a4\ud2b8\ub7a9: [\uc571 \ucef4\ud3ec\ub10c\ud2b8])\r\n})\r\nexport class AppModule { }\r\n<\/pre>\n
\uc704\uc758 \ucf54\ub4dc\ub294 Angular CLI\ub85c \uc791\uc131\ub418\uc5c8\uc9c0\ub9cc \uba87 \uac00\uc9c0 \ud575\uc2ec \ubc0f \uc0ac\uc6a9\uc790 \uc815\uc758 \ubaa8\ub4c8 \uc784\ud3ec\ud2b8\ub97c \ucd94\uac00\ud558\uace0 \uc774\ub97c \uacbd\ub85c<\/code> \ub97c @NgModule<\/code> \ube14\ub85d.<\/p>\n
\ud0d0\uc0c9 \uae30\ub2a5\uc744 \ud65c\uc131\ud654\ud558\ub824\uba74 \ud30c\uc77c\uc744 \uc5c5\ub370\uc774\ud2b8\ud574\uc57c \ud569\ub2c8\ub2e4. \ud504\ub85c\uc81d\ud2b8\uc758\u00a0src\/app\/app.component.html<\/strong> \ud30c\uc77c\uc744 \uc5f4\uace0 \ubaa8\ub4e0 \ucf58\ud150\uce20\ub97c \ub2e4\uc74c\uc73c\ub85c \ubc14\uafc9\ub2c8\ub2e4:<\/p>\n
<\/\ub77c\uc6b0\ud130-\uc544\uc6c3\ub81b><\/pre>\n
\uc774 \uc2dc\uc810\uc5d0\uc11c \uc0ac\uc6a9\uc790 \ud504\ub85c\ud544 \ud504\ub85c\uc81d\ud2b8\uc758 \uae30\ubcf8 \uad6c\uc131\uc740 \uac01\ub3c4\uc785\ub2c8\ub2e4.<\/p>\n
\uc0ac\uc6a9\uc790 \ud504\ub85c\ud544\uc744 \uc0dd\uc131\ud558\uace0 \uacc4\uc815 \uc815\ubcf4\ub85c \ub85c\uadf8\uc778\ud558\ub294 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\ub85c\uadf8\uc778 \ubc0f \ub4f1\ub85d \ucc98\ub9ac<\/h2>\n
\uc0ac\uc6a9\uc790\uc5d0\uac8c \uac00\uc7a5 \uba3c\uc800 \ud45c\uc2dc\ub418\ub294 \ud654\uba74\uc740 \ub85c\uadf8\uc778 \ud654\uba74\uc785\ub2c8\ub2e4. \uc5ec\uae30\uc11c \uc0ac\uc6a9\uc790 \uc774\ub984\uacfc \ube44\ubc00\ubc88\ud638\ub97c \uc218\uc9d1\ud558\uc5ec API\ub85c \uc804\uc1a1\ud558\uace0 \uc138\uc158 ID\ub97c \uc751\ub2f5\uc73c\ub85c \ubc1b\uc544 \ud5a5\ud6c4 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ubaa8\ub4e0 \ud398\uc774\uc9c0\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \ubaa9\uc801\uc785\ub2c8\ub2e4.<\/p>\n
\ud504\ub85c\uc81d\ud2b8\uc758\u00a0src\/app\/login\/login.component.ts<\/strong> \ud30c\uc77c\uc744 \uc5f4\uace0 \ub2e4\uc74c TypeScript \ucf54\ub4dc\ub97c \ud3ec\ud568\ud569\ub2c8\ub2e4:<\/p>\n
'@angular\/core'\uc5d0\uc11c { Component, OnInit }\ub97c \uac00\uc838\uc635\ub2c8\ub2e4;\r\n'@angular\/common\/http'\uc5d0\uc11c { HttpClient, HttpHeaders }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n'@angular\/router'\uc5d0\uc11c { \ub77c\uc6b0\ud130 }\ub97c \uc784\ud3ec\ud2b8\ud569\ub2c8\ub2e4;\r\n\r\n\ucef4\ud3ec\ub10c\ud2b8({\r\n  selector: 'app-login',\r\n  templateUrl: '.\/login.component.html',\r\n  styleUrls: ['.\/login.component.css']]\r\n})\r\n\r\n\ub0b4\ubcf4\ub0b4\uae30 \ud074\ub798\uc2a4 LoginComponent\ub294 OnInit\uc744 \uad6c\ud604\ud569\ub2c8\ub2e4.\r\n\r\n  \uacf5\uac1c \uc785\ub825: any;\r\n\r\n  constructor(private http: HttpClient, private router: Router) {\r\n    this.input = {\r\n      'email': '',\r\n      'password': ''\r\n    };\r\n  }\r\n\r\n  ngOnInit(): void { }\r\n\r\n  public login() {\r\n    if (this.input.email && this.input.password) {\r\n      let headers = new HttpHeaders({ 'content-type': 'application\/json' });\r\n      this.http.post('https:\/\/localhost:3000\/login', JSON.stringify(this.input), { headers: headers })\r\n        .subscribe(result =>\r\n          this.router.navigate(['\/blogs'], { 'queryParams': result })\r\n        );\r\n    }\r\n  }\r\n\r\n}<\/pre>\n
\uc704\uc758 \ucf54\ub4dc\uc5d0\ub294 \uba87 \uac00\uc9c0 \uc911\uc694\ud55c \uc77c\uc774 \uc77c\uc5b4\ub098\uace0 \uc788\uc73c\ubbc0\ub85c \uc774\ub97c \ubd84\uc11d\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc6b0\ub9ac\uc758 \uc758\ub3c4\ub294 HTML \ub9c8\ud06c\uc5c5\uc758 \uc591\uc2dd\uc5d0 \uac1d\uccb4\ub97c \ubc14\uc778\ub529\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. \uc774 \uac1d\uccb4\ub294 \uc785\ub825<\/code> \ubcc0\uc218\ub97c \uc124\uc815\ud569\ub2c8\ub2e4. \uc5d0\uc11c \uc0dd\uc131\uc790<\/code> \uba54\uc11c\ub4dc\uc5d0\uc11c \uac00\ub2a5\ud55c \uac01 \ud504\ub85c\ud37c\ud2f0\ub97c \ube48 \uac12\uc73c\ub85c \uc124\uc815\ud558\uc5ec UI\uc5d0 \ubc18\uc601\ud569\ub2c8\ub2e4.<\/p>\n
\uc0ac\uc6a9\uc790\uac00 \ub85c\uadf8\uc778\uc744 \uacb0\uc815\ud558\uba74 \uc694\uccad\uc5d0 \ub300\ud55c \uc801\uc808\ud55c \ud5e4\ub354 \uc815\ubcf4\uac00 \uc124\uc815\ub418\uace0 \uac1d\uccb4\uac00 \uc11c\ubc84\ub85c \uc804\uc1a1\ub429\ub2c8\ub2e4. \uc131\uacf5\ud558\uba74 \uc751\ub2f5\uc740 \uc138\uc158 ID\uac00 \uc788\ub294 \uac1d\uccb4\uc785\ub2c8\ub2e4. \uc774\ub97c \ub2e4\uc74c \ud398\uc774\uc9c0\uc5d0 \ucffc\ub9ac \ub9e4\uac1c\ubcc0\uc218\ub85c \uc804\ub2ec\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\uc774 \ud0c0\uc785\uc2a4\ud06c\ub9bd\ud2b8\uc640 \uc9dd\uc744 \uc774\ub8e8\ub294 HTML \ub9c8\ud06c\uc5c5\uc740 \ud504\ub85c\uc81d\ud2b8\uc758\u00a0src\/app\/login\/login.component.html<\/strong> \ub97c \ud074\ub9ad\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 \ud45c\uc2dc\ub429\ub2c8\ub2e4:<\/p>\n
\ub85c\uadf8\uc778<\/h2>\n
 <\/p>\n