아래와 같이 비디오를 업로드 할 수 있는 페이지를 구현할 것이다. ✅ 상태 관리 비디오 업로드를 하려면 비디오 제목과 내용, 프라이빗 여부, 카테고리, 파일 경로, 시간, 썸네일 경로 상태를 생성해준다. 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..

프로젝트 구조를 살펴보자면 아래와 같다. 기능구현을 우선시하기 위해 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..

✅ 문제 상황 Access to XMLHttpRequest at 'http://localhost:5000/api/hello' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. ✅ 오류 원인 서버는 포트가 5000이고 클라이언트는 포트가 3000이기 때문에 발생하는 오류이다. 이렇게 두 개의 다른 포트를 가지고 있는 서버는 아무 설정 없이 Request를 보낼 수 없다. CORS(Cross-Origin Resource Sharing) 정책 때문에 보안을 위해서 막아버린다. ✅ 해결 방법 여러가지 ..

1. TS2322: typescript에서 useRef를 사용할 때 Type 'MutableRefObject' is not assignable to type 'string | ((instance: HTMLInputElement | null) => void) | RefObject | null | undefined'. Type 'MutableRefObject' is not assignable to type 'RefObject'. Types of property 'current' are incompatible. Type 'HTMLInputElement | undefined' is not assignable to type 'HTMLInputElement | null'. Type 'undefined' is not..

Firebase를 사용해서 무엇을 할 수 있을까? Firebase는 처음엔 데이터베이스였지만 지금은 백엔드 기능을 포괄한다. app이 필요로 하는 많은 것들을 해줄 수 있다. 즉, 데이터베이스 관련 코드 없이 데이터베이스를 사용할 수 있게 해 준다. 그러나 데이터베이스나 사용자나 서버 전부 구글로부터 빌려서 쓰기 때문에 아이디어를 테스트할 때만 사용하는 것이 좋다고 한다. Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com Firebase 초기 설정 ✅ Firebase 설치 사이트에 들어가서 앱을 등록하고 프로젝트에 firebase를 설치한다. 그리고 Firebase SDK를 추가해준다..

React.Suspense란? Suspense는 아직 렌더링이 준비되지 않은 컴포넌트가 있을때 로딩 화면을 보여주고 로딩이 완료되면 해당 컴포넌트를 보여주는 React에 내장되어 있는 기능이다. 기본적으로 리액트는 JSX 코드 안에 들어있는 모든 컴포넌트를 즉시 호출하여 바로 랜더링을 진행한다. 예를 들어, 리액트는 다음과 같이 컴포넌트가 포함된 JSX 코드를 렌더링할 때, Event 함수를 바로 호출한다. 그러나 아래처럼 Suspense로 감싸주면 컴포넌트의 랜더링을 특정 작업 이후로 미루고, 그 작업이 끝날 때 까지는 fallback 속성으로 넘긴 컴포넌트를 대신 보여줄 수 있다. ✅ useState를 통한 Loading 이전까지는 늘 이렇게 비동기 작업을 수행하기 이전에 loading이라는 상태값을..

스켈레톤(Skeleton) 이란? 웹 페이지에서 로드 시간이 짧은 것처럼 보이게 하는 몇 가지 방법들이 있다. 스켈레톤은 그 방법 중에 하나로서 데이터가 로드되기 전에 콘텐츠의 자리비움(placholder)를 표시해서 사용자가 기다리는 시간을 좀 덜 지루하게 느끼게끔 하는 UI다. 그래서 오늘은 프로젝트를 로딩할 때 몇 초 동안 화면이 비어있는 것보단 스켈레톤을 보여주도록 설정해보려고 한다. App.tsx loading 상태를 생성하고 useEffect와 setTimeout을 이용해 loading이 2초 동안 되게 구현했다. loading 중이면 Placeholder 즉, 스켈레톤 컴포넌트를 렌더링하고 loading 끝나면 Item 컴포넌트를 렌더링한다. import React, { useEffect, ..