탁월함은 어떻게 나오는가?

문제 발생 리액트 네이티브(RN)에서 ios/android 에뮬레이터를 실행해볼려고 npm start 로 metro를 실행할려고 했다. 하지만 [ metro-file-map: Watchman crawl failed. Retrying once with node crawler. ] 왓치맨 에러가 발생했다. watchman 은 페이스북에서 만든, nodemon or chokidar 처럼 파일단에서 변경사항이 발생했을 때 어떠한 작업을 하기 위한 용도의 프로그램이다. 리액트 네이티브에서는 이를 사용해서, 작업 파일에 변경사항이 생겼을 때 번들링을 다시 하거나 refresh 를 하는데 사용한다. 결국 metro-bundler 서버를 실행 시켰을때(npm start) 위의 에러가 발생하면 watchman 동작이 정..

타입스크립트 리액트로 event.target 이후로 접근이 안될 경우가 생긴다. 그 중에서 event.target.innerText 에 접근하는 방법을 공유한다. 1 2 3 4 const selectedDay = (e: React.MouseEvent) => { const eventTarget = e.target as HTMLElement; console.log(eventTarget.innerText); }; Colored by Color Scripter cs 그 외에도 HTMLElement 속성이 존재한다면 접근이 가능하다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 interface HTMLElement extends El..

리액트 정의 : Virtyal DOM은 무엇인가? Virtual DOM(VDOM)은 UI의 이상적인 또는 "가상"적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 "실제" DOM과 동기화하는 프로그래밍 개념이다. 이 과정을 재조정(Reconciliation)이라고 한다. 이 접근방식이 React의 선언적 API를 가능하게 한다. React에게 원하는 UI의 상태를 알려주면 DOM이 그 상태와 일치하도록 한다. 이러한 방식은 앱 구축에 사용해야 하는 어트리뷰트 조작, 이벤트 처리, 수동 DOM 업데이트를 추상화한다. "virtual DOM"은 특정 기술이라기보다는 패턴에 가깝기 때문에 사람들마다 의미하는 바가 다르다. React의 세계에서 "virtual DOM"이라는 용어는 보통 사..

프로젝트를 진행하면서 리액트(REACT)에서 배열에 빈배열이 아닐경우에 동적으로 테이블을 그려주는 작업을 진행하고 싶었다. 하지만, 오랜만에 진행하려고 하니 헷갈려서 잃지않기 위해 적어놓기로 했다. 사람은 정말.. 망각의 동물인듯.. 동적으로 그리기 위한 코드 : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 {/* 보유 종목 */} {assetArr.length === 0 ? ( "" ) : ( 종목명 보유 수량 매수 가격 총 매수금액 비중 {assetRate.map((el) => { return ( {el.stock} {el.stock_ho..

리액트를 사용하면 두가지 스타일로 컴포넌트를 작성할 수 있다. 클래스와 함수 스타일로 작성이 가능한 것이다. 실제로 초기에는 상태를 조작할 수 있는 클래스(Class) 컴포넌트가 대세였으며, 함수(Function) 컴포넌트는 훅(hook)기능이 추가가 되면서 컴포넌트의 작성의 대세는 변하게 되었다. 여기서 우리가 알아야 하는 점은 함수형 컴포넌트는 틀린말이고, 함수 컴포넌트가 맞는말이라는 것이다. 그렇다면 중요한건, 우리는 흔하게 함수형(Functional) 컴포넌트라고 부르지만, 과연 함수형 컴포넌트라고도 부르는것은 적절한것일까?? 밑에 이미지는 구글의 검색 결과이다. 이런 의문점까지 도달했다면 우리는 함수형 컴포넌트가 무엇인지 생각해 봐야할 것이다. 나는 개인적으로 내가 잘모르는것은 나보다 뛰어난 사..

1) Nivo.roks https://nivo.rocks/components Components | nivo nivo.rocks 2) Recharts https://recharts.org/en-US 3) React-chartjs-2 https://github.com/reactchartjs/react-chartjs-2 GitHub - reactchartjs/react-chartjs-2: React components for Chart.js, the most popular charting library React components for Chart.js, the most popular charting library - GitHub - reactchartjs/react-chartjs-2: React comp..

DOM이란? - DOM(Document Object Model)이란, 객체를 통해 구조화된 문서를 표현하는 방법이다. - DOM은 트리형태로 되어 있어서 특정 node를 찾을 수도 있고 수정하거나 제거 할 수 있다. Virtual DOM이란? - VirtualDOM을 이용하면 실제 DOM에 접근하여 조작하는 대신에, 이를 추상화시킨 자바스크립트 객체를 구성하여 사용한다. - DOM의 상태를 메모리에 저장하고 변경 전과 변경 후의 상태를 비교한 뒤 최소한의 내용만 반영하는 기능이다. 가상 DOM은 DOM의 상태를 메모리 위에 올려두고 DOM에 변경이 있을 때만 해당 변경을 반영한다. - 리액트가 모든 처리를 대신 해주기 때문에 DOM API 조작 작업을 신경쓸 필요가 없다. React DOM이란? - Re..

[리액트란?] 리액트를 사용하여 프론트엔드 개발을 할 때 두가지 방법으로 컴포넌트를 선언할 수 있다. 과거에는 클래스형 컴포넌트를 주로 사용했지만, 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있다. 두가지 방법에 대해 알고 있어야, 필요한 상황에 맞게 사용할 수 있으므로 각각의 방법에 대해서 좀 더 깊이있게 살펴봐야 겠다. 컴포넌트는 단순한 템플릿 이상의 기능을 수행한다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 기능을 하는 것은 물론, 라이플 사이클 API를 통해 컴포넌트가 화면에 나타날때, 사라질 때, 변할 떄 작업을 수행할 수도 있다. 컴포넌트의 목적에 따라 프리젠테이션 컴포넌트..