전체 글

Git Rebase Commit Amend 과거 커밋 수정

💡 이전의 커밋에서 Google OAuth Secret을 코드 내부에 작성 후 커밋하여 Push Rejected 되었다. 해당 내용은 비밀이 작성된 커밋을 수정하고 푸쉬하는 과정이다.Commit ID 검색git log 확인IDEA Git Log 확인Git Project Repository 화면에서 Commits 확인Git Rebase검색된 Commit ID로 Rebase 실행하여 작성된 커밋 이전 상태로 돌아가므로 문제있는 코드를 수정한다.# ~2 : 해당 커밋에서부터 2개의 커밋 이전을 의미git rebase -i ~2# 수정할 Commit을 edit으로 변경pick 22a79af [feat] Initialize projectpick a3f5d3d [fix] Fix authentication issu..

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 ( {..