const child = styled(div)` opacity: 0; right: 30px; `; const Parent = styled("div")` &:hover { ${CloseBtn} { opacity: 1; } } ${CloseBtn} { width:10px; height:10px; } `;
'@mui/styles'는 deprecate '@mui/styles'는 deprecate 됐기 떄문에 더이상 사용하지 않는 것을 권한다. import { styled } from '@mui/styles'; '@mui/system' 대신에 '@mui/system'를 사용하는 것을 권장한다. styled component child selector 옵션을 사용하기 위해서 필요하다. import { styled } from '@mui/system'; babel config 필수 변경된 메소드를 사용하기 위해서 바벨 플러그인 설치가 필수 @emotion/babel-plugin를 설치해준다. npm install @emotion/babel-plugin babel.config.js module.exports = {..
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에서 자동 ..
tsconfig나 jsconfig 설정을 통해서 단축 경로 사용 하기 모듈을 import하는 경우에 tsconfig나 jsconfig를 통해서 단축 경로 사용이 가능하다. 예를 들어 import A from "../../base/A" jsconfig, tsconfig에서 "compilerOptions" : { "baseUrl": "./base" } baseUrl를 설정해주면 기본 경로가 base에서 시작 된다. import A from "./A" 이런식으로 사용이 가능하다. 또 다른 방법으로는 "compilerOptions" : { "paths": { "@A": ["base/A"], } } import A from "@A" 이렇게 "paths" 옵션을 사용하는 것도 가능 하다. 위처럼 설정하는 경우 vs..
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..
