🍞 Front-End

일정 시간이 지나면 서버는 만료된 데이터를 삭제한다. 리페칭은 페이지를 벗어났다가 다시 돌아왔을 때 볼 수 있는데, 만료된 데이터를 다시 가져오는 것이다. 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..

요청을 많이 한 것 같진 않은데 벌써 1000회를 넘어 아래 오류 코드를 보면 유료 계정으로 전환해야 되는 상황이다. 유료 계정으로 전환하는 건 무리라는 생각이 들어 postman 대신, 다른 가짜 서버 만드는 방식을 찾아봤다. Your team plan allows 1000 mock server calls per month. Contact your team Admin to up your limit. 그 결과, JSON Server라는 것을 알게 됐고, 가짜 서버를 만들어보자! 📌 JSON Server json 파일을 사용해서 가짜 REST API 서버를 생성할 수 있는 도구이다. 이것은 실제 서버가 아닌 개발용 서버로 사용하는 것이 좋으며, 만약 실제 프로젝트를 개발하기 위해서는 실제 백엔드 서버를 구..

제네릭은 C#, JAVA 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징이 있다. 특히, 한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는 데 사용된다. ✅ 제네릭의 한 줄 정의와 예시 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다. 위 함수는 text라는 파라미터에 값을 넘겨받아 text를 반환해 준다. hi, 10, true 등 어떤 값이 들어가더라도 그대로 반환한다. function getText(text) { return text; } 이 관점에서 제네릭을 한 번 살펴보자. 아래 함수는 제네릭 기본 문법이 적용된 형태다. 이제 함수를 호출할 때 아래와 같이 함수 안에서 사용할 타입을 넘겨줄 수 있다. function getText(text:..

type과 interface 키워드는 타입을 정의할 때 사용한다. 보통 React app 내에서는 component에 넘겨주는 props의 타입을 정의하기 위해 아래와 같이 사용하곤 한다. type GreetingsProps = { //type 사용해도 정상 작동 name: string; }; interface GreetingsProps { //interface 사용해도 정상 작동 name: string; }; const Greetings = ({ name }: GreetingsProps) => ( Hello, {name} ); 이 두 키워드 둘 다 타입 정의라는 비슷한 역할을 하기 때문에 차이점과 언제, 어느 상황에 어떤 키워드를 사용하는 것이 적절할지 짚고 넘어갈 필요가 있다. ❗ 뭐가 다른 걸까? ..

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