React + Typescript 환경에서 error TS2322: Type 'Timeout' is not assignable to type 'number' 해결 방법 setTimeout을 쓸때 useRef에 setTimeout의 return 값을 저장해야 됩니다. const timeoutId = useRef() timeoutId.current = setTimeout(() => { setVisible(false) }, timeoutMilliSeconds) 이런식으로 useRef의 제네릭 타입을 지정하게 되면 위와 같은 에러가 발생합니다. const timeoutId = useRef() 이렇게 useRef의 제너릭 타입을 setTimeout의 ReturnType으로 지정해주면 해결 됩니다.
Zero-Installs 은 말그대로 소프트웨어 배포 시 별도의 모듈을 설치 하지 않고 바로 실행이 가능한 배포 방식을 말합니다. yarn 에서는 최종 yarn 조차 배포에 제외 되는 상태는 말합니다. yarn pnp를 도입함으로서 Zero-Installs이 가능해 집니다. 2022.09.15 - [개발관련/자바스크립트 팁] - yarn2 ( yarn berry )와 함께 PnP(Plug'n'Play)를 적용해보기 고통스러운 node_modules 탈출 하기 yarn2 ( yarn berry )와 함께 PnP(Plug'n'Play)를 적용해보기 고통스러운 node_modules 탈출 하기 yarn2 적용 하기 1. yarn 설치 $ npm install -g yarn 기존에 npm을 사용하는 경우에만 설..
yarn2 ( yarn berry )와 함께 PnP(Plug'n'Play)를 적용해보기 고통스러운 node_modules 탈출 하기 앞선 설정을 끝냈다면 추가로 타입스크립트 설정을 하면 됩니다. 아래 과정은 만약 타입스크립트를 추가 적용하고 싶은 분들을 대상으로 진행하는 내용입니다. 이제 @types/* 패키지들이 zip 아카이브로 관리되기 때문에 기존의 방식으로는 정상적으로 타입이 불러와지지 않을 것입니다. 그렇기에 다음과 같은 과정을 진행해주세요! 설명은 VSCode IDE 기준으로 설명되었습니다. 타입스크립트가 적용되지 않은 프로젝트라면 타입스크립트 관련 패키지를 설치해주세요. [ 아래는 코드 React를 사용한다는 기준으로 작성된 스크립트입니다. ] yarn add -D typescript @ty..
yarn2 적용 하기 1. yarn 설치 $ npm install -g yarn 기존에 npm을 사용하는 경우에만 설치 2. yarn 버전 설정 $ yarn set version berry $ yarn -v yarn set version berry : yarn2의 별칭이 berry입니다. yarn의 버전을 berry로 정합니다. yarn -v를 통해서 현재 yarn의 버전을 확인 할 수 있습니다. $ yarn set version 3.2.3 위처럼 특정 버전을 선택할수 있습니다. 3. yarn 설정 방법 기존 npm 사용의 경우 .npmrc -> .yarnrc.yml package.lock.json 파일 삭제 package.json 파일에 작성된 eslintConfig는 더 이상 사용되지 않습니다. .e..
encodeURI vs encodeURIComponent 의 차이 디코딩 권장 방법 tryDecode: string => { try { return decodeURIComponent(string) } catch (e) { return unescape(string) } } 특수 문자의 인코딩 포함 여부의 차이이다. encodeURIComponent : 특수 문자 포함 인코딩 encodeURI : 특수 문자 제외 인코딩 디코딩 시 인코딩 타입을 모를 경우 decodeURIComponent 로 할 것을 권장 URI 형식이 아닐 경우(텍스트가 잘린 경우 등) 디코딩시 에러를 반환한다. 그때는 unescape 로 예외 처리 해준다. 아래 링크를 통한 쿠팡 구매 시 블로그를 지속하는 큰 힘이 됩니다. https:/..
Hoc vs Render 속성 값 컴포넌트에 공통적으로 사용되는 로직을 재사용 가능하도록 구현하는 방법에는 Hoc 와 Prop render 를 사용하는 2가지 방법이 있다. 1. 컴포넌트 내부 일부에서 적용하는 경우 HOC 현재 컴포넌트의 전체에 적용 //HOC //로그인시에만 렌더링하는 HOC const WithIsLogin = WrappedComponent => class WithIsLogin extends Component { state = { isLogin : false } checkIsLogin = ()=> { /***/ } componentDidMount(){ this.setState({ isLogin : this.checkIsLogin() }) } render(){ if(this.state...
'@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 = {..
