웹

[A non-serializable value was detected in the state] 에러 해결하기 (Redux-toolkit)

직렬화되지 않은 상태나 액션이 있을 때 나타나는 에러이다. 리덕스 툴킷에서는 개발 환경에서 기본적으로 미들웨어를 활성화하여, 직렬화되지 않은 상태 혹은 dispatch 하는 것에 대해 경고를 한다. 근데 내 애플리케이션에서 데이터를 주고 받을 때는 딱히 직렬화가 필요없기 때문에 이러한 설정을 끄면 경고를 없앨 수 있다. 나는 store를 저장하는 파일을 따로 가지고 있었기 때문에 해당 파일에서 아래 코드를 추가했다. // ../redux/store.js configureStore({ reducer: rootReducer, devTools: process.env.NODE_ENV !== 'production', /** 요기 부분 추가 */ middleware: (getDefaultMiddleware) => ..

2024. 1. 22. 22:51

웹

이미지 슬라이더 만들기 (React, scss)

만들고자 하는 것 쇼핑몰 이벤트 구역에서 배너를 돌아가게 하는 이미지 슬라이더를 만들 것이다. 소스코드 이미지를 div로 감싼 후에 해당 div의 className에서 현재 인덱스를 가지고 있는 current 상태값과 비교를 통해 클래스명을 컨트롤 해준다. 모든 이미지의 opacity: 0; 으로 설정하여 현재 이미지의 순서가 아니면 이미지가 보이지 않도록 설정한다. 그리고 인덱스가 같을 경우 current에 대한 css를 opacity: 1; 을 넣어줌으로써 해당 이미지가 보일 수 있도록 해준다. const [current, setCurrent] = useState(0) // 이미지 배열의 현재 인덱스, 특정 초마다 변경됨 const sliderLength = sliderData.length // 전체..

2024. 1. 17. 22:51

웹

Firebase를 통해서 업로드 퍼센테이지 진행바 만들기

상황 input type='file' 태그를 통해서 이미지를 업로드한다. 업로드 하는 위치는 firebase의 storage이고 업로드 진행상황을 progress-bar를 통해 표현하고자 한다. 소스코드 firebase의 uploadBytesResumable 메서드를 통해서 storage에 업로드 된 bytes를 받아올 수 있다. 해당 bytes를 파일의 전체 크기로 나눈 후 100을 곱해주면 진행 퍼센테이지를 알 수 있고, 그 퍼센테이지를 리액트 상태로 관리하면 값이 바뀔 때마다 ui에도 적용되는 것을 볼 수 있다. css를 통해서 부모인 progress와 자식인 progress-bar 의 배경색을 다르게 하고 progress-bar의 width 값을 uploadProgress 상태값을 받아 오면 실시..

2024. 1. 17. 22:39

웹

Next Image 사용할 때 주의할 점

next/image 에러메세지 Error: Invalid src prop (https://images.unsplash.com/photo-1510337550647-e84f83e341ca?q=80&w=1631&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) on `next/image`, hostname "images.unsplash.com" is not configured under images in your `next.config.js` 해결방법 태그를 이용해서 next/image 기능을 사용할 때, 주의할 점이 있다. 만약 이미지를 프로젝트 안에 저장하는 것이 아니고 인터넷에서 주소를..

2024. 1. 17. 22:22

웹

Redux Toolkit 으로 상태 관리하기

전역상태 관리가 필요한 이유 리액트에서는 상태를 통해서 UI에 있는 정보를 업데이트하고 쉽게 렌더링 할 수 있는데 아무 상태나 막 생성하다보면,, 한 함수 안에서 엄청 여러개의 상태값을 변경하고 있는 걸 볼 수가 있다. 그리고 상태값을 사용하거나 상태값을 세팅하기 위해서 자식컴포넌트로 계속 내려주는 일이 생길 수도 있다. 그런 문제점을 차단하기 위해서 많이 쓰이는 전역 상태들은 여러 라이브러리로 관리할 수가 있다. 여기에서는 리덕스로 관리하는 법에 대해서 정리를 해보고자 한다. 사용법 1. createSlice() const { createSlice } = require('@reduxjs/toolkit') 리덕스의 메서드로, 이니셜 상태, 리듀서 함수 객체, 슬라이스 이름 등의 정보를 받아 슬라이스를 만..

2024. 1. 17. 20:04

웹

리액트에서 토스트 메시지 띄우기 React-Toastify (Next.js)

리액트 프로젝트에서 토스트 메시지 띄우기 해당 기능을 제공하는 라이브러리를 사용하면 간단하게 구현할 수 있다. react-toastify 라이브러리 설치하기 npm 혹은 yarn을 통해 라이브러리를 프로젝트 내에 설치한다. $ npm install --save react-toastify $ yarn add react-toastify ToastProvider 컴포넌트 만들기 Next.js 의 app router를 사용하고 있다면 'use client'를 통해서 클라이언트 측에서 실행되도록 한다. 'use client' import { ToastContainer } from 'react-toastify' import 'react-toastify/dist/ReactToastify.min.css' const T..

2024. 1. 17. 12:46