기술 블로그

문제 Recoil : Duplicate atom key In development, when a file is changed, Next.js re-builds the relevant page entry file.Because it's the same Node.js process, the atom has already been declared.The same thing can happen with HMR when the file change triggers a rebuild of the whole file, or even when the atom is declared inside a component lifecycle/hook and only that is being hot-replaced. 일반적으론 같..

구조분해 할당 :키워드로 별칭 지정 가능 {data: videos} = something recoil 사용법 // 기본 세팅 이후 //해당 atom 불러옴 그 후 훅에 넣음 import { videoListState } from '@/atoms/videoListState'; const [videos, setVideos] = useRecoilState(videoListState);//조회 수정 const v = useRecoilValue(videoListState); // 조회 //혹은 selector 훅을 활용해 기존 atom에서 파생된 데이터를 사용할 수 있음 프로미스를 반환하는 여러개의 콜백함수를 다룰땐 Promise.all을 사용한다. 문제 //코파일럿의 추천 코드 const videoLists =..

서론 서드파티 라이브러리인 'scrape-youtube'를 사용하면서 에러에 부딪혔다 Module not found: Can't resolve 'dns' // access mongodb 위 라이브러리가 리액트를 위한 라이브러리가 아니고 기능적으로 유투브를 크롤링 해 파싱 후 데이터를 재가공하여 넘겨주는 라이브러리라 진행 도중 몽고db에 접근하는 것으로 보인다. 즉 서버 사이드단에서 처리가 필요해 보인다. 해결 export const getServerSideProps = async () => { const { videos } = await youtube.search('김재관'); const videosJson = JSON.stringify(videos); return { props: { videosJson..

Next.js에서의 서버 컴포넌트와 getServersideProps 그리고 not found dns 동적 스크롤 애니메이션 next.js 공식문서 해설 (13)

import axios from 'axios'; import { useQuery } from 'react-query'; const fetchSuperHero = (heroId) => { return axios.get(`http://localhost:4000/superheroes/${heroId}`); }; export function useSuperHeroesData(heroId) { return useQuery(['super-hero', heroId], () => fetchSuperHero(heroId)); }​ const { refetch } = useQuery( 'super-heroes', fetchSuperHeroes, { enabled: false, }, ); return ( RQ Super H..

yarn add react-query import axios from 'axios'; import React from 'react'; import { useQuery } from 'react-query'; function RQSuperHeroes() { useQuery('super-heroes', () => { return axios.get('http://localhost:4000/superheroes'); }); return RQSuperHeroes; } export default RQSuperHeroes; useQuery(쿼리키, 프로미스를 리턴하는 콜백함수,{옵션}) 와 같이 기본 구조를 가진다. 인자값 중 쿼리키와 프로미스를 리턴하는 콜백함수는 v4에서 옵션 객체의 queryKey와 queryFn..