들어가며 개발자 글쓰기 커뮤니티 글또 9기 활동 중, Udemy의 React Query/TanStack Query : React로 서버 상태 관리하기 강의를 협찬받아 수강했다. Tanstack Query는 React를 사용하는 프로젝트에서 서버 상태 관리를 위해 거의 필수적으로 사용하고 있는 라이브러리인 만큼 중요도가 높고, 현재 실무에서 사용하고 있지만 그때그때 필요한 기능을 공식문서에서 찾아 활용해본 정도라 강의로 들으면 더 탄탄하게, 미처 놓쳤던 부분도 알아갈 수 있을 것 같아 수강하게 되었다. 강의 목차 강의는 아래의 순서로 진행되고, 외국인 강사분이 영어로 진행하기에 한글 자막이 제공된다. 쿼리 생성 및 로딩/에러 상태 페이지매김, 프리페칭과 변이 동적 데이터 로드를 위한 무한 쿼리 더 큰 앱에서의 React Query:설정,집중화,커스텀 후크 쿼리 특성 1:프리페칭과 페이지 매김 쿼리 특성 2:데이터 변환과 데이터 리페칭 React Query와 인증 변이(Mutation…

본 글은 원글 patterns - HOC Pattern을 학습용으로 번역한 것입니다. 고차 컴포넌트 패턴 애플리케이션에서 여러 컴포넌트에 동일한 로직을 사용하고자 할 때가 있습니다. 이 로직에는 컴포넌트에 특정한 스타일링을 적용시키는 것, 권한 요구, 전역 상태룰 추가하는 것 등이 포함될 수 있습니다. 여러 컴포넌트에서 같은 로직을 재사용할 수 있도록 하는 방법 중 하나는 고차 컴포넌트 패턴을 사용하는 것입니다. 이 패턴으로 애플리케이션 전체에서 컴포넌트 로직을 재사용할 수 있습니다. 고차 컴포넌트(HOC)는 또다른 컴포넌트를 전달받는 컴포넌트입니다. 고차 컴포넌트는 매개변수로 전달하는 컴포넌트에 적용시키고자 하는 특정 로직을 포함하고 있습니다. 해당 로직을 적용한 후, 고차 컴포넌트는 추가적인 로직이 포함된 요소를 반환합니다. 애플리케이션에서 여러 컴포넌트에 특정한 스타일링을 추가하고 싶다고 가정해봅시다. 매번 로컬에서 style 객체를 만드는 대신, 전달하는 컴포넌트에 …

본 글은 원글 patterns - Compound Pattern을 학습용으로 번역한 것입니다. 들어가며 라는 문장에 깊은 감명을 받았던 최근.. patterns에 정리된 패턴 하나하나를 뽀개보려 한다. 원문 자체가 단순한 영문으로 이루어져 있지만 이해한 후 다시한번 정리해내는 경험 또한 유익할거란 생각. 첫 주자는 ! Compound Pattern 우리의 애플리케이션엔 종종 서로 관련된 컴포넌트들이 있습니다. 이것들은 공유된 상태를 통해 서로 의존하고, 로직을 공유합니다. 이는 select, dropdown, menu item과 같은 컴포넌트에서 자주 볼 수 있습니다. compound component pattern을 사용하면 특정 작업을 수행하기 위해 함께 작동하는 컴포넌트를 만들 수 있습니다. Context API 예를 들어봅시다: 우리는 다람쥐 사진 목록이 있습니다! 단순히 다람쥐 사진을 보는 것을 넘어서, 우리는 유저가 사진을 수정하거나 삭제하는 버튼을 추가하고자 합니다. …

HTTP 캐시 웹 브라우저가 서버로부터 받은 데이터를 일시적으로 저장하는 공간을 HTTP 캐시라고 한다. 캐시는 데이터,값을 복사해 임시로 저장하는 장소를 가르키고 AWS에 따르면 다양한 유형이 있다. (데이터의 복사본을 저장하는 장소는 캐시, 캐시에 복사본을 저장하고 있다가 요청시 제공하는 과정 전체는 캐싱이라 한다.) 다만 조건부 요청 헤더와의 상호작용에 대한 이 글에선 HTTP 캐시(웹 캐시)만 다룰 예정. HTTP 캐시는 웹 서비스 성능 최적화에 도움을 주는데, 이미지나 자바스크립트 파일 등을 매번 다운로드하지 않고 복사본을 캐시에 저장해 두었다가 이후의 요청에 (유효시간 검증 후)캐시의 리소스를 사용할 수 있기 때문이다. 우리가 어떤 페이지에 처음 진입할 때와 n번째 진입할 때의 로딩 속도가 차이나는 이유도 여기에 있다. HTTP 캐시는 주로 HTTP 헤더를 통해 제어되는데, 대표적인 헤더는 아래 정도가 있다. : 캐시의 유효시간을 초 단위로 설정하거나 (max-age)…