[RN Library ๐Ÿ“š] ๋ฆฌ์•กํŠธ๋„ค์ดํ‹ฐ๋ธŒ ๋””๋ฒ„๊ฑฐ ๋„๊ตฌ (react-native-debugger / redux-devtools / react-native-debugger-open)

๋„๋””ยท2020๋…„ 7์›” 22์ผ
10

RN Library ๐Ÿ“š

๋ชฉ๋ก ๋ณด๊ธฐ
1/12

๊ฐœ์š”

์•ˆ๋…•ํ•˜์„ธ์šฉ!!! ๋„๋”ฅ๋‹ˆ๋‹น!
์˜ค๋Š˜์€ React Native์˜ ๋””๋ฒ„๊ฑฐ ๋„๊ตฌ์ธ react-native-debugger์™€ redux-devtools, react-native-debugger-open์„ ์„ธํŒ…ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค~~

์ฒ˜์Œ์— ๋ฆฌ์•กํŠธ๋„ค์ดํ‹ฐ๋ธŒ ์‹œ์ž‘ํ•  ๋•Œ, ์ฝ˜์†”์„ ์ฐ์–ด๋ณผ ์ˆ˜ ์—†๋‹ค๋Š” ๊ฒƒ์— ๋Œ€ ์ถฉ๊ฒฉ์„ ๋ฐ›๊ณ 
์–ด๋–ป๊ฒŒ ํ•ด์•ผํ• ์ง€ ๊ฑฑ์ •์„ ํ•˜๋‹ค๊ฐ€, ์ฃผ๋ณ€ ์œ ์ผํ•œ rn ๊ฐœ๋ฐœ์ž๋ถ„๊ป˜์„œ ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ถ”์ฒœํ•ด์ฃผ์…จ๋‹ค.
(๊ฐ์‚ฌํ•ด์šฉ..์• ํ”Œ๋‹˜..โค๏ธ)

react-native-debugger ์„ธํŒ…

๋Œ€๋ถ€๋ถ„์˜ ๋ฆฌ์•กํŠธ๋„ค์ดํ‹ฐ๋ธŒ ๊ฐœ๋ฐœ์ž๋ผ๋ฉด ๋Œ€๋ถ€๋ถ„ ์‚ฌ์šฉํ•˜๊ณ  ๊ณ„์‹ค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ž…๋‹ˆ๋‹ค.

1. ํ„ฐ๋ฏธ๋„์„ ์—ด๊ณ , root ๊ฒฝ๋กœ์—์„œ ๋ช…๋ น์–ด๋ฅผ ์‹คํ–‰ํ•ด์„œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ค์น˜

brew update && brew install --cask react-native-debugger

2. ๊ทธ ๋‹ค์Œ์—๋Š” mac OS๋ผ๋ฉด, Applications๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ํด๋”๊ฐ€ ๋”ฐ๋กœ ์žˆ๋‹ค.


์ด๋Ÿฐ์‹์œผ๋กœ ๋ง์ด์ง€.. 1.์—์„œ ์„ค์น˜๋œ app ํŒŒ์ผ์„ ์—ฌ๊ธฐ์— ์˜ฎ๊ฒจ์•ผ๋œ๋‹ค๊ณ  ํ•œ๋‹ค.
๋‚˜๋Š” ์•ˆ์˜ฎ๊ฒจ๋„ ์•Œ์•„์„œ ์ž˜ ์˜ฎ๊ฒจ ์ง€๋”๋ผ.. ๋‹ค๋“ค ํ™•์ธ ํ•œ๋ฒˆ ํ•ด๋ณด์‹œ๊ธธ~

3. ๋””๋ฒ„๊น… app์„ ์ผœ๋ณด์ž.

์ด๋ ‡๊ฒŒ ์ƒ๊ธด ์ธ์Šคํ„ด์Šค๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค! ๋ฆฌ์•กํŠธ ๊ฐœ๋ฐœ์„ ํ•ด๋ดค๋‹ค๋ฉด ๋„˜๋‚˜ ์ต์ˆ™ํ•˜๊ฒŒ ์ƒ๊ฐํ•˜๋Š” ํ™”๋ฉด... redux ๋””๋ฒ„๊น… ํ™”๋ฉด์ด์ง€ใ… ใ…œ ๋ฐ˜๊ฐ‘๋‹ค ์ฆ๋งฌ๋ฃจ

4. react native ํ”„๋กœ์ ํŠธ์™€ ์—ฐ๊ฒฐํ•˜์ž

์ง€๊ธˆ์€ ์œ„์˜ ์ด๋ฏธ์ง€๋Š” ์—๋ฎฌ๋ ˆ์ดํ„ฐ ํ˜น์€ ์‹œ๋ฎฌ๋ ˆ์ดํ„ฐ์™€ ์—ฐ๊ฒฐ๋˜์–ด์žˆ์ง€ ์•Š๋‹ค.
์—ฐ๊ฒฐ์‹œํ‚ค๊ธฐ ์œ„ํ•ด์„œ๋Š” ์—๋ฎฌ๋ ˆ์ดํ„ฐ, ์‹œ๋ฎฌ๋ ˆ์ดํ„ฐ์—์„œ ๊ฐœ๋ฐœ์ž๋„๊ตฌ๋ฅผ ์ผœ์„œ ๋””๋ฒ„๊น…์„ ์‹œ์ž‘์‹œ์ผœ์ค˜์•ผ ํ•œ๋‹ค.

์‹œ๋ฎฌ๋ ˆ์ดํ„ฐ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋ฅผ ํ‚ค๋Š” ๋‹จ์ถ•ํ‚ค๋Š” command + d
์—๋ฎฌ๋ ˆ์ดํ„ฐ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋ฅผ ํ‚ค๋Š” ๋‹จ์ถ•ํ‚ค๋Š” command + m

๊ฐœ๋ฐœ์ž๋„๊ตฌ์˜ debug๋ฅผ ์ผœ์„œ ๋””๋ฒ„๊น…์„ ์‹œ์ž‘ํ•œ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด react-native-debugger์™€ ์—ฐ๊ฒฐ๋œ๋‹ค. ์˜ ์ด์ง€~ ์—ฌ๊ธฐ์„œ ๋ฉˆ์ถ”์ง€ ๋ง๊ณ  redux-devtools๋ฅผ ์—ฐ๊ฒฐํ•ด์„œ ๋ฆฌ๋•์Šค๋„ ์—ฐ๊ฒฐ์„ ํ•ด์ฃผ์ž

redux-devtools ์„ธํŒ…

1. ์„ค์น˜๋ฅผ ํ•˜์ž.

ํ„ฐ๋ฏธ๋„์„ ์ผœ์„œ ํ”„๋กœ์ ํŠธ ๊ฒฝ๋กœ๋กœ ์ด๋™ํ•ด์„œ redux-devtools๋ฅผ ์„ค์น˜ํ•œ๋‹ค.

npm install --save-dev redux-devtools-extension 

or

yarn add redux-devtools-extension

2. store ์„ค์ • ํŒŒ์ผ์„ ์ˆ˜์ •ํ•˜์ž.

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๋กœ ๊ฐ์‹ธ์ค€๋‹ค. 

3. ํ”„๋กœ์ ํŠธ๋ฅผ ๋ฆฌ๋กœ๋“œ ํ•˜๋ฉด redux๊นŒ์ง€ ํ™œ์„ฑํ™” ์™„๋ฃŒ!

์ œ๊ณง๋‚ด~~

react-native-debugger-open ์„ธํŒ…

ํ”„๋กœ์ ํŠธ ์‹œ์ž‘ํ•  ๋•Œ react-native-debugger๋ฅผ ์ž๋™์œผ๋กœ ์ผœ์ฃผ๋Š” react-native-debugger-open!!!
์›๋ž˜๋Š” ํ”„๋กœ์ ํŠธ๋ฅผ run ํ• ๋•Œ๋งˆ๋‹ค, ๋””๋ฒ„๊น…์„ on ํ•ด์ฃผ์–ด์•ผ react-native-debugger๊ฐ€ ์‹คํ–‰๋˜๋Š”๋ฐ, ๊ทธ๊ฒŒ ์•„๋‹Œ ํ”„๋กœ์ ํŠธ๊ฐ€ run ํ•  ๋•Œ๋งˆ๋‹ค ๊ธฐ๋ณธ์œผ๋กœ ์‹คํ–‰ํ•ด์ฃผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ž…๋‹ˆ๋‹ค.

1. ํ”„๋กœ์ ํŠธ ๊ฒฝ๋กœ๋กœ ๊ฐ€์„œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์„ค์น˜.

npm i --save-dev react-native-debugger-open

or

yarn add react-native-debugger-open --save-dev

2. package.json ์ฝ”๋“œ ์ˆ˜์ •

"scripts": {
  "postinstall": "rndebugger-open"
}

3. ์Šคํฌ๋ฆฝํŠธ ๋ช…๋ น์–ด ์‹คํ–‰

npm run postinstall

or 

yarn postinstall

4. ์„ฑ๊ณต!!


ํ„ฐ๋ฏธ๋„์— ์ด๋ ‡๊ฒŒ ๋‚˜์˜ค๋ฉด ์„ฑ๊ณต์ ์œผ๋กœ ์„ธํŒ…์ด ๋œ๊ฒƒ!
์˜์ด์ง€~~~

์ •๋ง์ •๋ง rn ๊ฐœ๋ฐœ์—์„œ ์†Œ์ค‘ํ•˜๊ณ , ๊ธฐ๋ณธ์ ์ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ˆ์šฉ. ์ฒ˜์Œ ์ ‘ํ•˜๋Š” ๋ถ„๋“ค์ด ๋ณด์‹œ๊ณ  ์ œ๊ฐ€ ์ฒ˜์Œ ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๊ฒฝํ—˜ํ–ˆ์„๋•Œ ์ฒ˜๋Ÿผ ๋„์›€ ๋ฐ›์œผ์‹œ๊ธธ ๋ฐ”๋ž˜์šฉ!!!

์ฝ์–ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹น!!! ๋•กํ!!!๐Ÿ™‡โ€

profile
์ถฉ์ „์ค‘..๐Ÿค”

3๊ฐœ์˜ ๋Œ“๊ธ€

comment-user-thumbnail
2021๋…„ 4์›” 16์ผ

npm run postinatll ์˜คํƒ€์—์š”
npm run postinstall

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ
comment-user-thumbnail
2021๋…„ 10์›” 5์ผ

์•ˆ๋…•ํ•˜์„ธ์š”! brew cask ์‚ฌ์šฉ๋ฒ•์ด 2021๋…„๋ถ€ํ„ฐ ๋ณ€๊ฒฝ๋˜์—ˆ๋‹ค๊ณ  ํ•˜๋„ค์š”!
($brew install --cask ํ”„๋กœ๊ทธ๋žจ๋ช…)
ํ˜น์‹œ cask ์„ค์น˜ ํ›„์—๋„ ์—๋Ÿฌ ๋œจ๋Š” ๋ถ„๋“ค์€ ์œ„ ๋ช…๋ น์–ด๋กœ ์ด์šฉํ•˜์‹œ๋ฉด ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค!

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ