2024. 12. 31. 22:45
1. staleTime
- 역할: 데이터를 "신선(fresh)"한 상태로 간주하는 시간을 설정합니다.
- 기본값: 0ms (데이터는 즉시 "stale(오래된)" 상태가 됨)
- 의미:
- React Query는 데이터를 캐시하고, 캐시된 데이터를 사용할지 새로 요청할지 결정합니다.
- staleTime 내에서는 데이터를 신선한 상태로 간주하고, 다시 가져오지(refetch) 않습니다.
- staleTime이 지난 후, 데이터는 "stale(오래된)" 상태가 되어, React Query는 필요에 따라 데이터를 다시 가져옵니다.
staleTime의 동작 흐름
- 데이터가 캐시에 저장됩니다.
- staleTime 내에서는 데이터를 신선하다고 간주하여, 요청이 발생해도 네트워크 요청 없이 캐시된 데이터를 반환합니다.
- staleTime이 지나면 데이터는 "stale" 상태로 간주되고, 다음 요청 시 네트워크를 통해 데이터를 다시 가져옵니다.
staleTime의 사용 예시
javascript
코드 복사
useQuery('example', fetchData, { staleTime: 1000 * 60 * 5, // 5분 동안 데이터를 신선하게 유지 });
- 위 설정에서는 데이터가 캐시에 저장된 후 5분 동안 "신선" 상태로 간주됩니다.
- 5분 동안 다시 요청하면 서버에 네트워크 요청을 보내지 않고 캐시 데이터를 사용합니다.
- 5분이 지나면 데이터는 "stale" 상태가 되고, 다음 요청 시 서버에서 데이터를 다시 가져옵니다.
2. cacheTime
- 역할: 데이터를 캐시에 유지하는 시간을 설정합니다.
- 기본값: 5분 (300,000ms)
- 의미:
- 캐시에 저장된 데이터가 사용되지 않을 경우, 캐시에서 데이터를 삭제하는 시간입니다.
- 데이터가 캐시에 있는 동안에는 다시 요청이 발생하면 캐시 데이터를 사용하지만, 데이터가 삭제되면 새로 데이터를 가져옵니다.
cacheTime의 동작 흐름
- 데이터가 캐시에 저장됩니다.
- cacheTime 동안 데이터가 사용되지 않으면, React Query는 데이터를 캐시에서 삭제합니다.
- 캐시가 삭제된 후 요청이 발생하면 네트워크 요청을 통해 데이터를 새로 가져옵니다.
cacheTime의 사용 예시
javascript
코드 복사
useQuery('example', fetchData, { cacheTime: 1000 * 60 * 10, // 10분 동안 캐시 데이터 유지 });
- 위 설정에서는 데이터가 캐시에 저장된 후 10분 동안 사용되지 않으면 캐시에서 삭제됩니다.
- 데이터가 삭제되기 전에는 캐시에 있는 데이터를 사용할 수 있습니다.
- 10분 후 데이터가 삭제되면, 새 요청 시 서버로부터 데이터를 다시 가져옵니다.
staleTime과 cacheTime의 차이점
속성staleTimecacheTime
역할 | 데이터를 "신선(fresh)"한 상태로 간주하는 시간 | 데이터를 캐시에 유지하는 시간 |
기본값 | 0ms (즉시 stale 상태가 됨) | 5분 |
데이터 상태 | "stale" 또는 "fresh" 상태를 관리 | 캐시에 데이터가 남아 있는지 여부를 관리 |
동작 시점 | 데이터가 stale 상태인지 판단 | 데이터가 캐시에서 삭제될지 여부를 판단 |
네트워크 요청 | staleTime 내에서는 네트워크 요청 없이 캐시 사용 | 데이터가 캐시에서 삭제되면 네트워크 요청 발생 |
목적 | 데이터의 신선도와 네트워크 요청 빈도를 조절 | 캐시 데이터의 유효 기간을 조절 |
결합하여 사용하기
staleTime과 cacheTime은 서로 독립적이지만, 결합하여 데이터 요청과 캐싱 동작을 세밀하게 제어할 수 있습니다.
예제
javascript
코드 복사
useQuery('example', fetchData, { staleTime: 1000 * 60 * 5, // 5분 동안 데이터를 신선하다고 간주 cacheTime: 1000 * 60 * 10, // 10분 동안 캐시 데이터를 유지 });
- 데이터는 처음 요청 후 5분 동안 신선(fresh) 상태로 간주됩니다.
- 5분 내에는 캐시된 데이터를 사용하고 네트워크 요청을 하지 않습니다.
- 5분이 지나면 데이터가 "stale" 상태가 되고, 새 요청 시 데이터를 다시 가져옵니다.
- 데이터가 10분 동안 사용되지 않으면 캐시에서 삭제됩니다.
시나리오
- 0~5분: 데이터를 요청하면 캐시 데이터를 사용 (네트워크 요청 없음).
- 5~10분: 데이터는 stale 상태로 간주되지만 캐시에 남아 있음. 새 요청 시 네트워크를 통해 데이터를 다시 가져옴.
- 10분 이후: 캐시 데이터가 삭제됨. 새 요청 시 네트워크 요청만 가능.
언제 어떤 옵션을 사용해야 할까?
- staleTime을 길게 설정해야 할 때:
- 데이터가 자주 변경되지 않고, 네트워크 요청을 줄이고 싶을 때.
- 예: 뉴스 피드, 공통 설정 데이터, 유저 프로필 정보 등.
- cacheTime을 길게 설정해야 할 때:
- 캐시 데이터를 가능한 오래 유지하고, 자주 재사용하고 싶을 때.
- 예: 비슷한 요청이 자주 발생하는 경우(검색 결과 등).
- staleTime을 짧게 설정해야 할 때:
- 데이터가 실시간으로 변경될 가능성이 있을 때.
- 예: 주식 가격, 채팅 메시지 등.
- cacheTime을 짧게 설정해야 할 때:
- 데이터가 민감하거나, 불필요한 캐시를 피하고 싶을 때.
- 예: 보안 관련 정보.
결론
- staleTime: 데이터의 신선도를 관리하며, 네트워크 요청을 줄이는 데 사용됩니다.
- cacheTime: 데이터를 캐시에 얼마나 오래 유지할지를 결정합니다.
- 두 옵션을 상황에 맞게 조합하여 React Query의 캐싱 동작을 최적화할 수 있습니다.
2024. 12. 25. 15:39
npx @react-native-community/cli init matzip
2024. 12. 9. 11:18
1. 도메인 설정
2. nginx 설치 후 실행
3. certbot 설치
sudo apt install certbot python3-certbot-nginx
4. 인증서 발급
sudo certbot --nginx -d apple.com
5. 접속 확인
https://apple.com
Apple
Discover the innovative world of Apple and shop everything iPhone, iPad, Apple Watch, Mac, and Apple TV, plus explore accessories, entertainment, and expert device support.
www.apple.com
6. http에서 https로 redirection
server {
listen 80;
server_name apple.com;
return 301 https://$host$request_uri;
}
7. 설정 후 nginx 재시작 및 테스트
sudo nginx -t
sudo systemctl restart nginx
2024. 12. 6. 15:53
헤더 파일 내용
1. 함수 원형
2. 기호 상수, #define, const
3. 구조체 선언
4. 클래스 선언
5. 템플릿 선언
6. 인라인 함수
기억 존속 시간(Storage duration)
1. 자동 - 자동변수 - 지역변수, 블록 (쓰레기 값)
2. 정적 - 정적변수 - 전역변수, static (0)
3. 동적 - 동적변수 - new, delete
4. 쓰레드
사용범위(Scope)
어떤 이름이 하나의 파일 안에서 얼마나 널리 알려지는가?
1. 블록 - 지역
2. 파일 - 전역
링크(Linkage)
서로 다른 번역 단위들이 이름을 공유하는 것
1. 외부링크(external linkage) - 여러 파일들이 이름을 공유
2. 내부링크(internal linkage) - 한 파일 안에 있는 함수들만 공유
3. 링크 없음
2024. 11. 17. 16:49