리액트 네이티브(React-native)의 디버깅 도구 (React-devtools, Reactoron)

이 글을 돌돌이에게 바칩니다. 리액트 네이티브는 디버깅이 복잡하다. 일반적인 웹 페이지를 만들 때처럼 브라우저 개발자 도구를 쓴다던지 하는게 제한적이기 때문이다. 그 때문인지 리액트 네이티브를 디버깅 할 수 있는 여러 툴들이 존재한다. 그래두 불편맨 ㅋㅋ 아무튼 오늘은 아래와 같은 내용들을 정리해보고자 한다. 1. Debug JS Remotely (Chrome Developer Tools, 크롬 개발자 도구) + 내장 Inspector 2. React devtools 3. Reactoron 1. Debug JS Remotely + 내장 Inspector 이름부터 알 수 있지만 리액트 네이티브의 스크립트 코드에 대한 디버깅은 기본적으로 제공한다. (mac + ios 시뮬레이터를 기준으로 설명하겠슴둥) 시뮬..

React에서 화면을 만드는 흐름 (index.js, index.html, app.js)

2020/06/02 - [프로그래밍/기타] - VS Code로 React + SpringBoot 개발환경 세팅 (2/2) VS Code로 React + SpringBoot 개발환경 세팅 (2/2) 2020/06/02 - [프로그래밍/기타] - VS Code로 React + SpringBoot 개발환경 세팅 (1/2) VS Code로 React + SpringBoot 개발환경 세팅 (1/2) 스프링부트 환경 먼저 구성하고 시작. 앞글 참고... 2020/05/28 - [프로.. 1nnovator.tistory.com 지난번 VS Code로 리액트와 스프링부트 개발환경을 세팅해보고 간단한 코드를 적어보았다. https://lemontia.tistory.com/912 [react, springboot] rea..

VS Code로 Java, SpringBoot 개발환경 세팅 (1/2 - Java)

[JDK + VS Code 설치] * 링크로 대체... - JDK 설치 (링크) - VS Code 설치 (링크) [VS Code에서 Java 개발환경 구성하기] VS Code는 기본이 텍스트에디터이므로, VS코드를 이클립스나 IntelliJ 같은 IDE처럼 사용하기 위해서 확장기능(Extensions)을 설치하여야한다. VS Code 실행 후, 왼쪽 아이콘 중 블록모양 아이콘을 눌러 Extensions 탭으로 들어간다. 검색창에 Java Extension Pack 이라고 검색하고 Install 버튼을 눌러 설치한다. [ JDK HOME 설정 ] 코드를 작성하기 전에 해줘야할 일이 있다. File -> Preferences -> Settings로 가서 java.home 이라고 검색해준다. 그리고 'Edit..

React Native TextInput CJK State Change Issue

https://github.com/facebook/react-native/issues/41933 [iOS] The styling does not change when the CJK character enter TextInput · Issue #41933 · facebook/react-nativeDescription When entering CJK characters in the TextInput component, the styling does not change. I wanted to change the styling according to the type of characters entered, but I don't think react...github.com

Reactoron으로 Redux state 모니터링 하기 + console.log 연결

2022.08.30 - [프로그래밍] - 리액트 네이티브(React-native)의 디버깅 도구 (React-devtools, Reactoron) 리액트 네이티브(React-native)의 디버깅 도구 (React-devtools, Reactoron) 이 글을 돌돌이에게 바칩니다. 리액트 네이티브는 디버깅이 복잡하다. 일반적인 웹 페이지를 만들 때처럼 브라우저 개발자 도구를 쓴다던지 하는게 제한적이기 때문이다. 그 때문인지 리액트 1nnovator.tistory.com 이 글을 돌돌이에게 바칩니다. 설치 및 기본세팅에 관한 것은 이전 포스팅을 참고해주셈 Reactoron은 다른 개발자 도구와는 달리 Redux state에 대한 모니터링을 지원한다. 그런데 자동으로 해주는 것은 아니고, 세팅을 해주어야한다..

리액트 네이티브(React-native)의 디버깅 도구 (React-devtools, Reactoron)

이 글을 돌돌이에게 바칩니다. 리액트 네이티브는 디버깅이 복잡하다. 일반적인 웹 페이지를 만들 때처럼 브라우저 개발자 도구를 쓴다던지 하는게 제한적이기 때문이다. 그 때문인지 리액트 네이티브를 디버깅 할 수 있는 여러 툴들이 존재한다. 그래두 불편맨 ㅋㅋ 아무튼 오늘은 아래와 같은 내용들을 정리해보고자 한다. 1. Debug JS Remotely (Chrome Developer Tools, 크롬 개발자 도구) + 내장 Inspector 2. React devtools 3. Reactoron 1. Debug JS Remotely + 내장 Inspector 이름부터 알 수 있지만 리액트 네이티브의 스크립트 코드에 대한 디버깅은 기본적으로 제공한다. (mac + ios 시뮬레이터를 기준으로 설명하겠슴둥) 시뮬..