Error: Component selectors can only be used in conjucntion with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform ❓상황 부모 컴포넌트로부터 props로 넘겨받은 prop을 객체의 key로 사용할 때 발생한 오류 🔎 원인 파악 key로 사용하는 값의 type을 지정해주지 않아서 발생한 문제 ✨ 해결 방법 key로 사용한 값의 type을 지정해준다.

리액트 상태관리 라이브러리 ❓상황 러닝 커브가 쉬운 리액트 상태관리인 Recoil을 공부하고 정리하기위함. 📖 Recoil 이란? Recoil을 사용하면 atoms (공유 상태)에서 selectors (순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow graph를 만들 수 있다. Atoms는 컴포넌트가 구독할 수 있는 상태의 단위다. Selectors는 atoms 상태값을 동기 또는 비동기 방식을 통해 변환한다. 사용률은 낮지만, React를 만든 Facebook에서 만든 상태관리 라이브러리이다.(리액트가 사장될때까지 지원이 된다!) 🐸 설치 yarn add recoil 🧮 정리 RecoilRoot recoil 상태를 사용하는 컴포넌트는 부모 트리 어딘가에 나타나는 RecoilRoot ..

Error: Component selectors can only be used in conjucntion with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform ❓상황 emotion/style를 이용하여, component selector를 이용하려고 할 때 발생한 오류 🔎 원인 파악 기본적으로 emotion은 css selector만 허용되기 때문에, 별도의 설정이 필요한 경우라면(나의 경우에는 component selector) babel파일을 생성해서 커스텀하면 된다고 한다. emotion 공식 문서에 @emotion/babel-plugin을 사용하라고 한다. ✨ 해결 방법 1. @e..

Manifest: Line: 1, column: 1, Syntax error. ❓상황 유데미 react-query 강좌를 보며 따라하던 중, 발생한 오류 🔎 원인 파악 특별히 Manifest.json 파일을 건드리지 않았더라면, manifest.json 파일 경로를 잘못 설정해서 발생한 오류 ✨ 해결 방법 manifest 경로 앞에 /를 붙여주면 해결된다.

Error! missing queryFn ❓상황 v4 버전의 @tanstack/react-query의 useInfiniteQuery 함수 사용시 발생한 오류 🔎 원인 파악 v3에서는 querykey가 문자열과 배열을 허용했지만, v4에서는 querykey가 배열만 허용되게 바뀌었다. ✨ 해결 방법 querykey를 배열로 변경했더니 fetch 잘 되었다.