회원가입 이력, 로그인 이력, 아티클 클릭 이력을 데이터베이스에 저장하기 위한 구현을 만들어 드리겠습니다. Prisma ORM을 사용하여 데이터베이스 연결 및 이벤트 추적 시스템을 구축하겠습니다.

구현 설명

이 구현은 회원가입 이력, 로그인 이력, 아티클 클릭 이력을 데이터베이스에 저장하는 완전한 시스템을 제공합니다:

1. 데이터베이스 스키마 설계

• User 모델: 사용자 정보 저장
• RegistrationLog 모델: 회원가입 이력 저장
• LoginLog 모델: 로그인 이력 저장 (성공/실패 포함)
• ArticleClickLog 모델: 아티클 클릭 이력 저장
• Article 모델: 아티클 정보 저장

2. 이벤트 추적 시스템

• analytics.ts: 모든 이벤트 추적 함수를 중앙화하여 관리
• IP 주소와 사용자 에이전트 정보도 함께 저장하여 분석에 활용 가능
• 익명 사용자의 아티클 클릭도 추적 가능

3. 인증 시스템 통합

• 이메일 회원가입/로그인 시 이력 저장
• 소셜 로그인(Google) 시 이력 저장
• 로그인 실패 시에도 이력 저장하여 보안 분석에 활용 가능

4. 아티클 조회 추적

• 아티클 페이지 방문 시 자동으로 클릭 이력 저장
• 아티클 조회수 자동 증가
• 로그인 사용자와 익명 사용자 모두 추적

5. 데이터베이스 초기화 및 관리

• Prisma ORM을 사용하여 타입 안전성 보장
• 데이터베이스 초기화 스크립트 제공
• Prisma Studio를 통한 데이터 관리 가능

사용 방법

1. 환경 변수 설정:

   • .env.local 파일에 데이터베이스 연결 정보와 인증 정보 설정

2. 데이터베이스 초기화:

   npm run prisma:generate npm run prisma:migrate npm run db:init

3. 애플리케이션 실행:

   npm run dev

이제 사용자가 회원가입하거나 로그인할 때, 그리고 아티클을 클릭할 때마다 해당 이력이 데이터베이스에 자동으로 저장됩니다. 이 데이터를 활용하여 사용자 행동 분석, 인기 콘텐츠 파악, 보안 모니터링 등 다양한 인사이트를 얻을 수 있습니다.

저는 실제로 서버를 실행할 수는 없지만, 서버를 실행하기 위한 단계별 안내를 제공해 드리겠습니다:

Next.js 서버 실행 단계

1. 데이터베이스 설정 확인

먼저 데이터베이스가 설정되어 있는지 확인해야 합니다:

2. Prisma 설정 및 마이그레이션

3. 서버 실행

서버가 성공적으로 시작되면 다음과 같은 메시지가 표시됩니다:

이제 브라우저에서 http://localhost:3000 으로 접속하여 애플리케이션을 사용할 수 있습니다.

문제 해결

만약 서버 실행 중 오류가 발생한다면:

1. 데이터베이스 연결 확인:

   # Prisma Studio를 실행하여 데이터베이스 연결 테스트 npm run prisma:studio

2. 의존성 패키지 설치 확인:

   # 필요한 패키지 설치 npm install

3. 로그 확인:

   • 터미널에 표시되는 오류 메시지를 확인하여 문제 해결

실제 서버를 실행하려면 위 명령어를 터미널에서 직접 실행해야 합니다. 제가 직접 서버를 실행할 수는 없지만, 위 단계를 따라하시면 서버를 실행할 수 있습니다.