👩‍🎤 프론트엔드

[Next.js][react-query] API Routes 사용시 무한 request 발생 이슈

Next.js의 API Routes 대부분 프로젝트 진행 시, 백엔드 API 개발보다 프론트엔드 개발이 더 빨리 되는 경우가 많다. API 개발 완료 전 테스트할 수 있는 mockAPI가 필요하다. Next.js의 API Routes 기능을 이용해 간단한 mockAPI를 구현할 수 있다. pages/api 폴더 내부에 있는 파일들은 모두 /api/* 로 요청할 수 있다. // api/reviews/[reviewId] import { NextApiRequest, NextApiResponse } from "next"; export default function handler(req: NextApiRequest, res: NextApiResponse) { if (req.method === "GET") { co..

[Nextjs] Linking & Navigating

Next 라우터는 서버 중심의 라우팅과 클라이언트 사이드 네비게이션을 사용한다. 즉각적인 로딩 상태와 concurrent 렌더링을 지원한다. 즉, 네비게이션은 클라이언트 상태를 유지하고, 비용이 많이 드는 재렌더링을 피하고, 중단할 수 있으며 race condition을 유발하지 않는다. 컴포넌트 HTML 요소를 확장한 것으로 prefetching과 클라이언트 사이드 네비게이션을 제공한다. Next에서 네비게이션에 주로 사용하는 방법이다. 특정 상황이 아니라면 컴포넌트를 사용하는 것을 권장하고 있다. import Link from 'next/link'; export default function Page() { return Dashboard; } next/link에서 import해서 href를 설정해주면..

[NextJS] Pages, Layouts

Next 13은 pages, layouts, templates를 쉽게 만드는 새로운 파일 컨벤션을 도입했다. Pages page는 route에 유일한 UI이다. 기본적으로 서버 컴포넌트로 구성되지만 클라이언트 컴포넌트로 설정할 수 있다. 데이터를 패치할 수 있다. Layouts 여러 pages 간에 공유되는 UI이다. layout은 상태를 보존하고, 인터랙티브를 유지하고 재렌더링을 하지 않는다. layout.js 파일에서 default export로 정의할 수 있다. child 레이아웃이나 child 페이지가 있는 경우에, 항상 children props를 설정해야한다. // app/dashboard/layout.tsx export default function DashboardLayout({ child..

[NextJS] Routing

React Router와는 다르게 Next는 파일 시스템 기반 라우팅으로 작동한다. 기본 라우팅 app 디렉토리 내부의 폴더들은 자동으로 라우팅된다. 폴더 내부에 page.js가 있어야 URL 경로로 접근이 가능하다. // dashboard/page.js export default function Page() { return ( Page ); } 중첩 라우팅 폴더를 중첩해서 중첩 라우팅을 사용할 수 있다. 동적 라우팅 []를 사용해서 폴더 이름을 감싸주면 된다. // app/blog/[slug]/page.js export default function Page({ params }) { return My Post; } params를 사용해서 URL에 지정한 slug 값을 가져올 수 있다. /blog/a 경..

[React Router][Webpack] 중첩 라우팅 사용 시 404 Not Found 오류

React Router nested routes 404 Not Found Error React Router 중첩 라우팅 React Router로 중첩 라우팅을 하면 아래와 같이 작성할 수 있다. import { Routes, Route } from 'react-router-dom'; function App() { return ( ... ); } React Router nested routes 404 Not Found Error /admin 경로로 접속한 뒤 새로고침을 하면 문제없이 제대로 작동한다. 하지만 /admin/all-problems 경로로 접속한 뒤 새로고침을 하면 404 Not Found 에러가 발생한다. 해결 방법 script의 src를 절대경로로 설정해준다. index.html의 scrip..

[typescript] 동적으로 키가 추가되는 객체의 타입 지정하기

const cache = {}; const add = (id: string, value: string) => { cache[id] = value; }; const remove = (id: string) => { delete cache[id]; }; cache 객체에는 동적으로 키가 추가되고, 삭제될 수 있다. 1. Record 사용하기 const cache: Record = {} Record의 첫번째 인수에는 key의 타입, 두번째에는 value의 타입을 지정한다. Record 객체의 키가 Keys, 값은 Type에 지정하여 객체 타입을 만들 수 있다. 2. index 타입 지정 const cache: { [id: string]: string } = {}; 인터페이스 또는 타입 사용 interface C..