728x90 JavaScript23 [Next.js] Next.js에서 여러개의 쿼리 파라미터를 전달하는 방법 (url로 파라미터 전달) Next.js를 사용하여 웹사이트를 구축하고 있는데, 페이지 URL에서 여러 개의 쿼리 파라미터를 전달하고 싶을 수 있습니다. 이번 포스트에서는 Next.js에서 여러 개의 쿼리 파라미터를 URL에 추가하고 이를 읽는 방법을 알아봅니다. 1.먼저, 원하는 페이지 파일을 만듭니다. 이 예에서는 `pageName.tsx` 파일로 하겠습니다. 파일경로: `pages/pageName.tsx` 2.페이지에서는 Next.js의 `useRouter` 훅을 사용하여 쿼리 파라미터 값을 받아올 수 있습니다. import { useRouter } from 'next/router'; const PageName = () => { const router = useRouter(); const { id1, id2 }.. 2023. 8. 18. [React ERROR] 해결 React Hook "useState" cannot be called at the top level 간단 요약 Hook을 React 함수 컴포넌트 내부에서 호출해야 합니다. 문제상황 React에서 `useState`와 같은 Hook을 사용하면서 아래와 같은 에러 메시지를 마주치게 될 수 있습니다: Line 5:41: React Hook "useState" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function react\-hooks/rules\-of\-hooks 에러가 발생하는 코드: import React, { useState, useEffect } from "react"; import Axios from "axios"; const [c.. 2023. 8. 18. [JavaScript] 수동으로 window 이벤트 발생시키기 (window.dispatchEvent) 최근에 웹 개발을 진행하면서 특정 조건 하에서 UI를 갱신해야 하는 상황이 생겼습니다. 이 문제를 해결하기 위해 `resize` 이벤트를 수동으로 발생시키는 방법을 발견했는데, 이 포스트에서는 그 방법에 대해 자세히 다루려고 합니다. 1. 수동으로 `resize` 이벤트 발생시키기 // resize 이벤트 발생시키기 window.dispatchEvent(new Event('resize'));이 코드의 핵심은 웹 브라우저의 창을 대표하는 `window` 객체에 `resize` 이벤트를 수동으로 발생시키는 것입니다. 2. 코드 설명 • window 객체: 웹 브라우저의 창을 대표하는 객체로, 다양한 이벤트를 바인딩할 수 있습니다. 그 중 resize 이벤트는 브라우저 창의 크기가 변경될 때 자.. 2023. 8. 14. [React] React-Grid-Layout으로 드래그 가능한 반응형 그리드 디자인 구현하기 1. React-Grid-Layout 이란? React-Grid-Layout은 React 기반의 그리드 레이아웃 시스템입니다. 특히 반응형 웹 디자인에 최적화되어 있으며, 드래그 앤 드롭 기능을 제공하여 사용자 친화적인 인터페이스를 제공합니다. 장점: • 유연성: 다양한 그리드 레이아웃 구성 가능. • 반응형 디자인: 화면 크기에 따라 자동으로 레이아웃 조정. • 드래그 앤 드롭 지원: 웹 페이지의 항목 재배치 가능. 2. 설치 및 적용 방법 설치: npm install react-grid-layout 적용: import React from 'react'; import { Responsive, WidthProvider } from 'react-grid-layout'; const ResponsiveGrid.. 2023. 8. 14. 이전 1 2 3 4 ··· 6 다음 728x90