GA setting @next/third-parties 설치 src/app/[lng]/layout.tsximport type { Metadata, Viewport } from 'next';import { dir } from 'i18next';import { locales } from '@/i18n';import { NextIntlClientProvider } from 'next-intl';import { getMessages, unstable_setRequestLocale } from 'next-intl/server';import { GoogleAnalytics, GoogleTagManager } from '@next/third-parties/google';import '@/assets/css/glo..
next.js 환경에서 스크롤 이벤트 구현하기 요구사항은 스크롤이 특정 영역에 진입했을 때 canvas로 그린 animation이 구현되는 것이었다 스크롤을 감지하기 위해 JS의 intersection observer 기능을 사용했고next.js 환경에서 사용하고자 useIntersectionObserver hook을 생성했다. 그리고 페이지 초기 렌더링 시에는 해당 canvas animation이 로드되지 않고scroll event가 수행될 때 canvas 컴포넌트가 렌더링 되도록 하기 위해next/dynamic을 import 했다. src > hooks > useIntersectionObserver.tsimport { useEffect, useState, useRef } from 'react';..
next.js14, typescript로 홈페이지 개발 중 footer 영역의 familysite selectbox에서 option 값 클릭 시 외부 페이지 이동 기능 구현 {/* footer.tsx */}'use client';import '@/assets/css/footer.css';const URL = { NAVER: 'https://www.naver.com', DAUM: 'https://www.daum.net', NATE: 'https://www.nate.com',};function Footer() { const openOutsideSite = (site: string) => { window.open(site); }; return ( { ope..