본문 바로가기

Develop/React5

[error] Failed to parse source map from ... Error: ENOENT: no such file or directory [ 상황 ] react 애플리케이션을 start 하거나 build 하면 아래와 같이 Failed to parse source map from ... Error: ENOENT: no such file or directory extractParamsFromWeigthMap.ts 파일이 존재하지 않아 source map 파싱이 실패한다. [ 원인 ] 실제로 사용하고 있는 face-api.js 모듈은 extractParamsFromWeigthMap.ts 파일을 제공하지 않음을 확인할 수 있다. [ 해결-1 ] `source-map-loader` rule의 exclude에 해당 경로를 설정한다. module: { ... rules: [ { exclude: [ /\/node_modules\/face-api.*/, .. 2022. 1. 1.
[error] Module not found: Error: Can't resolve 'fs' in '..../node_modules/~~~~~~~' [ 상황 ] webpack3로 잘 번들링해서 사용하고 있던 react 프로젝트. 새롭게 추가할 npm을 지원하지 않는 문제 + 더 빠른 빌드 속도를 위해서 webpack5로 버전을 올렸다. 업그레이드를 하자 프로젝트를 실행(yarn start)하거나 빌드(yarn build)할 때 다음과 같은 오류가 나타났다. Module not found: Error: Can't resolve 'fs' in '/home/adslk/bitbucket/pams_citest/pesadmin/node_modules/helpme-js/build/es6/env' node_moduels 모듈을 사용하기 위해 reoslve를 진행하는데 'fs'를 사용할 수 없다고 한다. [ 원인 ] fs는 node에서 제공하는 기본 모듈이므로 모듈.. 2022. 1. 1.
[react] 리액트 코딩 컨벤션 [번역] React Coding Standards And Practices To Level Up Your Code 리액트 코딩 컨벤션 진또배기 소프트웨어 회사의 증거는 일관성 있는 코딩 스타일입니다. 팀 전체가 같은 방식으로 코드를 검토하고 있나요? 이 코드 리뷰 체크리스트는 완벽하지 않지만, 관심을 가질 만한 것의 90%를 다룰 것입니다. 팀의 코딩 표준을 높이려면 PR을 승인하기 전에 이 목록을 통과해야 합니다. 👍 ✓ 👌 Naming Conventions Component 파일명은 pascal case 쓰세요. Header.js HeroBanner.js CookieBanner.js BlogListing.js Non-component 파일명은 camel case 쓰세요. myUtilityFile.js.. 2021. 12. 30.
[react] React 최적화 성능개선 데이터 관리 - 10년 된 태블릿에서도 빠르게 돌려보자. 서비스하고 있는 시스템에서 성능문제로 컴플레인을 받았다. 데이터를 처리하는 기능이 느리다는 문제였고, 사용기기를 확인하니 2014년에 출시한 갤럭시 탭4.7.. 🤣 useMemo, memo, shouldcomponentupdate, componentdidupdate, useCallback 등... 렌더링 관련 최적화는 모두 적용했는데도 느리다면? 렌더링 최적화가 아닌 데이터 사용방식을 최적화하면서 느낀 부분을 정리합니다. 1분 로딩에서 1초 로딩으로 ㄱㄱㄱ # Redux는 최대한 작은 데이터만 관리 # SQLite는 바보다. 실행계획 잘 살피고, 트랜잭션 최소한으로 사용하자. # 꼭 필요한 곳만 새 객체 만들기 // 😋 const list_a = [1, 2, 3, 4, 5]; list_a.push(6);.. 2021. 11. 26.
[react] 사용자 입력이 끝나면 리렌더링 하게 하고 싶다. react로 개발을 하다보면 사용자가 타이핑을 할 때마다 인풋값이 변경으로 인해 불필요한 리렌더링이 계속 발생하면서 성능 이슈를 마주할 때가 있다. 이렇게 지속적으로 값이 변경되면 보통 debounce & throttle 을 사용해서 이런 상황의 이슈를 해결해 왔다. (예를 들면 스크롤링이나 뷰사이즈 변경이 일어날 때) 변경이 어느 시간정도 일어나지 않을 때 다음 함수를 실행하도록 하는 debounce. 어느 시간 간격으로 일어나는 변경을 반영하도록 하는 throttle. - debounce : 이벤트를 그룹화하여 특정시간이 지난 후 마지막 이벤트만 발생하도록. - throttle : 일정한 시간동안 처음 발생한 이밴트만 발생하도록. - react 에서는 this, closure 개념으로 debounce.. 2021. 10. 4.

티스토리툴바