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

문제 발생 리액트 네이티브(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..

차트js에서 y축의 숫자 소수점을 제거하는 방법은 stepSize: 1 이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 scales: { yAxes: [ { ticks: { stepSize: 1, min: 0 } } ] // xAxes: [ // { // barPercentage: 0.7, // maxBarThickness: 80 // } // ] } cs 베타존 : 네이버쇼핑 스마트스토어 나를 꾸미다 - 인테리어소품 베타존 smartstore.naver.com

Vue 인스턴스를 강제로 렌더링한다. 모든 하위 컴포넌트에는 영향을 미치지않으며, 슬롯 그 자체가 삽입된 슬롯 자체 및 하위 컴포넌트에만 영향을 미친다. 다만, Vue에서는 많이 사용하게 되면 성능저하가 생길 수 있다고 한다. 재렌더링하는방법 : 1 this.$forceUpdate(); cs 출처 : https://kr.vuejs.org/v2/api/index.html API — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 베타존 : 네이버쇼핑 스마트스토어 나를 꾸미다 - 인테리어소품 베타존 smartstore.naver.com