마음 읽기 음악 API 레벨업: 기분 이력 및 스마트 선호도를 갖춘 사용자 계정 추가

감정 감지 재생목록 생성기를 모든 상호작용을 통해 학습하는 개인 맞춤형 음악 도우미로 탈바꿈하세요. 이 후속 튜토리얼에서는 사용자 인증, 기분 추적 분석, 그리고 지능형 선호도 학습 기능을 추가하여 진정으로 개인화된 음악 경험을 제공합니다.

오늘 개발 중인 기능

감정을 감지하고 재생목록을 생성할 수 있는 마음 읽기 음악 API를 기억하시나요? 오늘 저희는 이 API를 개인화된 API로 만들어 드립니다. 추가 기능:

실제로 작동하는 사용자 인증(복잡한 OAuth 문제 없음)
멋진 분석 기능을 갖춘 기분 기록 대시보드
사용자 행동으로부터 학습하는 스마트 재생 목록 기본 설정
시간이 지남에 따라 개선되는 개인화된 추천
데이터 지속성으로 사용자가 음악 여정을 잃지 않도록 합니다.

이 튜토리얼을 마치면 API는 Sarah가 슬플 때 인디 록을 좋아하는 반면 Mike는 집중 세션에는 클래식 음악을 선호한다는 것을 기억하게 될 것입니다.

필요한 것

이전 튜토리얼에서 완성한 마인드 리딩 음악 API
집중 코딩 시간 30분
MongoDB Atlas 계정(무료 계층도 완벽히 작동함)
데이터베이스에 대한 기본 이해(간단하게 설명하겠습니다!)

사용자 인증 설정(간단한 방법)

먼저, 사용자 관리에 필요한 패키지를 추가해 보겠습니다.

코드 편집기에서 터미널로 이동하여 다음 명령을 입력하거나 붙여넣고 Enter 키를 누릅니다.

npm install mongoose bcryptjs jsonwebtoken express-session connect-mongo

1단계: 데이터베이스 연결 설정

설치가 완료되면 database.js라는 새 파일을 만들고 다음 코드를 추가합니다.

const mongoose = require('mongoose'); const connectDB = async () => { try { console.log('🔗 MongoDB에 연결하는 중...'); await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true, }); console.log('✅ MongoDB가 성공적으로 연결되었습니다!'); } catch (error) { console.error('❌ MongoDB 연결에 실패했습니다:', error.message); process.exit(1); } }; module.exports = connectDB;

cmd + s, ctrl + s 또는 파일을 저장한 후 저장하세요.

MongoDB Atlas 계정 만들기

방문: mongodb.com/cloud/atlas
클릭: "시작하기" 버튼(일반적으로 오른쪽 상단 모서리에 있음)

가입 옵션

계정을 만드는 방법은 세 가지가 있습니다.

옵션 A: 이메일 가입

"이메일로 가입"을 클릭합니다.
이메일 주소를 입력합니다.
강력한 비밀번호를 만듭니다.
"Atlas 계정 만들기"를 클릭합니다.

옵션 B: Google 가입

"Google로 가입"을 클릭합니다.
Google 계정을 선택합니다.
필요한 권한을 부여합니다.

옵션 C: GitHub 가입

클릭합니다. "GitHub에 가입하기"
MongoDB Atlas가 GitHub 계정에 액세스하도록 승인합니다.

이메일 확인

이메일 받은 편지함을 확인합니다.
MongoDB에서 확인 링크를 클릭합니다.
이렇게 하면 계정이 실제 계정임을 확인합니다.

첫 번째 데이터베이스 클러스터 만들기

로그인 후 대시보드가 보이지 않으면 오른쪽 상단 모서리에 있는 이름을 클릭하여 다음 드롭다운을 열고 Atlas를 클릭해야 할 수 있습니다.

그러면 Atlas 대시보드가 표시됩니다. 데이터베이스를 만들 시간입니다!

배포 유형 선택

왼쪽 사이드바에서 "데이터베이스" 아래에 있는 "클러스터"를 클릭합니다.

"클러스터 빌드"를 클릭합니다.

"무료"를 선택하세요.

클러스터 배포 페이지로 리디렉션되며 무료 플랜을 선택해야 합니다.

클라우드 공급자 선택: 세 가지 공급자 옵션이 표시됩니다.

AWS(Amazon Web Services) ⭐ 추천
Google Cloud Platform
Microsoft Azure

선택: AWS(가장 인기 있고 리전이 가장 많음)

리전 선택: AWS를 선택하면 여러 리전이 있는 드롭다운이 표시됩니다. 더 나은 성능을 위해 귀하의 위치에 가장 가까운 것을 선택하세요:

🇺🇸 미국:

us-east-1(버지니아 북부) - 동부 해안
us-west-2(오리건) - 서부 해안
us-central-1(아이오와) - 중부

🇪🇺 유럽:

eu-west-1(아일랜드) - 서부 유럽
eu-central-1(프랑크푸르트) - 중부 유럽
eu-west-2(런던) - 영국

🌏 아시아 태평양:

ap-southeast-1(싱가포르) - 동남아시아
ap-south-1(뭄바이) - 인도
ap-northeast-1(도쿄) - 일본

💡 전문가 팁: 확실하지 않다면 us-east-1이 가장 많은 기능을 갖춘 가장 안전한 선택입니다.

그런 다음 "배포 만들기" 버튼을 클릭하세요.

데이터베이스 사용자 만들기

3.1단계: 데이터베이스 사용자 추가

"보안 빠른 시작" 화면이 표시됩니다.
인증 방법: "사용자 이름 및 비밀번호"를 선택한 상태로 유지합니다.
사용자 이름: 사용자 이름을 입력합니다(예: mood-music-user).
비밀번호:
- 옵션 A: "보안 비밀번호 자동 생성"을 클릭합니다(권장).
- 옵션 B: 강력한 비밀번호를 직접 만듭니다(최소 8자).
비밀번호를 즉시 복사하세요! 연결 문자열에 필요합니다.

⚠️ 비밀번호를 즉시 복사하여 저장하세요!

클릭: "데이터베이스 사용자 만들기"
클릭: "연결 방법 선택"

연결 방법 선택

여러 연결 옵션이 표시됩니다.

드라이버 👈 이것은 Node.js 앱에 필요한 것입니다.
Compass (MongoDB 데스크톱 GUI 애플리케이션)
Shell (MongoDB 명령줄 인터페이스)
MongoDB for VS Code (VS Code 확장 프로그램)
Atlas SQL (MongoDB용 SQL 인터페이스)

선택: "드라이버" - Node.js와 같은 애플리케이션에 대한 연결 문자열을 제공합니다.

드라이버 연결 구성

"드라이버"를 선택한 후:

드라이버: 드롭다운에서 "Node.js"를 선택합니다.
버전: Node.js 버전을 선택하거나 기본값으로 둡니다(일반적으로 잘 작동합니다).
연결 문자열: 아래에 연결 문자열이 나타납니다.

연결 복사 문자열

다음과 같은 내용이 표시됩니다.

mongodb+srv://<username>:<password>@cluster0.abc123.mongodb.net/?retryWrites=true&w=majority

중요: 이것은 템플릿입니다! 다음을 수행해야 합니다.

<username>을 데이터베이스 사용자 이름으로 바꿉니다.
<password>를 데이터베이스 비밀번호로 바꿉니다.
.net/ 뒤에 데이터베이스 이름을 추가합니다.

예제 변환

이전(템플릿):

mongodb+srv://<username>:<password>@cluster0.abc123.mongodb.net/?retryWrites=true&w=majority

이후(사용 가능):

mongodb+srv://mood-music-user:MySecurePassword123@cluster0.abc123.mongodb.net/mood-music-db?retryWrites=true&w=majority

알림:

<username> → mood-music-user
<password> → MySecurePassword123
데이터베이스 이름으로 /mood-music-db를 추가했습니다.

'완료'

를 클릭합니다.

5단계: 프로젝트에 연결 문자열 추가

.env 파일 업데이트

.env 파일을 열고 다음을 추가합니다.

MONGODB_URI=mongodb+srv://mood-music-user:MySecurePassword123@cluster0.abc123.mongodb.net/mood-music-db?retryWrites=true&w=majority JWT_SECRET=your-super-secret-jwt-key-here-make-it-long-and-random SESSION_SECRET=another-secret-key-for-sessions-also-long-and-random

강력한 비밀 생성

JWT_SECRET 및 SESSION_SECRET의 경우 구성 파일을 손상시키지 않는 무작위 문자열이 필요합니다.

⚠️ 중요: @, #, $, %, /, ?와 같은 특수 문자는 연결 문자열과 JSON 파일을 손상시킬 수 있으므로 비밀번호에 사용하지 마십시오.

옵션 A: 간단한 온라인 생성기(권장)

방문: JWTSECRETS
설정:
- 비밀번호 수: 1
- 비밀번호 길이: 32
- ✅ "대문자"를 선택하십시오. (A-Z)"
- ✅ "소문자(a-z)"를 체크하세요.
- ✅ "숫자(0-9)"를 체크하세요.
- ❌ "구두점"을 체크 해제하세요.
"비밀번호 가져오기"를 클릭하세요.

옵션 B: 브라우저 콘솔을 사용하세요(매우 쉽습니다!)

웹사이트를 여세요 (예: google.com)
F12를 누르세요 (또는 마우스 오른쪽 버튼을 클릭 → 검사)
"콘솔" 탭을 클릭하세요

이 코드를 붙여넣으세요 그리고 Enter를 누르세요:

Math.random().toString(36).substring(2) + Math.random().toString(36).substring(2) + Math.random().toString(36).substring(2)

결과를 복사합니다 - 다음과 같습니다. k8m9x2n7p4q1w3e5r6t8y9u2i4o7p1a5s3d6f8g2h4j7k9l

옵션 C: 수동 방법(다른 모든 방법이 실패할 경우)

다음을 사용하여 긴 무작위 문자열을 입력합니다.

문자: A-Z, a-z
숫자: 0-9
예: MyApp2024SecretKey789RandomString456Auth

최종 .env 예제

SPOTIFY_CLIENT_ID=여기에_스팟파이_클라이언트_ID가_있습니다. SPOTIFY_CLIENT_SECRET=여기에_스팟파이_클라이언트_비밀이_있습니다. MONGODB_URI=mongodb+srv://mood-music-user:MySecurePassword123@cluster0.abc123.mongodb.net/mood-music-db?retryWrites=true&w=대부분의 JWT_SECRET=A8f2K9mP3qR7sT1vW5yX8bC4eN6jL2oU9iH7gF3dS6aZ1mQ4wE8rT5yU2pI9oL SESSION_SECRET=B7gT3mK9pL2sF6vW1yX4eR8aC5qN9jM7oU3iH6dG2fS8aZ4mQ1wE5rT7yU9pI3oL PORT=3000

핵심 포인트:

✅ JWT_SECRET 및 SESSION_SECRET에 특수 문자 없음
✅ MongoDB 비밀번호는 URL 구분 문자를 피합니다
✅ 모든 비밀은 길고 무작위입니다.
✅ JSON 파일 및 연결 문자열에서 안전하게 사용 가능

2단계: 기분 추적을 사용한 사용자 모델

models라는 폴더를 만들고 폴더 안에 User.js라는 파일을 추가합니다. 그런 다음 다음 코드를 파일에 추가하고 저장합니다.

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); const moodEntrySchema = new mongoose.Schema({ text: 문자열, detectedMood: 문자열, confidence: 숫자, playlistGenerated: [{ trackName: 문자열, artist: 문자열, spotifyId: 문자열, liked: { type: Boolean, default: null } }], timestamp: { type: Date, default: Date.now } }); const userPreferencesSchema = new mongoose.Schema({ favoriteGenres: [문자열], preferredEnergyLevel: { type: 숫자, min: 0, max: 1 }, dislikedArtists: [문자열], moodMusicMapping: { happy: [문자열], sad: [문자열], energetic: [문자열], chill: [문자열], angry: [문자열], romantic: [문자열], nostalgic: [문자열] } }); const userSchema = new mongoose.Schema({ 사용자 이름: { 유형: 문자열, 필수: true, 고유: true, 트림: true, 최소 길이: 3 }, 이메일: { 유형: 문자열, 필수: true, 고유: true, 소문자: true }, 비밀번호: { 유형: 문자열, 필수: true, 최소 길이: 6 }, 기분 기록: [moodEntrySchema], 선호도: { 유형: userPreferencesSchema, 기본값: () => ({}) }, 통계: { 총 재생 목록: { 유형: 숫자, 기본값: 0 }, 즐겨찾는 시간: 문자열, 가장 일반적인 기분: 문자열, joinDate: { 유형: 날짜, 기본값: Date.now } } }, { 타임스탬프: true }); // 저장하기 전에 비밀번호를 해시합니다. userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); this.password = await bcrypt.hash(this.password, 12); next(); }); // 비밀번호를 비교합니다. userSchema.methods.comparePassword = async function(password) { return bcrypt.compare(password, this.password); }; // 사용자 통계를 계산합니다. userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(entry => entry.detectedMood); this.stats.totalPlaylists = this.moodHistory.length; // 가장 흔한 기분 찾기 const moodCounts = moods.reduce((acc, mood) => { acc[mood] = (acc[mood] || 0) + 1; return acc; }, {}); this.stats.mostCommonMood = Object.keys(moodCounts).reduce((a, b) => moodCounts[a] > moodCounts[b] ? a : b, 'neutral' ); // 하루 중 가장 좋아하는 시간 결정 const hours = this.moodHistory.map(entry => entry.timestamp.getHours()); const avgHour = hours.reduce((a, b) => a + b, 0) / hours.length; if (avgHour < 6) this.stats.favoriteTime = 'night'; else if (avgHour < 12) this.stats.favoriteTime = 'morning'; else if (avgHour < 18) this.stats.favoriteTime = 'afternoon'; else this.stats.favoriteTime = 'evening'; }; module.exports = mongoose.model('User', userSchema);

3단계: 인증 미들웨어

middleware라는 이름의 폴더를 만들고 그 안에 auth.js라는 이름의 파일을 추가합니다. 그런 다음 다음 코드를 파일에 추가하고 저장합니다.

const jwt = require('jsonwebtoken'); const User = require('../models/User'); const auth = async (req, res, next) => { try { const token = req.header('Authorization')?.replace('Bearer ', '') || req.session.token; if (!token) { return res.status(401).json({ 오류: '토큰이 제공되지 않았습니다' }); } const decoded = jwt.verify(token, process.env.JWT_SECRET); const user = await User.findById(decoded.userId); if (!user) { return res.status(401).json({ 오류: '사용자를 찾을 수 없습니다' }); } req.user = user; next(); } catch (error) { res.status(401).json({ 오류: '잘못된 토큰' }); } }; module.exports = auth;

아름다운 분석 기능을 갖춘 사용자 대시보드

프로젝트에 새 폴더를 만들고 public이라는 이름을 지정한 다음 이 폴더 안에 파일을 추가하고 index.html이라는 이름을 지정합니다.

<!DOCTYPE html> <html> <head> <title>마인드 리딩 음악 API - 개인 대시보드</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', system-ui, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; color: #333; } .dashboard { 최대 너비: 1200px; 여백: 0 자동; 패딩: 20px; } .header { 배경: rgba(255,255,255,0.95); 배경 필터: 흐림(10px); 테두리 반경: 20px; 패딩: 30px; 여백 하단: 30px; 텍스트 정렬: 중앙; 상자 그림자: 0 8px 32px rgba(0,0,0,0.1); } .stats-grid { 표시: 그리드; 그리드 템플릿 열: 반복(자동 맞춤, 최소 최대(250px, 1fr)); 간격: 20px; 여백 하단: 30px; } .stat-card { 배경: rgba(255,255,255,0.9); 테두리 반경: 15px; 패딩: 25px; 텍스트 정렬: 중앙; 상자 그림자: 0 4px 15px rgba(0,0,0,0.1); } .mood-input-section { 배경: rgba(255,255,255,0.95); 테두리 반경: 20px; 패딩: 30px; 여백 하단: 30px; } .mood-history { 배경: rgba(255,255,255,0.95); 테두리 반경: 20px; 패딩: 30px; } .history-item { 배경: #f8f9fa; 테두리 반경: 10px; 패딩: 15px; 여백 하단: 15px; 테두리 왼쪽: 4px 단색 #667eea; } .login-section, .register-section { 배경: rgba(255,255,255,0.95); 테두리 반경: 20px; 패딩: 30px; 최대 너비: 400px; 여백: 50px 자동; } 입력, 텍스트 영역, 버튼 { 너비: 100%; 패딩: 12px; 여백: 10px 0; 테두리: 2px 단색 #e1e5e9; 테두리 반경: 8px; 글꼴 크기: 16px; } 버튼 { 배경: 선형 그라데이션(135도, #667eea, #764ba2); 색상: 흰색; 테두리: 없음; 커서: 포인터; 글꼴 두께: 600; } 버튼: 호버 { 변형: 번역Y(-2px); } </스타일> </헤드> <바디> <div class="dashboard"> <div id="authSection"> <div class="login-section"> <h2>🧠🎵 다시 오신 것을 환영합니다!</h2> <input type="text" id="loginUsername" placeholder="사용자 이름"> <input type="password" id="loginPassword" placeholder="비밀번호"> <button onclick="login()">로그인</button> <p><a href="#" onclick="showRegister()">계정이 없으신가요? 가입하세요</a></p> </div> <div id="registerSection" class="register-section" style="display:none;"> <h2>🎵 음악 프로필 만들기</h2> <input type="text" id="regUsername" placeholder="사용자 이름"> <input type="email" id="regEmail" placeholder="이메일"> <input type="password" id="regPassword" placeholder="비밀번호"> <button onclick="register()">계정 만들기</button> <p><a href="#" onclick="showLogin()">이미 계정이 있으신가요? 로그인</a></p> </div> </div> <div id="dashboardSection" style="display:none;"> <div class="header"> <h1>🧠🎵 당신의 음악 취향을 읽어주는 사람</h1> <p>다시 오신 것을 환영합니다, <span id="username"></span>! 당신에게 딱 맞는 사운드트랙을 찾을 준비가 되셨나요?</p> <button onclick="logout()" style="width:auto; margin-top:10px;">로그아웃</button> </div> <div class="stats-grid"> <div class="stat-card"> <h3>📊 총 재생목록</h3> <div id="totalPlaylists" class="stat-number">0</div&</div> <div class="stat-card"> <h3>😊 가장 좋아하는 기분</h3> <div id="favoriteMood" class="stat-text">-</div> </div> <div class="stat-card"> <h3>🕐 가장 좋아하는 시간</h3> <div id="bestTime" class="stat-text">-</div> </div> <div class="stat-card"> <h3>🎵 가장 좋아하는 장르</h3> <div id="topGenre" class="stat-text">-</div> </div> </div> <div class="mood-input-section"> <h2>💭 지금 기분이 어떠세요?</h2> <textarea id="moodText" placeholder="현재 기분, 현재 상황 또는 원하는 기분을 설명해 주세요..."></textarea> <button onclick="generatePersonalizedPlaylist()">🎧 나만의 완벽한 재생목록 생성</button> <div id="result" style="display:none;" class="result"></div> </div> <div class="mood-history"> <h2>📈 기분 변화 여정</h2> <div id="historyContainer"></div> </div> </div> </div> <script src="/js/app.js"></script> </body> </html>

이제 public 폴더 내부에 폴더를 만들고 이름을 js로 지정한 다음 다음 코드를 사용하여 js 폴더 내부에 app.js 파일을 만듭니다.

let authToken = localStorage.getItem('authToken'); let currentUser = null; if (authToken) { loadDashboard(); } function showLogin() { document.querySelector('.login-section').style.display = 'block'; document.getElementById('registerSection').style.display = 'none'; } function showRegister() { document.querySelector('.login-section').style.display = 'none'; document.getElementById('registerSection').style.display = 'block'; } 비동기 함수 로그인() { const 사용자 이름 = document.getElementById('loginUsername').value; const 비밀번호 = document.getElementById('loginPassword').value; if (!username || !password) { alert('모든 필드를 입력해 주세요'); return; } try { const 응답 = await fetch('/api/login', { 메서드: 'POST', 헤더: { 'Content-Type': 'application/json' }, 본문: JSON.stringify({ 사용자 이름, 비밀번호 }) }); const 데이터 = await response.json(); if (response.ok) { authToken = data.token; localStorage.setItem('authToken', authToken); loadDashboard(); } else { alert(data.error || '로그인 실패'); } } catch (error) { console.error('로그인 오류:', error); alert('로그인 실패. 다시 시도하세요.'); } } async function register() { const username = document.getElementById('regUsername').value; const email = document.getElementById('regEmail').value; const password = document.getElementById('regPassword').value; if (!username || !email || !password) { alert('모든 필드를 입력하세요'); return; } try { const response = await fetch('/api/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, email, password }) }); const data = await response.json(); if (response.ok) { alert('계정이 성공적으로 생성되었습니다! 로그인해 주세요.'); showLogin(); } else { alert(data.error || '등록에 실패했습니다.'); } } catch (error) { console.error('등록 오류:', error); alert('등록에 실패했습니다. 다시 시도해 주세요.'); } } async function loadDashboard() { try { const response = await fetch('/api/profile', { headers: { 'Authorization': 'Bearer ' + authToken } }); if (response.ok) { currentUser = await response.json(); showDashboard(); updateStats(); loadMoodHistory(); } else { logout(); } } catch (error) { console.error('대시보드 로드 오류:', error); logout(); } } showDashboard() 함수 { document.getElementById('authSection').style.display = '없음'; document.getElementById('dashboardSection').style.display = '블록'; document.getElementById('사용자 이름').textContent = currentUser.username; } updateStats() 함수 { document.getElementById('총 재생 목록').textContent = currentUser.stats.총 재생 목록 || 0; document.getElementById('좋아하는 기분').textContent = currentUser.stats.가장 일반적인 기분 || '-'; document.getElementById('최상의 시간').textContent = currentUser.stats.좋아하는 시간 || '-'; document.getElementById('topGenre').textContent = (currentUser.preferences.favoriteGenres && currentUser.preferences.favoriteGenres[0]) || '-'; } function loadMoodHistory() { const historyContainer = document.getElementById('historyContainer'); if (!currentUser.moodHistory || currentUser.moodHistory.length === 0) { historyContainer.innerHTML = '<p>아직 기분 기록이 없습니다. 첫 번째 재생 목록을 생성하세요!</p>'; return; } const recentHistory = currentUser.moodHistory.slice(-5).reverse(); historyContainer.innerHTML = recentHistory.map(entry => `<div class="history-item"> <strong>${entry.detectedMood}</strong> - ${new Date(entry.timestamp).toLocaleDateString()} <p>${entry.text}</p> <small>${entry.playlistGenerated.length} 트랙 생성</small> </div>` ).join(''); } async function generatePersonalizedPlaylist() { const moodText = document.getElementById('moodText').value; if (!moodText.trim()) { alert('지금 어떤 기분인지 설명해 주세요!'); return; } try { const response = await fetch('/api/personalized-playlist', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authToken }, body: JSON.stringify({ text: moodText }) }); const data = await response.json(); if (response.ok) { displayPersonalizedResults(data); loadDashboard(); } else { alert(data.error || '재생 목록을 생성하지 못했습니다.'); } } catch (error) { console.error('재생 목록 생성 오류:', error); alert('재생 목록을 생성하지 못했습니다. 다시 시도하세요.'); } } function displayPersonalizedResults(data) { const resultDiv = document.getElementById('result'); resultDiv.style.display = 'block'; const html = ` <h3>감지된 기분: ${data.moodAnalysis.mood} (신뢰도: ${data.moodAnalysis.confidence}/10)</h3> <p>${data.personalizedMessage || '재생 목록입니다!'}</p> <div class="playlist"> ${data.playlist.map(track => ` <div style="display: flex; align-items: center; margin: 10px 0; padding: 10px; background: #f8f9fa; border-radius: 8px;"> ${track.album_image ? `<img src="${track.album_image}" alt="앨범" style="width:50px;height:50px;border-radius:8px;margin-right:15px;">` : ''} <div style="flex: 1;"> <strong>${track.name}</strong><br> <span style="color: #666;">${track.artist}</span> </div> <div> <버튼을 클릭하면 likeTrack('${track.id}', true)" 스타일="너비:자동;패딩:5px 10px;여백:0 5px;">👍</button> <버튼을 클릭하면 likeTrack('${track.id}', false)" 스타일="너비:자동;패딩:5px 10px;여백:0 5px;">👎</button> </div> </div> `).join('')} </div> `; resultDiv.innerHTML = html; } async function likeTrack(trackId, liked) { try { await fetch('/api/track-feedback', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + authToken }, body: JSON.stringify({ trackId: trackId, liked: liked }) }); alert(liked ? '감사합니다! 이와 비슷한 항목을 더 추천해 드리겠습니다.' : '알겠습니다! 유사한 트랙은 피하겠습니다.'); } catch (error) { console.error('피드백 오류:', error); } } function logout() { localStorage.removeItem('authToken'); authToken = null; currentUser = null; document.getElementById('authSection').style.display = 'block'; document.getElementById('dashboardSection').style.display = 'none'; showLogin(); }

server.js 파일 바꾸기

server.js 파일 코드를 다음으로 바꾸세요.

require('dotenv').config(); const express = require('express'); const mongoose = require('mongoose'); const jwt = require('jsonwebtoken'); const auth = require('./middleware/auth'); const User = require('./models/User'); const moodAnalyzer = require('./moodAnalyzer'); const PlaylistGenerator = require('./playlistGenerator'); // MongoDB에 연결 const connectDB = async () => { try { console.log('🔗 MongoDB에 연결하는 중...'); await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true, }); console.log('✅ MongoDB가 성공적으로 연결되었습니다!'); } catch (error) { console.error('❌ MongoDB 연결에 실패했습니다:', error.message); process.exit(1); } }; connectDB(); const app = express(); const PORT = process.env.PORT || 3000; const playlistGen = new PlaylistGenerator(); app.use(express.json()); app.use(express.static('public')); // 메인 페이지 제공 app.get('/', (req, res) => { res.sendFile(__dirname + '/public/index.html'); }); // 사용자 등록 app.post('/api/register', async (req, res) => { try { const { username, email, password } = req.body; if (!username || !email || !password) { return res.status(400).json({ error: '모든 필드가 필수입니다.' }); } if (password.length < 6) { return res.status(400).json({ error: '비밀번호는 최소 6자 이상이어야 합니다.' }); } const existingUser = await User.findOne({ $or: {[ email }, { username }] }); if (existingUser) { return res.status(400).json({ error: '사용자 이름 또는 이메일이 이미 존재합니다.' }); } const user = new User({ username, email, password }); await user.save(); res.status(201).json({ message: '사용자가 성공적으로 생성되었습니다.' }); } catch (error) { console.error('등록 오류:', error); res.status(500).json({ error: '등록에 실패했습니다.' }); } }); // 사용자 로그인 app.post('/api/login', async (req, res) => { try { const { username, password } = req.body; const user = await User.findOne({ $or: {[ username }, { email: username }] }); if (!user || !(await user.comparePassword(password))) { return res.status(401).json({ error: '잘못된 자격 증명' }); } const token = jwt.sign( { userId: user._id }, process.env.JWT_SECRET, { expiresIn: '7d' } ); res.json({ token, user: { username: user.username, email: user.email } }); } catch (error) { console.error('로그인 오류:', error); res.status(500).json({ 오류: '로그인 실패' }); } }); // 사용자 프로필 가져오기 app.get('/api/profile', auth, async (req, res) => { try { req.user.updateStats(); await req.user.save(); res.json(req.user); } catch (error) { res.status(500).json({ error: '프로필을 로드하지 못했습니다' }); } }); // 개인화된 재생 목록 생성 app.post('/api/personalized-playlist', auth, async (req, res) => { try { const { text, playlistSize = 15 } = req.body; if (!text) { return res.status(400).json({ error: '기분이 어떤지 알려주세요!' }); } const moodAnalysis = moodAnalyzer.analyzeMood(text); const playlist = await playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // 사용자 기록에 저장 req.user.moodHistory.push({ text, detectedMood: moodAnalysis.mood, confidence: moodAnalysis.confidence, playlistGenerated: playlist.map(track => ({ trackName: track.name, artist: track.artist, spotifyId: track.id })) }); req.user.updateStats(); await req.user.save(); res.json({ moodAnalysis, playlist, personalizedMessage: `귀하의 기록을 기반으로 ${moodAnalysis.mood} 기분에 맞게 이 재생 목록을 맞춤화했습니다!` }); } catch (error) { console.error('개인화된 재생 목록 오류:', error); res.status(500).json({ error: '개인화된 재생 목록을 생성하지 못했습니다. 다시 시도하세요.' }); } }); // 피드백 추적 app.post('/api/track-feedback', auth, async (req, res) => { try { const { trackId, liked } = req.body; res.json({ message: '피드백을 받았습니다! 향후 추천 기능을 개선하겠습니다.' }); } catch (error) { console.error('피드백 오류:', error); res.status(500).json({ error: '피드백을 처리하지 못했습니다.' }); } }); app.listen(PORT, () => { console.log(`🚀 http://localhost:${PORT}에서 실행되는 마인드 리딩 음악 API`); console.log('🧠 기분을 분석하고 재생 목록을 생성할 준비가 되었습니다!'); });

이제 할 수 있어야 할 일

1. 익명 사용자(원래 기능)

로그인하지 않고 웹사이트 방문
기존 기분 분석을 사용하여 재생 목록 생성
감정에 따른 음악 추천 받기

2. 등록된 사용자(새로운 기능)

계정을 만들고 로그인하세요.
시간이 지남에 따라 개선되는 개인화된 재생 목록을 생성하세요.
기분 기록 및 개인 분석 보기
트랙을 좋아하거나 싫어요를 눌러 AI를 훈련하세요.
좋아하는 기분, 전체 재생 목록 등의 통계를 확인하세요.

단계별 테스트 가이드

테스트 1: 서버 시작 확인

node server.js

다음과 같이 표시되어야 합니다.

🔑 Spotify 인증 시도 중... 🎵 Spotify 연결 성공! 🔗 MongoDB 연결 중... ✅ MongoDB 연결 성공! 🚀 http://localhost:3000에서 실행되는 마인드 리딩 음악 API 🧠 기분을 분석하고 재생 목록을 생성할 준비가 되었습니다!

테스트 2: 웹사이트 방문

다음으로 이동: http://localhost:3000

표시되는 내용:

사용자 이름/비밀번호를 묻는 로그인 양식
"계정이 없으신가요? 가입하세요" 링크

테스트 3: 첫 번째 계정 만들기

클릭: "계정이 없으신가요? 가입하세요"
입력할 내용:
- 사용자 이름: testuser
- 이메일: test@example.com
- 비밀번호: password123
클릭: "계정 만들기"
예상 결과: "계정이 성공적으로 생성되었습니다! 로그인하세요."

테스트 4: 대시보드에 로그인

방금 생성한 사용자 인증 정보를 사용하세요.
클릭: "로그인"
다음이 표시됩니다.
- 사용자 이름이 포함된 환영 메시지
- 재생목록이 0개, 좋아하는 기분은 아직 없음을 보여주는 통계 카드
- "지금 기분이 어떠세요?"라는 텍스트 영역

테스트 5: 첫 번째 개인 맞춤 재생목록 생성

다음과 같이 입력하세요. "새 프로젝트가 너무 기대돼요!"
클릭: "내 완벽한 재생목록 생성"
다음이 표시되어야 합니다.
- 감지된 기분(아마도 "활기찬" 또는 "행복한")
- 앨범 아트가 있는 노래 목록
- 미리 보기 오디오 플레이어(사용 가능한 경우)
- 각 노래에 대한 좋아요/싫어요 버튼

테스트 6: 학습 시스템 테스트

좋아하는 노래에 좋아요 👍를 클릭합니다.
좋아하지 않는 노래에 싫어요 👎를 클릭합니다.
예상: "감사합니다! 이와 유사한 노래를 더 추천해 드리겠습니다."라는 알림 메시지

테스트 7: 통계 업데이트 확인

새로 고침 페이지 또는 다른 재생목록 생성
이제 통계에 다음이 표시됩니다.
- 총 재생목록: 1개(또는 그 이상)
- 좋아하는 기분: 감지된 기분
- 다른 통계가 채워지기 시작합니다.

다양한 시나리오 테스트

다양한 기분 시도:

"방금 여자친구와 헤어졌는데 비가 오고 있어요"(감지해야 함: 슬픔)
"운동할 기분이 너무 좋아요!" (감지해야 함: 활기차다)
"그냥 조용히 쉬면서 공부하고 싶다"(감지해야 함: 차분하다)
"이 데이트 밤에 로맨틱한 기분이 든다"(감지해야 함: 낭만적이다)

테스트 에지 케이스:

""(비어 있음 - 오류 표시)
"asdf 무작위 텍스트"(기본값은 중립/차분하다)
"정말 신난다!!!" (더 높은 신뢰도를 감지해야 함)

일반적인 문제 및 빠른 해결 방법

❌ "MongoDB 연결에 실패했습니다"

확인: .env 파일이 MongoDB 연결 문자열로 올바르게 설정되었습니까?

# 데이터베이스 연결을 테스트하려면 다음을 실행합니다. node -e "require('dotenv').config(); console.log('MONGODB_URI:', process.env.MONGODB_URI ? 'Set ✅' : 'Missing ❌');"

❌ "Spotify 연결에 실패했습니다"

확인: Spotify API 키가 .env 파일에 있습니까?

# Spotify 자격 증명을 확인하려면 다음을 실행합니다. node -e "require('dotenv').config(); console.log('Spotify 클라이언트 ID:', process.env.SPOTIFY_CLIENT_ID ? 'Set ✅' : 'Missing ❌');"

❌ 로그인/등록이 작동하지 않습니다.

확인: 브라우저 콘솔에 오류 메시지가 표시됩니까?

F12 → 콘솔 탭을 누릅니다.
빨간색 오류 메시지를 찾습니다.

❌ 페이지가 이전 인터페이스를 표시합니다.

해결 방법: 페이지를 강제로 새로 고칩니다.

Ctrl+Shift+R(Windows/Linux)을 누릅니다.
Cmd+Shift+R(Mac)을 누릅니다.

작동해야 하는 것과 아직 기본적인 것의 차이점

✅ 현재 작동해야 하는 것:

사용자 등록 및 로그인
기본적인 기분 감지 및 재생 목록 생성
기분 기록을 데이터베이스에 저장합니다.
간단합니다. 좋아요/싫어요 피드백
통계 추적(전체 재생목록, 좋아하는 기분)

🚧 아직 기본(나중에 고급 기능 소개):

사용자 피드백을 통한 복잡한 머신 러닝
소셜 기능 및 재생목록 공유
고급 분석 및 기분 패턴
모바일 앱 인터페이스

테스트 후 다음 단계

모든 것이 제대로 작동하면:

다른 사용자로 시도 - 개인화가 어떻게 다른지 확인하기 위해 여러 계정을 만듭니다.
여러 재생목록을 생성합니다. - 통계와 선호도가 어떻게 변화하는지 확인합니다.
트랙에 대한 피드백을 제공합니다. - 시스템이 사용자의 취향을 어떻게 학습하는지 확인합니다.
MongoDB Atlas 대시보드를 확인합니다. - 데이터가 저장되는 것을 볼 수 있어야 합니다.

결론

막대기에서 놀라운 AI를 만들어냈습니다. 인간의 감정을 이해할 뿐만 아니라 시간이 지남에 따라 개인의 취향을 학습하고 적응하는 AI입니다. 이제 마인드 리딩 음악 API는 기억력과 개성을 갖추고 사용자와 함께 성장할 수 있습니다.

기분 감지, 사용자 학습, 그리고 개인 맞춤형 추천의 조합은 상호 작용이 거듭될수록 더욱 마법 같은 경험을 선사합니다. 각 사용자의 여정은 고유한 개성을 지니며, 각자의 감정적 삶에 맞춰 자신만의 사운드트랙을 구축합니다.

이제 API는 모든 기분을 기억하고, 모든 상호 작용을 통해 학습하며, 각 사용자의 음악적 취향을 포괄적으로 이해합니다. 이것이 진정으로 개인화된 AI 경험의 기반입니다.

다음 단계는 무엇일까요?

이를 더욱 발전시킬 준비가 되셨나요? 다음은 흥미로운 몇 가지 지침입니다.

고급 분석: 기분 패턴 인식 및 예측 추천 추가
소셜 기능: 사용자가 재생 목록을 공유하고 친구의 음악 취향을 알아볼 수 있도록 함
모바일 앱: iOS/Android용 React Native 또는 Flutter 앱 빌드
음성 통합: 핸즈프리 기분 입력을 위한 음성-텍스트 변환 추가
머신 러닝: 더욱 향상된 추천을 위한 협업 필터링 구현
배포: 적절한 환경 변수를 사용하여 AWS/Vercel에 배포

계속 실험하고 구축하세요. 개인화된 AI 경험의 미래는 여러분의 손에 달려 있습니다!

다음 과제를 준비하셨나요?소셜 기능과 협업 필터링을 추가하여 공유된 감정을 통해 사람들을 연결하는 음악 검색 네트워크를 만드는 방법에 대한 곧 공개될 튜토리얼을 기대해 주세요. 경험.