์๋
ํ์ธ์ฉ!!! ๋๋ฅ๋๋น!
์ค๋์ React Native์ ๋๋ฒ๊ฑฐ ๋๊ตฌ์ธ react-native-debugger์ redux-devtools, react-native-debugger-open์ ์ธํ
ํด๋ณด๊ฒ ์ต๋๋ค~~
์ฒ์์ ๋ฆฌ์กํธ๋ค์ดํฐ๋ธ ์์ํ ๋, ์ฝ์์ ์ฐ์ด๋ณผ ์ ์๋ค๋ ๊ฒ์ ๋ ์ถฉ๊ฒฉ์ ๋ฐ๊ณ
์ด๋ป๊ฒ ํด์ผํ ์ง ๊ฑฑ์ ์ ํ๋ค๊ฐ, ์ฃผ๋ณ ์ ์ผํ rn ๊ฐ๋ฐ์๋ถ๊ป์ ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ถ์ฒํด์ฃผ์
จ๋ค.
(๊ฐ์ฌํด์ฉ..์ ํ๋..โค๏ธ)
๋๋ถ๋ถ์ ๋ฆฌ์กํธ๋ค์ดํฐ๋ธ ๊ฐ๋ฐ์๋ผ๋ฉด ๋๋ถ๋ถ ์ฌ์ฉํ๊ณ ๊ณ์ค ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ ๋๋ค.
brew update && brew install --cask react-native-debugger
์ด๋ฐ์์ผ๋ก ๋ง์ด์ง.. 1.์์ ์ค์น๋ app ํ์ผ์ ์ฌ๊ธฐ์ ์ฎ๊ฒจ์ผ๋๋ค๊ณ ํ๋ค.
๋๋ ์์ฎ๊ฒจ๋ ์์์ ์ ์ฎ๊ฒจ ์ง๋๋ผ.. ๋ค๋ค ํ์ธ ํ๋ฒ ํด๋ณด์๊ธธ~
์ด๋ ๊ฒ ์๊ธด ์ธ์คํด์ค๋ฅผ ํ์ธํ ์ ์๋ค! ๋ฆฌ์กํธ ๊ฐ๋ฐ์ ํด๋ดค๋ค๋ฉด ๋๋ ์ต์ํ๊ฒ ์๊ฐํ๋ ํ๋ฉด... redux ๋๋ฒ๊น ํ๋ฉด์ด์งใ ใ ๋ฐ๊ฐ๋ค ์ฆ๋งฌ๋ฃจ
์ง๊ธ์ ์์ ์ด๋ฏธ์ง๋ ์๋ฎฌ๋ ์ดํฐ ํน์ ์๋ฎฌ๋ ์ดํฐ์ ์ฐ๊ฒฐ๋์ด์์ง ์๋ค.
์ฐ๊ฒฐ์ํค๊ธฐ ์ํด์๋ ์๋ฎฌ๋ ์ดํฐ, ์๋ฎฌ๋ ์ดํฐ์์ ๊ฐ๋ฐ์๋๊ตฌ๋ฅผ ์ผ์ ๋๋ฒ๊น
์ ์์์์ผ์ค์ผ ํ๋ค.
์๋ฎฌ๋ ์ดํฐ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ํค๋ ๋จ์ถํค๋ command + d
์๋ฎฌ๋ ์ดํฐ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ํค๋ ๋จ์ถํค๋ command + m
๊ฐ๋ฐ์๋๊ตฌ์ debug๋ฅผ ์ผ์ ๋๋ฒ๊น ์ ์์ํ๋ค. ๊ทธ๋ฌ๋ฉด react-native-debugger์ ์ฐ๊ฒฐ๋๋ค. ์ ์ด์ง~ ์ฌ๊ธฐ์ ๋ฉ์ถ์ง ๋ง๊ณ redux-devtools๋ฅผ ์ฐ๊ฒฐํด์ ๋ฆฌ๋์ค๋ ์ฐ๊ฒฐ์ ํด์ฃผ์
ํฐ๋ฏธ๋์ ์ผ์ ํ๋ก์ ํธ ๊ฒฝ๋ก๋ก ์ด๋ํด์ redux-devtools๋ฅผ ์ค์นํ๋ค.
npm install --save-dev redux-devtools-extension
or
yarn add redux-devtools-extension
import {createStore, applyMiddleware} from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
let modules = require('reducers/Reducer').default;
// modules๋ ์ ๋ฆฌ๋์ ๋ค ์
๋๋ค.
const store = createStore(modules, composeWithDevTools(applyMiddleware()));
// store๋ฅผ ์์ฑํ๋ createStore()๋ฉ์๋๋ฅผ ์ฐพ์๊ฐ applyMiddleware๋ฉ์๋๋ฅผ composeWithDevTools๋ก ๊ฐ์ธ์ค๋ค.
์ ๊ณง๋ด~~
ํ๋ก์ ํธ ์์ํ ๋ react-native-debugger๋ฅผ ์๋์ผ๋ก ์ผ์ฃผ๋ react-native-debugger-open!!!
์๋๋ ํ๋ก์ ํธ๋ฅผ run ํ ๋๋ง๋ค, ๋๋ฒ๊น
์ on ํด์ฃผ์ด์ผ react-native-debugger๊ฐ ์คํ๋๋๋ฐ, ๊ทธ๊ฒ ์๋ ํ๋ก์ ํธ๊ฐ run ํ ๋๋ง๋ค ๊ธฐ๋ณธ์ผ๋ก ์คํํด์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์
๋๋ค.
npm i --save-dev react-native-debugger-open
or
yarn add react-native-debugger-open --save-dev
"scripts": {
"postinstall": "rndebugger-open"
}
npm run postinstall
or
yarn postinstall
ํฐ๋ฏธ๋์ ์ด๋ ๊ฒ ๋์ค๋ฉด ์ฑ๊ณต์ ์ผ๋ก ์ธํ
์ด ๋๊ฒ!
์์ด์ง~~~
์ ๋ง์ ๋ง rn ๊ฐ๋ฐ์์ ์์คํ๊ณ , ๊ธฐ๋ณธ์ ์ธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ฉ. ์ฒ์ ์ ํ๋ ๋ถ๋ค์ด ๋ณด์๊ณ ์ ๊ฐ ์ฒ์ ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๊ฒฝํํ์๋ ์ฒ๋ผ ๋์ ๋ฐ์ผ์๊ธธ ๋ฐ๋์ฉ!!!
์ฝ์ด์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋น!!! ๋กํ!!!๐โ
npm run postinatll ์คํ์์
npm run postinstall