나다김강니

프로젝트에서 Redux 상태를 로컬 스토리지에 저장하고 새로고침 후에도 유지되도록 하기 위해 redux-persist를 사용했다.근데 알림은 제대로 저장되고 데이터가 유지되는데 유저의 정보가 계속 null로 저장되거나 아예 안뜨거나 이런 상태인거임....사실 유저정보는 로컬 스토리지에서 바로 가져와 사용하고있어서 그냥 한번 reducer만들어본거라 신경안쓰다가 방금 문제 발견한건 안비밀임ㅋㅋ 문제의 유저 정보... 아니 근데 분명 데이터는 userReducer에 잘 들어오고 있는걸 콘솔에서 확인했단말임...이거봐..... 이게 확실히 redux-persist 설정문제인지는 잘 모르겠는데.... Redux에서 여러 개의 reducer를 사용하는 경우, 각각의 reducer에 대해 개별적으로 persist ..

Redux-persist를 사용해 알림 데이터를 로컬 저장소에 저장하여, 새로고침 시에도 기존 알림을 보존하는 것은 잘 작동했지만, 알림 구독(SSE)가 끊기는 문제가 발생했다....페이지를 새로고침할 때 서버와의 연결이 끊기면서 발생하는 것으로, 알림 시스템을 다시 구독하지 않으면 실시간으로 알림을 받을 수 없게 되었음.. SSE(서버 전송 이벤트)는 서버가 클라이언트로 연결을 유지하면서 실시간으로 데이터를 푸시할 수 있는 방식이다. SSE 구독은일회성 연결이라서 페이지가 새로고침되거나 브라우저가 닫히는 경우에는 서버와의 연결이 끊기게 된다. 이런 경우 새로 페이지를 로드할 때 서버와의 구독을 다시 설정해줘야 한다..!! 즉, 아무 설정도 하지 않은 상태로 페이지를 새로고침하게되면 새로운 알림을 받을 ..

그때 구현할때도 어려웠는데 다시 봐도 어려워..... 우선Redux의 기본 사용 방식은createStore로 Store를 생성하고, 리듀서를 통해 상태를 관리하는 방식을 사용한다. 기본 Redux 사용 방식에서는 다중 리듀서를 관리하거나, 상태를 로컬 저장소에 영구적으로 저장하려면 추가적인 설정이 필요함. 🔍 상태 영속화 없음: 기본적인 Redux 설정에서는 상태를 로컬 저장소(localStorage)나 세션 저장소에 영구적으로 저장하지 않으며, 애플리케이션을 새로고침하면 상태가 초기화된다. -> 이거때문에 내가 뒤에서 설명하는 방식을 선택했다.import { createStore } from 'redux';import alarmReducer from './alarmReducer';// Store 생성..

직존만들때 Redux 사용해서 실시간 알림을 저장했었는데 가물가물해서 다시 정리하면서 정확히(?)기억하려고 한다.ㅋㅋ Redux란?Redux는 JavaScript 애플리케이션에서 상태 관리를 위한 라이브러리여러 컴포넌트 간에 상태를 공유해야 할 때 애플리케이션의 모든 상태를 하나의 저장소에서 관리해준다! Redux의 특징은 단방향 데이터 흐름이다. (Action -> Reducer -> Store저장 -> View: UI에 보이게 됨) 이런 단방향 흐름 덕분에 상태 관리가 투명하고, 예측 가능한 방식으로 이루어질 수 있다.이로 인해 대규모 애플리케이션에서도 상태 관리를 일관되게 유지할 수 있게 된다!(이건 몰랐잔아) 1. Action: 상태 변경을 요청하는 ‘명령’이다. 보통 type 속성(액션 타입)과..

UseState hook💡 useState hook     평범한 자바스크립트 변수의 값이 변경되는 경우, 화면은 다시 렌더링 되지 않는다.     값 변경에 따라 화면이 렌더링되는 화면을 만들어야 한다면, 값이 리액트 상태 변수에 저장되어야 한다.     리액트에는 use로 시작하는 함수들이 제공된다. 이 함수들을 hook이라고 부른다. button 활용import React, { useState } from 'react';import './App.css';function App() { // 0 : 상태 변수의 최초 값 // count : 현재 값이 리턴되에 대입되는 상수 // serCount : 상태 변수 값을 변경하기 위해서 호출해야하는 함수 const [ count, setCount ] ..

Props💡 props props는 propertied의 줄임말이다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용한다.propsMessage 함수형 컴포넌트를 호출하면서 { value: "안녕하세요", color: "blue" } 형태의 props 값 객체를 Message 함수에 전달한다.//Message 함수 컴포넌트는 props 값 객체를 파라미터로 받는다.export type MessageProps = {    value: string,    color: string}function Message(props: MessageProps) {  return ...}"key" prop 태그나 어떤 태그가 반복된 목록의 경우, 그 목록 태그에 "key" prop가 있어야 한다.그리고 ..

증감 연산자변수의 값을 1 증가시키거나 1 감소시키는 연산자연산식설명++피연산자피연산자의 값을 1 증가시킴—피연산자피연산자의 값을 1 감소시킴피연산자++다른 연산을 수행한 후에 피연산자의 값을 1 증가시킴피연산자—다른 연산을 수행한 후에 피연산자의 값을 1 감소시킴 예시int num = 0;num++;System.out.println(num); //1++num;System.out.println(num); //2int result = num++;System.out.println("result=" + result); //result=2System.out.println("num=" + num); //num=3result = ++num;System.out.println("result=" + result); //..

Variable(변수)하나의 값을 저장할 수 있는 메모리 번지에 붙여진 이름, 프로그램은 변수를 통해 메모리 번지에 값을 저장하고 읽는다.변수 선언// 자료형 변수공간이름 = 값int num = 100; // 정수double dnum = 3.14; // 실수char ch = 'a'; // 문자 1글자char ch = 64; // 유니코드를 직접 저장String name = "홍길동"; // 문자열boolean isRun = true; // true/falseString str = "a"; // 문자열String name1 = "Albert"; // 문자열 더..