전체 글

NEXT JS + Google Analytics Connect Setting

Google Analytics 생성  Redirecting... analytics.google.com보고 시간대와 통화를 본인 국가로 설정한다.생성 이후 보고서 검토에 나올 메뉴들을 선택하는 것으로 Get baseline reports 선택해도 무관하다.PropertyID 획득이후 runReport API 호출 시 필요한 ID로 ENV 환경 변수에 저장NextJS Google Analytics 설정Next/third-parties 설치# ME : "@next/third-parties": "^14.2.5"npm i @next/third-partiesGoogleAnalytics 설정// 메인 Root Layoutimport { GoogleAnalytics } from '@next/third-parties/g..

Next_Auth Session JWT Type Extend

💡 Next Auth JWT, Session 사용 시 사용자 정의 속성(예: role)을 auth(session)에서 추가하고 User | AdapterUser 타입 설정을 하는 방법으로 타입 에러를 제거하고 원하는 속성을 사용할 수 있게 설정한다.type.d.ts 설정프로젝트 루트 폴더에 type.d.ts 파일 생성 후 아래와 같이 입력 후 tsconfig.json에 등록//type.d.tsimport { JWT } from 'next-auth/jwt';import NextAuth, { type DefaultSession } from 'next-auth';declare module 'next-auth/jwt' { interface JWT { //JWT에서 사용할 사용자 정의 속성 등록 ro..

Parallel Routes Modal Difficult Error

1. Pages Router Error💡 무심코 만든 pages 폴더가 Parallel Routes 모달을 만들지 못하게 했다.Next.js 13 이전 부터 사용하던 Page Router의 pages 폴더가 새로 도입된 App Router의 App 폴더와 같이 존재하면서 발생한 문제로 pages 폴더를 삭제하면 Parallel Routes 사용이 원활해진다. GitHub - vercel/nextgram: A sample Next.js app showing dynamic routing with modals as a route.A sample Next.js app showing dynamic routing with modals as a route. - vercel/nextgramgithub.com 2. D..

NextJs Next-auth getSession() 로그인 정보 확인

Client API | NextAuth.jsThe NextAuth.js client library makes it easy to interact with sessions from React applications.next-auth.js.org💡 getSession() 함수 호출 시 위 문서와 같이 설정했음에도 2가지 에러가 발생하여 Session 로그인 정보를 에러없이 불러오는 것을 목적으로 합니다. 1. api/auth/session 400 에러 ( GET http://localhost:3000/api/auth/session 400)2. ClientFetchError: Unexpected token 'SessionProvider 설정MetaData 사용을 위해 SessionProvider는 컴포넌트로..

NEXT 14 NEXT-AUTH 5 middleware.ts not working

💡 Learn Next에서는 src 폴더를 사용하지 않는 경우, middleware.ts 파일을 프로젝트 루트에 위치시킵니다. 그러나 src 폴더를 사용하는 경우에는 파일을 src 폴더 내부에 위치시켜야 합니다.문제점auth.ts - NextAuth - signIn 함수는 제대로 동작을 했으나 middleware.ts에 연결된 auth.config.ts 파일이 동작않았습니다.//auth.tsasync function getUser(email: string): Promise { try { return await prisma.user.findUnique({where: { uid: 1 }}) } catch (error) { console.error('Failed to fetch user:', ..

NextJS Prisma PostgreSQL 연결 및 Migrate

Prisma 설치 및 적용npm install prisma --save-devnpm install @prisma/clientnpx prisma initENV 및 Schema 파일 설정// .envDATABASE_URL="postgresql://[UserName]:[Password]@[Host]:[Port]/[Database]"//schema.prisma// Prisma클라이언트와 같은 코드 생성기 설정하여 Prisma가 어떤 타입의 코드를 생성할지 정의generator client { // 사용할 데이터베이스 드라이버를 지정합니다. provider = "prisma-client-js"}// datasource 블록은 Prisma가 연결할 데이터베이스에 대한 설정을 정의합니다.datasource db {..

Unrecognized extension value in extension set ([object Object]).

💡 Error: Unrecognized extension value in extension set ([object Object]). This sometimes happens because multiple instances of @codemirror/state are loaded, breaking instanceof checks.CodeMirror 같은 하나의 라이브러리에 여러 확장프로그램을 사용하는 경우 동일한 패키지가 여러 인스턴스로 로드될 때 발생하는 에러입니다. 해당 글은 @codemirror/state 패키지를 다루고 있지만 위 상황과 동일한 모든 문제점에 대해 해결방안이 될 수 있습니다.1. 중복 패키지 확인# npm ls [중복이 일어난 패키지]npm ls @codemirror/state여러..

PostgreSQL EXCEPT 차집합 연산자

💡 SQL에서 EXCEPT 연산자는 두 결과 집합을 비교하고 첫 번째 결과 집합에서 두 번째 결과 집합에 나타나지 않는 행을 반환하는 차집합 연산자입니다.필자의 경우 여러 테이블이 조인된 API 조회 쿼리와 실제 테이블의 데이터 차이가 나서 어떤 데이터가 문제이고 왜 차이가 나는지 알기 위해 사용하였습니다.EXCEPT 연산자 예제SELECT column1, column2, ...FROM table1EXCEPTSELECT column1, column2, ...FROM table2;위의 구문에서 두 테이블의 결과 집합에 존재하지 않는 행을 반환합니다. 두 SELECT 문은 동일한 수의 컬럼을 반환해야 하며, 각 열의 데이터 유형도 호환되어야 합니다.문제 해결조인 조건의 문제가 있을 가능성 농후하다는 가설 ..

next-themes Hydration failed Error

Hydration failed because the initial UI does not match what was rendered on the server ThemeProvider를 태그 위에 적용했을 때 발생하는 에러로 body 태그 자식으로 넣어야 한다.Extra attributes from the server: data-theme,style html 태그에 suppressHydrationWarning 속성을 작성하지 않았을 때 발생하는 에러.// app/layout.tsximport { ThemeProvider } from 'next-themes';export default function RootLayout({childrenReadonly) { return ( {..

Module CSS Use Mixin Include SCSS

💡 Mixin, Include 사용으로 중복되는 CSS 코드를 줄이기 위해 SCSS at-rule을 Module CSS에서 어떻게 사용하는지 알고싶다.Module CSS 빌드 시간에 고유한 이름으로 변환하여 파일 간 중복 클래스가 사용 가능하며, 로컬 스코프로 제한됩니다.SCSS CSS의 불필요한 선택자 남용, 연산 기능의 한계, 구문의 부재 등의 문제점을 해결하고 at-rule을 이용해 mixin, include 등의 유용한 추가 기능을 사용할 수 있습니다.1. Sass Installnpm install sass2. Scss 파일 생성 및 작성// src/app/mixins.scss@mixin flex-center{ display: flex; align-items: center; justify-..