Study (16) 썸네일형 리스트형 [Next.js] redirects() 사용 시 페이지가 작동하지 않습니다. 이슈 해결하기 프로젝트를 진행하면서 /my-meeting/comments 라는 url에 접근하면, /my-meeting/comments/type=writable url로 접근하도록 하고 싶어, next.config.ts 파일에 다음과 같이 redirects() 옵션을 설정해주었다. async redirects() { return [ { source: '/my-meeting/comments', destination: '/my-meeting/comments?type=writable', permanent: true, }, ]; },이전에도 redirects()를 잘써왔었기 때문에 당연히 잘 작동할 줄 알았는데, 다음 화면을 마주했다.왜 이런 문제가 발생한.. [Tanstack-Query] 구체적인 쿼리키 설정으로 캐싱 최적화하기 Tanstack-query를 사용하는 큰 이유중에 하나는 캐싱 관리이다.나는 기존에 진행하던 사이드 프로젝트에서 쿼리키를 다음과 같이 관리하고 있었다.const MEETING_QUERY_KEYS = { topMeetings: (category: string) => ['topMeetings', category] as const, meetings: (category: string) => ['meetings', category] as const,}; staleTime을 1분으로 설정해두었는데, 1분 이내에 페이지를 이동해도 추천 모임은 캐싱된 데이터를 사용하기 때문에 API 호출이 안되는데,모임 목록쪽은 계속 API가 호출되는것으로 보아 모임 목록 캐싱이 잘 되지 않는걸 알 수 있었다. 그 이유는 추천 .. [Next 14] Next.js 프로젝트에 테스트 환경 구축하기 (jest, react-testing-library) Next.js 프로젝트에 jest와 react-testing-library를 설치해서 테스트 환경을 구축해보려고 한다.내 프로젝트 관련 버전 정보는 다음과 같다.Next: 14.1.0React: 18.2.01. 필요한 라이브러리 설치npm install -D jest jest-environment-jsdom @testing-library/react @testing-library/dom @testing-library/jest-dom ts-node 패키지역할설치 이유jest테스트 러너테스트 실행을 담당 (Test Runner)jest-environment-jsdom브라우저 환경을 흉내내는 테스트 환경Next.js는 브라우저에서 동작하므로 JSDOM이 필요@testing-library/reactReact 컴포.. [Study] Tanstack Query v5 알아보기 개발자를 위한 SNS 웹페이지를 개발하면서 Tanstack Query를 사용해서 상태관리를 하기로 정해졌다. Tanstack Query를 선택하게 된 이유와 Tanstack Query가 무엇인지 알아본 내용에 대해 포스팅 하려한다!React-Query가 react가 아닌 다른 프레임워크도 지원하기 시작하면서 Tanstack Query로 명칭을 바꾸었다.공식문서에 위와같이 Tanstack query를 소개하고 있다.또, 기존 상태 관리 라이브러리들 (ex. redux, recoli 등)은 비동기 및 서버 상태관리에 적합하지 않다고 소개하고 있다.그렇다면 서버 상태가 무엇일까?공식 홈페이지에서 서버 상태를 다음과 같이 얘기하고 있다.서버 상태클라이언트에서 제어나 소유하지 않은 공간인 서버에 저장되고 관리되는.. [React] Eslint 오류 해결하기 (no-else-return, jsx-a11y) 1. error Unnecessary 'else' after 'return' no-else-return{combinedMenus.map((menu) => { if (menu.type === 'page') { const pageMenu = menu as MenuType; // 페이지 메뉴일 경우 Menu 컴포넌트로 출력 return ; } else if (menu.type === 'modal') { // 모달 메뉴일 경우 ModalMenu 컴포넌트로 출력 const modalMenu = menu as ModalMenuType; return ; } else { return null; } })} 위처럼 작성되어 있던 기존 코드.. [React + TS] useRef 사용시 The expected type comes from property 'ref' which is declared here on type 에러 (+ useRef 3가지 정의) 프로젝트에서 useRef를 사용해서 input 컴포넌트에 focus를 주려고 했는데 다음과 같은 에러가 발생했다.useRef에 타입을 지정해주지 않아 에러가 나는 듯 해서 useRef() 이렇게 타입을 지정해주었는데도 다음과 같은 에러가 발생했다.에러를 해결하기 위해서 useRef의 타입이 어떻게 정의되어 있고 사용되는 목적에 따라 어떤 타입과 초깃값을 넣어주는게 좋을지 알아보았다. 먼저, useRef의 반환 타입은interface MutableRefObject { current: T;}interface RefObject { readonly current: T | null;} 위처럼 MutableRefObject 타입인 current와 RefObject 타입인 current가 있다.RefObj.. [React + TS] react-router 사용해 페이지 라우터 적용하기 1. 라이브러리 설치하기npm install react-router-dom @types/react-router-dom 2. src > index.tsx 파일에 App 컴포넌트 BrouserRouter 컴포넌트로 감싸주기BrouserRouter 컴포넌트는 웹앱에 HTML5의 History API를 사용해 페이지를 새로 불러오지 않고도 주소를 변경하고 현재 주소의 경로와 관련된 정보를 리액트 컴포넌트에서 사용할 수 있도록 해준다.import React from "react";import ReactDOM from "react-dom/client";import "./index.css";import App from "./App";import reportWebVitals from "./reportWebVitals".. [React] 리액트 훅 - useRef useRefuseRef는 리액트 훅의 한 종류로, Ref는 reference(참조)의 줄임말이다. useRef의 용도useRef의 용도는 크게 값을 저장할때와 DOM에 접근할때 2가지로 나뉜다.1. 값의 저장리액트에서 값을 저장할때 useRef를 사용하며 다음과 같이 사용할 수 있다.const 변수명 = useRef(초기값) // 반환값 {current: 0}위처럼 사용하면 현재 값을 나타내는 current속성을 가진 객체가 반환된다.리액트에서는 useRef외에도 useState를 사용하거나 일반 변수(let, const)를 사용해서 값을 저장할 수 있는데useRef는 이 두 방식과 다음과 같은 차이를 보인다. useRef와 useState의 차이useState는 값이 변경될 때 화면이 재렌더링 되지만.. 이전 1 2 다음
