Dva: ์„ฑ๊ฐ€์‹  ๊ฒฝ๊ณ : ๊ฒฝ๊ณ : ๋””์ŠคํŒจ์น˜: ns/ACTION_TYPE์€ ๋„ค์ž„์ŠคํŽ˜์ด์Šค ns๋ฅผ ์ ‘๋‘์‚ฌ๋กœ ์‚ฌ์šฉํ•ด์„œ๋Š” ์•ˆ ๋ฉ๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2017๋…„ 06์›” 18์ผ  ยท  11์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: dvajs/dva

๋“ฑ๋ก ๋˜๋Š” "๋„ฃ๊ธฐ" ํšจ๊ณผ์—์„œ "๋ฐฐ์น˜" ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•  ๋•Œ ์ˆ˜์‹ ๋˜๋Š” "์œ ์šฉํ•œ" ๊ฒฝ๊ณ ๋ฅผ ๋Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?
๋˜๋Š” ์ตœ์†Œํ•œ ์„ ํƒ ์‚ฌํ•ญ์œผ๋กœ ๋งŒ๋“œ์‹ญ์‹œ์˜ค.

๋‚˜๋Š” redux์— ๋Œ€ํ•œ ์ผ๋ฐ˜์ ์ธ ๋ชจ๋ฒ” ์‚ฌ๋ก€๋ผ๊ณ  ์ƒ๊ฐํ•˜๋Š” ์ „์šฉ ํŒŒ์ผ์— ๋‚ด ์ž‘์—… ์ƒ์„ฑ์ž์™€ ์ž‘์—… ์œ ํ˜•์„ ๋ณด๊ด€ํ•ฉ๋‹ˆ๋‹ค(์˜ˆ: ์—ฌ๊ธฐ ์ฐธ์กฐ).

์ด๊ฒƒ์€ ๋‚ด๊ฐ€ ํ•ญ์ƒ dva ํšจ๊ณผ, ๋“ฑ๋ก ๋ฐ ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ๋‚ด ์ž‘์—… ์ œ์ž‘์ž๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ์‹œ:
actionTypes.js:

export const TOKEN_RESTORED = 'auth/TOKEN_RESTORED';

action.js:

export default {
    tokenRestored: payload => ({type: TOKEN_RESTORED, payload: payload.token})
};

๋ชจ๋ธ.js:

app.model({
    namespace: ...,
    state: { ... },
    effects: { ... },

    subscriptions: {
        setup({dispatch}) {
            let token = localStorage.token;
            if (token) {
                dispatch(actions.tokenRestored({token}));
            }
        }
    }
});

์‚ฌ์šฉ์ž๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์œ ํ˜•์˜ ๊ฒฝ๊ณ ๋ฅผ ์ˆ˜์‹ญ ๋ฒˆ ๋ฐ›์ง€ ์•Š๊ณ ๋„ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

Warning: dispatch: auth/tokenRestored should not be prefixed with namespace auth

์ฝ”๋“œ ์Šคํƒ€์ผ์€ ๊ฐœ์ธ์ ์ธ ์„ ํ˜ธ ๋ฐฉ์‹์ด๋ฉฐ ํ˜„์žฌ dva๋Š” ์ž‘์—… ์œ ํ˜•์— ๋ฌธ์ž์—ด์„ ์ง์ ‘ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ์‚ฌ์šฉ์ž๋ฅผ ์ฒ˜๋ฒŒํ•ฉ๋‹ˆ๋‹ค.

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋‚˜๋Š” ํŒŒํ‹ฐ์— ์กฐ๊ธˆ ๋Šฆ์—ˆ์ง€๋งŒ ์ด๊ฒƒ์€ ๋‚ด๊ฐ€ ์˜ค๋ฅ˜๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•œ ํ•ดํ‚น์ž…๋‹ˆ๋‹ค. ํ™•์‹คํžˆ ์ข‹์€ ์†”๋ฃจ์…˜์€ ์•„๋‹ˆ์ง€๋งŒ ์ ์–ด๋„ ์˜ค๋ฅ˜ ์ถœ๋ ฅ์„ ์–ต์ œํ•ฉ๋‹ˆ๋‹ค.

```// my-model.js
console.error = ๋ฉ”์‹œ์ง€ => {
if (message.indexOf("prefixNamespace") === -1) {
console.log(๋ฉ”์‹œ์ง€);
}
};

๋ชจ๋“  11 ๋Œ“๊ธ€

๋ฐฉ๊ธˆ ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.
redux-actions๋กœ ์ž‘์—…์„ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ์ด ํŽธ๋ฆฌํ•ฉ๋‹ˆ๋‹ค.
๊ทธ๋Ÿฌ๋‚˜ ๊ฒฝ๊ณ ๋กœ ์ธํ•ด ๋ชจ๋ธ์—์„œ๋Š” ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

์ด ๋ฌธ์ œ๊ฐ€ ๊ด€์‹ฌ์„ ๋ฐ›๋Š” ๋ฐ ๋„์›€์ด ๋˜๋Š” ๊ฒฝ์šฐ๋ฅผ ๋Œ€๋น„ํ•˜์—ฌ pull ์š”์ฒญ์„ ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

1013

ํ”„๋กœ๋•์…˜์— ๋Œ€ํ•œ ๋ถˆ๋ณ€ ๋ฐ ๊ฒฝ๊ณ ๋ฅผ ์ œ๊ฑฐ ํ•˜๋ ค๋ฉด https://www.npmjs.com/package/babel-plugin-dev-expression ์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

๊ฐœ๋ฐœ ํ™˜๊ฒฝ์€ ์–ด๋–ป์Šต๋‹ˆ๊นŒ?
create react ์•ฑ์„ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— Babel ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์œผ๋ฉด ์–ด๋–ป๊ฒŒ ํ•ฉ๋‹ˆ๊นŒ?

์ผ๋ฐ˜์ ์ธ ๊ธฐ์ˆ  ์‚ฌ์šฉ์— ๋Œ€ํ•ด ๊ฒฝ๊ณ ๋ฅผ ๋ฐ›์•„์•ผ ํ•˜๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

2017๋…„ 7์›” 19์ผ 06์‹œ 25๋ถ„์— "chencheng (ไบ‘่ฐฆ)" [email protected]์ด ์ž‘์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค.

https://www.npmjs.com/package/babel-plugin-dev-expression ์‚ฌ์šฉ ๊ถŒ์žฅ
์ƒ์‚ฐ์— ๋Œ€ํ•œ ๋ถˆ๋ณ€ ๋ฐ ๊ฒฝ๊ณ ๋ฅผ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค.

โ€”
์Šค๋ ˆ๋“œ๋ฅผ ์ž‘์„ฑํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ด ๋ฉ”์‹œ์ง€๋ฅผ ๋ฐ›๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.
์ด ์ด๋ฉ”์ผ์— ์ง์ ‘ ๋‹ต์žฅํ•˜๊ณ  GitHub์—์„œ ํ™•์ธํ•˜์„ธ์š”.
https://github.com/dvajs/dva/issues/988#issuecomment-316261873 ๋˜๋Š” ์Œ์†Œ๊ฑฐ
์Šค๋ ˆ๋“œ
https://github.com/notifications/unsubscribe-auth/ABJVKPRJMf0P0qVcTgOm-UH4q9RCNpg4ks5sPXcTgaJpZM4N9hlv
.

@orzarchi ์ €๋Š” @sorrycc ๊ฐ€ ๋งค์šฐ ๋ฐ”์˜๊ณ  ์ด ํ”„๋กœ์ ํŠธ๋ฅผ ์œ ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ๊ณต๊ฐœ๋œ ๋ฌธ์ œ์—๋งŒ ์ง‘์ค‘ํ•˜๊ณ  ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๊ทธ์˜ ๊ด€์‹ฌ์„ ๋Œ๊ธฐ ์œ„ํ•ด ์ƒˆ๋กœ์šด ๋ฌธ์ œ๋ฅผ ๋งŒ๋“ค์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

BTW, ์ด๋Ÿฌํ•œ ๊ฒฝ๊ณ ๋ฅผ ํ•ด๊ฒฐํ–ˆ์Šต๋‹ˆ๊นŒ?

๋‚˜๋Š” ๋‹ค๋ฅธ ๋ฌธ์ œ๊ฐ€ ์žˆ์—ˆ๋‹ค. ๋‚ด ๋ชจ๋ธ์€ ๋‹ค๋ฅธ ๋ชจ๋ธ์—์„œ๋งŒ ์‚ฌ์šฉ๋˜๋Š” ์ž‘์—…์„ ๋„ฃ์Šต๋‹ˆ๋‹ค.

// realtime.js
yield put({ type: 'message', payload: { message } });

๋‹ค๋ฅธ ๋ชจ๋ธ์€ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ฉ”์‹œ์ง€๋ฅผ ์ˆ˜์‹ ํ•ฉ๋‹ˆ๋‹ค.

// someModel.js
const message = yield take('realtime/message');

realtime ๋ชจ๋ธ์€ message ์ž์ฒด์— ๋Œ€ํ•ด ์•„๋ฌด ๊ฒƒ๋„ ํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ message ํšจ๊ณผ๊ฐ€ ์ •์˜๋˜์–ด ์žˆ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊ทธ ๋•Œ๋ฌธ์— yield put({ type: 'message', payload: { message } }) ์—๋Š” dvajs ๋‚ด๋ถ€ ์•Œ๊ณ ๋ฆฌ์ฆ˜์ด ์ ‘๋‘์‚ฌ๋กœ ๋ถ™์ง€ ์•Š์•˜์œผ๋ฉฐ realtime/message ๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  ๋‚ด๊ฐ€ ์ˆ˜๋™์œผ๋กœ ์ ‘๋‘์‚ฌ๋ฅผ ๋ถ™์ด๋ฉด :

// realtime.js
yield put({ type: 'realtime/message', payload: { message } });

๋„ค์ž„์ŠคํŽ˜์ด์Šค์— ๋Œ€ํ•œ ๊ฒฝ๊ณ ๋ฅผ ๋˜์ง‘๋‹ˆ๋‹ค('...๋Š” ๋„ค์ž„์ŠคํŽ˜์ด์Šค ...'๋ฅผ ์ ‘๋‘์‚ฌ๋กœ ์‚ฌ์šฉํ•ด์„œ๋Š” ์•ˆ ๋ฉ๋‹ˆ๋‹ค).

๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๋ชจ๋ธ์— ๋”๋ฏธ ํšจ๊ณผ๋ฅผ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.

// realtime.js
'effects': {
  // dvajs requires effect to be defined to auto-prefix it with namespace
  // if add prefix manually then dvajs throws annoying warnings
  // https://github.com/dvajs/dva/issues/988
  message: () => { },
}

์ด์ œ ๊ฒฝ๊ณ ๊ฐ€ ์—†์œผ๋ฉฐ ๋‹ค๋ฅธ ๋ชจ๋ธ์€ realtime/message ์กฐ์น˜๋ฅผ ๋ฐ›์Šต๋‹ˆ๋‹ค.

๋ฌธ์ œ๋ฅผ ๋‹ค์‹œ ์—ฌ๋Š” ๊ฒƒ์ด ๊ทธ์˜ ์˜๊ฒฌ์„ ๋ฐ”๊พธ๋Š” ์ด์œ ๋ฅผ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค.
์†”๋ฃจ์…˜์€ ๊ดœ์ฐฎ์•„ ๋ณด์ด์ง€๋งŒ ์ˆ˜๋ฐฑ ๊ฐ€์ง€ ์ž‘์—…์ด ์žˆ์„ ๋•Œ ์ถ”๊ฐ€ ๋…ธ๋ ฅ์€ ๊ฐ€์น˜๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.
๋˜ํ•œ ์ž‘์—… ์œ ํ˜•(๋˜๋Š” ์ž‘์—… ์ƒ์„ฑ์ž ํ•จ์ˆ˜)์— ๋Œ€ํ•ด ์ƒ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ผ๋ฐ˜์ ์ธ ๊ด€ํ–‰์ด๋ฏ€๋กœ ํ•ญ์ƒ ์ ‘๋‘์‚ฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค.
์•„์ง ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์„ ์ฐพ์ง€ ๋ชปํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ํ˜„์žฌ ํ”„๋กœ์ ํŠธ์— ๋Œ€ํ•ด dva๋ฅผ ๋ถ„๊ธฐํ•œ ๋‹ค์Œ ๋‹ค์‹œ๋Š” ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์„ ๊ณ ๋ คํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚˜๋Š” ํŒŒํ‹ฐ์— ์กฐ๊ธˆ ๋Šฆ์—ˆ์ง€๋งŒ ์ด๊ฒƒ์€ ๋‚ด๊ฐ€ ์˜ค๋ฅ˜๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•œ ํ•ดํ‚น์ž…๋‹ˆ๋‹ค. ํ™•์‹คํžˆ ์ข‹์€ ์†”๋ฃจ์…˜์€ ์•„๋‹ˆ์ง€๋งŒ ์ ์–ด๋„ ์˜ค๋ฅ˜ ์ถœ๋ ฅ์„ ์–ต์ œํ•ฉ๋‹ˆ๋‹ค.

```// my-model.js
console.error = ๋ฉ”์‹œ์ง€ => {
if (message.indexOf("prefixNamespace") === -1) {
console.log(๋ฉ”์‹œ์ง€);
}
};

๋‚˜๋Š” ํŒŒํ‹ฐ์— ์กฐ๊ธˆ ๋Šฆ์—ˆ์ง€๋งŒ ์ด๊ฒƒ์€ ๋‚ด๊ฐ€ ์˜ค๋ฅ˜๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๋ฐ ์‚ฌ์šฉํ•œ ํ•ดํ‚น์ž…๋‹ˆ๋‹ค. ํ™•์‹คํžˆ ์ข‹์€ ์†”๋ฃจ์…˜์€ ์•„๋‹ˆ์ง€๋งŒ ์ ์–ด๋„ ์˜ค๋ฅ˜ ์ถœ๋ ฅ์„ ์–ต์ œํ•ฉ๋‹ˆ๋‹ค.

console.error = message => {
  if (message.indexOf("prefixNamespace") === -1) {
    console.log(message);
  }
};

์ฝ”๋“œ๋ฅผ ๋ช…ํ™•ํžˆ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ? ์ฝ”๋“œ๋ฅผ ์–ด๋””์— ๋‘์—ˆ์Šต๋‹ˆ๊นŒ?

src/app.tsx์— ๋„ฃ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  console.error๋ฅผ console.log๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๋Œ€์‹  console.error๋ฅผ ์œ ์ง€ํ•˜๋ ค๋Š” ๊ฒฝ์šฐ ์ด ์ฝ”๋“œ๋ฅผ ์‹œ๋„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

const errorLog = console.error;
  console.error = (...rest) => {
    if (rest[0] && rest[0].indexOf('[sagaEffects.put]') === -1) {
      errorLog.call(console, ...rest);
    }
  };

src/app.tsx์— ๋„ฃ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  console.error๋ฅผ console.log๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๋Œ€์‹  console.error๋ฅผ ์œ ์ง€ํ•˜๋ ค๋Š” ๊ฒฝ์šฐ ์ด ์ฝ”๋“œ๋ฅผ ์‹œ๋„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

const errorLog = console.error;
  console.error = (...rest) => {
    if (rest[0] && rest[0].indexOf('[sagaEffects.put]') === -1) {
      errorLog.call(console, ...rest);
    }
  };

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์•ฑ ์–ด๋””์—๋‚˜ ๋„ฃ์„ ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฑธ ์•Œ๊ฒŒ ๋˜์—ˆ์–ด์š”:))

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰