분류 전체보기
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 시뮬레이터를 기준으로 설명하겠슴둥) 시뮬..
정리노트: SPA와 CSR, SSR(+ SSG)
GitHub - 1nno-vator/learn-archive Contribute to 1nno-vator/learn-archive development by creating an account on GitHub. github.com SPA와 CSR, SSR(+ SSG) (22.08.23) 아래 내용은 예외의 경우가 있을 수 있습니다. SPA (Single Page Application) (서비스 관점에서) 한 페이지 내에서 모든 서비스를 처리하는 것을 말한다. (반대되는 개념으로는 MPA (Multi Page Application)이 있다.) 단 하나의 HTML 내에서 변경이 필요한 부분을 Javascript를 통해 동적으로 변경해나간다. 대표적인 SPA 프레임워크(혹은 라이브러리)로는 React, Vu..
정리노트: DOM과 BOM
GitHub - 1nno-vator/learn-archive Contribute to 1nno-vator/learn-archive development by creating an account on GitHub. github.com DOM과 BOM (22.08.22) DOM (Document Object Model, 문서 객체 모델) HTML, XML 문서에 Javascript, Python등 프로그래밍 언어를 통해 접근할 수 있는 interface이다. DOM은 문서의 구조화된 표현(노드 트리 구조)을 제공하며 이를 통해 스크립팅 언어로 웹 페이지를 접근할 수 있다. Hello, DOM! 위와 같은 HTML 문서는 아래와 같은 트리 구조를 가진 DOM으로 생성된다. html - head - body -..
정리노트: 자바스크립트는 싱글스레드 (+call stack, queue, event loop)
GitHub - 1nno-vator/learn-archive Contribute to 1nno-vator/learn-archive development by creating an account on GitHub. github.com 자바스크립트는 싱글스레드 (22.08.16) 자바스크립트는 싱글 스레드이다. 싱글 스레드라는 것은 동기적(순차적)으로 한 번에 하나의 일만 처리할 수 있다는 것이다. function print2() { console.log('2'); } function doSomething() { console.log('doSomething'); } function main() { console.log('1'); print2(); doSomething(); } main(); 위와 같은 코드가..