메로그

Nextjs14 에서 타사 라이브러리 사용하기해당 라이브러리를 활용하여 타사 라이브러리를 쉽고 빠르게 사용할 수 있는 라이브러리 입니다.이를 이용해서 GTM, GA 를 Nextjs 에서 적용해봅시다.@next/third-parties 라이브러리 설치해당 라이브러리는 인기있는 타사 라이브러리를 로딩할 때 성능과 개발자 경험을 개선하기 위한 라이브러리로 현재 v14.2.15 에서도 아직 활발하게 개발 중인 실험적 라이브러리입니다.npm install @next/third-parties@latest next@latestpnpm, yarn 을 쓰시는 분들은 맞는 문법으로 다운받으시면 됩니다. 필자는 pnpm 썻음.GTM, GA 연동해보기구글 태그 매니저(GTM)과 구글 애널리틱스(GA) 를 연동하기 위해서는 @..

Nuxt2를 사용해 프로젝트를 진행하면서 이미지를 AWS CDN에서 불러와 클라이언트에서 fetch로 요청하던 중, CORS(Cross-Origin Resource Sharing) 문제를 겪게 되었습니다. 이 글에서는 발생한 문제와 해결 과정을 단계별로 정리하고, 각각의 선택과 이유를 설명하겠습니다.1. 문제 상황: AWS CDN에서 이미지 로딩 시 CORS 발생이미지 파일은 AWS S3를 기반으로 한 CDN(Content Delivery Network)에서 제공되었습니다. 클라이언트 측에서 해당 이미지를 fetch로 가져오려 하자, CORS 에러가 발생했습니다.CORS 문제란?CORS는 다른 도메인에서 리소스를 요청할 때 보안상의 이유로 브라우저에서 제약을 거는 정책입니다. 서버가 CORS 헤더를 통해..

개요Nextjs 에 자체 내장된 서버사이드를 이용해서 api 를 만들었는데 해당 api 를 사용시에 cors 가 발생하는 문제가 있습니다.해결방법으로 next.config.js 와 middleware 를 이용한 방법이 있는데, 필자는 config 에 선언한게 좀 더 직관적이여서 config 에 사용했음.하지만, 두가지 다 알려드리도록 하겠습니다.next.config.js 를 이용한 방법cors 를 config.js 에서 하면 객체 형식으로 관리하기 떄문에 좀 더 관리하는데 직관적인 장점이 있습니다.// next.config.jsconst nextConfig = { async headers() { return [ { source: "/api/:path*", head..

서버서버에서 현재 URL 정보를 가져오는 방법import { headers } from 'next/headers'export default async function Page() { const headersList = headers() const domain = headersList.get('host') const fullUrl = headersList.get('referer') return ( Domain: {domain} Full URL: {fullUrl} )}클라이언트클라이언트에서 가져오는 방법'use client'import { usePathname, useSearchParams } from 'next/navigation'export default func..