리액트 29

react query refetching

사이드프로젝트를 하면서 사용할까 했던 react useQuery의 refetching 옵션들에 대해 남겨볼까한다.추후 유저가 새로고침이라던가 다른 탭에서 들어왔을 때의 데이터 등..을 위해 필요할 때 사용하기 위해 공부한 것을 정리해보면 아래와 같다.우선 Refetch는 캐시가 만료가 되었을 때 일어난다. 그리고나서 필요한 옵션들을 추가함으로써 refetching 할 수 있다.refetchOnReconnect refetchOnReconnect : boolean | "always" | ((query : Query) => boolean | "always")네트워크가 다시 연결될 때boolean 값인데 default는 true이다.always 는 네트워크가 다시 연결될 때 캐시데이터의 만료여부와 상관없이 데..

리액트 2024.12.23

useInfiniteQuery의 pageParam 와 initialPageParam의 차이

무한스크롤 기능을 구현하면서 문제가 있었던 부분을 남겨보려고 한다.우선 tanstack-query 공식문서에서 설명하는 useInfiniteQuery의 사용법은 위와 같다.그리고 나서 내가 구현하려고 했던 코드를 적어보면 아래와 같다. export const productQuery = { useGets : function() { return useInfiniteQuery, Error>({ queryKey: ["products"], queryFn: ({ pageParam = 1 }) => productApi.gets(String(pageParam)), getNextPageParam: (lastPage..

리액트 2024.12.22

flatMap()

오늘은 무한스크롤을 구현하면서 새롭게 알게된 배열메서드인 flatMap 에 대해 공부한걸 적어보려고 한다.우선 flatMap 함수는 flat과 map을 합친 메서드이다.flat 메서드가 무엇인지 잘 모를수도 있기에 우선 flat에 대해 설명하겠다.flat() const a = [1,2,3] const b = [4,5,6] // a와 b는 배열을 가지고 있는 변수입니다. // 이 두 개를 합치기 위해서는 concat으로 합치는 방법도 있습니다. console.log(a.concat(b)) // [1,2,3,4,5,6] console.log([a,b].flat()) // [1,2,3,4,5,6]우선 concat과 비슷하게 배열을 합치는 메서드인데, 좀 더 사용하기에는 깔끔하고..

리액트 2024.12.21

Docker 공부

react 프로젝트를 nginx와 함께 docker에서 배포하기에 앞서서 docker가 무엇인지에 대해 공부해봤다.docker란?컨테이너 기반의 오픈 소스 플랫폼이다. 그리고 애플리케이션을 개발,배포 및 실행 할 수 있도록 해준다. 그리고 이 모든것들을 하나의 패키지로 묶어 컨테이너(container)로 구분하여 실행 할 수 있게 한다.docker 사용의 장점이식성docker 컨테이너는 운영체제에 상관없이 동일하게 작동한다. 그렇기 때문에 개발 환경과 배포 환경일 때의 일관성을 유지할 수 있다.격리성각각의 컨테이너는 독립적으로 실행되어 다른 컨테이너들과의 충돌을 방지할 수 있다. 그렇기 때문에 msa와 같이 다양한 서비스들을 동시에 실행 할 수 있다.빠른 배포컨테이너는 가볍고 빠르게 시작할 수 있어서 배..

리액트 2024.12.19

tanstackquery [useInfiniteQuery]

프로젝트에 무한스크롤을 구현하기 위해 필요한 것을 찾다가 tanstack-query의 useInfiniteQuery 에 대해 공부해봤다.사용법은 평소 조회를 할 때 사용하는 useQuery와 사용법이 비슷하지만 다른 차이점도 존재하였다.우선 기존에 사용했던 useQuery와의 차이점을 비교해보면 아래와 같다.useQuery단일 쿼리를 수행하여 데이터 패칭특정 데이터를 가지고 온 뒤, 그 데이터를 캐싱하여 재사용(queryKey)목록조회, 유저정보 등 사용함useInfiniteQueryuseQuery에서 추가적으로 페이지네이션이나 무한스크롤을 지원특정 데이터를 여러 페이지에 걸쳐서 가져오고, 사용자가 더 많은 데이터 요청할 수 있도록 할 때 사용목록리스트, 스크롤 할때 추가 데이터 보여주기에 적합예제ret..

리액트 2024.12.19

Array.include()

오늘은 include에 대해 공부해봤다. 생각보다 실무에서 많이 사용하는 메서드라서 간단해보여도 공부하면 좋을 것 같아서 정리해본다.우선 include 는 무엇인가? 에 대해 mdn의 정의는 이렇다.아래의 예시를 통해 설명해보겠다. function test(str1,str2) { return str1.includes(str2) // false } test('aBcDeFg','b')이렇게되면 false가 이유는 간단하다. 대소문자를 구분하지 않았기 때문이다. 우리는 익숙하게 대소문자가 달라도 같은 알파벳이라 같은것이다 라는 느낌을 쉽게 받는데 프로그래밍에서는 대소문자 또한 명확히 구분을 해줘야 인식할 수 있기때문에 대문자든 소문자든 같은 문자열로 바꿔줘야한다는 것이다. f..

리액트 2024.12.17

slice() vs splice()

slice와 splice함수는 비슷하지만서도 다른 차이점이 있다.오늘은 이 두 배열함수의 차이에 대해 공부한 것을 적어보려고 한다.우선 공통적으로 쓸 빈 배열을 만들어보겠다. num = Array(10).fill().map((_,i) => i); // 길이가 10인 정수를 배열로 담음Array.slice()slice 함수에 첫 번째 인자에는 어느 인덱스에서 출발할지에 대한 start index와 어디에서 끊을지에 대한 end index 2개의 인자를 받는다. console.log(num.slice(5,9)) // [5,6,7,8] console.log(num.slice(5)) // [5,6,7,8,9] console.log(num.slice()) // [0,1,2,3,4,5,6..

리액트 2024.12.16

useState 이해하기

리액트를 하면서 가장 많이보고, 쉽게 접근 할 수 있는 react hook이 useState 이지 않을 까 생각한다.우선 useState의 형식을 보면은 아래와 같다. const [data, setData] = useState() // 기본 형식구조분해할당으로 되어있는데 이것은 "무조건" 위의 형식과 같게 해야한다. 그게 규칙이다.첫 번째의 data에는 상태 초기값이 들어가고 setData에는 data의 상태가 변경될 수 있는 함수가 들어간다.아래의 예제를 통해 이해해보자. export default function Counter() { const [count, setCount] = useState(0) // count의 초기값을 0 으로 설정 return( ..

리액트 2024.12.16

Object / Array 구조분해할당

객체구조분해할당에 대해서는 어느 정도 알고 있다고 생각했고 배열을 구조분해할당 하는 것은 한 번도 하지않아서 이번 기회에 배열구조분해할당도 연습하며 알게 된 것을 적어보려고 한다.우선 구조분해 할당이란 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.객체 구조 분해 할당 예시const user = { name : "홍길동", // 이름 tel : "010-1234-4321", // 전화번호 mail: "gildong@gmail.com", // 메일}우선 user라는 상수변수에는 object타입으로 이루어진 key가 3개인 이름,전화번호,메일로 이루어져있다.객체안의 속성에 접근하기 위해서는 . dot을 통해 접근하여 해당하는 k..

리액트 2024.12.15

Reduce Method

배열함수들을 공부하며 쉽게 이해하지 못했던 reduce 함수에 대해 공부한 것을 남기려고 한다.우선 mdn 사이트에서 reduce에 대해 정의한 것을 보면reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer)함수를 실행하고, 하나의 결과값을 반환합니다.라고 정의되어 있다. 이 reduce함수에는 4개의 인자가 존재하는데 누산기(acc)현재 값(cur)현재 인덱스(idx)원본 배열(src)이렇게 존재하고 있고, 그리고 선택적으로 인해 초기값 initialValue를 설정할 수 있다.// reduce함수의 기본 문법 형식array.reduce((acc,cur,idx,src) => { // 수행될 로직들}, initialValue // 선택적 초기값)위에 처럼 reduce함수의 사용방식..

리액트 2024.12.13