NextJS

비밀번호 변경 로직 추가이전 단계에서 API 라우트 보호 코드를 작성하여 요청이 인증된 사용자로부터 왔으며, 올바른 메서드(PATCH)를 사용하고 있는지 확인했다. 이제 요청에서 데이터(기존 비밀번호, 새 비밀번호)를 추출하고, 세션에서 사용자 이메일을 가져와야 한다. 데이터베이스에는 사용자의 이메일과 비밀번호가 저장되어 있으므로, 사용자를 식별하기 위해 이메일이 필요하다. 사용자 이메일은 폼 데이터에 포함되어 있지 않지만, 토큰에 인코딩되어 있으므로 세션 객체(session.user.email)를 통해 쉽게 접근할 수 있다. 기존 비밀번호와 새 비밀번호는 req.body를 통해 추출한다.이제 데이터베이스에 연결하여 다음 단계를 수행한다.이메일로 사용자를 찾는다.사용자를 찾으면 데이터베이스에 저장된 현재..

https://codesmoothie.tistory.com/81 [NextAuth] 클라이언트 사이드 페이지 가드 (라우트 보호) 추가하기 - 6로그인하지 않은 사용자는 /profile과 같은 특정 페이지에 접근할 수 없어야 합니다. 만약 해당 페이지에 머무르는 중에 로그아웃을 클릭한다면, 즉시 다른 페이지로 리디렉션되어야 합니다.NextAutcodesmoothie.tistory.com 이전 포스팅에서 클라이언트 사이드 코드를 사용하여 프로필 페이지를 보호했습니다. 로그인하지 않은 사용자가 /profile로 접근하면 /auth 페이지로 리디렉션했습니다. 하지만 이 방식에는 문제가 있습니다. 로그인하지 않은 상태로 /profile 페이지에 직접 URL을 입력하여 접속하면, 잠시 "Loading..." 메시..

NextAuth3로 진행된 내용입니다. NextAuth는 인증 및 세션 관리에 도움을 주지만, 자체 사용자 계정 시스템을 운영할 경우 사용자 생성 로직은 직접 구현해야 합니다. NextAuth는 이미 존재하는 사용자를 인증하고 토큰을 발급하는 데 사용되며, 그 사용자를 생성하는 것은 우리의 몫입니다.이 과정에서는 사용자 계정 생성을 위한 API 라우트를 구축합니다. 이 API는 이메일과 비밀번호를 입력받아 데이터베이스에 사용자를 저장하는 역할을 합니다. 데이터베이스 선택 및 설정데이터베이스는 MongoDB를 사용합니다. MongoDB Atlas는 시작하기에 비용이 들지 않고, JavaScript와 함께 사용하기 쉬우며, 호스팅까지 해결해 주므로 편리합니다. (물론 다른 데이터베이스를 사용해도 무방합니다...

인증의 기본적인 원리웹 애플리케이션에서 인증의 핵심 아이디어는 항상 동일합니다. 사용자(클라이언트, 브라우저)가 서버에 접근하여 자신의 신원을 증명하고, 서버는 이 신원을 확인하여 보호된 리소스에 대한 접근 권한을 부여하는 것입니다. 클라이언트와 서버의 상호작용:사용자가 로그인 폼에 이메일, 비밀번호와 같은 자격 증명을 입력하고 '로그인'을 클릭합니다.클라이언트(브라우저)는 해당 데이터를 담은 요청을 서버로 전송합니다.서버는 데이터베이스에 접근하여 해당 이메일 주소의 계정이 존재하는지, 입력된 비밀번호가 저장된 비밀번호와 일치하는지 검증합니다.검증에 성공하면, 서버는 클라이언트에게 인증 성공 응답을 보냅니다.권한 증명(Permission)의 필요성:로그인 성공 후, 클라이언트는 프로필 페이지 접속이나 비..

NextJS 빌드 에러NextJS에 Mysql를 사용하여, API를 통하지 않고 DB에서 직접 데이터를 가져오는 방식으로 서버 컴포넌트를 만들고 있었다. 'npm run dev'에서는 문제가 없이 잘 동작하였다.하지만, 'npm run build'를 하니 'Module not found: Can't resolve 'net', Module not found: Can't resolve tls' 에러가 나타났다. 아래는 에러 내용이다. > next build ▲ Next.js 15.2.4 - Environments: .env.local Creating an optimized production build ...Failed to compile. ./node_modules/mysql2/lib/aut..

SSR이란 무엇인가요?SSR(Server Side Rendering)은 웹 애플리케이션의 초기 HTML을 서버에서 렌더링하여 클라이언트에 전달하는 방식입니다. 이를 통해 사용자는 초기 페이지 로딩 시 빠르게 콘텐츠를 확인할 수 있으며, 검색 엔진 최적화(SEO)에도 유리합니다. SSR의 동작 원리클라이언트 요청: 사용자가 웹 페이지를 요청합니다.서버 렌더링: 서버는 React와 같은 프레임워크를 사용하여 HTML을 생성합니다.HTML 전달: 생성된 HTML과 JavaScript 번들을 클라이언트에 전송합니다.Hydration: 클라이언트는 전달받은 HTML을 기반으로 React 컴포넌트를 활성화하여 동적 기능을 추가합니다.이 과정에서 서버와 클라이언트 간의 렌더링 결과가 일치하지 않으면 Hydration..

이전 단계에서는 **Next.js 서버 컴포넌트(Server Components)**를 통해 데이터베이스에 직접 접근함으로써 API 호출 과정 없이 빠른 데이터 로딩을 구현했습니다.이번에는 데이터가 지연될 때 사용자 경험(UX)을 어떻게 개선할 수 있는지 살펴봅니다.비동기 환경 구성: async/await 도입 및 지연 시뮬레이션better-sqlite3는 원래 동기적(synchronous) DB 라이브러리입니다. 하지만 로딩 UI 설명을 위해, 아래처럼 인위적으로 2초의 지연 시간을 추가하여 비동기 상황을 시뮬레이션합니다.lib/news.jsimport sql from 'better-sqlite3';const db = sql('data.db');// 동기 DB 접근이지만, UX 설명을 위해 비동기처럼 ..

Next.js 13 이상에서는 React 서버 컴포넌트(RSC) 덕분에, 별도의 API 서버 없이 서버에서 직접 데이터베이스에 접근할 수 있습니다.이 글에서는 SQLite와 MySQL을 예시로, 안전하게 서버 컴포넌트에서 DB를 다루는 방법과 장점을 그림과 함께 정리했습니다. 왜 별도 API 서버를 제거해야 할까?서버를 두 개 운영하는 경우, 특별한 이유(예: 마이크로서비스, 레거시 API 통합)가 없다면 불필요한 HTTP 왕복이 발생하여 성능이 떨어집니다.장점설명HTTP 왕복 제거서버 → 서버 → DB 요청 없이, 서버 컴포넌트에서 바로 데이터 조회코드 단순화데이터 로직이 한 프로젝트 안에서 관리되어 배포와 유지보수가 쉬움단, 외부 API 호출이나 마이크로서비스 구조에서는 여전히 별도의 API 서버가 ..

이전 포스트에서 useEffect를 사용한 클라이언트 측 데이터 페칭 방식을 살펴보았습니다. 이 방식은 React에서 일반적이지만, Next.js의 진정한 장점을 활용하는 최적의 방법은 아닙니다.Next.js에서는 모든 페이지 컴포넌트가 기본적으로 React 서버 컴포넌트(RSC)로 작동하며, 이를 활용하여 데이터를 서버에서 직접 가져올 수 있습니다. 이 방법을 통해 코드가 훨씬 간결해지고, 중요한 이점을 얻을 수 있습니다. 1. 서버 컴포넌트 데이터 페칭 코드 예시와 변화서버 컴포넌트 방식을 사용하면, 클라이언트 컴포넌트에서 필수였던 useState와 useEffect를 모두 제거하고 코드를 극적으로 간결하게 만들 수 있습니다. a. 코드 구조: async 키워드와 직접 fetchNewsPage 컴포..

Next.js 프로젝트에서 별도로 구동 중인 백엔드 API 서버의 데이터를 클라이언트 컴포넌트에서 가져오는 방법에 대해 알아봅니다. 이 방식은 일반적인 React 애플리케이션의 데이터 페칭 방식과 동일합니다. 1. 서버 구성 및 준비데이터를 가져오기 전에, 백엔드 서버와 Next.js 서버가 각각 별도의 터미널에서 실행 중이어야 합니다.서버실행 명령어기본 주소백엔드 API(backend 폴더에서) npm starthttp://localhost:8080Next.js(frontend 폴더에서) npm run devhttp://localhost:3000* Next.js 앱의 컴포넌트에서 백엔드 주소 http://localhost:8080/news로 요청을 보낼 것입니다. 2. 클라이언트 컴포넌트에서 데이..