📬 서버 상태(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 프로토콜을 기반으로 상위 계층에서 편리하게 인증을 수행..
🔑 인증(authentication)과 인가(authorization)인증(authentication)이란 리소스에 대한 접근을 요청하는 주체의 신원을 검증하기 위한 활동입니다. 비밀번호나 생체인식 등을 활용하여 자격이 있는 주체인지 확인합니다.인증의 방법에는기본 인증(basic authentication)사용자의 아이디와 비밀번호를 base64로 인코딩인코딩 된 아이디와 비밀번호를 'Authorization' 헤더에 포함시켜 서버로 전송하는 방법가장 단순한 인증 방법 중 하나세션 기반 인증(session based authentication)서버가 사용자를 식별할 수 있는 세션을 생성해당 세션 id를 클라이언트에 전달하여 인증을 유지하는 방법토큰 기반 인증(token based authenticati..
🐌 CORS란'교차 출처 리소스 공유'라고 불리는 CORS(cross-origin resource sharing)는 웹 브라우저가 자신의 출처가 아닌 다른 출처(도메인, 포트 등)로부터 리소스를 얻는 것을 서버가 제어하는 보안 메커니즘(정책)입니다.- MDN Web Docs기본적으로 웹 브라우저는 보안을 위해 동일한 출처의 리소스에만 접근할 수 있는 동일 출처 정책(same-origin policy)을 따릅니다.이때 CORS는 동일 출처 정책을 완화하여, 서버가 허용한 경우라면 A라는 출처에서 로드된 웹 페이지가 다른 출처의 리소스에 접근할 수 있도록 해줍니다.이를 위해 서버는 반환할 응답에 특정한 http 헤더를 포함하여 웹 브라우저의 요청을 허용할지 결정합니다.만약 다른 출처의 리소스에 대한 요청이..
