🍞 Front-End/React

Websocket과 stompjs를 활용해 채팅 기능을 구현하던 중, client가 null이라는 오류가 발생했다. 채팅을 구현하려면 먼저 연결(connect)을 해야 되고, 구독(subscribe), 보내기(send) 순으로 진행이 되어야 한다. 처음 구현하는 거라서, 구글링으로 채팅 구현을 찾아봤다. 그러나, 찾아본 모든 구글링에서 하나의 함수에 모든 기능을 구현했었다. 나는 채팅을 시작하는 페이지에서 구독과 연결을 하고, 채팅 페이지에서 보내기 기능을 사용해야 해서, 여러 custom hook에 기능을 나눠서 구현하려고 했다. 그러나, 여기서 stompjs를 사용한 client는 recoil에 담아 전역상태로 관리를 하지 못한다는 문제가 발생했다. 하나의 페이지에서 connectHandler를 작동..

파일은 이미 흔히 Multipart/form-data로 주고 받고 있다. 관건은 JSON 데이터를 Multipart/form-data로 보내는 것이다. 파일 같은 경우, formData를 생성해 바로 append 해주면 되지만, JSON 데이터 같은 경우는 JSON.stringify를 사용해 string 형식으로 보내줘야 한다. FormData.append()의 파라미터 타입을 보면, value에는 string과 Blob(binary large object) 타입만 전달할 수 있다. 따라서 아래에서 uploader 객체를 append 할 때 바로 넣지 않고 JSON.stringify()로 문자열로 변환하여 전달했다. 아래처럼 파일을 업로드하여 요청을 보내면 서버에서 JSON 데이터를 함께 전달받을 수 있..

useQuery와 매우 유사하지만 많은 차이가 있다. ✅ useQuery와 useMutation차이 - 일회성이기 때문에 캐시 데이터가 없다. 페칭이나 리페칭 그리고 업데이트할 데이터가 있는 useQuery와 다르다. - 기본적으로 구성할 수는 있지만, 재시도가 없다. useQuery는 기본적으로 세 번 재시도한다. - 관련된 데이터가 없으므로 리페치도 없다. - 캐시 데이터가 없으므로 isLoading은 없고 isFetching만 있다. isLoading은 데이터가 없을 때 이루어지는 페칭이기 때문이다. - useMutation은 반환 객체에서 mutate 함수를 반환한다. 이것이 변이를 실행하는 데 사용된다. - onMutate 콜백도 있다. 이것을 낙관적 쿼리에 사용하는데 변이가 실패할 때 복원할 ..

일정 시간이 지나면 서버는 만료된 데이터를 삭제한다. 리페칭은 페이지를 벗어났다가 다시 돌아왔을 때 볼 수 있는데, 만료된 데이터를 다시 가져오는 것이다. stale 쿼리는 아래 경우에서 자동적으로 리페칭이 일어난다. ✅ 리페칭이 일어나는 경우 - 새로운 쿼리 인스턴스가 많아지는 경우 - 쿼리 키가 처음 호출되는 경우 * 쿼리를 호출하는 반응 컴포넌트를 증가시킨 경우 - 창을 재포커스 하는 경우 - 만료된 데이터의 업데이트 여부를 확인할 수 있는 네트워크가 다시 연결된 경우 또한 리페칭 간격이 지난 경우도 해당되는데 이 경우는 간격에 리페칭을 해서 서버를 풀링하고 사용자 조치가 없더라도 데이터가 업데이트 되는 경우다. 🤔 리페칭을 제한하고 싶으면? 1. stale 시간을 증가시킨다. 창을 재포커스 하거나..

Recoil을 사용하다가 전역상태가 새로고침 하면 초기화되는 현상이 발생했다. 구글링을 해보니 나랑 똑같은 문제를 겪는 사람들이 많았고, 생각보다 쉽게 해결방법을 얻을 수 있었다. 바로 Recoil-persist 라이브러리를 사용하면 된다. Recoil-persist를 사용하면 이전처럼 새로고침을 해도 recoil state가 날아가지고 않고 sessionStorage 또는 localStorage에 보관된다. 아무런 설정도 해주지 않으면 key는 "recoil-persist", 저장소는 localStorage에 기본적으로 저장된다. ✅ Recoil-persist 사용방법 설치 npm i recoil-persist 사용법 import { atom } from 'recoil'; import { recoilP..

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 해주면 끝! 이걸 안 해주면 적용이 이상하게 된다... 몇 시간 동안 고생..