타입스크립트
-
React18 + Recoil + TypeScript : Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & RecoilRootProps'.frontend/오답노트 2022. 4. 13. 21:39
문제 : Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & RecoilRootProps'. Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & RecoilRootProps'. 리액트 18 버전 업데이트에 대응하여 recoil의 type대응이 제대로 되지 않아서 그렇다. 해결방법 : yarn upgrade --latest 0.7.0 이하의 버전을 사용하고 있으신분들은 0.7.1버전(4월13일 한국시간으로 낮에 release)이상으로 버전을 업데이트 시키자. (참고. 위의 방식으로 업그레이드 하면 원치않은 패키지까지 업그레이드 될..
-
React18 + typescript : Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | DocumentFragment'. Type 'null' is not assignable to type 'Element | DocumentFragment'frontend/오답노트 2022. 4. 10. 18:09
문제 : Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | DocumentFragment'. Type 'null' is not assignable to type 'Element | DocumentFragment' Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element | DocumentFragment'. Type 'null' is not assignable to type 'Element | DocumentFragment' 이런 관련한 문제가 발견된다면 해결방법은 아래와 같다. 해당 문제는 react-d..
-
[webpack] resolve alias 절대경로 설정 ( javascript / typescript )frontend/bundler 2022. 3. 28. 16:34
오늘은 webpack의 절대경로 설정에 대해서 알아보겠습니다. 절대경로 설정이 자바스크립트와 타입스크립트가 조금 다르게 설정 해야됩니다. 타입스크립트에서 설정할게 더 있다고 볼 수 있습니다. 간단한 설명과 함께 진행해보겠습니다. 자바스크립트 우리는 절대경로를 사용하기 위하여 webpack의 resolve옵션을 사용하게 될 것입니다. resolve는 모듈해석에 대한 설정으로 특정 모듈을 호출할 때 모듈을 찾는 위치를 변경할 수 있습니다. //webpack.config.js module.exports = { resolve: { alias: { "@": path.resolve(__dirname, "./src/"), }, } }; 위와 같이 한다면 src를 기점으로 모듈을 찾고 모듈을 찾을때는 아래와 같이 찾습..
-
[ReactJS] React + TypeScript + Webpack5 초기 설정 (리액트 18 공식 대응 완료)frontend/react&next 2022. 3. 22. 17:45
[2022-10-06 : 2차 업데이트] 보일러 플레이트의 프로젝트 구조변경 및 약간의 설정 변경이 있었습니다. 참고해주세요. 좀 더 나은 스타터킷을 배포하도록 노력하겠습니다. 오늘은 CRA를 사용하지 않고 직접 프로젝트 초기 설정 하는 방법에 대해서 알아보겠습니다. 정말 간단한 사이드 프로젝트를 진행할 때에는 REACT CRA나 VUE CLI 등을 사용해서 진행할 수도 있지만, 내가 원하는 방향으로 정확히 설정하여 진행하기 위해서는 이러한 초기 설정을 보다 정확하게 알 필요가 있다고 생각합니다. 글 마지막에 boilerplate가 첨부되어있습니다. 1. 모듈 설치 가장 먼저 필요한 모듈을 설치해보겠습니다. 저는 주로 사용하는 yarn으로 설치를 진행해보겠습니다. npm install을 이용해 동일 작업..
-
[ReactJS] React Query + IntersectionObserver = Infinite Scroll Paging(리액트 쿼리 + 옵저버 = 무한 스크롤 페이징)frontend/react&next 2022. 2. 24. 14:53
최근 Client State와 Server State관리에 대하여 많은 Redux에 Redux Saga등 덕지덕지 붙으며 본연의 클라이언트 상태관리의 의미가 퇴색되고 서버측 상태(API데이터 등)이 주가 되고 있어서 이런 구조적 문제를 타파하고자 Client Side(Mobx , Recoil) 등과 React Query를 이용해서 작업하는 경우가 참 많은거 같습니다. 저 또한 하나의 기능을 만들기 위하여 과하게 작업되는 경우가 많은거 같아서 Redux + Redux Saga로 작업되는 개인 프로젝트에서 이 구조를 버리고 Recoil + React Query(리코일 + 리액트쿼리)로 작업하였는데 작업 중에 Infinite Scroll(무한스크롤)을 구현한 케이스가 있어서 이를 공유하고자 글을 써봅니다. 잡..