lahuman & jabsiri 노트 lahuman & jabsiri 노트

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. 내가 만든 React 모듈을 rollup으로 빌드 후 사용할때 위와 같은 오류를 만났습니다. 원인으로 peerDependencies 설정을 하지 않아서 발생했습니다. package.json에 다음과 같이 peerDependencies 를 설정하고 모듈을 배포 하면 해당 오류가 사라졌습니다. "peerDependencies": { "react": "^17.0.2", "react-dom": "^17.0.2" },제가 사용한 rollup.conf 파일은 아래와 같습니다. import peerDepsExternal from "rollup-plu..

CentOS 에서 puppeteer 실행시 libxkbcommon.so.0를 못찾을때 처리 방법 CentOS에서 node 기반의 puppeteer를 실생하 다음과 같은 오류를 만났다 발생 에러 로그 (node:16300) UnhandledPromiseRejectionWarning: Error: Failed to launch the brows er process! /applications/service/teamstokengen/node_modules/puppeteer/.local-chromium/linux -901912/chrome-linux/chrome: error while loading shared libraries: libxkbcommon.so.0: cannot open shared object f..

ssh tunneling으로 port forword 특정 서비스 DBMS에 접근을 해야 하는 일이 있는데, 기본적으로 DBMS에 접근 가능한 서버는 외부에서 접근이 불가능한 상태입니다. 그래서 ssh에서 제공하는 터널링을 이용해서 DBMS에 접근해보려고 합니다. Mac, Linux 에서는 아래 명령어를 이용하면 쉽게 터널링을 할수 있습니다. # ssh ID@GateServer -N -L localPort:DBMS:ServicePort $ ssh ec2-user@1.2.3.4 -N -L 13306:1.2.3.5:3306-N 옵션은 리모트로 명령어 실행을 하지 않는다는 의미 이며, -L 옵션은 로컬 포트와 GATESERVER 포트를 연결하는 역활을 합니다. 여기서는 GATEServer에서 DBMS와 연결하도..

wsl2의 node기반 프로젝트에서 sqlite3를 사용하기 위해서 설치되어야 할 라이브러리와 설정, 리빌드가 필요합니다. 먼저 sqlite3를 사용하기 위해서는 다음 라이브러리가 설치되어 있어야 합니다. make g++ python2 or python3 라이브러리 설치 하기 $ sudo apt install make g++ python3node에서 python3를 사용하도록 설정합니다. $ npm config set python python3node-gyp rebuild $ npm rebuild node-gyp $ npm install sqlite3이렇게 하면, sqlite3가 오류없이 설치되어서 사용할 수 있습니다. 참고자료 Error with node-pre-gyp when installing sq..

Google Cloud 서비스 계정으로 Google API 사용하기 Google Sheet API를 사용하기 위해서 Google cloud console에서 서비스 계정을 만들어 진행하는 과정을 정리합니다. 준비 사항 Node.js Google cloud console Google cloud console 에서 프로젝트 & 서비스 계정 생성 처리 Project 생성 LEFT MENU >> APIs & Services 선택 ENABLE APIS AND SERVICES. 클릭 API 항목에서 Google Sheets API 활성화 처리 LEFT MENU >> APIs & Services >> Credentials >> Manage service accounts >> Create Service Accounts..

onPaste contentEditable 을 이용한 이미지 붙여 넣기 처리 페이스북 댓글창에서 클립보드에 저장(Ctrl+C) 된 이미지를 붙여넣기(Ctrl+V)를 하면, 이미지가 업로드 되는 것을 확인 할 수 있습니다. 이를 구현 하기 위해서는 우선 다음 HTMLElement.onpaste 이벤트에 대하여 알아야합니다. 간단하게 요약하면 붙여넣기를 처리할때 호출되는 이벤트 인데요. 붙여넣는 이벤트에서 이미지일 경우 업로드 처리를 하면 됩니다. 구현하기 구현은 React.js기반으로 구현 하였습니다. import React from "react"; import axios from "axios"; import MockAdapter from "axios-mock-adapter"; import "./style..

WSL 내에서 웹서버를 띄어서 확인이 안되는 경우 다음과 같이 처리 하여 주세요. port foward를 위해서는 Netsh를 이용할 예정입니다. 1. net-tools를 WSL 안에 설치 하기 ubuntu 기준으로 다음의 명령어를 이용해서 설치 합니다. sudo apt install net-toolspowser shell 실행 파일 생성하기 Netsh 설정이된 ps1 의 확장자를 가진 파일을 생성합니다. 다음을 network.ps1 이라는 파일을 생성합니다. If (-NOT ([Security.Principal.WindowsPrincipal][Security.Principal.WindowsIdentity]::GetCurrent()).IsInRole([Security.Principal.WindowsBui..

중복 제거 하기 단순한 숫자나 문자의 중복 제거는 Set을 이용하면 간단하게 처리 할 수 있습니다. const list = ['1', '2', '3', '2', 1,2,3, 1,2,3]; // Set 을 이용한 방식 [...new Set(list)] // filter를 이용한 방식 list.filter((item, index) => list.indexOf(item) === index); // 결과 [ '1', '2', '3', 1, 2, 3 ] 하지만, 객체의 중복제거의 경우는 조금 다른 방식으로 처리 해야 합니다. # 중복 제거가 안됨 const list = [{a:1, b:2}, {a:2, b:1}, ..