달콤한 개발 일기

Recoil Library리덕스나 리덕스 툴킷과 유사하게 애플리케이션 내에 상태를 처리하기 위한 라이브러리Atoms와 useRecoilState()에 대한 이해 필요Atoms : 리코일을 통해서 보관하고 싶은 데이터를 의미, 리덕스가 애플리케이션당 하나의 상태를 유지하는 것과 달리 리코일은 여러 개의 Atoms를 만들고 컴포넌트들은 자신이 원하는 상태를 선별적으로 접근해서 사용하는 방식useRecoilState() : useState()의 확장판이라고 볼 수 있으며 useRecoilState()의 파라미터에서 Atoms를 설정하는데 이를 통해서 useState()처럼 애플리케이션 내에 공유되는 데이터를 접근, 변경할 수 있음 [리코일 설치와 설정]npm install recoil설치 후 package...

[refresh 활용]invalidateQueries 방식의 단점은 짧은 시간동안 동일한 페이지를 클릭하는 경우 서버 호출이 많아짐refresh 값과 staleTime을 같이 사용하여 문제 해결const {isFetching, data, error, isError} = useQuery({ queryKey: ['products/list', {page, size, refresh}], queryFn: () => getList({page, size}), staleTime: 1000 * 5 }) //const queryClient = useQueryClient() // 리액트 쿼리 초기화를 위한 현재 객체 const handleClickPage = (pageP..

[useQuery를 이용한 상품 조회]useQuery는 특정 데이터를 조회하고 통신 상태나 결과 혹은 에러 데이터 등을 한 번에 처리할 수 있게 도와줌사용 전에 useEffect로 서버 데이터를 가져온 후에 상태를 변경 ...const ReadComponent = ({pno}) => { // 화면 이동용 함수 const {moveToList, moveToModify} = useCustomMove() const { isFetching, data } = useQuery({ queryKey: ['products', pno], queryFn: () => getOne(pno), staleTime: 1000 * 10, retry: 1, })..

React Query리액트 애플리케이션의 데이터를 크게 내부에서 유지되는 데이터와 API 서버에서 발생하는 외부 데이터로 구분되는데 React Query는 주로 외부에서 만들어진 데이터를 관리하는데 도움이 되는 라이브러리 React Query의 가장 중요한 특징은 데이터를 일정 시간 동안 보관하는 캐싱 기능으로 단순히 데이터를 보관하는 기능이 아니라 일정 시간이 지나면 새로 서버에서 호출하도록 구현할 수 있음 [React Query 설정]npm i @tanstack/react-querynpm i @tanstack/react-query-devtoolsnpm을 통해 React Query 5 버전과 편리한 개발을 위해 devtools도 추가 import { RouterProvider } from "react-..

[리액트 로그인 처리]const loginSlice = createSlice({ name: 'LoginSlice', initialState : loadMemberCookie() || initState, // 쿠키가 없으면 초기값 사용 reducers: { login: (state, action) =>{ console.log("login.....") //소셜로그인 회원이 사용 const payload = action.payload setCookie("member", JSON.stringify(payload), 1) // 1일 return payload }, ..

[인가 코드의 페이지 처리]- 리액트 애블리케이션에서 Redirect Uri로 전달되는 경로의 페이지를 추가import { useSearchParams } from "react-router-dom";const KakaoRedirectPage = () => { const [searchParams] = useSearchParams() const authCode = searchParams.get("code") return ( Kakao Login Redirect {authCode} )}export default KakaoRedirectPage- redirect용 KakaoRedirectPage 추가const KakaoRe..

- 소셜 로그인은 제3의 사용자 인증 서비스를 이용해 현재 사용자를 인증하고 접근 가능하게 하는 방식- 최근 여러 포털에서 서비스를 제공하고 있으며 내 개인 프로젝트에 소셜 로그인 방식 중 하나인 OAuth를 적용하려고 합니다. [OAuth2.0 방식]- 권한부여 승인 코드 방식(Authorization Code Grant)- 암묵적 승인 방식(Implicit Grant)- 자원 소유자 자격증명 승인 방식(Resource Owner Password Credentials Grant)- 클라이언트 자격증명 승인 방식(Client Credentials Grant) - 카카오나 네이버는 '권한부여 승인 코드 방식'을 이용하며 해당 방식으로 구현해보려 합니다.  - 리액트 애플리케이션에서 로그인 화면을 보고 사용..

- SPA(Single Page Application)은 새로고침 시 애플리케이션의 상태가 초기화되기 때문에 LocalStorage나 쿠키(Cookie)를 사용해서 상태 데이터를 보관하고 애플리케이션이 로딩될 때 저장된 정보들을 로딩해서 사용해야합니다. [react-cookie 라이브러리 설치]npm install react-cookie - 쿠키 사용을 위한 'react-cookie' 라이브러리 설치 [Cookie Util 생성]import { Cookies } from "react-cookie"const cookies = new Cookies()export const setCookie = (name, value, days) => { const expires = new Date() expire..

[오류 내용]@Overrideprotected void doFilterInternal(@NonNull HttpServletRequest request, @NonNull HttpServletResponse response, @NonNull FilterChain filterChain) throws ServletException, IOException{ log.info("-------JWTCheckFilter............"); String authHeaderStr = request.getHeader("Authorization"); } - PostMan을 통해 /api/member/login 호출 시 request.getHeader("Authoriza..

1. Builder Design Pattern이란?- 팩토리 패턴(Factory design pattern)과 추상 팩토리 패턴(Abstract Factory design pattern)에서 여러 속성 값들을 가질 때 발생하는 문제들을 해결하기위한 디자인 패턴- 복잡한 객체 생성 과정과 표현 방법을 분리하여 다양한 구성의 인스턴스를 만드는 생성 패턴클라이언트에서 Factory 클래스로 너무 많은 인수들을 전달 받는 과정에서 동일한 인수가 많고 순서를 유지하기 어려워 오류가 발생할 수 있음넘길 필요가 없는 파라미터도 null값으로 명시가 필요객체가 무겁고 생성이 복잡한 경우 호출되는 Factory 클래스의 처리가 복잡해질 수 있음2. Java의 Builder Design Pattern 구현 @Builder..