1. 학습 목표 Tanstack Query를 통해 캐싱전략을 얼마나 적절하게 잘짜는 것도 중요한 요소이기에 내부에서 다양한 옵션을 제공한다. 반대로, 이전의 데이터가 아닌 새로운 데이터를 보여줘야 하는 데이터 갱신의 경우도 효율적으로 요청하도록 유연하게 설계되어있다. Tanstackquery에서 제공하는 데이터 갱신 방식들을 이해하고, 각자 어떤 상황에 적합할지 알아보자 2. 핵심 개념 요약 (자동갱신, 수동갱신, etc..) 1. 자동 갱신 (Auto Refetching) 1-1. refetchOnWindowFocus브라우저 탭으로 돌아올 때 자동으로 데이터를 다시 가져오는 옵션으로. 기본값은 true로 설정되어 있다. useQuery(['todos'], fetchTodos, { refetchOnW..

개요 개인 프로젝트를 Next로 만든다면 커스텀 백엔드, 복잡한 네트워크 구성을 요구하는 경우가 아닌경우라면 Vercel가 가장 편리한 방법이다. 그러나, organizaiton을 만들어 배포를하거나, 자신이 만든 레포지토리가 고급 서버 스펙을 필요로 하는 경우엔 과금에 따라 망설여 지곤 한다. 이럴 경우에 여러 방법을 사용해 간단하게 vercel로 배포할 수 있는데 알아보자. Vercel Verlcel은 Next.js 기반 프로젝트 최적화된 정적/서버리스 배포 플랫폼이다. 졸업 후 만나본 여러 FE 팀원들이 ec2, amplify 배포 경험은 없어도, vercel 배포경험은 대게 있었다. 그만큼 편리성에 몰두한 vercel은 다양한 장점이 존재한다. 장점 1. 🔧 Next.js에 최적화된 플랫폼Ne..

개요 프로젝트를 진행 중 새로운 입력 필드 추가 버튼을 통해 input을 새롭게 생성하는 form요소를 구현중에 아래와 같은 문제가 발생했다. 새로운 요소를 생성하기 위해 Add 버튼을 클릭 시, 가장 최상단으로 계속 이동하는 상황 혹여나 클릭에 window객체를 건드리거나, 뷰포트를 조정하는 로직이 있나 했지만 없었다. 코드에서 간단하고, 치명적인 문제가 있었다. appendIsbn({ value: 0 })} className="text-sm font-semibold text-[var(--sub-color)]" > + Add ; form내부에서 button의 type을 지정하지 않고 기본 default값으로 사용했기에 오류가 발생했다. button 태그의 type button의 ..

서론 프로젝트를 진행하다보면 단순 HTTP를 통한 API 구현이 아닌 웹소켓을 통한 구현이 필요한 기능들이 있다. 그 기능들로는 실시간 채팅 앱, 실시간 알림 시스템, 실시간 주식/코인 가격, 실시간 협업 툴(노션)등이 있다. 본인의 경우 웹소켓 연결을 통해 실시간 주식 가격을 차트에 보여주거나 가격을 보여준 경험이 있다. 해당 프로젝트를 진행할 때, 웹소켓에 대한 이해를 제대로 하지 못한채로 주먹구구식으로 기능구현에만 관심이 치우쳤던 것 같다. 이번 기회에 웹소켓에 대해 제대로 이해해보려한다. WebSocket과 HTTP 어째서 위에서 언급한 실시간과 관련된 기능들은 우리가 주로 사용하는 HTTP를 통해 구현할 수 없는 것일까? HTTPHTTP의 특성으로 요청-응답을 기반으로 클라이언트가 요청을 보..