리액트 데이터 패칭 라이브러리 ❓상황 Next.js CSR에서의 데이터 패칭하는 방법을 배우기 위해, swr를 학습하고 정리함. 📖 swr 이란? "SWR"이라는 이름은 HTTP RFC 5861에 의해 알려진 HTTP 캐시 무효 전략인 stale-while-revalidate에서 유래되었습니다. SWR은 먼저 캐시(스태일)로부터 데이터를 반환하여 UI를 만들고, 데이터 fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져와 UI에 표시하는 전략입니다. 네트워크 재연결되거나, 뷰포트가 클릭되면 다시 데이터 패치가 발생합니다. 쉽게 말하자면, 사용자의 노트북이 대기상태에서 깨어나거나, 브라우저 탭을 전환할 때 자동으로 데이터 패치가 발생합니다. 🐸 설치 yarn add swr 🚀 빠른 시작! ..

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 경로 앞에 /를 붙여주면 해결된다.