Redis와 웹훅을 활용한 캐싱 최적화: 서버 리소스 절약하는 방법(feat. React, AWS)

메뉴 데이터를 자주 업데이트하지 않고, 변경이 발생할 때만 클라이언트에 전달하고 싶다면 캐시와 웹훅을 활용하는 방식이 적합합니다. 이를 통해 CMS에서 메뉴 업데이트가 발생할 때만 캐시와 클라이언트 측 데이터가 새로고침되어, 매번 데이터베이스에서 읽지 않고 최신 데이터를 유지할 수 있습니다.

제안 솔루션: 캐시 + 웹훅 기반 캐시 무효화

1. 캐시 구성:
   • AWS에서 Elasticache(Redis) 또는 AWS Lambda Edge + CloudFront를 사용해 메뉴 데이터를 캐싱합니다.
   • 메뉴 데이터를 캐시하면 서버에서 반복적으로 DB를 조회할 필요가 없으므로 성능이 향상됩니다.
   • 캐시된 메뉴 데이터는 클라이언트가 요청할 때마다 조회되며, 변경 시에만 새로운 데이터를 로드하도록 합니다.
2. 웹훅을 통한 캐시 무효화:
   • CMS에 메뉴 수정 이벤트가 발생할 때, 이를 서버로 알릴 수 있도록 웹훅을 사용합니다.
   • 웹훅은 CMS에 설정할 수 있으며, 메뉴가 변경될 때 서버의 특정 엔드포인트를 호출하도록 설정합니다.
   • 웹훅이 호출되면 캐시 무효화 로직을 실행해 캐시된 메뉴 데이터를 삭제하거나 갱신합니다.
   • 이를 통해 CMS에서 변경 사항이 있을 때만 메뉴 캐시가 갱신되고, 클라이언트에 최신 데이터가 반영됩니다.
3. 다국어 지원 및 캐싱 관리:
   • 메뉴 데이터가 다국어로 제공되므로 언어별로 다국어 캐싱 전략이 필요합니다.
   • 각 언어별로 Redis에 language_code:menu와 같은 키를 두고 메뉴 데이터를 저장합니다.
   • 프론트엔드에서는 선택된 언어에 맞춰 해당 언어의 메뉴 데이터를 캐시에서 가져오도록 설정합니다.
4. React 클라이언트 측 데이터 처리:
   • 클라이언트는 메뉴 데이터가 캐싱된 API를 통해 데이터를 가져오고, 변경이 발생할 때만 다시 불러옵니다.
   • SWR이나 React Query 같은 라이브러리를 활용해 데이터가 변경될 때마다 클라이언트가 자동으로 메뉴 데이터를 갱신하도록 설정할 수 있습니다.
5. 정적 파일로 메뉴 데이터 관리 (추가 옵션):
   • 메뉴 데이터가 큰 변동이 없고 정적 데이터로 관리 가능하다면, 메뉴 데이터를 JSON 파일로 생성해 AWS S3에 업로드하고, S3에서 제공하는 정적 파일 URL을 통해 데이터를 가져오는 방식도 고려할 수 있습니다.
   • S3에 메뉴 데이터가 변경될 때마다 파일을 덮어쓰고 CloudFront 캐시를 무효화하면 클라이언트에 최신 데이터가 전달됩니다.

     

     웹 서버, Redis 캐시, 데이터베이스 간 상호 작용

 

구현 순서 예시

1. Redis 캐시 구성:
   • Redis에 언어별 메뉴 데이터를 저장하도록 Spring Boot API를 작성합니다.
   • 메뉴 변경 시 Redis의 캐시가 갱신될 수 있도록 구성합니다.
2. CMS 웹훅 연결:
   • CMS에 메뉴 변경 이벤트가 발생할 때 Spring Boot 서버의 엔드포인트에 웹훅을 호출하도록 설정합니다.
   • 웹훅 수신 시 Redis에서 해당 언어의 메뉴 데이터를 삭제하고, 이후 조회 시 새로운 메뉴 데이터가 로드되도록 합니다.
3. 클라이언트 측 메뉴 데이터 관리:
   • React에서 메뉴 데이터 요청 시 API를 통해 Redis 캐시에서 최신 데이터를 받아올 수 있도록 설정합니다.
   • SWR이나 React Query 같은 라이브러리를 사용해 자동 갱신이 가능하게 설정합니다.
4. S3와 CloudFront를 통한 정적 데이터 활용 (선택 사항):
   • 메뉴 데이터가 자주 바뀌지 않으면서도 정적으로 관리할 수 있다면, 메뉴 데이터를 JSON 파일로 관리해 S3와 CloudFront를 통해 클라이언트에 제공하는 방식도 사용해 볼 수 있습니다.

요약

위 방법을 통해 캐시와 웹훅을 이용해 DB 조회를 줄이고 변경 사항이 있을 때만 데이터를 갱신하는 방식으로 구현할 수 있습니다.