๋ฑ๋ก ๋๋ "๋ฃ๊ธฐ" ํจ๊ณผ์์ "๋ฐฐ์น" ๊ธฐ๋ฅ์ ์ฌ์ฉํ ๋ ์์ ๋๋ "์ ์ฉํ" ๊ฒฝ๊ณ ๋ฅผ ๋ ์ ์์ต๋๊น?
๋๋ ์ต์ํ ์ ํ ์ฌํญ์ผ๋ก ๋ง๋์ญ์์ค.
๋๋ 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๋ ์์ ์ ํ์ ๋ฌธ์์ด์ ์ง์ ์ฌ์ฉํ์ง ์๋ ์ฌ์ฉ์๋ฅผ ์ฒ๋ฒํฉ๋๋ค.
๋ฐฉ๊ธ ๊ฐ์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ต๋๋ค.
redux-actions๋ก ์์
์ ๊ด๋ฆฌํ๋ ๊ฒ์ด ํธ๋ฆฌํฉ๋๋ค.
๊ทธ๋ฌ๋ ๊ฒฝ๊ณ ๋ก ์ธํด ๋ชจ๋ธ์์๋ ์ฌ์ฉํ ์ ์์ต๋๋ค.
์ด ๋ฌธ์ ๊ฐ ๊ด์ฌ์ ๋ฐ๋ ๋ฐ ๋์์ด ๋๋ ๊ฒฝ์ฐ๋ฅผ ๋๋นํ์ฌ pull ์์ฒญ์ ๋ง๋ค์์ต๋๋ค.
ํ๋ก๋์ ์ ๋ํ ๋ถ๋ณ ๋ฐ ๊ฒฝ๊ณ ๋ฅผ ์ ๊ฑฐ ํ๋ ค๋ฉด 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); } };
๊ฐ์ฌํฉ๋๋ค. ์ฑ ์ด๋์๋ ๋ฃ์ ์ ์๋ค๋ ๊ฑธ ์๊ฒ ๋์์ด์:))
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๋๋ ํํฐ์ ์กฐ๊ธ ๋ฆ์์ง๋ง ์ด๊ฒ์ ๋ด๊ฐ ์ค๋ฅ๋ฅผ ํด๊ฒฐํ๋ ๋ฐ ์ฌ์ฉํ ํดํน์ ๋๋ค. ํ์คํ ์ข์ ์๋ฃจ์ ์ ์๋์ง๋ง ์ ์ด๋ ์ค๋ฅ ์ถ๋ ฅ์ ์ต์ ํฉ๋๋ค.
```// my-model.js
console.error = ๋ฉ์์ง => {
if (message.indexOf("prefixNamespace") === -1) {
console.log(๋ฉ์์ง);
}
};