😥발생한 문제? "use client"; import { useEffect } from "react"; const KakaoMap = () => { useEffect(() => { const script = document.createElement("script"); script.type = "text/javascript"; script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_MAP_API}&autoload=false`; document.body.appendChild(script); script.onload = () => { window.kakao.maps.load(() => { const containe..
이번에 네이버에서 제공하는 맵 API를 이용해보려 하는데, 예제가 기본적으로 HTML로 되어있고, 외부 JS파일을 script태그로 불러오는 형식으로 예문이 짜여져 있었습니다. 아래는 네이버 Dynamic Map API를 사용한 HTML 예제입니다. 위 코드의 script를 보면 다음과 같습니다. 이 코드와 같이 외부 JS파일을 불러오는 것을 알 수 있었습니다. 그렇다면 React환경인 NextJS에서는 이 파일을 어떻게 불러올 수 있을까요? 😎NextJS에서 제공하는 Script를 이용한다 import Script from 'next/script' export default function Dashboard() { return ( ) } Nextjs 제공하는 Script컴포넌트를 이용하여 위와 같이 J..
GitHub - lurgi/jestprac: Jest를 배워봅시다 Jest를 배워봅시다. Contribute to lurgi/jestprac development by creating an account on GitHub. github.com Jest Basic jest사용시 유용한 것 npm i @types/jest 타입 설치 가능 단일 파일 테스트 하는 법 pm i -g jest -cli jest 파일명 or jest 파일명.test.js 단일 테스트만 실행 test.only(description, callback)으로 실행 단일 테스트 스킵 test.skip(description, callback)으로 실행 테스트 전 후 작업 beforeEach() : 각 테스트(test()) 실행 이전 실행 af..
🤔Zod 가 무엇인가요? Zod is a TypeScript-first schema declaration and validation library. Zod는 타입스크립트 우선 스키마 선언 및 검증 라이브러리 입니다. 🤔왜 Zod를 사용하나요? 타입스크립트는 컴파일 시점에서 타입을 검사합니다. 런타임에 동적으로 생성되는 값과 타입스크립트의 타입 간의 불일치가 발생하여 에러가 발생할 수 있는데요, 이를 방지할 수 있는 라이브러리가 바로 Zod입니다. 아래와 같은 상황이 런타임에 동적으로 생성되는 값과 타입스크립트 타입 간의 불일치가 발생하는 코드의 예 입니다. interface User { id: number; name: string; } const Json = '{"id": 1323, "username":..
Optimizing: Fonts | Next.js Using App Router Features available in /app nextjs.org Next.js 공식 문서와 영상을 참고했습니다. import './globals.css' import type { Metadata } from 'next' import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export const metadata: Metadata = { title: 'Create Next App', description: 'Generated by create next app', } export default function RootLayout..
Swiper useSwiper()훅 useSwiper()훅은 Swiper 컴포넌트 내부에서 사용할 수 있는 훅으로, Swiper에 관련된 메서드를 제공합니다. 그런데 Swiper 컴포넌트 외부에서는 어떻게 불러올 수 있을까요? 기존 Swiper 컴포넌트 내부에서 사용하는 방법 아래 코드와 같이 버튼 컴포넌트를 하나 만듭니다. 컴포넌트 내부에 useSwiper()훅을 불러와 메서드를 사용한 다음, 버튼 컴포넌트를 Swiper 컴포넌트 내부에 불러옵니다. import { useSwiper } from "swiper/react"; export default function SlideNextButton() { const swiper = useSwiper(); return ( swiper.slideNext()}>..