Dev's

QueryFunctionContext를 이용하게 된 계기NextJS, React-Query를 이용하여 프로젝트를 진행하며, getServerSideProps 에서 Prefetch 기능을 사용하여, 서버사이드렌더링(SSR)을 진행하고자 하였다.현재 프로젝트에서 사용하고 있는 API 구조는 아래와 같았으며,{ resultCode: 200, data: { ... }}API 에서 전달해주는 데이터를 클라이언트에서 바로 사용하는 구조가 아니라 클라이언트에서 데이터를 한번 가공하는 형태로 사용하고 있는 형태로 사용하고 있다. (BFF 구조가 되었다면 더 편했을까?)// Network.tsasync function fetchPage(): Promise { const response ..

개발 내용 웹앱 어플리케이션 프로젝트를 진행하며 workbox의 캐시 기능을 이용하여 PWA을 개발하였습니다. 어플리케이션 최초 구동 시 필요한 리소스의 캐시가 완료되면, 재실행시 캐시 된 리소스 파일들을 사용하여 오프라인 상태에서 사용할 수 있도록 개발을 진행하였습니다. 개발 환경 구성 workbox를 사용하기 위해서 workbox-build모듈을 설치 후 service-worker에서 사용될 serviceWorker.js파일을 생성하도록 하였습니다. 리소스 캐시 프로젝트 내에서 캐시 할 리소스를 필수적으로 캐시가 되어야 하는지, 사용자 또는 환경에 따라 캐시가 필요한 리소스로 구분을 지었습니다. 그리고 각 구분에 따라 캐시 하는 내용을 다르게 구성하였습니다. 필수적으로 캐시가 되어야 하는 리소스 해당..