Redux-saga란? 공식문서에서는 Redux-saga를 다음과 같이 소개하고 있다. Redux-saga는 react/redux 애플리케이션의 사이드 이펙트, 예를 들면 데이터 fetching이나 브라우저 캐시에 접근하는 순수하지 않은 비동기 동작들을 더 쉽고 보기 좋게 만드는 것을 목적으로 하는 라이브러리이다. redux에서는 action을 발생시키면 reducer를 통해 state를 변경시켜 store를 갱신했다. Redux-saga는 action과 reducer 사이에서 흐름을 제어하는 미들웨어이다. 이 중간에서 Redux-saga는 action이 발생하면 reducer가 액션을 처리하기 위해 다양한 작업을 할 수 있다. 다양한 작업들의 예시는 이렇다. - 기존 요청을 취소 처리하거나 불필요한 중..

아래와 같이 구독을 안 했을 때와 구독을 했을 때 구현을 해보겠다. ✅ 상태관리 구독자 수와 구독 여부 상태를 만들어준다. const [SubscribeNumber, setSubscribeNumber] = useState(0); const [Subscribed, setSubscribed] = useState(false); ✅ 첫 렌더링 페이지를 처음으로 렌더링 할 때, useEffect를 활용하여 서버에서 구독자 수 정보와 구독 여부 정보를 가져온다. 먼저, 구독자 수 정보를 가져오기 위해선 구독받은 사람 정보를 서버에 보내줘야 한다. 응답이 성공이라면 상태를 업데이트해준다. 다음으로 구독 여부 정보를 가져오기 위해선 구독받은 사람과 구독자, 두 개의 정보를 서버에 보내줘야 한다. 이때 구독자 정보를 꺼..

✅ Schema 생성 Subscriber 스키마를 생성해 준다. 구독을 하기 위해선 구독을 받는 사람(userTo)과 구독을 하는 사람(userFrom)이 있기 때문에 만들어주었고, 구독을 언제 했는지 자동으로 생성 시간과 업데이트 시간을 생성해 준다. const mongoose = require("mongoose"); const Schema = mongoose.Schema; const subscriberSchema = mongoose.Schema( { userTo: { type: Schema.Types.ObjectId, ref: "User", }, userFrom: { type: Schema.Types.ObjectId, ref: "User", }, }, { timestamps: true } ); con..

아래와 같이 비디오를 업로드 할 수 있는 페이지를 구현할 것이다. ✅ 상태 관리 비디오 업로드를 하려면 비디오 제목과 내용, 프라이빗 여부, 카테고리, 파일 경로, 시간, 썸네일 경로 상태를 생성해준다. const user = useSelector((state) => state.user); // redux state에서 user 가져오기 const [VideoTitle, setVideoTitle] = useState(""); const [Description, setDescription] = useState(""); const [Private, setPrivate] = useState(0); const [Category, setCategory] = useState("Film & Animation"); c..

✅ 문제 상황 map을 사용하여 배열에 있는 값들을 전부 다 렌더링 하려고 했지만 아래와 같은 오류가 발생했다. Expected an assignment or function call and instead saw an expression no-unused-expressions ✅ 오류 원인 에러의 발생 원인은 map() 메서드를 사용할 때 주의점과 동일하다. .map(() => {}) 메서드를 중괄호와 같이 사용할 때는 {} 중괄호 안에 return이 존재해야 한다. 하지만, 나는 .map() 메서드를 사용했음에도 불구하고 return을 사용하지 않아 오류가 발생했던 것이다. ✅ 해결 방법 1. .map() 메서드에서 {} 중괄호를 사용할 때 return을 사용한다. 2. .map() 메서드를 사용할 때..

오류 상황 사진을 넣기 위해 서버에서 받아온 이미지 링크를 src에 넣었더니 읽어들일 수가 없다고 한다. 이는 이미지 정보를 가져오기 전에, 먼저 화면이 렌더링 되어 undefined가 뜬다고 생각했다! TypeError: Cannot read properties of undefined (reading 'image') 해결 방법 image가 있다면 렌더링되도록 조건문을 걸어주었다. // 조건문 걸어준 것 if (VideoDetail.writer) { return ( ); } // 사진이 없다면 loading ... else { return ...loading; } 참고) TypeError: Cannot read properties of undefined (reading 'img') React Please..

✅ multer 사용계기 React, Node.js로 진행 중인 프로젝트에서, 파일 업로드 기능을 구현하게 되었다. 사용자가 업로드하고자 하는 파일을 선택하여 드롭다운하면 해당 파일이 서버에 저장되도록 구현할 것이다. ✅ 사용이유 일반적으로 클라이언트에서 서버로 폼 데이터(form data)가 전송될 때 해당 데이터는 인코딩되어 전송된다. 이러한 방식은 JSON 형식의 데이터를 전송하는 것에는 어려움이 없으나, 파일 자체를 전송하려 할 때는 생각한 것처럼 전송되지 않는다. 파일을 무작정 body에 넣어서 POST 요청을 보냈으나 서버에서는 body 안에 있어야 할 파일을 가져오지 못했다.. 이러한 상황에서 파일을 온전하게 전송하기 위해서는 파일을 입력하는 form 태그의 encType 속성을 multip..

client는 React와 Redux를 사용했고, server는 Node.js를 사용했다. 먼저, 기능 구현을 우선시 하기 위해 css는 최소한으로 하였다. Client [React] 로그인, 로그아웃, 회원가입 구현하기 with Redux 프로젝트 구조를 살펴보자면 아래와 같다. 기능구현을 우선시 하기 위해 css는 최소한으로 했다! 먼저, 기본이 되는 페이지를 살펴보자. ✅ 라우팅 설정 /은 첫 페이지 랜딩페이지로 로그아웃 페 uiop5809.tistory.com Server [Node.js] 로그인, 로그아웃, 회원가입 구현 with MongoDB 프로젝트 구조를 살펴보자면 아래와 같다. ✅ 초기 설정 express를 가져오고 express를 활용해 app을 만들어 준 뒤, 포트 번호를 5000번으..

프로젝트 구조를 살펴보자면 아래와 같다. ✅ 초기 설정 express를 가져오고 express를 활용해 app을 만들어 준 뒤, 포트 번호를 5000번으로 설정해 준다. const express = require("express"); // express를 가져온다. const app = express(); // express를 이용해서 app을 만들어준다. const port = 5000; // port 번호를 5000번으로 설정 다음으로, bodyParser와 토큰을 저장할 cookieParse도 다운로드하고 불러온다. 앱에서 사용한다고 설정도 같이 해준다. const bodyParser = require("body-parser"); const cookieParser = require("cookie-p..

프로젝트 구조를 살펴보자면 아래와 같다. 기능구현을 우선시하기 위해 css는 최소한으로 했다! 먼저, 기본이 되는 페이지를 살펴보자. ✅ 라우팅 설정 /은 첫 페이지 랜딩페이지로 로그아웃 페이지 /login은 로그인 페이지 /register은 회원가입 페이지 react-router-dom v6으로 라우팅을 설정해 줬다. // App.js import React from "react"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import LandingPage from "./components/views/LandingPage/LandingPage"; import LoginPage from "./components/views/Logi..