728x90 typescript10 [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. [TypeScript] keyof 에 대하여 keyof는 TypeScript의 키워드 중 하나로, 특정 타입의 키들을 나타내는 타입을 생성합니다. keyof는 동적 속성 접근에 유용하며, 런타임 에러를 방지하는데 도움을 줍니다. 아래는 keyof 를 사용하는 예제입니다 interface Person { name: string; age: number; country: string; } // 여기서 keyof Person 은 'name' | 'age' | 'country' 타입을 가집니다. const personKey: keyof Person = 'name'; // 이것은 가능합니다. const invalidPersonKey: keyof Person = 'height'; // 이것은 불가능합니다. TypeScript는 이 코드에 오류를 발생시킵니다. .. 2023. 5. 18. Jest 컴포넌트 테스트 예제 Jest 설치가 안되어있다면 아래 게시물을 보고 오시길 추천드립니다 Jest import 방법 (With @ 포함 경로 인식) (tistory.com) 테스트용 컴포넌트 // MyComponent.tsx import React from 'react'; // Props 타입 정의 interface Props { title: string; onClick: () => void; } // React.FC를 사용하지 않는 MyComponent 함수형 컴포넌트 export const MyComponent = ({ title, onClick }: Props) => { return ( {/* title prop으로 전달받은 값을 h1 요소에 표시 */} {title} {/* onClick prop으로 전달받은 함수를 .. 2023. 4. 21. Jest import 방법 (With @ 포함 경로 인식) Jest 설치 및 초기 설정: npm install --save-dev jest @types/jest ts-jest npx ts-jest config:init package.json 에서 Jest 스크립트 설정: { "scripts": { "test": "jest" } } 3. jest.config.ts 설정 파일 예제: import type { Config } from '@jest/types'; const config: Config.InitialOptions = { preset: 'ts-jest', testEnvironment: 'jsdom', moduleNameMapper: { '^@/(.*)$': '/src/$1', }, setupFilesAfterEnv: ['./src/setupTests.ts'].. 2023. 4. 20. 이전 1 2 3 다음 728x90