전체 글38 GitHub OAuth를 이용한 로그인 구현 과정 오늘은 Next.js에서 GitHub OAuth를 이용한 로그인 구현 과정을 작성해 보겠다. 1. GitHub 프로필 사진을 누르면 나오는 메뉴에서 Settings를 선택한다.2. 메뉴에서 Developer settings로 이동한다.3. 왼쪽 메뉴에서 OAuth Apps를 선택한다.4. New OAuth APP 버튼을 클릭한다.5. 기본정보를 입력해준다.Application name에는 프로젝트 이름을 입력했고,나같은 경우는 로컬 작업환경에서 작업할 것이기 때문에 Homepage URL을 http://localhost:3000으로 작성했다.그리고 Authorization callback URL에 인증이 완료되었을 때 이동할 주소를 입력한다.6. Register application 버튼을 누르면 Cli.. 2026. 8. 2. Prisma ORM 데이터모델 작성, CRUD 활용법 Next.js 학습을 위해 프로젝트를 생성하고, 백엔드 기능까지 함께 경험하기 위해 Supabase(PostgreSQL)와 Prisma ORM을 이용하여 개발 환경을 구성해 보았다. 투두앱을 만들며 처음 접해봤지만, 쓰면 쓸수록 SQL Query문을 짜는 것보다 ORM을 쓰는 것이 더 간단하고 편리했다. 그래서 Prisma의 스키마 작성법 및 SQL CRUD 문법을 정리해 본다.1. Prisma의 장점 - 데이터 모델링 동기화가 간편하다.나는 지난번 게시글처럼, Supabase로 PostgreSQL 서버를 만들고 터미널에서 Prisma를 설치해 내 프로젝트와 PostgreSQL 서버를 연결했다. 데이터베이스에서 테이블을 만들기 위해 SQL DDL을 입력하지 않고도, schema.prisma에 데이터 모.. 2026. 7. 29. Next.js + Supabase(PostgreSQL) 연결 및 Vercel 배포 (IPv6 오류 해결) React 프레임워크인 Next.js를 학습하기 위해 프로젝트를 생성하고,백엔드 기능까지 함께 경험하기 위해 Supabase(PostgreSQL)와 Prisma, Vercel을 이용하여 개발 환경을 구성해보았다.이번 글에서는 프로젝트 생성부터 데이터베이스 연결, 배포 과정과 함께 P1001 오류를 해결한 과정까지 정리해본다. 1. Next.js 프로젝트 생성npx create-next-app@latest menbo2. Supabase 프로젝트 생성2-1. Supabase에 로그인한다. 나는 GitHub 계정으로 로그인 했다.2-2 New Project를 눌러서 새 프로젝트를 생성한다.2-3 Project name과 Database password를 입력한다.Database password는 데이터베이스 .. 2026. 7. 15. [Cypress] 예약 기능 E2E 테스트 작성하기 프로젝트를 완성한 뒤 가장 걱정됐던 부분은 사용자가 실제로 예약 과정을 진행했을 때 정상적으로 동작하는지였다.기능 하나하나를 직접 클릭하며 확인할 수도 있지만, 수정할 때마다 반복해야 한다는 문제가 있었다.그래서 Cypress를 이용해 예약 과정을 E2E 테스트로 자동화했다.E2E 테스트란?E2E(End To End) 테스트는 사용자가 실제 서비스를 사용하는 흐름 전체를 검증하는 테스트이다.예를 들어 내 프로젝트에서는 다음 과정을 하나의 시나리오로 테스트했다.상품 검색↓장바구니 담기↓수량 변경↓예약 날짜 선택↓예약 진행↓예약 완료↓예약 취소실제 사용자의 행동을 그대로 따라가기 때문에 가장 현실적인 테스트라고 볼 수 있다.Cypress 설치npm install cypress --save-dev Cypres.. 2026. 6. 3. 이전 1 2 3 4 ··· 10 다음
