본문 바로가기

전체 글92

tanstack-query(react-query) staleTime과 refetchInterval을 활용한 네트워크 요청 최소화 방법 tanstack-query의 기초를 다시 보면서 전에 팀 프로젝트를 진행할 때 네트워크 요청이 많아 사용량이 다 차버린 생각이 나서 네트워크 요청을 최소화하는 방법을 찾게 되었다. 상황 및 문제점먼저 네트워크 요청을 줄이려면 tanstack-query의 데이터 캐싱을 사용해야 하는데 기존에는 stale time을 설정하지 않아서 0 이였다. 이 값이 0이면 데이터가 fresh 상태가 되지 않고 계속 stale 상태가 되어 계속 요청을 보내게 된다. tanstack-query의 캐싱 기능을 사용하지 않게 되는 것이다. 그런데 staleTime을 조정해서 캐싱되는 시간을 확보하려고 하는데 문제가 되는 점이 있었다. 예를 들어 내가 좋아요 한 글이 있는데 이 글의 제목이나 유저가 좋아요를 취소하는 등의 변경이.. 2024. 8. 12.
[react] useCallback 리액트에서 리렌더링이 빈번한 것은 좋지 않다. 리렌더링을 줄이는 것이 중요한데 이 작업을 최적화한다고 할 수 있다. 불필요한 리렌더링이 발생하지 않도록 하는 최적화 방법에 자주 사용되는 것 중 하나는 바로 useCallback을 사용하는 것이다.이 외에도 컴포넌트를 캐싱하는 memo(React.memo)와 값을 캐싱하는 useMemo가 있다.  useCallback오늘 알아볼 훅은 useCallback이다.useCallback은 함수를 캐싱한다고 할 수 있다. 함수를 메모리에 저장하여 매번 새로 생성되지 않도록 할 수 있고, 의존성 배열을 추가하여 원하는 때에 다시 메모리에 저장하도록 지정할 수 있다.  아래의 코드는 App 컴포넌트 하위에 Test 컴포넌트와 FileDrop 컴포넌트가 있는 구조이다. .. 2024. 7. 17.
[react] PropsWithChildren 요즘 리액트 기초를 다시 공부 중인데, PropsWithChildren 타입을 알게 됐다. 이 타입은 상위 컴포넌트에서 하위 컴포넌트로 children을 내려줄 때 타입을 지정하는 children : ReactNode를 대체할 수 있다. 마우스 오른쪽 버튼을 눌러서 index.d.ts에 이동하여 type PropsWithChildren 타입을 보면 children을 반드시 설정하지 않아도 되는 선택적인 속성임을 알 수 있다. 만약 꼭! children이 들어가야 한다면 이 속성을 사용하는 것은 바람직하지 않을 것 같다. 꼭 필요한 곳에 children이 들어가지 않았는데도 에러가 나지 않을 것 이기 때문이다.그래서 선택적으로 children이 필요한 곳에는 PropsWithChildren 타입을 사용하고.. 2024. 7. 11.
[react] 클래스형 컴포넌트 함수형 컴포넌트는 많이 사용해 봤는데 클래스형 컴포넌트는 사용해 본 적이 없어서 기록하게 되었다. 먼저, 클래스형 컴포넌트는 react의 Component 클래스를 상속받아야 하기 때문에 import 해준다.또한, render 메서드를 포함해야 한다.  아래의 코드는 color와 text 속성을 props로 내려준다.App.tsximport {Component} from 'react'import ClassComponent from './ClassComponent'export default class App extends Component { render() { return ( ) }} color 속성은 style에 적용하여 글.. 2024. 7. 11.
구조 분해 할당(Destructuring assignment) 구조 분해 할당(Destructuring assignment)은 배열이나 객체의 속성을 분해하여 그 값을 변수에 담을 수 있도록 하는 표현식이다. 객체의 경우중괄호 안에 변수명을 넣고 분해할 객체를 지정해 주면 된다. const {name, age}는 객체의 키 값이기 때문에 {age, name} 이렇게 순서를 변경하여도 결과는 같다.객체는 순서가 중요하지 않다!const person = {name : 'jiji', age: 11};const {name, age} = person;console.log(name) //jijiconsole.log(age) //11  만약 변수명을 키의 이름과 다르게 변경하고 싶다면 아래와 같이 키 값 : 새로운 변수명 과 같이 작성해 주면 된다.const person = {.. 2024. 7. 4.
sort sort란배열의 값을 정렬해주는 메소드이다.const arr = ['c', 'q', 'b', 'a']const sortArr = arr.sort()console.log(sortArr) // (4) ['a', 'b', 'c', 'q']위의 코드를 보면 c q b a 에서 a b c q 로 정렬된 것을 볼 수 있다. 이 때, 주의할 점은 숫자를 정렬하는 경우이다.만약 아래와 같은 배열이 있을 때, 우리는 숫자가 오름차순으로 정렬될 것이라고 생각할 수 있다.const numArr2 = [4, 100, 6, 3, 1] ---> 예상 : 1, 3, 4, 6, 100 하지만 코드를 실행하면 아래와 같이 예상과 다른 결과가 나오는 것을 확인할 수 있다.const numArr2 = [4, 100, 6, 3, 1]num.. 2024. 7. 1.
마지막 프로젝트, 그리고 부트캠프 종료.. 어제부로 부트캠프가 종료되었다.이번 최종 프로젝트는 5주간 진행하였고, 이렇게 긴 호흡을 가지고 프로젝트를 진행해 본 적이 처음이라 진행하면서도 잘 끝낼 수 있을까? 잘 마무리할 수 있을까? 하는 의구심이 스스로 들었던 것 같다. 구현5주라는 시간이 길다면 길고 짧다면 짧지만 진짜 밤을 새우면서 프로젝트를 진행했던 것 같다.밤을 새우는 건 좋은 효율이 나는 건 아니지만, 정말 시간이 너무나도 부족했다.  구현에 급급해서 아쉽게 완성된 기능들도 있었다. 특히 이번에 메인에 캐러셀 슬라이드를 만들었는데, 정말 미흡하게 완성이 돼서 이 부분도 굉장히 아쉽고, 배너 슬라이드의 경우 배너 관리하는 기능도 만들어서 관리하고 싶었는데 하지 못했다.이 외에도 더 있는데 생각이 나지 않는다...최종 발표4개월 동안 부트.. 2024. 5. 2.
nextjs/typescript lodash 에러 yarn add lodash 후import _ from 'lodash';  를 했는데 정상적으로 import 되지 않고 아래와 같은 메시지가 출력되었다.  Could not find a declaration file for module 'lodash'. 'c:/codeGit/v-up-ver2/node_modules/lodash/lodash.js' implicitly has an 'any' type. Try `npm i --save-dev @types/lodash` if it exists or add a new declaration (.d.ts) file containing `declare module 'lodash';`  찾아보니 typescript에서 외부 라이브러리를 사용할 때 발생할 수 있으며, t.. 2024. 4. 29.

티스토리툴바