[React + Zustand] persist, localstorage에 업데이트 된 새로운 값 가져오기

외주 프로젝트를 하는 중에 다음과 같은 문제가 발생했다. 사용자의 행동에 따라, ZuStand의 persist를 사용하여 localstorage에 저장된 값이 변화한다. 이 변화한 값을 페이지 이동 시 즉시 화면에 보여줘야 한다. 그러나 persist를 이용한 ZuStand는 예상과는 다르게 동작했다.  애플리케이션이 처음 실행될 때, persist 미들웨어는 지정된 스토리지에서 데이터를 읽어와 Zustand 스토어를 "rehydrate"합니다. 즉, 저장된 상태를 다시 불러와 초기 상태로 설정합니다.  persist를 이용해 만들어진 최초의 상태, 즉 아무 값이 저장되지 않은 상태가 zuStand에 저장된 상태라 localStorage에서 변화한 값이 useState를 쓸 때 처럼, 화면의 리렌더링이 ..

• format_list_bulleted 프로젝트/React 프론트 프로젝트
• · 2024. 12. 10.
• textsms

[React] Zustand의 persist

프론트 페이지에서 새로고침이 되어도 값이 변경되지 않아야 하는 전역 정보를 다룰 때에는 어떻게 하면 좋을까?예를 들어, 로그인의 경우 accessToken의 수명이 다할 때까지 어딘가에 반드시 저장이 되어 있어야 한다. 이를 위해, Zustand의 persist를 사용해 보았다.     Zustand 의 Persist란?persist 미들웨어는 Zustand를 사용하여 스토어의 상태를 로컬 스토리지(localStorage) 또는 다른 저장소에 유지(persist)하기 위해 사용된다. 이 미들웨어는 Zustand 상태를 지정된 저장소에 저장하고, 애플리케이션 초기화 시 저장된 상태를 복원한다. persist의 사용 방식 persist는 두 가지 주요 매개변수를 받는다:config: Zustand 상태와 상..

• format_list_bulleted 프로젝트/React 프론트 프로젝트
• · 2024. 11. 27.
• textsms

[React] 값이 없는 상태를 어떻게 관리해야 할까? undefined와 null

개발을 하다 보면, 필연적으로 '값이 없는 상태' 를 관리해야 하는 경우가 생긴다. 이 때, undefined를 쓰는 게 좋을까, null을 쓰는 게 좋을까?   먼저, undefined와 null에 대해 알아보자. undefined와 null의 차이undefined변수가 선언되었지만 초기화되지 않은 상태.값이 아예 없음을 나타냄.타입스크립트에서 Optional 속성(?)의 기본 상태.null의도적으로 "값이 없음"을 명시.값이 존재하지 않음을 프로그래머가 명시적으로 설정한 상태.  아하, 그러니까 undefined는 '변수가 선언되기만 한 상태' 이고, null은 '값이 없다는 것을 넣어준 상태' 이다. 즉 undefined는 '데이터의 상태를 초기화하지 않은 상태(어떠한 값도 넣지 않은 채)로 남겨두..

• format_list_bulleted 프로젝트/React 프론트 프로젝트
• · 2024. 11. 27.
• textsms

[React] Zustand를 이용하여 useModal 훅 만들기

외주 프로젝트 중 여러 알림을 쌓으면서 관리해야 하는 Alert, 한 번에 하나만 띄워져야 하는 Modal을 useModal이라는 하나의 훅을 이용해 관리하기 위해 작성해 보았다. 코드의 흐름 설명 모달 상태 관리(useModalStore)useModalStore는 Zustand를 사용해 모달의 상태를 관리하며, stack 옵션에 따라 모달의 관리 방식을 조정합니다.modals: 현재 열려 있는 모달의 배열입니다.open: 특정 컴포넌트를 모달로 열고, 관련 데이터를 상태에 추가합니다.stack: true: modals 배열에 새로운 모달을 추가합니다.stack: false: 기존 모달이 없을 때만 추가. 기존 모달이 있다면 **"모달을 추가할 수 없습니다"**라는 메시지를 console에 출력합니다.c..

• format_list_bulleted 프로젝트/React 프론트 프로젝트
• · 2024. 11. 27.
• textsms

5-4. [React + Express + MongoDB] Perfect Boiler - 회원정보 수정 및 비밀번호 변경

우선은 로컬로 직접 회원가입을 진행한 회원일 경우에만 회원정보를 수정할 수 있도록 구현하였다. 추후 sns 로그인 유저는 이메일만 수정할 수 있도록 구현할 예정. aws 요금 이슈가 발생해서 프로필 사진은 aws가 아닌 다른 루트를 찾아봐야 할 것 같다 ㅠㅠ ............................................................................................................. 다 울었으니 할 일을 해야지 일단 이메일과 닉네임을 변경하는 회원정보 수정 로직을 구현하고, 다른 페이지에서 비밀번호를 변경하는 내용을 구현하여 배포까지 완료했다. 저번에 했던 거라서 금방 슉 진행했다. 이메일 인증 라우터는 회원가입 시 구현했던 미들웨어와..

• format_list_bulleted 프로젝트/풀스택 프로젝트
• · 2023. 2. 1.
• textsms

5-3. [React + Express + MongoDB] Perfect Boiler - SNS 로그인 : passport 를 이용한 카카오, 구글, 네이버, 로그인과 JWT RefreshToken, AccessToken 사용하기

passport-kakao를 사용하면 카카오 전략을 구현하여, 카카오 로그인을 할 수 있다. passport-kakao는 내부적으로 session에 생성된 req.login을 호출하는데, 자동으로 호출되는 req.login은 passport의 기존 session 방식을 사용하기 때문에, 내가 직접 구현한 JWT 로직을 사용할 수 없었다. 이 때문인지 세상 모든 블로그에 세션을 이용한 로그인만 있길래 모험삼아 처음부터 직접 구현해보았다. req.login을 직접 호출하고 세션을 사용하지 않음을 설정한 뒤에, req.login을 로컬 로그인처럼 직접 커스텀하면 passport-kakao를 사용하더라도 세션을 사용하지 않고 JWT와 쿠키를 이용한 로그인을 구현할 수 있다. passport-kakao 를 포함한..

• format_list_bulleted 프로젝트/풀스택 프로젝트
• · 2023. 1. 27.
• textsms