IT/React + TypeScript 11

Vite Alias path 설정 (tsconfig.json)

Webpack (CRA 또는 nextjs) Vite tsconfig.json만 설정 tsconfig.json만 설정 vite.config.js 에도 path 설정이 필요 tsconfig.json "paths": { "@/*": ["*"], "@components": ["components"], "@components/*": ["components/*"], "@layouts": ["layouts"], "@layouts/*": ["layouts/*"] } tsconfig.json "paths": { "@/*": ["*"], "@components": ["components"], "@components/*": ["components/*"], "@layouts": ["layouts"], "@layouts/*":..

Redux vs. React Context 어떤것을 써야할까?

대표적으로 많이 쓰이는 Redux, Mobx가 State관리하는 라이브러리인데요. Redux가 Mobx보다 많이 사용되어져서 Context와 비교해보게 되었습니다. 왜 React에서 16.3부터 context 를 제공하였을까요? class 기반의 사용하였을 경우 provider,consumer를 이용하여 쓰기에는 조금 불편하였습니다. hook이 나온 이후에는 useContext, useReducer를 이용하면 편리해졌습니다. 그러면 왜? 아직도 많은 업체들은 Redux를 사용할까? 대략적으로 비교를 해보았습니다. Context Redux store 또는 관리하는것이 없다. 하나의 store에 하나의 object로 관리 되어진다. React Components에서만 작동 React Components 밖에..

Webworker 언제 사용 해야 될까?

web worker란? - 스크립트 작업이 오래 걸린다고 해서 페이지를 멈추고 기다릴 필요가 없어졌다. 웹 워커는 자바스크립트 코드를 UI 쓰레드와는 별도인 백그라운드에서 수행될 수 있도록 하는 표준적인 방법을 제공하기 때문에 웹 페이지를 가로막지 않고 스크립트를 돌릴 수 있게 되었다. Web worker를 언제 사용해야 될까? - 매우 복잡한 수학적 계산 작업 - 원격지에 있는 리소스에 대한 액세스 작업(또는 로컬 스토리지를 액세스 하는 경우) - 백그라운드에서 조용히 오랜시간 작업애햐 하는 경우 - UI 쓰레드에 방해 없이 지속적으로 수행해야 하는 작업 등 - 현재 프로젝트에 트래픽 높은 네트워크 통신에 의해서 UI화면이 멈추는 증상이 있어서 알아보게 되었다. Web worker VS React Vi..

Jest 절대경로 설정(script: test 에 적용)

기존 프로젝트에서 TDD를 적용하기 위해서 @testing-library/react을 사용하여 시도를 하던중 Import 컴포넌트를 하였지만 Module를 찾지 못했다는 메시지가 발생하였다. 해결책: Package.json 안에 { "name": "testing", ... "scripts": { "start": "cross-env NODE_PATH=src react-scripts start", "build": "cross-env NODE_PATH=src react-scripts build", "test": "react-scripts test --modulePaths=src", "eject": "react-scripts eject" }, ... } --modulePaths=src 를 넣으면 절대경로를 인식..

package-lock.json 또는 yarn.lock 왜 필요한가?

리액트로 프로젝트를 개발하며 자주 볼수있는 npm을 이용하면 package-lock.json yarn을 사용하면 yarn.lock 왜? 자동으로 파일이 생성될까? 패키지 매니저 패키지 관리를 위해 npm을 사용하든 yarn을 사용하든 해당 프로젝트의 메타 정보는 package.json 파일을 통해 관리가 됩니다. 이 package.json 파일에는 해당 프로젝트가 의존하고 있는 모든 패키지 이름과 버전이 나열되어 있는데요. 일반적으로 쓰이는 패키지들은 dependencies (react,react-dom 등)항목에, 개발할 때만 필요한 패키지들은 devDependencies(Jest,cypress 등) 항목에 명시됩니다. 개발자들의 설치 날짜에 패키지 버전 다름 개발자가 여러명이 있는 개발팀에서 프로젝트..

정말 쉽게 Dispatch & states 를 Redux Hooks 사용하기

드디어 React-Redux 버전 7.1(배포일 2019/6/11)이 정식 배포 되었습니다. 사실 리덕스 문서를 보러 들어갔다가 알게된 사실입니다. 에헴.... 이제 connect함수를 사용하지 않고도 각각의 dispatch,state를 쉽게 사용가능해졌습니다. 어떻게 써야하는지 간단한 예제로 시작해보겠습니다. Action, Reducer 는 생략 하겠습니다. 예제 기존방식 import React from "react"; import { connect } from 'react-redux' import { incrementAction, decrementAction } from "./Actions"; const counterSelector = state => state.counter; cons..

React+ Redux 자식 컴포넌트에 connect시 ref 접근방법 (redux 6버전 이상)

많이는 아니지만 가끔식 자식 컴포넌트에 Ref 값을 받아서 처리해야 되는 부분이 있는데 Redux으로 하였을시 호출이 불가능하다. Redux 6 버전 이전에는 withRef를 사용하였으나 connect(null, null, null, { withRef: true })(ChartsComponent); Redux6 버전에서는 withRef 제거 ------> forwardRef로 변경되었음 ref={ref => this.chartsComponent = ref } connect(null, null, null, { forwardRef: true })(ChartsComponent); 아래와 같이 Redux 문서에는 Note : We do not use getWrappedInstance() now this.char..

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.

크롬 브라우저에서 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. 구글링을 해봐서 2가지 대처를 해보았다. 1.우선 구글에서 제시하는 방법 - 이벤트를 걸어라.( window.addEventListener("wheel", func, {passive: true} );) 또는 window.addEventListener("wheel", func); - 자세한거는 ( https://github.com/sahel-sh/Document-level-passive-wheel-event-listeners/blob/master/Explainer.md) 2.스택오브플로우 방법 ..

Default tslint 설정하는법???

타입스크립트와 React와 연동하여서 개발을 연습하고 있는중 많은 부분에서 에러가 발생하는 부분이 있었다.tslint에서 설정을 하는데 아직 정확하게 이해는 하지 못했다. 하지만 다른사람들이 설정해놓은 값으로 하니 에러가 발생하지 않았다.https://github.com/wmonk/create-react-app-typescript/issues/216 많은 부분이 설정에 들어가는데 하나씩 들여다 봐야 하지만 우선 문제가 생기면 하나씩 뜯어봐야할듯 하다. { "extends": ["tslint-react", "tslint-config-prettier"], "rules": { "ban": false, "class-name": true, "comment-format": [true, "check-space"], ..