node 버전 에러 npm을 통해서 모듈을 설치하다보면 위와 같은 에러 메세지를 보는 경우가 있다. the engine "node" is imcompatible with module. Expected version ">=14.0.0" Got "12.19.0" 내가 설치하고자 하는 모듈의 node 버전과 로컬의 node 버전이 맞지 않아서 생기는 문제이다. ( module의 14버전 이상을 요구하지만 12버전 설치 되어 있는 상태. ) 요즘 라이브러리들이 요구하는 node의 기본 버젼이 대게 14버젼 이상이 많아졌다.( ex. react-dnd) nvm를 사용해서 node 버전을 변경할수 있지만 매번 nvm use 14 를 하는 것이 귀찮아져서 아예 기본 버전으로 14로 변경하는 방법을 공유한다 $ nvm..
얼마전에 회사에서 DB를 날려먹고 식겁한적이 있습니다. 까먹지 않기 위해서 AWS에서 DB 데이터 복구하는 방법 정리해둡니다. AWS에서 DB를 복구하는 방법은 크게 두가지가 있습니다. 1. 스냅샷 이용 하기 AWS에서 스냅샷 메뉴로 이동합니다. 복원하고자 하는 스냅샷을 선택하고 작업을 클릭합니다. 스냅샷 복원을 선택합니다. DB 인스턴스 식별자를 입력합니다. 새로 구동시킬 인스턴스를 이름을 설정하면 됩니다. 주의해야 될점은 RDS는 데이터만 복원하는 방식이 아닙니다. 스냅샷의 데이터를 가진 RDS 인스턴스를 새로 구동시키는 방식입니다. 스냅샷으로 복원해서 새로운 RDS 인스턴스를 구동 시켰다면 서비스하는 어플리케이션이 새로운 RDS를 바라보도록 해줍니다. 2. 특정 시점으로 복원 하기 RDS에서 자동 ..
yarn build 시 아래와 같은 에러가 발생 했다. note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace 에러가 발생한 명령어에 RUST_BACKTRACE=1를 추가하고 다시 실행해주면 된다. 환경 설정값을 추가해서 에러 발생시 더욱 자세히 추적하기 위함. $ RUST_BACKTRACE=1 yarn run build
업무상 자바스크립트로 특정 색을 선택하면 비슷한 채도나 명도의 색을 자동으로 지정해주는 기능이 필요했다 예를 들면 블로그 테마 메인 컬러를 선택하면 더 밝은 컬러 더 어두운 컬러를 자동으로 지정해준다. tinycolor2 tinycolor2 Fast Color Parsing and Manipulation www.npmjs.com GitHub - bgrins/TinyColor: Fast, small color manipulation and conversion for JavaScript GitHub - bgrins/TinyColor: Fast, small color manipulation and conversion for JavaScript Fast, small color manipulation and co..
react-hook-form react에서 form의 상태 관리를 더 편하게 도와주는 react-hook-form 사용시 동적으로 생성되는 배열 형태의 form 값을 사용 할때 useFieldArray라는 것을 사용합니다. useFieldArray ({ control?: Control, name: string, keyName?: string = 'id' }) => object function Test() { const { control, register } = useForm(); const { fields, append, prepend, remove, swap, move, insert } = useFieldArray({ control, // FormContext를 사용한다면 생략가능 name: "test..
patch-package 말그대로 npm 에 올려져 있는 모듈을 내가 커스텀하거나 버그 픽스를 해서 내 프로젝트에서 사용 하는 방법이다. 오픈 소스의 경우 버그를 고치고 PR를 통해서 해당 프로젝트에 기여하는 것도 좋다. 하지만 언제 프로젝트 오너가 머지 해줄지 모르기 때문에 급하게 버그를 고쳐서 사용하는 경우 patch-package를 통해서 커스텀해서 사용할수 있다. patch-package - npm https://www.npmjs.com/package/patch-package 보통 패치 패키지는 git diff 를 사용하는데 npm을 통한 모듈의 경우 node_modules 내부에 있고 node_modules는 git ignore되기 때문에 git diff를 통해서 변경점을 작성하기가 어렵다. 그..
html { -webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); } 아이폰의 경우 모바일 웹에서 Long press 하고 있으면 Copy 등 버튼이 떠서 이미지나 텍스트를 복사할수있습니다. 하지만 제작자 입장에서는 이를 막고 싶은 경우가 있습니다. 이럴때 css 만으로 방지 하는 방법 입니다. 다만 위 방법으로 했을떄 이슈가 있습니다. react-clipboard 를 구 버젼을 사용하는 경우 클립보드에 텍스에 복사가 안되는 경우가 있습니다. 이때는 해당 라이브러리를 최신버젼으로 설치하는 것을 추천합니다.
IOS 에는 풀다운 이라는 잡아 당기는 액션이 있습니다. 이를 이용해서 새로고침 액션을 주기도 하지만 특정 애니메이션이나 슬라이드에서도 액션이 발생 하기 때문에 버그처럼 느껴지는 동작이 있습니다. 방지 하기 위해서는 간단하게 CSS로 가능합니다. html, body { position:fixed; overflow:hidden; }
