리액트 네이티브(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로 웹에 띄워보자 (react-notion)

코로나로 인해 언택트 바람이 부는 이 시기... 의도치않게 여러 기업들이 최신기술을 도입하는 경우가 생기고 있다. 화상회의 도구 Zoom을 포함해 여러 회사의 협업도구들이 사용되고 있다. 사실 노션 그 자체는 협업을 위한 도구라고 한정짓기보다는 그들이 소개하고 있는대로 '올인원 워크스페이스'라고 설명할 수 있는데... 기업이나 개인이나 자신들의 정보를 다양하게 정리할 수 있는 좋은 수단으로 각광받고 있다. 아무튼, 오늘 포스팅해볼 내용은 이러한 노션들을 웹 상에 공개하는 방법에 대한 이야기이다. + 다 쓰고 나니까 글이 길어졌는데 사실 사진이 많아서 긴거지 내용은 별로 없다. 아 쉽다쉬워 첫번째 방법 노션을 웹으로 가져오는 첫번째 방법은 '노션 공개페이지 사용' 이다. 노션에서 글을 하나 작성하고 오른쪽..

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..

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 시뮬레이터를 기준으로 설명하겠슴둥) 시뮬..