본문 바로가기

개발(Development)273

[React] 리액트v18 버전 다운 에러 해결 방법 : Cannot find module 'react-dom/client' # Cannot find module 'react-dom/client' 에러 해결 방법 [문제 상황] React v18 환경에서 개발을 하다가, 이전 버전(v17 등)으로 다운그레이드 할 경우, 아래와 같은 에러코드를 만나게 된다. [에러 코드] ERROR in ./src/index.tsx webpack compiled with 1 error Module not found: Error: Can't resolve 'react-dom/client' Uncaught Error: Cannot find module 'react-dom/client' [문제 원인] 에러코드에서 설명해주듯이, index.js 파일에서 react-dom/client 모듈을 찾을 수 없기 때문에 발생한 문제다. react-dom/clie.. 2022. 5. 15.
[React] 라이브러리 설치 에러: ERESOLVE unable to resolve dependency tree # Could Not resolve dependency tree 에러 해결 방법 [문제 상황] React 개발시, npm, yarn을 통해 라이브러리를 설치하는데, 아래와 같은 에러코드의 Error가 발생하며 설치가 되지 않는다. [에러 코드] npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! Found: react@18.1.0 npm ERR! node_modules/react npm ERR! react@"^18.1.0" from the root project npm ERR! Could not resolve dependency: npm ERR! peer react@"^17.0.1" from @toast-u.. 2022. 5. 15.
[Node.js] Multer - fetch 파일 전송 에러: Error: Multipart: Boundary not found # Multipart: Boundary not found 에러 해결 방법 - 클라이언트: fetch 를 통해 multipart/form-data 로 파일 전송 - 서버: Node.js에서 Multer를 통해 파일 업로드 처리 이 때, 아래의 에러가 발생할 수 있다. [에러 코드] Error: Multipart: Boundary not found [문제 원인] 태그의 기본 submit 이벤트를 통해 multipart/form-data로 파일을 전송하면, 이미지 업로드 내부적으로 Content-Type에 boundary 값을 설정하여 보낸다. (network탭의 Request Header 항목을 통해 확인 가능) 그러나 아래와 같이, - event.preventDefault()로 기본 submit이벤트를 막.. 2022. 5. 14.
[Node.js] Multer 파일 업로드 관련 에러: MulterError: Unexpected field # Node.js - MulterError: Unexpected field 해결 방법 Node.js 에서 Multer 를 통해서 파일을 업로드 받을 때, 아래와 같은 에러가 발생할 수 있다. [에러 코드] MulterError: Unexpected field code: 'LIMIT_UNEXPECTED_FILE', storageErrors: [] [문제 원인] multer는 input 태그의 name이나, FormData 객체의 key값을 통해 업로드된 파일을 식별한다. 이 값을 multer의 single() 이나 fields() 의 인자로 넣어주지 않았기 때문에 발생하는 문제다. (다른 문제일 수도 있으나, 내 경우엔 그랬다. 즉, 단순 실수다) [해결 방법] Multer 미들웨어를 라우터에 설정 할 때.. 2022. 5. 14.
GCP(구글클라우드플랫폼) SSH 접속 불가 문제 해결 방법: 디스크 크기 설정 등 GCP(Google Cloud Platform) 에서 Compute Engine을 사용하던 중 SSH 접속 불가 현상이 나타났다. "연결할 수 없습니다. 다시 시도 중(2/3)" 멘트만 수십번... 팝업창에서 "시리얼 콘솔 출력"을 클릭해보니, 아래와 같은 로그를 찾을 수 있었다. ERROR Exception calling the response handler. [Errno 28] No space left on device.#012Traceback 팝업창에서 "도움말 문서" 를 클릭했더니, 아래의 도움말로 이동한다. https://cloud.google.com/compute/docs/ssh-in-browser#couldnotconnecterror # 원인 인스턴스의 부팅 디스크에 여유 공간이 부족합니다... 2022. 1. 31.
[GCP] Compute Engine 인스턴스 중지/삭제 방법 GCP(Google Clound Platform)에서 Compute Engine의 인스턴스를 중단하는 방법을 정리한다. # 인스턴스 정지, 중지, 삭제 차이 인스턴스는 정지, 중지, 삭제가 가능하다. 1. 정지는 서비스를 잠깐 멈출뿐 인스턴스 및 디스크가 모두 유지 되므로 요금이 부과 된다. 2. 중지는 CPU, GPU 등은 멈추지만, 디스크 등은 유지되므로 해당 요금이 부과되는 것 같다. 3. 삭제는 인스턴스, 디스크가 완전히 제거되어 요금이 부과 되지 않는다. # 인스턴스 중지/삭제 방법 ① 가상머신 > VM인스턴스 중지/삭제할 인스턴스 이름을 클릭한다. ② 중지 상단의 "중지"를 클릭한다. ③ 중지 팝업 팝업이 뜨면 "중지"를 클릭해준다. ④ 삭제 중지가 완료되면, 삭제를 클릭하자. ⑤ 삭제 팝업 .. 2022. 1. 29.
[GCP] Compute Engine 인스턴스 백업 방법 (스냅샷 생성 및 적용) 구글 클라우드 플랫폼 Compute Engine에서 기존 인스턴스의 스냅샷(백업)을 만들고 새 인스턴스에 적용하는 방법을 정리한다. 너무나 쉽고 빠르다. 1. 스냅샷 생성 방법 기존 인스턴스를 현재 시점 기준으로 백업한다. ① Compute Engine > 스토리지 > 스냅샷 ② 스냅샷 만들기 화면이나 UI는 변경될 수 있다. ③ 소스디스크 선택 이름과 설명 등을 입력 후, 소스 디스크 항목에서 백업하고 싶은 인스턴스를 선택한다. ④ 리전 선택 스냅샷을 저장하면 약간의 디스크 및 네트워크 비용이 발생하는듯 하다. 멀티리전이든, 리전이든, "소스 디스크와 같은 위치"로 설정해야 비용이 최소화 되는듯 하다. 리전별 스토리지 비용은 아래 링크를 참조하자! https://cloud.google.com/compu.. 2022. 1. 28.
[자바스크립트] MediaElementAudioSourceNode 음원 파일(mp3, wav 등) 사용 방법 Web Audi API는 음원의 타입(파일, 버퍼, 스트림 등)에 따라 소스Node와 작업 방식이 조금씩 다르다. 45초 이상의 긴 음원 파일(mp3, wav)을 다루기 위해서는 MediaElementAudioSourceNode를 소스Node로 이용해야 한다. 이 글에서는 MediaElementAudioSourceNode를 통해 mp3 등의 음원파일을 다루는 방법을 정리한다. ※ Web Audio API의 기본 사용 방법은 아래 글 참고 [자바스크립트] Web Audio API 기본 원리와 예제 코드 ※ 45초 이하의 짧은 음원을 다루는 AudioBufferSourceNode는 아래 글 참고 [자바스크립트] AudioBuffer, AudioBufferSourceNode 사용 방법 & 예제 코드 # Med.. 2022. 1. 20.
[자바스크립트] AudioBuffer, AudioBufferSourceNode 사용 방법 & 예제 코드 자바스크립트 Web Audio API는 "짧은 오디오 데이터"를 다룰 때 AudioBufferSourceNode 객체를 이용한다. 이 글에서는 AudioBufferSourceNode를 통해 1) 개발자가 생성한 오디오 데이터, 2) mp4, wav 등의 파일로 된 짧은 음원 등을 다루는 방법을 정리한다. 글의 가장 하단에는 각각에 대한 예제 코드를 정리해두었다. Web Audio API의 기초에 대해서는 아래 글을 참고하자. [자바스크립트] Web Audio API 기본 원리와 예제 코드 # AudioBufferSourceNode 란? AudioBufferSourceNode는 AudioBuffer를 음원으로 입력받는 소스Node 객체이다. 주로 45초 이내의 짧은 오디오를 단 1회 재생하는 용도로 사용된.. 2022. 1. 19.

티스토리툴바