이재만 교수의 공간

헤더에서 access token 삭제

Encrypt Storage 에서 refresh token 삭제

resetQueries로  쿼리 상태를 초기값으로 리셋해서 값의 변경으로 useAuth 호출

removeQueries로 캐시에 있는 값 삭제

React Query에서 제공하는 refetchInterval, refetchOnReconnect, refetchIntervalInBackground는 쿼리 재요청(Refetch) 동작을 제어하는 옵션입니다. 각각의 옵션은 쿼리를 언제, 어떻게 다시 가져올지를 정의합니다. 아래에서 상세히 설명하겠습니다.

1. refetchInterval

• 역할: 주기적으로 데이터를 다시 가져오기(Refetch)를 실행합니다.
• 타입: number | false (기본값: false)
  • number: 밀리초 단위로 주기를 설정합니다.
  • false: 주기적인 재요청을 비활성화합니다.
• 사용 예: 실시간으로 데이터를 업데이트해야 하는 경우.

작동 방식

• 주어진 밀리초 간격으로 데이터를 자동으로 다시 가져옵니다.
• 이 설정은 데이터가 stale(오래된) 상태가 아니더라도 요청을 실행합니다.

예제

useQuery('example', fetchData, {
  refetchInterval: 5000, // 5초마다 데이터를 다시 가져오기
});

• 위 코드는 5초마다 API를 호출하여 데이터를 갱신합니다.

2. refetchOnReconnect

• 역할: 네트워크 연결이 다시 활성화될 때 데이터를 다시 가져옵니다.
• 타입: boolean (기본값: true)
  • true: 네트워크가 다시 연결되면 쿼리를 재요청합니다.
  • false: 네트워크 연결 여부에 관계없이 자동으로 재요청하지 않습니다.

작동 방식

• 네트워크가 끊겼다가 다시 연결되었을 때, 해당 옵션이 활성화되어 있으면 데이터를 다시 가져옵니다.
• React Query는 네트워크 상태를 감지하기 위해 브라우저의 Navigator API를 사용합니다(navigator.onLine).

예제

useQuery('example', fetchData, {
  refetchOnReconnect: true, // 네트워크 연결 복구 시 데이터를 다시 가져오기
});

• 사용자가 네트워크를 다시 연결하면 React Query가 자동으로 데이터를 재요청합니다.

적용 시점

• 사용자 환경에서 네트워크 연결이 불안정한 경우 유용합니다.
• 예: 모바일 애플리케이션에서 사용자가 Wi-Fi를 다시 연결했을 때 데이터를 자동으로 동기화.

3. refetchIntervalInBackground

• 역할: 브라우저가 백그라운드 상태에 있을 때도 refetchInterval을 유지할지 결정합니다.
• 타입: boolean (기본값: false)
  • true: 브라우저가 백그라운드 상태여도 데이터를 주기적으로 가져옵니다.
  • false: 브라우저가 백그라운드 상태일 경우, refetchInterval이 일시 중지됩니다.

작동 방식

• 브라우저가 백그라운드 상태로 전환되었는지 확인하기 위해 Document Visibility API를 사용합니다 (document.hidden).
• 기본적으로 브라우저가 백그라운드에 있을 때는 네트워크 요청을 줄이기 위해 refetchInterval을 멈춥니다. 하지만 이 옵션을 활성화하면 브라우저가 백그라운드 상태에서도 주기적으로 데이터를 가져옵니다.

예제

useQuery('example', fetchData, {
  refetchInterval: 5000, // 5초마다 데이터 갱신
  refetchIntervalInBackground: true, // 백그라운드 상태에서도 갱신
});

• 위 설정에서는 브라우저가 백그라운드 상태일 때도 5초마다 데이터를 가져옵니다.

적용 시점

• 실시간 데이터가 매우 중요할 때(예: 주식 가격, 실시간 알림 등).
• 네트워크 요청이 빈번하게 발생하므로 사용 시 주의가 필요합니다.

옵션 간의 상호작용

refetchInterval과 refetchIntervalInBackground

• refetchInterval이 활성화되어 있어야 refetchIntervalInBackground가 의미를 가집니다.
• refetchIntervalInBackground: false이면, 브라우저가 백그라운드 상태일 때 refetchInterval이 일시 중지됩니다.
• 두 옵션을 함께 사용하여 데이터를 주기적으로 업데이트하면서 네트워크 부하를 제어할 수 있습니다.

refetchOnReconnect와 refetchInterval

• 두 옵션은 독립적으로 작동합니다.
• refetchOnReconnect는 네트워크 상태 변화를 기준으로 동작하며, refetchInterval은 주기적인 데이터 요청을 기준으로 동작합니다.
• 예를 들어, refetchInterval이 5초로 설정되어 있다면, 네트워크가 끊겼다가 복구된 시점에 즉시 데이터를 요청합니다.

실제 사용 예제

실시간 데이터 갱신 예제

주식 가격 데이터를 실시간으로 가져오고, 백그라운드 상태에서도 데이터를 주기적으로 갱신합니다.

useQuery('stockPrices', fetchStockPrices, {
  refetchInterval: 1000, // 1초마다 데이터 갱신
  refetchIntervalInBackground: true, // 백그라운드 상태에서도 갱신
});

모바일 애플리케이션 예제

네트워크 연결이 끊겼다가 다시 연결될 때 데이터를 자동으로 가져옵니다.

useQuery('userProfile', fetchUserProfile, {
  refetchOnReconnect: true, // 네트워크 복구 시 자동으로 데이터 요청
});

네트워크 최적화 예제

• 10초마다 데이터를 갱신하되, 백그라운드 상태에서는 데이터 요청을 멈춥니다.
• 네트워크 연결 복구 시에도 데이터를 자동으로 동기화합니다.

useQuery('dashboardData', fetchDashboardData, {
  refetchInterval: 10000, // 10초마다 데이터 갱신
  refetchIntervalInBackground: false, // 백그라운드 상태에서는 갱신 중지
  refetchOnReconnect: true, // 네트워크 복구 시 데이터 동기화
});

옵션 비교

옵션 기본값 역할 사용 사례

결론

• refetchInterval: 주기적으로 데이터를 갱신해야 할 때 사용.
• refetchOnReconnect: 네트워크 복구 시 자동으로 데이터를 다시 가져오기.
• refetchIntervalInBackground: 브라우저가 백그라운드 상태여도 주기적인 갱신을 유지.

이 세 가지 옵션을 상황에 맞게 조합하여 실시간 데이터 처리 및 네트워크 최적화를 구현할 수 있습니다.

1. staleTime

• 역할: 데이터를 "신선(fresh)"한 상태로 간주하는 시간을 설정합니다.
• 기본값: 0ms (데이터는 즉시 "stale(오래된)" 상태가 됨)
• 의미:
  • React Query는 데이터를 캐시하고, 캐시된 데이터를 사용할지 새로 요청할지 결정합니다.
  • staleTime 내에서는 데이터를 신선한 상태로 간주하고, 다시 가져오지(refetch) 않습니다.
  • staleTime이 지난 후, 데이터는 "stale(오래된)" 상태가 되어, React Query는 필요에 따라 데이터를 다시 가져옵니다.

staleTime의 동작 흐름

1. 데이터가 캐시에 저장됩니다.
2. staleTime 내에서는 데이터를 신선하다고 간주하여, 요청이 발생해도 네트워크 요청 없이 캐시된 데이터를 반환합니다.
3. staleTime이 지나면 데이터는 "stale" 상태로 간주되고, 다음 요청 시 네트워크를 통해 데이터를 다시 가져옵니다.

staleTime의 사용 예시

• 위 설정에서는 데이터가 캐시에 저장된 후 5분 동안 "신선" 상태로 간주됩니다.
• 5분 동안 다시 요청하면 서버에 네트워크 요청을 보내지 않고 캐시 데이터를 사용합니다.
• 5분이 지나면 데이터는 "stale" 상태가 되고, 다음 요청 시 서버에서 데이터를 다시 가져옵니다.

2. cacheTime

• 역할: 데이터를 캐시에 유지하는 시간을 설정합니다.
• 기본값: 5분 (300,000ms)
• 의미:
  • 캐시에 저장된 데이터가 사용되지 않을 경우, 캐시에서 데이터를 삭제하는 시간입니다.
  • 데이터가 캐시에 있는 동안에는 다시 요청이 발생하면 캐시 데이터를 사용하지만, 데이터가 삭제되면 새로 데이터를 가져옵니다.

cacheTime의 동작 흐름

1. 데이터가 캐시에 저장됩니다.
2. cacheTime 동안 데이터가 사용되지 않으면, React Query는 데이터를 캐시에서 삭제합니다.
3. 캐시가 삭제된 후 요청이 발생하면 네트워크 요청을 통해 데이터를 새로 가져옵니다.

cacheTime의 사용 예시

• 위 설정에서는 데이터가 캐시에 저장된 후 10분 동안 사용되지 않으면 캐시에서 삭제됩니다.
• 데이터가 삭제되기 전에는 캐시에 있는 데이터를 사용할 수 있습니다.
• 10분 후 데이터가 삭제되면, 새 요청 시 서버로부터 데이터를 다시 가져옵니다.

staleTime과 cacheTime의 차이점

속성staleTimecacheTime

결합하여 사용하기

staleTime과 cacheTime은 서로 독립적이지만, 결합하여 데이터 요청과 캐싱 동작을 세밀하게 제어할 수 있습니다.

예제

• 데이터는 처음 요청 후 5분 동안 신선(fresh) 상태로 간주됩니다.
• 5분 내에는 캐시된 데이터를 사용하고 네트워크 요청을 하지 않습니다.
• 5분이 지나면 데이터가 "stale" 상태가 되고, 새 요청 시 데이터를 다시 가져옵니다.
• 데이터가 10분 동안 사용되지 않으면 캐시에서 삭제됩니다.

시나리오

1. 0~5분: 데이터를 요청하면 캐시 데이터를 사용 (네트워크 요청 없음).
2. 5~10분: 데이터는 stale 상태로 간주되지만 캐시에 남아 있음. 새 요청 시 네트워크를 통해 데이터를 다시 가져옴.
3. 10분 이후: 캐시 데이터가 삭제됨. 새 요청 시 네트워크 요청만 가능.

언제 어떤 옵션을 사용해야 할까?

1. staleTime을 길게 설정해야 할 때:
   • 데이터가 자주 변경되지 않고, 네트워크 요청을 줄이고 싶을 때.
   • 예: 뉴스 피드, 공통 설정 데이터, 유저 프로필 정보 등.
2. cacheTime을 길게 설정해야 할 때:
   • 캐시 데이터를 가능한 오래 유지하고, 자주 재사용하고 싶을 때.
   • 예: 비슷한 요청이 자주 발생하는 경우(검색 결과 등).
3. staleTime을 짧게 설정해야 할 때:
   • 데이터가 실시간으로 변경될 가능성이 있을 때.
   • 예: 주식 가격, 채팅 메시지 등.
4. cacheTime을 짧게 설정해야 할 때:
   • 데이터가 민감하거나, 불필요한 캐시를 피하고 싶을 때.
   • 예: 보안 관련 정보.

결론

• staleTime: 데이터의 신선도를 관리하며, 네트워크 요청을 줄이는 데 사용됩니다.
• cacheTime: 데이터를 캐시에 얼마나 오래 유지할지를 결정합니다.
• 두 옵션을 상황에 맞게 조합하여 React Query의 캐싱 동작을 최적화할 수 있습니다.

npx @react-native-community/cli init matzip

container

container-fluid

container-sm, md, lg, xl, xxl

m : margin

p : padding

bg : background color

text : font color

grid

col-xxl-1 col-lg-2 col-md-8

col-xxl-1 col-lg-2 col-md-4

table 

table-striped

table-bordered

table-hover

table-dark

table-primary

table-success

table-info

table-danger

table-active

table-sm

table-responsive

rounded

rounded-5

rounded-circle

img-thumbnail

float-start

float-end

img-fluid

btn-close

data-bs-dismiss="alert"

alert

alert-success

alert-dismissible

btn

btn-primary

btn-success

btn-outline-primary

btn-sm

disabled

d-grid

spinner-border

btn-group

btn-group-lg

btn-group-vertical

dropdown-toggle

data-bs-toggle="dropdown"

dropdown-menu

dropdown-item

list-group

list-group-item

list-group-numbered

list-group-horizontal

list-group-flush

d-flex

justify-content-between

align-items-center

rounded-pill

badge

card

card-body

card-title

card-text

card-link

card-image-top

card-img-overlay

modal

modal-dialog

modal-content

modal-header

modal-body

modal-footer

modal-dialog-scrollable

modal-dialog-centered

data-bs-toggle="modal"

data-bs-target="#modal1"

data-bs-backdrop="static"

text-start

text-center

text-end

text-wrap

text-nowrap

text-break

text-lowercase

text-uppercase

text-capitalize

fs-1

fs-2

fs-3

fs-4

fs-5

fs-6

fw-bold

fw-bolder

fw-semibold

fw-normal

fw-light

fw-lighter

fst-italic

fst-normal

lh-1

lh-sm

lh-base

lh-lg

font-monospace

text-reset

text-decoration-underline

text-decoration-line-through

text-decoration-none

react query 순서

import { useWindowDimensions } from 'react-native';

const width = useWindwoDemensions().width;

const height = useWindowDimensions().height;

const { width, height } = useWindowDimensions();

1. babel-plugin-module-resolver 설치

npm i babel-plugin-module-resolver

2. babel.config.js에서 plugins 수정

3. tsconfig.json 에 compilerOptions 수정

v-html, v-bind, @click 사용

barbel.config.js

moduel.exports = {

  presets: ['module:metro-react-native-babel-preset'],

  plugins: ['react-native-reanimated/plugin']

}

npx react-native start --reset-cache

v-for Directive

Array of strings

Array of objects

Array of arrays

Block of HTML elements

Object key value pairs

v-text

v-html

v-bind:id

v-bind:class

v-bind:disabled

v-if

v-else

v-else-if

v-show