우당탕탕 개발일지

npm install로 필요한 패키지를 install 하려고 하는데 npm ERR! code ERESOLVE라는 에러가 발생했습니다. npm install 뒤에 --save --legacy-peer-deps를 입력해주면 해결이 됩니다. 해결을 하고나니 에러의 원인이 궁금했는데 node의 버전 문제 였던거 같았습니다. dependency는 특정 모듈에서 사용하는 패키지들을 적어둔 정보입니다. peerDependencies는 그 모듈이 다른 모듈과 동작할 수 있는 호환성을 표시한 정보입니다. dependency tree에서 더 높은 버전에 대한 의존성을 명시하고 있지 않으면 자동으로 peerDependencies를 설치해줬습니다. 하지만 이 때문에 에러가나는 상황이 발생하게 되고 그 후에는 peerDepen..

오늘은 Javascript에서 filter라는 함수의 사용법에 대해서 알아보려고합니다. 배열 관련 함수 중 많이 쓰이는 함수들은 filter, map, reduce 등 있습니다. 그중에서도 filter는 활용도가 높은 편이라 자세히 알아두면 굉장히 유용하게 사용할 수 있을 거 같습니다. filter 메서드는 조건을 주고 해당 조건이 true인 요소를 모아 새로운 배열로 반환하는 메서드입니다. 배열에서 추출 하고 싶은 데이터가 있을 경우 자주 사용합니다. filter는 중복값을 제거해주지 않아 중복값이 반환될 수 있습니다. 정의 Array.prototype.filter(callback(element[, index[, array]])[, thisArg]) callback : 각 요소에 조건 값 (true: ..

여느 때와 다를거 없이 작업 후에 테스트를 해보기 위해서 postman에서 send 버튼을 눌렀습니다 그런데 무한 로딩에서 나오지를 못하는 현상이 일어났습니다.. 자주는 아니지만 가끔씩 일어나는 일이여서 의심되는 곳에 로그를 남기며 해당 구문이 잘 작동하는지 테스트를 해봤습니다. 의심이 되는 곳은 로그가 잘 찍히고 있었습니다 설마라는 생각을 가지고 return 바로 윗 부분에 로그를 남겨봤는데 return 바로 직전까지 로그가 잘 찍혔습니다. 원초적인 방법인 ide를 껐다 켜보기, postman 껐다 켜보기, 컴퓨터를 껐다 켜보기.. 원초적인 방법으로 해결이 됐었던 경우도 있었어서 (왜 그런지는 의문) 해봤지만 결과는 똑같았습니다. 이런 경우는 처음이였어서 구글링을 시작했습니다. 뾰족한 방법은 없었고 오..

A 테이블을 생성 후에 A테이블에서 하나의 column에 Foreign Key 설정을 해주려고 했습니다. 하지만 Cannot add foreign key constraint 에러가 발생했습니다. 즉시 에러 내용을 구글링하여 해결방안을 찾기 시작했습니다. 해당 에러에서 가장 많은 유형들을 보며 비교해봤습니다. 그 중 대표적인 유형들 1. 테이블이나 컬럼명에 오타가 있을 경우 2. 참조키 컬럼과 참조되는 컬럼의 데이터 타입이 다를 경우 3. 외래키로 지정한 컬럼이 기본키가 아닐 경우 위의 내용들을 보며 비교해봤지만 실수한 부분은 없었습니다... 그런 도중 이상한 점을 발견했는데 그 부분을 수정하니 참조키가 정상적으로 설정되었습니다. 해결 : B테이블과 A테이블의 콜레이션이 다르게 설정 되어 있어 콜레이션을 ..

Javascript ES2022에서 추가된 기능들이 몇가지 있습니다. 그중에서 가장 유용하고 많이 사용하게 될 거 같은 기능들에 대해서 알아보려고 합니다. Top-level await //기능이 나오기 전에 await를 사용하는 예 (async function () { await start(); })(); //기능이 나온 후 await를 사용하는 예 (async 없이 바로 선언) await start(); Top-level await 기능이 나오기 전에는 await를 사용하려면 async 함수 내에서만 사용해야만 했습니다. 모듈 최상단에서 사용하고 싶었지만 사용할 수 없었습니다. 하지만 이제 await은 최상단에서도 사용할 수 있습니다. Error cause Error cause를 활용하면 오류의 원인을..

react로 웹페이지 작업을 하던 도중 서버에서 받은 date를 split을 이용하여 포맷을 변경하려고 했습니다. 그런데 Cannot read property undefined of split 에러를 마주했습니다. date 값도 제대로 받아오는데 어떤것이 문제인지 전혀 감이 잡히지 않았습니다. 다른 방법으로 해결을 하려고 했지만 분명 해결법이 있을 것이라 생각했습니다. 위와 같이 작성 후 실행.. 웹페이지에도 정상적으로 출력됐습니다 :)

2021-12-27 등록 npm install을 하고 나면 install 하는 중간에 reify:fsevents: timing ~f 라는 문구와 함께 putty가 먹통이 됐다 ec2 인스턴스를 중지 -> 인스턴스 시작 -> 폴더 삭제 -> git clone -> npm install 이 과정을 두 번 반복 했었는데도 결과는 여전했다. 구글링을 해보니 node version을 16에서 14로 다운그레이드 하니 문제가 해결됐다는 글이 있었습니다. 저도 node version이 16이기 때문에 시행해보기 전에 다른 해결법이 눈에 들어왔습니다. npm isntall --verbose 위의 명령어로 문제를 해결했던 경우가 있었다고 해서 시도해봤습니다. 문제가 해결되었고 npm run build까지 정상적으로 성공..

2022-01-09 작성 ec2에 npm run build를 하면 중간에 hangs forever 이슈가 생겼다. 웃긴건 매번 빌드가 안 먹혔으면 정확히 문제가 있다는 것을 파악했겠지만 같은 상황인데도 빌드가 될 경우가 있고 안 될 경우가 있었다. 나는 단지 상황에 따른 인스턴스의 성능 차이라고 생각을 했다. 하지만 이번에는 몇 번 시도를 했음에도 불구하고 빌드가 전혀 되지 않았다. 프리징이 아니라 시간이 오래걸리는거라고 생각을 해보고 30분 정도 시간을 소요해봤지만 결과는 똑같았다. 어떠한 이유에 의한 프리징인지 hangs forever인지 퍼포먼스 저하인지 정확한 답을 얻지는 못했지만 잘못됐다는 것은 알 수 있었다. 구글링과 자문을 구한 결과 ec2가 프리티어여서 빌드가 안될거라는 답변을 받았습니다...

로컬에서 코드 수정하고 git push한 후 배포환경에서 git pull을 하니 에러가 발생했습니다. error: Your local changes to the following files would be overwritten by merge: src/views/List.js Please commit your changes or stash them before you merge. 이러한 에러가 나왔습니다. 해석해본다면 merge 하기전에 변경사항을 commit 또는 stash하라는 뜻 입니다. 해결방법 1) git stash - 현재 파일들을 임시로 백업해준다. 2) git pull origin master - master에서 pull을 해준다. 3) git stash pop - 최신상태에서 임시로 백업..

자바스크립트는 여러가지의 반복문이 존재합니다. for for in for of forEach() while do while for문 for (let i = 0; i < 10; i++) { console.log(i) } // 출력결과 0 1 2 3 4 5 6 7 8 9 for in문 for in문은 특정 객체의 열거 가능한 모든 프로퍼티(enumerable properties)를 순회할 수 있게 합니다. 열거 가능한 프로퍼티는 enumerable 플래그가 true인 프로퍼티를 뜻 합니다. const obj = { name: "ujam", job: "engineer", age: 25 } for (const key in obj) { console.log(`${key} : ${obj[key]}`); } /* 출..