분류 전체보기

📬 서버 상태(Server State)서버 상태란 클라이언트가 아닌 서버나 그 밖의 외부 공간에 저장되어 있는 데이터로, 일반적으로 클라이언트가 요청을 보내 데이터를 사용합니다.서버 상태의 특징은 다음과 같습니다.서버에 저장되므로 클라이언트가 종료되어도 데이터가 사라지지 않습니다.보통 클라이언트에서 API 요청을 보내 데이터를 받아서 사용하며권한이 있는 클라이언트라면 누구나 서버 상태 데이터에 접근할 수 있습니다.네트워크 요청이 요구되므로 데이터에 접근하고 업데이트하는 데 시간이 걸릴 수 있습니다.서버 상태에는사용자와 관련된 정보(프로필, 권한의 정도)데이터베이스에 저장된 각종 데이터API를 통해 가져와야 하는 데이터비동기 데이터등이 존재합니다. 📬 클라이언트 상태(Client State)클라이언트 ..

🏝️ React-Query란웹 애플리케이션에서 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 것을 쉽게 만들어주는 상태 관리 라이브러리입니다.- TanStack Query리액트로 애플리케이션을 개발하면, 보통 useState와 useEffect를 사용하여 데이터와 상태를 관리합니다.이 과정에서 상위 컴포넌트에서 하위 컴포넌트로 props를 깊게 내려줘야 하는 상황('props drilling')이나 공통된 데이터를 여러 컴포넌트에서 사용하는 경우가 존재합니다. 이때 리액트의 컨텍스트(context API)를 사용할 수 있지만, 애플리케이션의 규모가 크거나 구조가 복잡하다면 컨텍스트만으로 상태를 관리하는 것은 한계가 있습니다. 따라서 반복적인 데이터 fetching 코드 감소기존 데이터 캐싱..

📅 Day.js란Day.js 라이브러리는 최신 브라우저에서 날짜와 시간에 대해 구문 분석, 유효성 검사, 조작, 출력과 같은 기능을 간편하게 처리하는 2KB의 아주 가벼운 자바스크립트 라이브러리입니다.- 공식 깃허브 설명(한국어)날짜 및 시간(이하 날짜)을 다루는 라이브러리에는 'moment.js'도 존재합니다.day.js보다 훨씬 많은 날짜 연산을 지원하지만, 235KB이라는 큰 용량과 사용되는 연산보다 그렇지 않은 연산이 더 많다는 문제점이 있습니다.(큰 용량의 단점: 다운로드 시간! 네트워크 비용! 렌더링 시간! 모두 증가) 따라서 공식 문서에서도 moment.js을 대체할 수 있는 라이브러리를 소개하고 있고, 그중 하나가 바로 day.js입니다.현재 공식적으로 moment.js는 더이상 업데이트..

🔐 OAuth(Open Authorization)OAuth(open authorizaiton)란 우리말로 '개방형 접근 권한 표준'라고 하며,민감한 정보는 제공하지 않으면서 제3자의 보호된 리소스에 접근할 수 있게 해주는 프로토콜입니다.다양한 플랫폼에 저장된 사용자의 데이터에 접근하기 위해, 현재 사용자가 접속한 사이트가 다른 플랫폼이 가지고 있는 접근 권한을 위임받는 것입니다. 🔐 OIDC(OpenID Connection)OIDC(openID connection)란 단순히 접근 권한을 넘겨받는 것에서 더 나아가 인증까지 한번에 하고 싶은 경우에 사용하는 프로토콜입니다.앞서 살펴본 OAuth(인가)에 + 인증이 더해진 개념으로, OAuth 2.0 프로토콜을 기반으로 상위 계층에서 편리하게 인증을 수행..