IT 공부를 위한 블로그

React-Create-App로 프로젝트를 만들고 web3.js 라이브러리를 사용하려고 하는 도중 npm start 시 sourcemap 오류가 발생했다. failed to parse source map: 'webpack:///../../src.ts/coders/abstract-coder.ts' url is not supported 소스 맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜 주는 기능을 한다. 배포를 할 때 성능 최적화를 위해 HTML, CSS, JS와 같은 웹 자원들을 압축한다. 이때 배포한 파일에서 에러가 난다면 Sorce Map을 통해 원본과 비교하며 디버깅을 할 수 있는 유용한 기능이다. 하지만 소스맵을 사용하는데 단점이 있다. 1. 소스맵을 사용하면 개..

Dapp 개발을 위한 테스트를 하는 도 중 다음과 같은 오류가 발생하였다. 구글링 해보니 산술연산을 한 결괏값이 타입의 허용 범위를 넘어서 overflow 됐다고 알려주는 것 같았다. Solidity에서 고정 크기 정수에 대한 산술 연산은 연산 결과가 데이터 유형으로 나타낼 수 있는 최댓값 또는 최솟값을 초과할 경우 Overflow 또는 Underflow 오류가 발생할 수 있는데. Overflow는 최댓값을 초과한 경우, Underflow는 최솟값을 초과할 경우 나타난다. 그래서 컨트랙트 함수내의 산술연산하는 부분을 살펴보았고 다음과 같이 오입력 된 연산을 발견할 수 있었다. mapping(address => mapping(address => uint256)) public allowance; functi..

Dapp을 만들기 위한 학습을 하던 중 truffle migration을 사용하려고 하자 오류가 발생하였다. 1. Node.js 버전 변경 시도 처음엔 관련 오류가 난 곳의 문서들이 node_modules와 관련되어 있어서, node의 버전이 문제인가 싶어서 stack-over flow의 글을 참고하여 node의 버전을 최신 LTS버전으로 바꾸어주었다. https://stackoverflow.com/questions/71081725/this-version-of-%C2%B5ws-is-not-compatible-with-your-node-js-bu ild-error-node-loade This version of µWS is not compatible with your Node.js build: Error:..

React로 customhook을 만들고 2개의 customhook이 동작하면서 서로 호출되도록 했는데 다음과 같은 오류가 발생하였다. Uncaught RangeError: Maximum call stack size exceeded 각각의 함수가 서로를 호출하도록 입력하면 무한하게 함수가 서로가 서로를 호출해서 호출 스택(call stack)이 터져서 생긴 에러다.

React 프로젝트를 진행하는 도 중 다음과 같은 에러가 발생하였다. input 컴포넌트에 에러가 생긴 듯하다. 그래서 구글에 검색해보니 많은 사람들이 같은 오류를 경험한 것을 확인할 수 있었다. 해당 에러가 발생한 이유는 input에 입력한 value 값이 undefined가 들어갔을 때의 예외처리를 안해줘서 발생한 것 같다. 다른 사람들의 해결방법으로는 value 값에 || ""을 추가해줘서 undefined값일 경우에는 ""으로 처리해준다고 입력해주면 된다. 그런데 나의 경우에는 useState("")로 초기값이 "" 이라고 설정했는데 이런 오류가 뜨지?라고 생각했는데 onChange 함수로 input의 value 값을 변경하고 나서 value 값을 입력 안 하고 다음과 입력값을 초기화하기 위하여 ..

오류 Clone 한 Node.js 버전 제한과 기존 사용하던 Node.js의 버전 차이로 인해 오류가 발생하였다. 처음 package.json을 확인했을 때 버전을 제한하는 engines 객체에서는 다음과 같았다. 그래서 npm 은 6.0.0 이상, node는 14.0.0 이상이면 될 것이라는 생각을 했고 기존 사용하던 내 Node.js의 버전은 17.8.0, npm 버전은 8.5.5 였기 때문에 오류가 안 날 것이라는 예상을 했었다. 하지만 콘솔 창에서 요구하는 node의 버전은 14.15.0 또는 16.10.0 또는 18.0.0 이상을 요구했고 노드의 버전을 14.15.0으로 변경해주니 정상적으로 npm install을 실행할 수 있었다. - 노드 원하는 버전 설치 방법과 설치한 버전 확인하는 명령어..

오류 three js를 연습하던 도중 다음과 같은 오류가 발생하였다. 그래서 setSize를 사용하는 resize 클래스를 확인해 보았지만 아무런 이상이 없다는 것을 확인했다. 해결 그래서 처음부터 하나하나 확인한 결과 constructor에서 윈도의 pixelRati 값을 가져오는 renderer를 다른 클래스에서도 사용할 수 있 도록 선언해 주었단 this._renderer = renderer 부분에 오타가 있는 것을 확인 하였다. // this._render = renderer; 변경전 // 변경 후 this._renderer = renderer; 배운 점 오타 유의하고 비효율적으로 전처적인 코드를 다시 처음부터 흝어보기보다는 콘솔 에러를 보고 에러의 원인을 한번 생각해본 다음 renderer를 사..

git pull을 하던 도중 MERGE_HEAD가 존재하여 작동하지 않는 문제가 발생하였다. 이는 merge를 한 후 커밋이나 푸쉬를 하지 않아서 merge작업 완료되지 않아 생기는 문제이다. 따라서 나는 머지를 취소하는 방법으로 문제를 해결했다. 1) git merge를 취소 git merge --abort 2) 충돌을 해결하기 3) 변경내용 커밋 3) 다시 git pull 시도

React에서 Firebase를 사용한 로그인 기능을 구현하기 위하여 API 키값이 들어있는 firebaseConfig를 입력하고 .env를 생성하여 환경변수를 만들어 줌으로써 key 값을 보호하여 불러오는 형식으로 진행하려고 했다. 하지만 키값을 정확하게 입력을 했음에도 불구하고 아래와 같이 오류가 발생하였다. const firebaseConfig = { apiKey: process.env.REACT_APP_API_KEY, authDomain: process.env.REACT_APP_AUTH_DOMAIN, projectId: process.env.REACT_APP_PROJECT_ID, storageBucket: process.env.REACT_APP_STORAGE_BUCKET, messagingSend..