본문 바로가기
728x90

javascript6

[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.
[JavaScript] 수동으로 window 이벤트 발생시키기 (window.dispatchEvent) 최근에 웹 개발을 진행하면서 특정 조건 하에서 UI를 갱신해야 하는 상황이 생겼습니다. 이 문제를 해결하기 위해 `resize` 이벤트를 수동으로 발생시키는 방법을 발견했는데, 이 포스트에서는 그 방법에 대해 자세히 다루려고 합니다. 1. 수동으로 `resize` 이벤트 발생시키기 // resize 이벤트 발생시키기 window.dispatchEvent(new Event('resize'));이 코드의 핵심은 웹 브라우저의 창을 대표하는 `window` 객체에 `resize` 이벤트를 수동으로 발생시키는 것입니다. 2. 코드 설명 • window 객체: 웹 브라우저의 창을 대표하는 객체로, 다양한 이벤트를 바인딩할 수 있습니다. 그 중 resize 이벤트는 브라우저 창의 크기가 변경될 때 자.. 2023. 8. 14.
[javascript] `...` 연산자 / 스프레드(spread) 연산자 ... 연산자 / 스프레드(spread) 연산자 라고 하며 배열과 객체 모두에 사용할 수 있습니다. 배열에 대한 사용:배열에 스프레드 연산자를 사용하면, 배열의 요소들이 개별적으로 분리됩니다. 이는 새로운 배열을 생성하거나 배열을 합치는 데 매우 유용합니다. let arr1 = [1, 2, 3]; let arr2 = [...arr1, 4, 5, 6]; // arr2는 [1, 2, 3, 4, 5, 6]입니다. 객체에 대한 사용:객체에 스프레드 연산자를 사용하면, 객체의 속성들이 개별적으로 분리됩니다. 이는 새로운 객체를 생성하거나 객체를 합치는 데 매우 유용합니다. let obj1 = { a: 1, b: 2 }; let obj2 = { ...obj1, c: 3 }; // obj2는 { a: 1, b: 2,.. 2023. 5. 18.
[javascript] '_' throwaway variable, ignored variable JavaScript에서 _ 변수는 종종 무시되어야 하는 매개변수를 가리키는 데 사용됩니다. 함수의 매개변수 중 어떤 값을 실제로는 사용하지 않지만, 문법적으로는 필요한 경우에 _를 사용할 수 있습니다. 예를들어 아래의 경우 const newData = data.filter((_, index) => !checked[index]); Array.prototype.filter 함수는 현재 요소, 현재 인덱스, 원본 배열의 세 가지 매개변수를 콜백 함수에 전달합니다. 이 경우, 현재 요소 값은 실제로는 사용되지 않고, 인덱스 값만 필요하기 때문에 _로 표현된 매개변수를 사용하여 현재 요소를 무시하고 있습니다. 2023. 5. 18.
728x90