likeornament 님의 블로그

Tanstack Query(예전 명칭: React Query)는 데이터 패칭, 캐싱, 동기화 및 상태 관리 라이브러리다. 입대 전에 학교 선배들과 했던 프로젝트에서는 상태 관리할 때 Redux를 사용했다.그런데, 데이터를 가져올 때 세 가지 동작(loading, error, success)에 대한 코드를 다 작성해야 하니 코드량에 대한 부담이 엄청났다. 그래서 이번 프로젝트에서는 코드량의 부담이 적은 Tanstack Query를 사용했다.[특징]1) 데이터 패칭과 캐싱Tanstack Query의 큰 장점인데, 데이터를 요청하고 응답을 캐시하여 동일한 요청에 대해 반복적으로 서버와 통신하지 않도록 한다.사용자가 매우 빠른 속도로 컨텐츠를 볼 수 있어 UX 증대 2) 자동 리패치여러 데이터 상태를 제공하기에..

Auth.js(이전 명칭: NextAuth.js)는 Next.js에서 인증 시스템을 구현하기 위해 설계된 오픈 소스 라이브러리다. 장점Login Provider로 구글, 네이버, 카카오 등의 소셜 로그인 등을 지원하기에 간편 로그인을 쉽게 구현할 수 있다.Credential Provider로 기본적인 로그인, 로그아웃을 지원하고 로그인에 따른 쿠키를 관리하기 쉽다.위의 장점들 때문에 프로젝트에서 인증 시스템을 구현할 때 Auth.js를 사용했다.이제 설치 방법과 구성요소, 사용법에 대해 알아보자.1. 설치$ npm i next-auth@beta위의 명령어로 auth.js 설치한다.@auth/core 관련 작업은 Auth.js가 알아서 처리하기에 굳이 직접 설치할 필요는 없다. npx auth secret..

프로젝트를 진행 중 CORS 에러가 발생했다.   CORS(Cross-Origin Resource Sharing)는 웹 애플리케이션의 보안 정책 중 하나로, 클라이언트가 서로 다른 출처(Origin)에서 자원을 요청할 때 브라우저가 허용할지 말지를 결정하는 메커니즘이다.  즉, 서로 다른 도메인끼리 데이터를 주고 받을 수 없기에 백엔드에서 CORS 관련 설정을 해주어야 한다.  그런데 백엔드에서 CORS 관련 설정을 다 했음에도 불구하고 해당 오류가 계속해서 발생하였다... //SecurityConfig.java@Configurationpublic class SecurityConfig { @Bean public SecurityFilterChain filterChain(HttpSecurity h..