Eunseo Choi

OAuth란 무엇인가? OAuth란 Open Authorization으로 허가된 다른 서비스를 통해 기존 서비스의 권한을 위임하는 것이다. OAuth는 다양한 인터넷 서비스에서 사용되며, 사용자는 자신의 계정 정보를 안전하게 보호하면서 다른 서비스에 대한 접근 권한을 획득할 수 있다. OAuth 주체 Resource Owner 웹 페이지를 사용하고자 하는 유저. 플랫폼에서 리소스를 소유하고 있는 사용자. 이때 Resource는 개인정보를 포함한 자원이다. Client Resource Server의 자원을 이용하고자 하는 서비스로 보통 자사 또는 개인이 만든 애플리케이션 서버이다. Authorization Server 권한을 부여해 주는 서버로, Resource Owner를 인증하고, Client에게 Ac..

CORS 에러란 (Cross-Origin Resource Sharing) 웹 개발을 하다 보면 API 요청을 보내고 응답을 받는 동작을 수행하는데, 특정 사이트에서 다른 도메인의 서버로 AJAX 요청을 보내면 CORS 에러가 발생하는 경우를 자주 접하게 된다. 이상하게 Postman 등과 같이 개발 환경에서 오류 없이 잘 실행되지만 브라우저에서 CORS 오류가 발생한다. 이는 웹 브라우저에서 발생하는 보안 정책을 의미하며, 보안상의 이유로 동일 출처 정책을 적용하여, 동일한 출처에서만 리소스를 요청할 수 있도록 제한한다. CORS란 웹 브라우저에서 동작하는 보안 메커니즘 중 하나이다. 웹 브라우저에서는 보안 상의 이유로 동일 출처(same origin)에서만 리소스에 접근할 수 있다. 이때 동일 출처란,..

로그인과 토큰 사용자가 서비스를 이용하는 동안, 예를 들면 A페이지에서 B페이지로 이동하는 등의 작업을 수행할 때마다 로그인을 요구한다면 사용자 입장에서 불편함을 야기할 수 있다. 그렇기 때문에 실제 로그인 구조에서는 로그인 후에 로그인 상태를 유지하거나, 자동 로그인 등과 같은 기능이 필요하다. 이를 위해 토큰을 도입하여 토큰 기반의 로그인 로직이 구성되었다. 인증(Authentication) vs 인가(Authorization) 인증 (Authentication) 사용자가 자신의 신원을 확인하는 과정. 사용자가 누구인지 사용자의 아이디와 비밀번호, 토큰, 인증서 등을 사용하여 자신을 주장함을 확인한다. 예를 들어, 로그인 과정에서 사용자가 입력한 아이디와 비밀번호가 유효한지 검증하는 것이 인증의 예이..

Sass란? Sass는 Syntactically Awesome Style Sheets(문법적으로 멋진 스타일 시트)의 약자로, CSS의 확장된 기능을 제공하는 CSS 전처리기(preprocessor)이다. 스타일시트의 크기가 커지면 복잡성이 높아지며, 결국 유지 보수가 어려워진다. Sass는 CSS에 존재하지 않는 nesting, mixins, inheritance 등과 같은 기능을 제공하기 때문에 간결하고 효율적으로 작성할 수 있으며 유지보수하기 쉽도록 도와준다. Sass와 Scss의 차이 Sass와 Scss는 모두 CSS 전처리기로 css를 확장하여 효율적으로 스타일 시트를 작성할 수 있는 도구이다. 그러나 Sass와 Scss는 문법적인 차이가 존재한다. Sass는 들여 쓰기로 구분되어 간결한 문법을..

React Query 설치 npm install react-query React Query Provider 사용 : 전역적으로 사용하기 위해 최상위 컴포넌트에 React Query Provider로 감싸기. import { QueryClient, QueryClientProvider } from 'react-query' const queryClient = new QueryClient() export default function App() { return ( ) } useQuery Hook 사용 : useQuery는 API를 호출하고 데이터를 가져올 수 있으며, 쿼리 키와 API를 호출하는 함수를 전달받는다. useQuery는 자동으로 API를 호출하고 데이터를 캐시한다. 만약 캐시된 데이터가 이미 있으면..

React Query란? React Query란 데이터를 가져오고 관리하는 라이브러리이다. React 애플리케이션에서 Redux 또는 Recoli과 같이 전역 상태 관리 라이브러리를 통해 데이터 관리하는 데에 수월함을 느낄 수 있었다. 그러나 이러한 라이브러리는 클라이언트 측 데이터를 관리하기에는 적합할지라도 서버 측 데이터를 관리하기에는 적합하지 않았다. 이러한 문제점을 해결해 주기 위해 React Query 라이브러리가 등장했으며 서버 측 데이터에 의존성이 높은 애플리케이션은 React Query 라이브러리를 사용한다. 💡 React Query는 서버 상태를 관리하기 위한 라이브러리이다. React Query와 Redux의 차이점 React Query와 Redux 모두 React 애플리케이션의 상태 ..