기술 블로그

문제 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..

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..

프로토타입 기반 상속 js에서 모든 객체는 다른 객체를 프로토타입으로 가진다. // 부모 생성자 함수 function Parent(name) { this.name = name; } // 부모 메서드 추가 Parent.prototype.sayHello = function() { console.log(`Hello, I'm ${this.name}`); }; // 자식 생성자 함수 function Child(name, age) { Parent.call(this, name); // 부모 생성자 호출 this.age = age; } // 프로토타입 체인 설정 Child.prototype = Object.create(Parent.prototype); Child.prototype.constructor = Chi..

왜 Custom Hook을 사용해 비지니스 로직을 분리해야 할까? 프로그래밍에서 가장 중요한 것 중 하나가 중복의 제거이다. 반복되는 상태 관련 로직을 분리하여 재사용 하기위해 사용하였다. Hook 이전에는 고차 컴포넌트와 render props를 활용해여 이를 구현하였다 위 두 개념을 활용한 코드가 container presenter 패턴이다. Container 컴포넌트에서는 로직을 작성하고 이를 props로 하위 컴포넌트에 내려준다. 상위 Wrapper가 많아진다면 Wrapper hell이 발생될 우려가 있고 반면 Custom Hook 을 활용한다면 사용하는 각 컴포넌트에 독립적으로 작성할 수 있다. 즉 Custom Hook은 거창한게 아니라 Hook API를 사용하여 재사용 가능한 코드를 작성하면 ..

cors 개념과 백단에서의 해결 옵셔널 체이닝 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining 스타일드 컴포넌트 css https://styled-components.com/docs/api#css 스타일드 컴포넌트 theme set함수의 타입 Dispatch; setString: Dispatch setStringOrNull: Dispatch exhaustive-deps 전역 상태관리 (recoil) 통신 상태관리 (swr,react-query)

https://moida-frontend.vercel.app/ https://moida-frontend.vercel.app/ moida-frontend.vercel.app 어떤 걸 만들었나 팀빌딩 웹 서비스 어려웠던 이슈들 처음으로 협업을 진행했고 맨땅해딩식으로 기능들을 구현하면서 어려움이 많았다. 맨 밑에 어려웠고 기억하고싶은 이슈들을 적어두었다. 아쉬웠던 점 제한된 기간으로 퀄리티를 챙기지 못했다. 기억하면 좋을 것들 https://kjk5.tistory.com/69 Next.js에서 styled-components 딜레이 없이 사용하기 테스트때는 모르지만 vercel과 같은곳에 배포해보면 스타일드 컴포넌트(이하 sc)의 딜레이 때문에 쌩 html이 보였다가 사라짐을 알 수 있다. 이러한 문제를 해결..

테스트때는 모르지만 vercel과 같은곳에 배포해보면 스타일드 컴포넌트(이하 sc)의 딜레이 때문에 쌩 html이 보였다가 사라짐을 알 수 있다. 이러한 문제를 해결하기 위해 sc의 ssr 설정을 해줄 필요가 있다. 1 바벨 플러그인 sc 설치 npm i -D babel-plugin-styled-components 2 root 디렉토리에서 .babelrc 작성 { "presets": ["next/babel"], "plugins": [ [ "styled-components", { "ssr": true, "displayName": true, "preprocess": false } ] ] } 3 pages 디렉토리에 _document.js(tsx) 작성 import Document from 'next/docu..

useRoute를 사용했을 때 route.qurey가 바로 반환되는 것이 아닌 딜레이가 생겨 백으로 get 요청을 제대로 보내지 못할 때가 있다 useEffect는 router의 딜레이를 기다려주지 않기 때문에 결국 post/1 이 아닌 post/undefined 로 요청을 보내는 문제가 있었다. hooks는 컴포넌트 최상위에 위치해야해서 이펙트에 담을 수 없다 해결법은 router.isReady 메서드를 담을 변수를 만들어 로딩을 판별하고 useEffect의 두번째 인자로 위 로딩 감시 변수를 넣어 감시한다 아울러 jsx부분에서도 위와 같은 플레그를 활용하여 예외 처리한다.