๐Ÿ›  Angular์—์„œ NgRx๋ฅผ ์‚ฌ์šฉํ•œ ์ƒํƒœ ๊ด€๋ฆฌ

14459 ๋‹จ์–ด webdevprogrammingjavascript

๐Ÿ“• NgRx๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ Angular ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์˜ ์ƒํƒœ๋ฅผ ์‰ฝ๊ฒŒ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ๊ณ , ์‚ฌ์šฉ์ž์™€ ๊ด€๋ จ๋œ ๊ธฐ๋Šฅ์„ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด Auth0์˜ SDK์™€ NgRx๋ฅผ ๊ฒฐํ•ฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ดํ•ดํ•œ๋‹ค.




๊ฐ„๋‹จํ•œ ์†Œ๊ฐœ


์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์„ ๊ตฌ์ถ•ํ•  ๋•Œ ์ƒํƒœ ๊ด€๋ฆฌ๋Š” ๊ด€๊ฑด์ ์ธ ๊ตฌ์„ฑ ์š”์†Œ์ด๋‹ค.์šฐ๋ฆฌ๋Š” ๊ฐ์ข… ๋ฐฉ๋ฒ•์„ ํ†ตํ•ด ๊ฐ๋„ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์˜ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๋ชจ๋“  ๋ฐฉ๋ฒ•์€ ์žฅ์ ๊ณผ ๋‹จ์ ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.
์ด ๋ธ”๋กœ๊ทธ์—์„œ๋Š” ์ƒํƒœ ๊ด€๋ฆฌ ์†”๋ฃจ์…˜์œผ๋กœ NgRx๋ฅผ ์ค‘์ ์ ์œผ๋กœ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.NgRx๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ Recipe Admin Dashboard ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์„ ๊ตฌ์ถ•ํ•˜์—ฌ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์˜ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์—ฐ๊ตฌํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.Auth0 ๋ณดํ˜ธ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ NgRx์™€ ํ•จ๊ป˜ ์ž‘์—…ํ•˜๋Š” ๋ฐฉ๋ฒ•๋„ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค.

Ngrx ์†Œ๊ฐœ


NgRx์€ Angular์—์„œ ๋ฐ˜์‘์‹ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์„ ๊ตฌ์ถ•ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋Š” ํ”„๋ ˆ์ž„์›Œํฌ์ž…๋‹ˆ๋‹ค.NgRx์˜ ์˜๊ฐ์€ Redux ๋ชจ๋“œ - ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์˜ ์ด๋ฒคํŠธ๋ฅผ ํ†ต์ผํ•˜๊ณ  RxJS๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ƒํƒœ๋ฅผ ๋‚ด๋ณด๋ƒ…๋‹ˆ๋‹ค.๋†’์€ ๋ ˆ๋ฒจ์—์„œ NgRx๋Š” ๋‹จ์ผ ์ƒํƒœ๋ฅผ ์ €์žฅํ•˜๊ณ  ๋™์ž‘์„ ์‚ฌ์šฉํ•˜์—ฌ ์ƒํƒœ ๋ณ€ํ™”๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค.NgRx๋Š” ๋งŽ์€ ์‚ฌ์šฉ์ž ์ƒํ˜ธ ์ž‘์šฉ๊ณผ ์—ฌ๋Ÿฌ ๋ฐ์ดํ„ฐ ์†Œ์Šค๊ฐ€ ์žˆ๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ์ ํ•ฉํ•œ ๋ณต์žกํ•œ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

Ngrx์˜ ์ž‘๋™ ๋ฐฉ์‹


NgRx๋Š” ์Šคํ† ๋ฆฌ์ง€, ์ž‘์—…, ๋ณต์›, ์„ ํƒ๊ธฐ ๋ฐ ํšจ๊ณผ ๋“ฑ 5๊ฐœ์˜ ์ฃผ์š” ๊ตฌ์„ฑ ์š”์†Œ๋กœ ๊ตฌ์„ฑ๋ฉ๋‹ˆ๋‹ค.
NgRx๋Š” ๋ชจ๋“  ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ฐ์ดํ„ฐ๊ฐ€ ๋™์ผํ•œ ๋ผ์ดํ”„ ์‚ฌ์ดํด์„ ๊ฑฐ์น˜๋Š” ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ์ŠคํŠธ๋ฆผ์˜ Redux ๊ฐœ๋…์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.์ด๋Ÿฐ ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ํ๋ฆ„์€ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์˜ ์ƒํƒœ๋ฅผ ๋”์šฑ ์˜ˆ์ธกํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๋‹ค.์ด ํ๋ฆ„์€ ์ƒํƒœ ๊ด€๋ฆฌ์ธต์—๋งŒ ์ ์šฉ๋˜๋ฉฐ ํ‘œ์‹œ์ธต์˜ ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ํ๋ฆ„๊ณผ ํ˜ผ๋™ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.๋‹ค์Œ ๊ทธ๋ฆผ์€ NgRx์˜ ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ดํ”„ ์‚ฌ์ดํด์„ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.

์ƒ์—…๊ณ„


ํด๋ผ์ด์–ธํŠธ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋กœ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.NgRx์˜ ์Šคํ† ๋ฆฌ์ง€๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๊ณ ์œ ํ•œ ์ง„์ƒ ์›์ฒœ์ด ๋ฉ๋‹ˆ๋‹ค.์ด๊ฒƒ์€ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์˜ ํ˜„์žฌ ์ƒํƒœ๋ฅผ ๋ฐ˜์˜ํ•ฉ๋‹ˆ๋‹ค.

ํ–‰๋™


๋™์ž‘์€ ํ”„๋กœ๊ทธ๋žจ์—์„œ ๋ฐœ์ƒํ•˜๋Š” ๋…ํŠนํ•œ ์ด๋ฒคํŠธ๋ฅผ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค.์ด๋Ÿฌํ•œ ์ด๋ฒคํŠธ์˜ ๋ฒ”์œ„๋Š” ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์˜ ์ƒ๋ช…์ฃผ๊ธฐ ์ด๋ฒคํŠธ, ์‚ฌ์šฉ์ž์˜ ์ƒํ˜ธ์ž‘์šฉ์—์„œ ๋„คํŠธ์›Œํฌ ์š”์ฒญ์— ์ด๋ฅด๊ธฐ๊นŒ์ง€์ด๋‹ค.์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด NgRx์™€ ํ†ต์‹ ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ๋ ค ์ฃผ๋Š” ์ž‘์—…์ž…๋‹ˆ๋‹ค.

๊ฐ์†๊ธฐ


ํ™˜์›๊ธฐ๋Š” ์ƒํƒœ ๊ฐ„์˜ ์ „ํ™˜์„ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฒƒ์„ ์ฑ…์ž„์ง„๋‹ค.reducer๋Š” ์Šค์ผ€์ค„๋ง ์ž‘์—…์— ๋ฐ˜์‘ํ•˜๊ณ  ์ˆœ์ˆ˜ ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•˜์—ฌ ์ €์žฅ์†Œ๋ฅผ ์—…๋ฐ์ดํŠธํ•ฉ๋‹ˆ๋‹ค.์ˆœ๊ธฐ๋Šฅ์€ ์˜ˆ์ธก ๊ฐ€๋Šฅํ•˜๊ณ  ๋ถ€์ž‘์šฉ์ด ์—†๋Š” ๊ธฐ๋Šฅ์ด๋‹ค.๊ฐ™์€ ์ž…๋ ฅ ์ง‘ํ•ฉ์„ ์ง€์ •ํ•˜๋ฉด ์ˆœ์ˆ˜ ํ•จ์ˆ˜๋Š” ํ•ญ์ƒ ๊ฐ™์€ ์ถœ๋ ฅ ์ง‘ํ•ฉ์„ ๋˜๋Œ๋ ค์ค๋‹ˆ๋‹ค.

์„ ํƒ๊ธฐ


์„ ํƒ๊ธฐ๋Š” ์ƒ์ ์—์„œ ์ƒํƒœ ์„ธ์…˜์„ ๊ฐ€์ ธ์˜ค๋Š” ์ˆœ์ˆ˜ ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค.์„ ํƒ๊ธฐ๋Š” ํ”„๋กœ๊ทธ๋žจ์ด ์ƒํƒœ ๋ณ€ํ™”๋ฅผ ๊ฐ์ฒญํ•˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค.

์˜ํ–ฅ


ํšจ๊ณผ๋Š” ๊ฐ ๋™์ž‘์˜ ๋ถ€์ž‘์šฉ์„ ์ฒ˜๋ฆฌํ•œ๋‹ค.์ด๋Ÿฌํ•œ ๋ถ€์ž‘์šฉ์€ ์–ด๋–ค ์ž‘์—…์ด ์Šค์ผ€์ค„๋ง๋  ๋•Œ HTTP๋ฅผ ํ†ตํ•ด ์™ธ๋ถ€ API์™€ ํ†ต์‹ ํ•˜๊ณ  ๋‹ค๋ฅธ ์ž‘์—…์„ ์Šค์ผ€์ค„๋งํ•˜์—ฌ ์ƒํƒœ๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๋Š” ๋‹ค๋ฅธ ๋ถ€๋ถ„์„ ํฌํ•จํ•œ๋‹ค.

์„ ๊ฒฐ ์กฐ๊ฑด


Angular์—๋Š” active LTS or maintenance LTS ๋ฒ„์ „์˜ ๋…ธ๋“œ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.js.๊ฐ๋„ ์‘์šฉ๋„ npm packages์˜ ๋งŽ์€ ํŠน์„ฑ๊ณผ ๊ธฐ๋Šฅ์— ์˜์กดํ•œ๋‹ค.npm ํŒจํ‚ค์ง€๋ฅผ ๋‹ค์šด๋กœ๋“œํ•˜๊ณ  ์„ค์น˜ํ•˜๋ ค๋ฉด npm ๋˜๋Š” yarn๊ณผ ๊ฐ™์€ npm ํŒจํ‚ค์ง€ ๊ด€๋ฆฌ์ž๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.
์ด ํ”„๋กœ์ ํŠธ๋Š” ์„œ๋ฒ„ ์ธก ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์žˆ๋Š”๋ฐ, ์‹คํ–‰ ์ „๋‹จ์— ์žˆ์„ ๋•Œ ๋ฐ˜๋“œ์‹œ ๋ณ‘ํ–‰ ์‹คํ–‰ํ•ด์•ผ ํ•œ๋‹ค.Api Express Typescript Menu repo์˜ ์ง€์นจ์„ ๋”ฐ๋ฆ…๋‹ˆ๋‹ค.์ด blog post์—์„œ Auth0์„ ์‚ฌ์šฉํ•˜์—ฌ ์„œ๋ฒ„ ์‚ฌ์ด๋“œ๋ฅผ ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•œ ์ž์„ธํ•œ ๋‚ด์šฉ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์ด ์ž์Šต์„œ๋Š” Auth0์„ NgRx์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์ค‘์ ์ ์œผ๋กœ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.๊ฐ๋„ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์˜ Auth0 ์„ค์ •์— ๋Œ€ํ•œ ์ž์„ธํ•œ ๋‚ด์šฉ์€ README์˜ ์ง€์นจ์„ ๋”ฐ๋ฅด๊ฑฐ๋‚˜ ์ด blog post์„ ์ฐธ์กฐํ•˜์‹ญ์‹œ์˜ค.

๋น ๋ฅธ ์‹œ์ž‘


NgRx ๊ด€๋ จ ์„น์…˜์„ ์ง€์›ํ•˜๋Š” ๊ธฐ๋ณธ ๊ตฌ์กฐ์™€ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์žˆ๋Š” ํ”„๋ ˆ์  ํ…Œ์ด์…˜ ํ”„๋กœ๊ทธ๋žจ์„ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.
ํด๋ก ์€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋ณด์—ฌ์ฃผ๊ณ  starter ๋ถ„๊ธฐ๋ฅผ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.
git clone -b starter git@github.com:auth0-developer-hub/spa_angular_typescript_dashboard.git
ํด๋ก  ์žฌ๊ตฌ๋งค ๊ณ„์•ฝ ํ›„ spa_angular_typescript_dashboard์„ ํ˜„์žฌ ๋””๋ ‰ํ† ๋ฆฌ๋กœ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.
cd spa_angular_typescript_dashboard
์„ค์น˜ ํ”„๋กœ์ ํŠธ์˜ ์ข…์† ํ•ญ๋ชฉ:
npm i
๋กœ์ปฌ์—์„œ ํ”„๋กœ์ ํŠธ๋ฅผ ์‹คํ–‰ํ•˜๋ ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํ•˜์‹ญ์‹œ์˜ค.
npm run start

๊ฐœ๋ฐœ ๋„๊ตฌ


Chrome์ด๋‚˜ Firefox์šฉ redux devtools ํ™•์žฅ์„ ์‚ฌ์šฉํ•˜์—ฌ ์Šคํ† ๋ฆฌ์ง€์™€ ๊ด€๋ จ๋œ ์ž‘์—…์„ ๋””๋ฒ„๊น…ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์ด ํ™•์žฅ์ž๋ฅผ NgRx์™€ ํ•จ๊ป˜ ์‚ฌ์šฉํ•˜๋ ค๋ฉด ํ”„๋กœ์ ํŠธ์— NgRx์˜ devtools ์˜์กด ํ•ญ๋ชฉ์„ ์ถ”๊ฐ€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.์ด ์ž‘์—…์€ npm ๋˜๋Š” Angular CLI ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.npm ์‚ฌ์šฉ
npm install @ngrx/store-devtools --save
Angular CLI ์‚ฌ์šฉ

To use the Angular CLI, you will need to have the CLI installed globally. Refer to instructions on the Angular docs for how to set this up.


ng add @ngrx/store-devtools@latest
StoreDevToolsModule์—์„œ AppModule์„ ๊ฐ€์ ธ์˜ค๊ณ  ํ”„๋กœ์ ํŠธ ์š”๊ตฌ์— ๋”ฐ๋ผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.์ด ๊ฐ•์ขŒ์—์„œ ๊ธฐ๋ณธ ์„ค์ •์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.app.module.ts์„ ์—ด๊ณ  ๋‹ค์Œ ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€ํ•˜์‹ญ์‹œ์˜ค๐Ÿ‘‡
// src/app/app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
import { AuthHttpInterceptor, AuthModule } from "@auth0/auth0-angular";

// โœจ New ๐Ÿ‘‡
import { StoreDevtoolsModule } from "@ngrx/store-devtools";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { NavBarModule } from "./shared";
import { environment } from "src/environments/environment";
import { reducers, metaReducers } from "./core/state";
import { UserEffects } from "./core/state/user";
import { MenusEffects } from "./core/state/menus";

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    AuthModule.forRoot({
      ...environment.auth,
      httpInterceptor: {
        allowedList: [
          `${environment.serverUrl}/api/menu/items`,
          `${environment.serverUrl}/api/menu/items/*`,
        ],
      },
    }),
    AppRoutingModule,
    NavBarModule,

    // โœจ New ๐Ÿ‘‡
    StoreDevtoolsModule.instrument({
      maxAge: 25,
      logOnly: environment.production,
    }),
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthHttpInterceptor,
      multi: true,
    },
  ],
})
export class AppModule {}

If you used Angular's CLI to add NgRx devtools, this part might have been updated automatically.


์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์„ ์‹คํ–‰ํ•˜๊ณ  Devtools ์—ด๊ธฐ


์ด ์„น์…˜์˜ ์ ˆ์ฐจ์— ๋”ฐ๋ผ ํ”„๋กœ๊ทธ๋žจ์„ ์‹คํ–‰ํ•˜๋ฉด ๋„๊ตฌ ๋ชจ์Œ์—์„œ Redux Devtools๋ฅผ ํ™œ์„ฑํ™”ํ•˜๋Š” ์˜ต์…˜์ด ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.ํ™œ์„ฑํ™”๋˜๋ฉด ๋‹ค์Œ ๊ทธ๋ฆผ๊ณผ ๊ฐ™์€ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

You can learn more about these features from their official documentation.


NgRx ์„ค์น˜

npm ๋˜๋Š” Angular CLI๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ NgRx ์ข…์†์„ฑ์„ ์„ค์น˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.npm ์‚ฌ์šฉ
npm install @ngrx/store --save
Angular CLI ์‚ฌ์šฉ
ng add @ngrx/store@latest
๋„ˆ๋„ ์ƒ์ ์˜ ๋ถ€์ž‘์šฉ์„ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด NgRx์˜ ํšจ๊ณผ๋ฅผ ์‚ฌ์šฉํ•  ๊ฒƒ์ด๋‹ค.์ด๋Ÿฐ ์˜์กด์„ฑ์„ ์ฒจ๊ฐ€ํ•ฉ์‹œ๋‹ค.npm ์‚ฌ์šฉ
npm install @ngrx/effects --save
Angular CLI ์‚ฌ์šฉ
ng add @ngrx/effects@latest

At the time this post was written, the latest NgRx store and effects version was 12.2.0, which will be the version we will be using throughout the tutorial.


๊ฑด์ถ•ํ•˜๋‹ค


์ด ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์˜ ํ•ต์‹ฌ์€ ๊ด€๋ฆฌ ๊ณ„๊ธฐํŒ์œผ๋กœ ๋กœ๊ทธ์ธํ•œ ์‚ฌ์šฉ์ž๊ฐ€ ๋ฉ”๋‰ด ํ•ญ๋ชฉ์„ ์ถ”๊ฐ€, ํŽธ์ง‘, ์‚ญ์ œํ•  ์ˆ˜ ์žˆ๋‹ค.๋กœ๊ทธ์ธํ•œ ์‚ฌ์šฉ์ž๋Š” ํ•ด๋‹น ๊ถŒํ•œ์— ๋”ฐ๋ผ ๋ชจ๋“  ์ž‘์—… ๋˜๋Š” ํ•˜์œ„ ์„ธํŠธ ์ค‘ ํ•˜๋‚˜๋ฅผ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค.์ƒํƒœ ์—…๋ฐ์ดํŠธ์™€ ์‚ฌ์šฉ์ž/์„œ๋ฒ„ ๊ด€๋ จ ์ด๋ฒคํŠธ๋ฅผ ๊ด€๋ฆฌํ•˜๋ ค๋ฉด NgRx๋ฅผ ์‚ฌ์šฉํ•˜์‹ญ์‹œ์˜ค.
์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ๋Œ€ํ•ด ๋‘ ๊ฐœ์˜ ์Šคํ† ๋ฆฌ์ง€๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

  • ๋ฉ”๋‰ด: ๋ฉ”๋‰ด ๊ด€๋ จ ๊ด€๋ฆฌ ๊ธฐ๋Šฅ(CRUD ์ž‘์—…)

  • ์‚ฌ์šฉ์ž: Auth0
  • ์„ ์‚ฌ์šฉํ•˜์—ฌ ์‚ฌ์šฉ์ž ๊ด€๋ จ ๊ด€๋ฆฌ ๊ธฐ๋Šฅ(์˜ˆ: ์ธ์ฆ
    ์ „์ฒด ๊ฐ•์ขŒ์—์„œ ์‰ฝ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋„๋ก ์ƒ์ ์˜ ๋ชจ๋“  ๋ถ€๋ถ„์„ ๋‹จ๋… ํŒŒ์ผ๋กœ ๋‚˜๋ˆŒ ๊ฒƒ์ž…๋‹ˆ๋‹ค.
    ๋จผ์ € core ๋””๋ ‰ํ† ๋ฆฌ์— ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํด๋” ๊ตฌ์กฐ๋ฅผ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค(๊ฐ ์„น์…˜์— ๋Œ€ํ•ด ๋…ผ์˜ํ•  ๋•Œ ๊ฐ ํŒŒ์ผ์„ ์—…๋ฐ์ดํŠธํ•  ๊ฒƒ).
    |- src/app/core
        |- state
            |- menus
                |- menus.actions.ts
                |- menus.effects.ts
                |- menus.reducer.ts
                |- menus.selector.ts
                |- menus.state.ts
                |- index.ts
            |- user
                |- user.actions.ts
                |- user.effects.ts
                |- user.reducer.ts
                |- user.selector.ts
                |- user.state.ts
                |- index.ts
            |- core.state.ts
            |- core.reducer.ts
            |- index.ts
    

    The starter app is using a BehaviorSubject in menu-state.service.ts to manage it's state. This tutorial will walk you through migrating that to NgRx.


    ๋ฉ”๋‰ด ์ƒํƒœ ๊ด€๋ฆฌ


    ๋ฉ”๋‰ด ์ƒํƒœ ๋งŒ๋“ค๊ธฐ


    ๋ฉ”๋‰ด์˜ ์ƒํƒœ ๋Œ€์ƒ์„ ๋งŒ๋“œ๋Š” ๊ฒƒ๋ถ€ํ„ฐ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.menus.state.ts์„ ์—ด๊ณ  ๋‹ค์Œ ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€ํ•˜์‹ญ์‹œ์˜ค๐Ÿ‘‡
    Read more...

    ์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ