개발을 하다 보면 환율 정보를 필요로 하는 기능들이 점점 많아집니다.예를 들어, 상품 목록을 원화로 계산해서 보여줘야 한다면, 환율 정보가 필수적이죠. 그렇다면 환율 정보가 필요할 때마다 매번 웹 API를 호출해야 할까요?매번 API를 호출하게 되면 트래픽이 많아지고 성능 문제가 발생할 수 있습니다. 만약 환율 정보가 30분 동안만 보장된다고 한다면, API를 30분에 한 번만 호출하고 그동안 캐시된 데이터를 사용하는 방법을 고려할 수 있습니다.하지만 캐시 기능을 어떻게 추가할 수 있을까요? 이번 글에서는 데코레이터 디자인 패턴을 활용해 API 호출 코드를 수정하지 않고도 캐시 기능을 추가하는 방법을 소개하도록 하겠습니다!WebApiExRateProvider에 캐시 기능을 추가하기현재 WebApiExRa..
안녕하세요 정만입니다 ~ !공통 프로젝트에서 클로바 OCR API를 사용하여 인바디 검사지 사진에서 텍스트를 추출하는 기능이 있습니다. 프론트엔드에서 API 요청을 보낼 때 API 키가 헤더에 노출되는 문제를 알게된 후 백엔드에서 API를 호출 하는식으로 변경했습니다. 하지만 공식 문서의 자바 코드를 그대로 사용하였더니 가독성과 유지보수성이 좋지 않다고 생각해. Feign을 이용해 리팩토링을 해봤습니다. ✨Feign 이란 ?Feign이란 SpringBoot 애플리케이션을 위한 선언형 REST 클라이언트입니다. 여기서 "선언형"이란 API 호출을 위해 복잡한 URL 설정, 파라미터 처리, 헤더 설정 등을 직접 코드로 작성할 필요가 없고 인터페이스를 선언하는 것만으로 API호출을 처리해줍니다. Feig..
useMemo란?useMemo는 재렌더링 사이에 계산 결과를 캐싱할 수 있게 해주는 React Hook 예시코드calculateValue- 캐싱하려는 값을 계산하는 함수- 순수해야한다 → 인자를 받지않고 모든 타입의 값을 반환할 수 있어야한다.- 만약 다음 렌더링에서 dependencies가 바뀌지않았으면 동일한 값 , 바뀌었으면 calculateValue를 호출const cachedValue = useMemo(calculateValue, dependencies); 예시코드해당 코드는 TodoList가 상태를 업데이트하거나 부모로부터 오는 새로운 props를 받으면 filterTodos가 실행된다.function TodoList({ todos, tab, theme }) { const visibl..
