안녕하세요! Next.js와 NextAuth.js로 인증 기능을 구현을 해봤었는데요. 하지만 동시에 새로운 고민에 빠졌죠. 바로 최상위 레이아웃에 적용한 use client 와 그로 인한 성능상의 우려 때문이었습니다. "CSR(Client-Side Rendering)은 주로 React 같은 라이브러리에서 사용되는 방식으로, 브라우저가 초기에 빈 HTML과 JavaScript 번들을 받아와 클라이언트 측에서 화면을 그려나가는 방식입니다. 이 방식은 초기 로딩 시 사용자가 빈 화면을 보게 되는 단점이 있죠. Next.js에서는 "use client" 지시어를 사용하여 클라이언트 측 인터랙션이 필요한 컴포넌트를 만듭니다. 제가 Next.js를 선택한 가장 큰 이유 중 하나는 바로 서버 측 렌더링(SSR)과 정..

버전 충돌, 타입 오류, 어이없는 실수, 그리고 세션 전략 문제까지 해결하며 드디어 로그인 기능을 성공시켰는데요. 오늘은 그 과정에서 당연하게 사용했지만 정확히는 몰랐던 /api/auth/[...nextauth]/route.ts , 우리가 최종적으로 선택한 JWT 세션 전략에서 로그인 정보가 실제로 어떻게 저장되고 유지되는지 그 원리를 파헤치며 마무리하려고 합니다! 1. /api/auth/[...nextauth]/route.ts : NextAuth.js의 만능 접수 창구! ✨ Next.js App Router 프로젝트에서 우리는 /src/app/api/auth/[...nextauth]/route.ts 라는 특별한 경로에 파일을 만들었습니다. 이게 도대체 뭘까요? [...nextauth]의 의미: Next..

안녕하세요! NextAuth.js 인증 지옥에서 허우적대던 개발자입니다. 버전 충돌과 기본적인 타입 오류들을 해결하며 잠시 평화를 찾는 듯했으나... 그것은 착각이었습니다! 이번에는 정말 끈질기고 이해할 수 없는 오류가 제 앞을 가로막았죠. 이번 포스팅은 저를 가장 괴롭혔던 providers not iterable 오류와의 사투 그리고 결국 'database' 세션 전략을 포기하고 'jwt' 전략으로 전환할 수밖에 없었던 과정을 생생하게 기록합니다.   🚨 문제 발생 1: 코드는 멀쩡한데? 끝나지 않는 providers not iterable!버전도 맞췄고, 타입 오류도 다 잡았다고 생각했는데... 개발 서버를 실행하고 페이지에 접속하면 어김없이 이 오류가 터미널을 뒤덮었습니다. 오류 로그 (계속 반복..

안녕하세요! Next.js(v14)와 Prisma(v6)로 건물 관리 QR 코드 웹앱 만들기에 도전 중인 개발자입니다 😊.DB 스키마 정의까진 순조로웠는데, 사용자 인증을 위해 NextAuth.js(v4) 와 @auth/prisma-adapter 를 연동하려는 순간부터 험난한 여정이 시작되었습니다... (이때는 몰랐죠, 이게 시작일 뿐이라는 걸...) 이번 포스팅은 그 여정의 첫 단계를 기록합니다: 라이브러리 설치, 그리고 곧바로 마주친 버전 충돌과 초기 타입 오류들과의 사투! (저처럼 고통받는 분들께 위로와 힌트가 되길 바랍니다) 1단계: 인증 라이브러리 설치!가장 먼저, Next.js 인증의 국룰(?) 조합인 NextAuth.js와 Prisma 어댑터, 그리고 비밀번호 해싱을 위한 bcrypt를 설..

저는 React로 프론트엔드 개발 경험이 꽤 있었지만, 이번 프로젝트에는 Next.js를 선택했습니다! 왜 그랬는지, 만약 그냥 React만 썼다면 어땠을지, 그리고 "Next.js는 그럼 단점은 없나? 무조건 React보다 좋은 건가?" 하는 솔직한 생각까지 나눠보려고 합니다. 기술 스택 고민 중이신 분들께 제 경험이 조금이나마 도움이 되길..! (제 생각 + 경험 기반이니 참고만 해주세요 😉)🤷‍♀️ React vs Next.js : 뭐가 다른 건데? React (리액트): 웹 화면의 '보이는 부분'(UI)을 레고 블록처럼 조립해서 만드는 '라이브러리'(도구 모음)에요. UI 만들기에 집중! 하지만 페이지 이동 규칙(라우팅), 서버 기능 등은 따로 챙겨줘야 해요.Next.js (넥스트): Reac..

안녕하세요! 회사에 자체적인 서비스를 진행해 건물관리 입찰에서 도움이되면 좋겠어서 'QR 코드로 간편하게 건물 관리하기' 웹 서비스를 Next.js와 Prisma, PostgreSQL을 사용하여 개발하는 여정의 첫 단계를 기록해보려고 합니다. 풀스택에 대한 도전이기도해요.. 비슷한 스택으로 프로젝트를 시작하시려는 분들께 도움이 되기를 바랍니다. 프로젝트 목표:관리자, 중간관리자, 노동자 역할 분담시설 및 점검표 등록/관리시설 QR 코드 생성 및 스캔을 통한 점검 접근노동자 역할 확인 및 PIN 인증 후 점검 수행점검 결과(사진 포함) 기록 및 조회(추가) 웹소켓 기반 채팅 기능기술 스택:프레임워크: Next.js (App Router)데이터베이스: PostgreSQLORM: Prisma배포 (예정): ..