분류 전체보기

CORS (Cross-Origin Resource Sharing) 한 웹 어플리케이션이 다른 출처에 존재하는 자원에 접근하고 싶다면? 접근 권한을 줄 수 있도록 브라우저에 알려주는 체제인 CORS를 이용해야 한다. 예를 들어 한 컴퓨터의 로컬에서 Spring Boot를 8080 포트로 띄우고, React를 3000 포트로 띄웠다고 가정하자. 이 둘은 포트가 다르므로 다른 출처임을 알 수 있다. React가 Spring Boot의 API를 호출하려고 할 때, 출처가 다르므로 접근 권한이 없다며 CORS 에러가 발생한다. 제한된 교차 출처 HTTP 요청 그렇다면 그냥 접근 권한을 서로 열어두면 편하지 않을까?라는 생각이 들 수 있다. 브라우저의 교차 출처 HTTP 요청을 제한하는 건 보안을 위해서다. 서로 ..

✅ 문제 상황 react-query를 사용하던 중 Missing queryFn 오류가 났다. 한 개의 게시물에 달린 댓글을 가져오는 useQuery를 작성하던 중이었다. import { useQuery } from "react-query"; async function fetchComments(postId) { const response = await fetch( `https://jsonplaceholder.typicode.com/comments?postId=${postId}` ); return response.json(); } export function PostDetail({ post }) { const { data, error, isError, isLoading } = useQuery(["post",..

react-hook-form으로 로그인을 구현하던 중 아래와 같은 오류가 발생했다. get.ts:11 Uncaught TypeError: path.split is not a function at get (get.ts:11:1) { const [state, setState] = useState({ email: "", password: "", }); const { register, handleSubmit } = useForm(); const onSubmit = (data) => { setState(data); console.log(state); }; return ( 로그인 ); }; export default LoginForm; ✅ 해결한 코드 ref 부분을 아래와 같이 수정해주면 해결된다!

✅ React-query란 공식문서는, React에서 데이터의 fetching, caching, synchronizing, updating server state를 위한 라이브러리라고 정의한다. 즉, axios처럼 단순히 API fetching의 목적보다는, 이 데이터와 더불어 서버 상태(server state)를 관리하는 라이브러리인 것이다. 서버의 값을 클라이언트에 가져오거나, 캐싱, 값, 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는 데 사용된다. ✅ 사용 이유 서버로부터 값을 가져오거나 업데이트 하는 로직을 store 내부에 개발하는 경우가 많다. 그렇다 보니 store는 클라이언트 state를 유지해야 하는데 어느 순간부터 store에 클라이언트 데이터와 서버 데이터가 공존하게 되었다..

✅ React Slick이란? react-slick은 리액트 프로젝트에서 캐러셀을 구현하기 쉽게 도와주는 모듈이다. 여기서 캐러셀이란, 유저가 스크롤을 내리지 않고도 볼 수 있는 정보의 양을 극대화하기 위해 사용하는 기법을 말한다. ✅ 설치 방법 및 적용 npm install react-slick // TypeScript일 경우 npm install --save @types/react-slick 그 후, 내장되어 있는 css 설치하기 npm install slick-carousel // TypeScript일 경우 npm install --save @types/slick-carousel 마지막으로 사용할 컴포넌트 부분에 import 해주면 끝! 이걸 안 해주면 적용이 이상하게 된다... 몇 시간 동안 고생..

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() 메서드를 사용할 때..