마음 읽기 음악 API에 친구 추가: 실시간 소셜 공유

마음 읽기 음악 API를 진정한 소셜 네트워크로 만들 준비가 되셨나요? 이 튜토리얼에서는 강력한 친구 시스템과 데이터베이스에 저장되는 재생목록 공유 기능을 추가하여, 사용자가 온라인에 접속하지 않아도 친구들이 공유한 재생목록을 볼 수 있도록 해 보겠습니다. Socket.io를 실시간 업데이트에 사용하고 MongoDB를 영구 저장소에 사용합니다.

구축할 내용

친구 시스템 – ObjectIds를 사용하여 상호 친구가 있는 사용자 이름으로 친구를 추가하고 관리합니다.
영구 재생 목록 공유 – 공유된 재생 목록은 데이터베이스에 저장되며 언제든지 볼 수 있습니다.
실시간 알림 – 친구가 공유할 때 즉시 알림을 받습니다(온라인인 경우)
활동 피드 – 클릭 가능한 재생 목록 미리 보기로 최근 친구 공유를 확인합니다.
향상된 분위기 분석 – 검색 대체 기능이 있는 스마트 재생 목록 생성

필수 조건

다음에서 완성한 마인드 리딩 음악 API 2부
MongoDB, Node.js, npm 설치
Spotify API 사용자 인증 정보(클라이언트 ID 및 비밀번호)
코딩 시간 30~45분

2부에서는 기분 기록과 스마트 선호도를 활용하여 사용자 계정을 구축했습니다. 이제 이를 소셜하게 만들어 보겠습니다! 사용자 연결, 실시간 및 영구적인 재생목록 공유, 친구의 기분에 따라 청취곡 확인 방법을 알아보겠습니다.

핵심 개념 이해

코드를 살펴보기 전에 무엇을 개발하고 있는지 알아보겠습니다.

Socket.io – 서버와 브라우저 간의 실시간 양방향 통신을 지원하는 라이브러리입니다. 문자 메시지 대신 전화 통화처럼 생각하면 됩니다. 페이지를 새로 고치지 않고도 즉시 정보를 주고받을 수 있습니다.
영구 저장소 – 사용자가 로그아웃하더라도 MongoDB 데이터베이스에 데이터가 유지됩니다. 이는 파일을 메모리에 저장하는 대신 하드 드라이브에 저장하는 것과 같습니다.
ObjectId 참조 – MongoDB에서 데이터 간의 관계를 생성하는 방식입니다. 친구의 모든 정보를 내 프로필에 복사하는 대신, 친구 프로필에 대한 참조(포인터와 같은)만 저장합니다.
스키마 – 데이터 구조를 정의하는 청사진이라고 생각하면 됩니다. 이들은 MongoDB에 각 문서에 어떤 필드가 있어야 하는지, 그리고 각 필드에 어떤 유형의 데이터가 들어가야 하는지 알려줍니다.

1단계: 필수 종속성 설치

프로젝트 디렉토리에서 터미널을 열고 실시간 기능을 위해 Socket.io를 설치합니다.

npm install socket.io

수행 작업: 이 명령은 프로젝트에 Socket.io 라이브러리를 다운로드하고 설치합니다. npm install 명령은 npm 레지스트리(거대한 JavaScript 코드 라이브러리)에서 패키지를 가져와 node_modules 폴더에 추가합니다.

다른 종속성(sentiment, spotify-web-api-node, bcryptjs, jsonwebtoken, mongoose, express, dotenv)은 2부에서 이미 설치되어 있어야 합니다.

2단계: 소셜 기능을 사용하여 사용자 모델 업데이트

2부에서 이미 사용자 모델을 만들었으므로 소셜 기능을 추가하도록 업데이트하겠습니다. 사용자 모델은 데이터베이스에 각 사용자에 대한 정보를 저장하는 템플릿과 같습니다.

추가되는 항목:

friends 배열 – 다른 사용자에 대한 ObjectId 참조 목록입니다. 전체 사용자 정보를 저장하는 대신, 데이터베이스의 다른 사용자 문서를 가리키는 ID만 저장합니다.
sharedWith 및 isShared 필드 – 이 필드는 어떤 분위기 항목이 공유되었고 누구와 공유되었는지 추적합니다.
sharedPlaylistSchema – 공유 재생 목록의 모양을 정의하는 새로운 스키마(청사진)입니다. 공유한 사람, 어떤 분위기, 트랙, 공유 날짜 등이 정의됩니다.
sharedPlaylists 배열 – 친구들이 공유한 모든 재생 목록을 저장하는 목록입니다.

models/User.js를 다음으로 바꾸세요.

const mongoose = require('mongoose'); const bcrypt = require('bcryptjs'); // 개별 기분 항목에 대한 스키마(사용자가 재생 목록을 생성할 때마다) const moodEntrySchema = new mongoose.Schema({ text: String, // 사용자가 입력한 내용(예: "오늘 기분이 좋음") detectedMood: String, // 분석기가 감지한 기분(예: "행복함") confidence: Number, // 자신감(0-10) playlistGenerated: [{ // 추천한 트랙 배열 trackName: String, artist: String, spotifyId: String, liked: { type: Boolean, default: null } // null = 평가 안 함, true = 좋아요, false = 싫어요 }], sharedWith: {[ type: mongoose.Schema.Types.ObjectId, ref: 'User' }], // 누구와 공유했나요? isShared: { type: Boolean, default: false }, // 공유되었나요? timestamp: { type: Date, default: Date.now } // 언제 생성되었나요? }); // 사용자 기본 설정(선호하는 장르 등)에 대한 스키마 const userPreferencesSchema = new mongoose.Schema({ favoriteGenres: [String], preferredEnergyLevel: { type: Number, min: 0, max: 1 }, dislikedArtists: [String], moodMusicMapping: { happy: [String], sad: [String], energetic: [String], chill: [String], angry: [String], romantic: [String], nostalgic: [String] } }); // 새로 추가: 친구가 공유한 플레이리스트에 대한 스키마 const sharedPlaylistSchema = new mongoose.Schema({ sharedBy: { type: mongoose.Schema.Types.ObjectId, ref: 'User' }, // 공유한 친구에 대한 ObjectId 참조 sharedByUsername: String, // 쉽게 표시할 수 있는 사용자 이름(성능을 위해 비정규화) mood: String, // 이 플레이리스트는 어떤 기분을 위한 것인가요? playlist: [{ // 실제 트랙 name: String, artist: String, album_image: String, id: String }], timestamp: { type: Date, default: Date.now } // 언제 공유되었나요? }); // 기본 사용자 스키마 - 사용자 문서의 구조를 정의합니다 const userSchema = new mongoose.Schema({ username: { type: String, required: true, unique: true, trim: true, minlength: 3 }, email: { type: String, required: true, unique: true, lowercase: true }, password: { type: String, required: true, minlength: 6 }, friends: {[ type: mongoose.Schema.Types.ObjectId, ref: 'User' }], // 친구에 대한 ObjectId 참조 배열 moodHistory: [moodEntrySchema], // 이 사용자가 생성한 모든 재생 목록 sharedPlaylists: [sharedPlaylistSchema], // 친구가 이 사용자와 공유한 재생 목록 preferences: { type: userPreferencesSchema, default: () => ({}) }, stats: { totalPlaylists: { type: Number, default: 0 }, favoriteTime: String, mostCommonMood: String, joinDate: { type: Date, default: Date.now } } }, { timestamps: true }); // createdAt 및 updatedAt 필드를 자동으로 추가합니다. // 미들웨어: 사용자를 저장하기 전에 이 함수를 실행합니다(비밀번호를 해시하기 위해) userSchema.pre('save', async function(next) { if (!this.isModified('password')) return next(); // 비밀번호가 변경된 경우에만 해시합니다. this.password = await bcrypt.hash(this.password, 12); // 12라운드의 salt로 해시합니다. next(); }); // 메서드: 비밀번호가 해시된 비밀번호와 일치하는지 확인합니다. userSchema.methods.comparePassword = function(p) { return bcrypt.compare(p, this.password); }; // 메서드: 기분 기록을 기반으로 사용자 통계를 업데이트합니다. userSchema.methods.updateStats = function() { const moods = this.moodHistory.map(e => e.detectedMood).filter(Boolean); // 비어 있지 않은 모든 기분을 가져옵니다. this.stats.totalPlaylists = moods.length; if (moods.length > 0) { // 각 기분이 나타나는 횟수를 센다. const counts = moods.reduce((a, m) => { a[m] = (a[m] || 0) + 1; return a; }, {}); // 횟수가 가장 많은 기분을 찾습니다. this.stats.mostCommonMood = Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b, 'neutral'); } else { this.stats.mostCommonMood = 'neutral'; } // 재생 목록을 생성하는 시점을 기준으로 하루 중 가장 좋아하는 시간을 계산합니다. const hours = this.moodHistory.map(e => e.timestamp.getHours()).filter(h => !isNaN(h)); if (hours.length) { const avg = hours.reduce((a, b) => a + b, 0) / hours.length; this.stats.favoriteTime = avg < 6 ? 'night' : avg < 12 ? 'morning' : avg < 18 ? 'afternoon' : 'evening'; } }; // 다른 파일에서 사용할 수 있도록 모델을 내보냅니다. module.exports = mongoose.model('User', userSchema);

핵심 개념 설명:

ObjectId 참조 – friends 배열은 전체 사용자 객체를 저장하지 않습니다. 대신 다른 사용자를 가리키는 ObjectId(고유 식별자)를 저장합니다. 친구가 사용자 이름을 변경하더라도 모든 곳에서 업데이트할 필요 없이 참조를 따라가기만 하면 되므로 효율적입니다.
비정규화 – sharedBy(ObjectId)와 sharedByUsername(문자열)을 모두 저장합니다. 이를 비정규화라고 하며, 성능을 위해 동일한 데이터를 여러 곳에 저장합니다. 사용자 이름을 저장하므로 공유 재생 목록을 표시할 때마다 사용자를 찾을 필요가 없습니다.
미들웨어(.pre()) – 특정 작업 전에 자동으로 실행됩니다. 여기서는 보안을 위해 데이터베이스에 저장하기 전에 비밀번호를 해시합니다.
인스턴스 메서드(.methods) – 이는 user.comparePassword() 또는 user.updateStats()와 같이 개별 사용자 문서에서 호출할 수 있는 함수입니다.

3단계: 소셜 기능으로 HTML 프런트엔드 업데이트

이제 친구 관리 및 활동 피드를 포함하도록 사용자 인터페이스를 업데이트해 보겠습니다. HTML은 웹 페이지의 구조, 즉 어떤 요소가 표시되고 어디에 배치되는지를 정의합니다.

UI에 추가하는 내용:

친구 목록 섹션 – 현재 친구를 표시합니다.
친구 입력 추가 – 친구의 사용자 이름을 입력하는 텍스트 필드입니다.
최근 활동 피드 – 친구가 공유한 재생 목록을 표시합니다(클릭하면 전체 재생 목록을 볼 수 있음)
공유 체크박스 – 생성된 재생 목록을 친구와 공유하는 옵션입니다.
알림 영역 – 실시간 업데이트를 위한 팝업 알림입니다.

public/index.html을 다음으로 바꾸세요.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>마인드 리딩 음악 API - 소셜</title> <style> /* 기본 브라우저 스타일 재설정 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 그라데이션 배경을 사용한 본문 스타일링 */ body { font-family: 'Segoe UI', sans-serif; background: linear-gradient(135deg, #667eea, #764ba2); min-height: 100vh; color: #333; } /* 전체 대시보드의 컨테이너 */ .dashboard { max-width: 1000px; margin: 0 auto; padding: 20px; } /* 환영 메시지가 있는 헤더 섹션 */ .header { background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); /* 글래스모피즘을 위한 블러 효과 */ border-radius: 20px; padding: 30px; margin-bottom: 30px; text-align: center; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* 2열 그리드 레이아웃: 재생 목록 섹션(크게) 및 친구 섹션(작게) */ .main-content { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; } /* 두 섹션에 대한 카드 스타일링 */ .playlist-section, .friends-section { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); } /* 폼 요소 스타일링 */ input, textarea, button { width: 100%; padding: 12px; margin: 10px 0; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 16px; } /* 그라데이션 배경을 사용한 버튼별 스타일링 */ button { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; cursor: pointer; font-weight: 600; } /* 버튼에 대한 미묘한 호버 효과 */ button:hover { transform: translateY(-2px); } /* 개별 친구 항목 스타일링 */ .friend-item { background: #f8f9fa; padding: 10px; margin: 5px 0; border-radius: 8px; border-left: 4px solid #667eea; /* 왼쪽에 강조 색상 */ } /* 알림 팝업 스타일링(기본적으로 숨겨짐, 오른쪽에서 슬라이드 인) */ .notification { position: fixed; top: 20px; right: 20px; background: rgba(102,126,234,0.95); color: #fff; padding: 15px 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transform: translateX(400px); /* 화면 밖에서 시작 */ transition: transform .3s ease; z-index: 1000; max-width: 300px; } /* 알림 표시(슬라이드 인) */ .notification.show { transform: translateX(0); } /* 로그인 및 등록 양식 */ .login-section, .register-section { background: rgba(255,255,255,0.95); border-radius: 20px; padding: 30px; max-width: 400px; margin: 50px auto; } /* 공유를 위한 체크박스 컨트롤 */ .share-controls { display: flex; gap: 10px; margin: 10px 0; } .share-controls input[type=checkbox] { width: auto; margin-right: 5px; } </style> </head> <body> <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> <!-- 2열 레이아웃: 왼쪽은 재생 목록 섹션, 오른쪽은 친구 섹션 --> <div class="main-content"> <!-- 왼쪽 열: 재생 목록 생성 --> <div class="playlist-section"> <h2>💭 기분이 어떠세요?</h2> <textarea id="moodText" placeholder="기분을 설명해 주세요..."></textarea> <div class="share-controls"> <label><input type="checkbox" id="shareWithFriends"/>친구와 공유</label> </div> <button onclick="generatePlaylist()">🎧 재생 목록 생성</button> <!-- 재생 목록을 생성한 후 여기에 결과가 표시됩니다 --> <div id="result" style="display:none"></div> </div> <!-- 오른쪽 열: 친구 및 활동 --> <div class="friends-section"> <h3>👥 내 친구</h3> <div id="friendsList"></div> <h4>친구 추가</h4> <input type="text" id="friendUsername" placeholder="친구의 사용자 이름"/> <button onclick="addFriend()">친구 추가</button> <h4>최근 활동</h4> <!-- 친구들이 공유한 재생 목록이 여기에 표시됩니다 --> <div id="friendActivity">친구 활동이 여기에 표시됩니다...</div> </div> </div> </div> <!-- 알림 팝업을 위한 컨테이너 --> <div id="notificationArea"></div> <!-- Socket.io 라이브러리 포함(서버에서 자동으로 제공) --> <script src="/socket.io/socket.io.js"></script> <!-- 사용자 지정 JavaScript 포함 --> <script src="./js/app.js"></script> </body> </html>

HTML 구조 이해:

두 개의 주요 섹션: authSection(로그인/등록)과 dashboardSection(기본 앱). 한 번에 하나만 표시됩니다.
그리드 레이아웃: .main-content는 CSS 그리드를 사용하여 두 개의 열을 만듭니다(재생 목록 2fr, 친구 1fr). 즉, 재생 목록 섹션이 두 배 더 넓어집니다.
이벤트 핸들러: onclick="functionName()"은 브라우저에 요소를 클릭하면 JavaScript 함수를 호출하도록 지시합니다.
ID: 요소에는 고유한 ID(예: id="friendsList")가 있으므로 JavaScript에서 나중에 찾아서 수정할 수 있습니다.

4단계: Socket.io, 친구 엔드포인트 및 지속적 공유를 사용하여 server.js 업데이트

이제 친구 요청, 재생 목록 공유 및 실시간 통신을 처리하도록 서버를 업데이트합니다. 서버는 앱의 "두뇌"입니다. 요청을 처리하고, 데이터베이스와 통신하고, 사용자에게 응답을 다시 보냅니다.

서버에 추가되는 내용:

Socket.io 서버 – 서버와 클라이언트 간의 실시간 양방향 통신을 활성화합니다.
/api/add-friend 엔드포인트 – 친구 요청(상호 친구 관계)을 처리합니다.
/api/shared-playlists 엔드포인트 – 친구가 공유한 재생 목록을 반환합니다.
향상된 /api/personalized-playlist – 이제 공유된 재생 목록을 친구의 데이터베이스에 저장합니다.
소켓 이벤트 핸들러 – 실시간 이벤트(인증, 공유)를 수신하고 내보냅니다.

다음을 대체합니다. server.js 다음을 포함:

// .env 파일에서 환경 변수 로드 require('dotenv').config(); // 필수 모듈 가져오기 const path = require('path'); const express = require('express'); const http = require('http'); const socketIo = require('socket.io'); 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'); // 재생 목록 생성기 초기화 const playlistGen = new PlaylistGenerator(); const PORT = process.env.PORT || 3000; // MongoDB 데이터베이스에 연결 async 함수 connectDB() { try { console.log('🔗 MongoDB에 연결 중…'); await mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true }); console.log('✅ MongoDB가 성공적으로 연결되었습니다!'); } catch (err) { console.error('❌ MongoDB 연결에 실패했습니다:', err.message); process.exit(1); // 데이터베이스 연결에 실패하면 종료 } } connectDB(); // Express 앱과 HTTP 서버 생성 const app = express(); const server = http.createServer(app); // HTTP 서버 위에 Socket.io 초기화 const io = socketIo(server); // 온라인 사용자를 추적하는 맵: userId => socketId // 이를 통해 현재 연결된 특정 사용자에게 메시지를 보낼 수 있습니다 const connectedUsers = new Map(); // Socket.io 연결 핸들러 - 클라이언트가 연결될 때 실행 io.on('connection', socket => { console.log('🔗 Socket connected:', socket.id); // 'authenticate' 이벤트 처리 - 클라이언트가 자신이 누구인지 알려줍니다.socket.on('authenticate', ({ userId, username }) => { // 나중에 메시지를 보낼 수 있도록 이 사용자의 소켓 ID를 저장합니다.connectedUsers.set(userId, socket.id); socket.userId = userId; // 이 소켓에 userId를 첨부합니다.socket.username = username; // 이 소켓에 사용자 이름을 첨부합니다.console.log(`✅ 인증된 사용자: ${username}`); }); // 'share_playlist' 이벤트 처리 - 사용자가 친구와 공유하려고 합니다.socket.on('share_playlist', async ({ friendName, mood, playlist, friendIds }) => { try { // 모든 친구 ID를 반복합니다.for (let friendId of friendIds) { // 이 친구의 소켓 ID를 가져옵니다(온라인 상태인 경우) const sid = connectedUsers.get(friendId.toString()); if (sid) { // 친구가 온라인 상태입니다! 실시간 알림을 보냅니다. io.to(sid).emit('friend_shared_playlist', { friendName, mood, playlist }); } // 친구가 오프라인 상태인 경우 로그인하면 활동 피드에서 재생 목록이 표시됩니다. } } catch (err) { console.error('재생 목록 공유 오류:', err); } }); // 연결 해제 처리 - 온라인 맵에서 사용자 제거 socket.on('disconnect', () => { if (socket.userId) { connectedUsers.delete(socket.userId); console.log(`👋 연결 해제됨: ${socket.username}`); } }); }); // JSON 요청 본문을 구문 분석하는 미들웨어 app.use(express.json()); // 'public' 폴더에서 정적 파일 제공(HTML, CSS, 이미지) app.use(express.static(path.join(__dirname, 'public'))); // ===== API 엔드포인트 ===== // POST /api/register - 새 사용자 계정 만들기 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 exists = await User.findOne({ $or: [{ username }, { email }] }); if (exists) { return res.status(400).json({ error: '사용자 이름이나 이메일이 이미 존재합니다. '존재합니다' }); } // 새 사용자를 생성하고 저장합니다(비밀번호는 사전 저장 미들웨어에 의해 자동으로 해시됩니다) const user = new User({ username, email, password }); await user.save(); res.status(201).json({ message: '사용자가 성공적으로 생성되었습니다' }); } catch (err) { console.error('등록 오류:', err); res.status(500).json({ error: '등록에 실패했습니다' }); } }); // POST /api/login - 사용자 인증 및 JWT 토큰 반환 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: 'Invalid credentials' }); } // JWT 토큰 생성(임시 신분증과 유사) const token = jwt.sign( { userId: user._id }, // 페이로드(인코딩하는 내용) process.env.JWT_SECRET, // 비밀 키(보안 유지) { expiresIn: '7d' } // 토큰은 7일 후에 만료됩니다. ); // 토큰을 클라이언트로 다시 보냅니다. res.json({ token, user: { username: user.username, email: user.email, friends: user.friends } }); } catch (err) { console.error('로그인 오류:', err); res.status(500).json({ error: '로그인 실패' }); } }); // GET /api/profile - 현재 사용자의 프로필 가져오기 // 'auth' 미들웨어는 JWT 토큰을 검증하고 사용자를 req.user에 연결합니다. app.get('/api/profile', auth, async (req, res) => { try { // 사용자 통계 업데이트 req.user.updateStats(); await req.user.save(); // 친구 배열 채우기(ObjectId를 실제 사용자 객체로 교체) await req.user.populate('friends', 'username _id'); const { username, email, friends } = req.user; res.json({ _id: req.user._id, username, email, friends: friends.map(f => ({ username: f.username, _id: f._id })) }); } catch (err) { console.error('프로필 오류:', err); res.status(500).json({ 오류: '프로필을 로드하지 못했습니다' }); } }); // GET /api/shared-playlists - 친구가 공유한 재생 목록을 가져옵니다. app.get('/api/shared-playlists', auth, async (req, res) => { try { // 최근 공유 재생 목록 10개를 가장 먼저 정렬하여 가져옵니다. const sharedPlaylists = req.user.sharedPlaylists .sort((a, b) => b.timestamp - a.timestamp) // 타임스탬프를 기준으로 내림차순으로 정렬합니다. .slice(0, 10); // 처음 10개를 가져옵니다. res.json({ sharedPlaylists }); } catch (err) { console.error('공유 재생 목록 오류:', err); res.status(500).json({ error: '공유 재생 목록을 로드하지 못했습니다.' }); } }); // POST /api/add-friend - 친구 추가(상호 우정) app.post('/api/add-friend', auth, async (req, res) => { try { const { friendUsername } = req.body; // 사용자 이름으로 친구 찾기 const friend = await User.findOne({ username: friendUsername }); if (!friend) { return res.status(404).json({ error: '사용자를 찾을 수 없습니다' }); } // 이미 친구인지 확인 if (req.user.friends.some(friendId => friendId.toString() === friend._id.toString())) { return res.status(400).json({ error: '이 사용자와 이미 친구입니다' }); } // 각 사용자를 다른 사용자의 친구 목록에 추가(상호 우정) req.user.friends.push(friend._id); friend.friends.push(req.user._id); // 두 사용자 모두 저장 await req.user.save(); await friend.save(); res.json({ message: '친구가 성공적으로 추가되었습니다', friendId: friend._id }); } catch (err) { console.error('친구 추가 오류:', err); console.error('오류 스택:', err.stack); res.status(500).json({ error: '친구 추가에 실패했습니다' }); } }); // POST /api/personalized-playlist - 기분 기반 재생 목록 생성 app.post('/api/personalized-playlist', auth, async (req, res) => { try { const { text, shareWithFriends = false, playlistSize = 15 } = req.body; if (!text) { return res.status(400).json({ error: '기분이 어떤지 알려주세요!' }); } // 1. 사용자 텍스트에서 기분 분석 const moodAnalysis = moodAnalyzer.analyzeMood(text); // 2. 기분에 따라 재생 목록 생성 const playlist = await playlistGen.generatePlaylist( moodAnalysis.mood, moodAnalysis.intensity, playlistSize ); // 3. 사용자의 기분 기록에 저장 const entry = { text, detectedMood: moodAnalysis.mood, confidence: moodAnalysis.confidence, isShared: shareWithFriends, sharedWith: shareWithFriends ? req.user.friends : [], playlistGenerated: playlist.map(t => ({ trackName: t.name, artist: t.artist, spotifyId: t.id })) }; req.user.moodHistory.push(entry); req.user.updateStats(); await req.user.save(); // 4. 공유가 활성화된 경우 각 친구의 sharedPlaylists 배열에 저장합니다.if (shareWithFriends && req.user.friends.length > 0) { const sharedPlaylistData = { sharedBy: req.user._id, sharedByUsername: req.user.username, mood: moodAnalysis.mood, playlist: playlist.slice(0, 5).map(t => ({ // 처음 5개 트랙 공유 name: t.name, artist: t.artist, album_image: t.album_image, id: t.id })) }; // 모든 친구를 순회하며 이 플레이리스트를 그들의 sharedPlaylists에 추가합니다. for (let friendId of req.user.friends) { const friend = await User.findById(friendId); if (friend) { friend.sharedPlaylists.push(sharedPlaylistData); await friend.save(); } } } // 5. 클라이언트에게 응답을 다시 보냅니다. res.json({ moodAnalysis, playlist, personalizedMessage: `귀하의 기록을 기반으로, 여기에 완벽한 ${moodAnalysis.mood} 플레이리스트가 있습니다!` }); } catch (err) { console.error('개인화된 플레이리스트 오류:', err); console.error('오류 스택:', err.stack); res.status(500).json({ error: '개인화된 플레이리스트를 생성하지 못했습니다. 재생 목록입니다. 다시 시도하세요.' }); } }); // 대체: API가 아닌 경로에 대해 index.html 제공(SPA 라우팅의 경우) app.use((req, res, next) => { if (req.method === 'GET' && !req.path.startsWith('/api/')) { res.sendFile(path.join(__dirname, 'public', 'index.html')); } else { next(); } }); // 전역 오류 처리기 app.use((err, req, res, next) => { console.error('전역 오류:', err); res.status(500).json({ error: '내부 서버 오류', 세부 정보: err.message }); }); // 서버 시작 server.listen(PORT, () => { console.log(`🚀 http://localhost:${PORT}에서 실행되는 서버`); });

핵심 서버 개념 설명:

미들웨어 – 경로 핸들러에 도달하기 전에 요청을 처리하는 함수입니다. express.json()은 요청 본문에서 JSON을 구문 분석하고, auth는 JWT 토큰을 확인합니다.
async/await – 비동기 작업(예: 데이터베이스 쿼리)을 처리하기 위한 최신 JavaScript 구문입니다. await는 promise가 해결될 때까지 실행을 일시 중지합니다.
HTTP 상태 코드 – 결과를 나타내는 숫자입니다. 200 = 성공, 201 = 생성됨, 400 = 잘못된 요청, 401 = 승인되지 않음, 404 = 찾을 수 없음, 500 = 서버 오류입니다.
Socket.io 이벤트 – 클라이언트와 서버 간에 주고받는 명명된 메시지입니다. socket.on()은 이벤트를 수신하고, socket.emit()은 이벤트를 전송합니다.
JWT(JSON 웹 토큰) – 사용자를 식별하는 안전한 방법입니다. 사용자가 로그인하면 토큰을 제공합니다. 이들은 자신이 누구인지 증명하기 위해 각 요청과 함께 이 토큰을 보냅니다.

5단계: 프런트엔드 JavaScript 업데이트(public/js/app.js)

마지막으로 프런트엔드를 대화형으로 만드는 JavaScript를 추가해 보겠습니다. 이 코드는 사용자 브라우저에서 실행되며 버튼 클릭, API 요청, 실시간 업데이트와 같은 작업을 처리합니다.

이 JavaScript가 하는 일:

인증 관리 – 로그인, 등록, 로그아웃 및 토큰 저장
Socket.io 초기화 – 서버에 연결하고 실시간 이벤트를 수신
API 요청 수행 – fetch()를 사용하여 서버 엔드포인트와 통신
UI 업데이트 – 서버의 데이터를 기반으로 HTML 요소를 동적으로 생성
사용자 상호 작용 처리 – 버튼 클릭, 양식 제출 등

public/js/app.js를 튜토리얼에 표시된 전체 코드로 바꾸세요...

(app.js 코드 블록은 다음과 정확히 같습니다. (로그인, 등록, 공유 재생목록 로드 등 모든 기능이 포함되어 있습니다.)

6단계: 소셜 음악 API 테스트

이제 모든 것을 테스트할 차례입니다! 다음 단계를 주의 깊게 따르세요.

서버 시작: 터미널에서 npm start를 실행합니다. "MongoDB 연결됨!" 및 "서버가 http://localhost:3000에서 실행 중입니다"와 같은 메시지가 표시됩니다.
브라우저 창 두 개 열기: http://localhost:3000을 두 개의 별도 브라우저 창(또는 일반 창 하나와 시크릿 창 하나)에서 엽니다. 두 명의 다른 사용자를 시뮬레이션합니다.
사용자 1 등록: 첫 번째 창에서 "가입"을 클릭하고 사용자(예: 사용자 이름: "alice")를 만듭니다.
사용자 2 등록: 두 번째 창에서 다른 사용자(예: 사용자 이름: "bob")를 만듭니다.
서로 친구 추가: Alice 창에서 "친구 추가" 필드에 "bob"을 입력하고 "친구 추가"를 클릭합니다. Bob 창에서도 같은 작업을 합니다("alice" 입력). 친구 목록에서 서로의 이름을 확인할 수 있습니다!
재생목록 공유: Alice 창에서 기분 텍스트 상자에 "오늘 정말 행복해!"와 같은 내용을 입력합니다. "친구와 공유" 체크박스를 체크한 다음 "재생 목록 생성"을 클릭하세요.
마법 같은 일이 일어나는 모습을 지켜보세요.
- 밥이 온라인 상태(창이 계속 열려 있음)이면 오른쪽에서 알림 슬라이드가 나타납니다!
- 밥의 "최근 활동" 섹션에도 앨리스의 공유 재생 목록이 표시됩니다.
- 밥은 공유 재생 목록을 클릭하여 전체 노래 목록을 볼 수 있습니다.
- 밥이 로그아웃했다가 나중에 다시 로그인하면 공유 재생 목록이 그대로 남아 있습니다!

모든 것이 함께 작동하는 방식 이해

앨리스가 밥과 재생 목록을 공유할 때 어떤 일이 발생하는지 추적해 보겠습니다.

앨리스가 "친구와 공유"를 체크하고 "재생 목록 생성"을 클릭합니다.
프런트엔드가 shareWithFriends: true를 사용하여 /api/personalized-playlist에 POST 요청을 보냅니다.
서버가 앨리스의 기분을 분석하고 Spotify API를 사용하여 재생 목록을 생성합니다.
서버가 재생 목록을 앨리스의 moodHistory 배열에 저장합니다.
서버가 앨리스의 친구(밥 포함)를 순환하고 MongoDB에 있는 각 친구의 sharedPlaylists 배열에 재생 목록을 추가합니다.
프런트엔드가 다음을 내보냅니다. share_playlist 온라인 친구에게 알리는 Socket.io 이벤트
서버가 이벤트를 수신하고 Bob이 온라인인지 확인합니다(connectedUsers 맵에서 확인).
Bob이 온라인이면 서버가 재생 목록 미리보기와 함께 friend_shared_playlist 이벤트를 Bob에게 보냅니다.
Bob의 브라우저가 이벤트를 수신하고 showNotification()을 호출하여 팝업을 표시합니다.
Bob의 브라우저도 loadSharedPlaylists()를 호출하여 활동 피드를 새로 고칩니다.
Bob이 오프라인이면 다음에 로그인할 때 활동 피드에서 재생 목록이 표시됩니다(sharedPlaylists 배열에 저장되어 있기 때문).

만든 것

축하합니다! 모든 기능을 갖춘 소셜 음악 앱을 성공적으로 구축했습니다! 다음은 달성한 내용입니다.

🤝 친구 시스템 – 사용자는 사용자 이름으로 친구를 추가할 수 있습니다. 친구 관계는 상호적이며(두 사용자가 서로 친구가 됨) MongoDB에 ObjectId 참조로 저장됩니다.
💾 영구 재생 목록 공유 – 공유된 재생 목록은 각 친구의 sharedPlaylists 배열에 있는 데이터베이스에 저장됩니다. 즉, 사용자가 로그아웃한 후에도 데이터가 유지됩니다.
📡 실시간 알림 – Socket.io를 사용하면 온라인 사용자는 친구가 재생 목록을 공유하면 즉시 알림을 받습니다. 페이지를 새로 고칠 필요가 없습니다!
📰 활동 피드 – 사용자는 모든 친구가 최근에 공유한 재생 목록을 최신 순으로 정렬하여 볼 수 있습니다. 재생 목록을 클릭하면 전체 트랙 목록이 표시됩니다.
🔐 보안 인증 – 비밀번호는 bcrypt로 해시되고(일반 텍스트로 저장되지 않음) JWT 토큰이 API 요청을 인증하는 데 사용됩니다.
⏱️ 오프라인 친화적 – 친구는 재생 목록이 공유될 때 온라인이 아니더라도 공유된 재생 목록을 볼 수 있습니다. 모든 것이 데이터베이스에 저장됩니다!

학습한 핵심 개념

Socket.io(WebSockets)를 사용한 실시간 통신
MongoDB ObjectId 참조를 사용한 데이터베이스 관계
성능을 위한 비정규화(ObjectId와 사용자 이름 모두 저장)
RESTful API 설계(적절한 HTTP 상태 코드가 있는 GET, POST 엔드포인트)
인증 및 요청 처리를 위한 미들웨어 패턴
비동기 작업 처리를 위한 Async/await
UI를 동적으로 업데이트하기 위한 DOM 조작
Socket.io 이벤트를 사용한 이벤트 기반 아키텍처

일반적인 문제 해결

"MongoDB에 연결할 수 없습니다." – MongoDB 서버가 실행 중이고 .env의 MONGODB_URI가 올바른지 확인하세요.
로그인 시 "잘못된 사용자 이름" 오류 발생 – 사용자 이름과 비밀번호를 다시 확인하세요. 대소문자를 구분합니다!
친구 추가 시 "사용자를 찾을 수 없습니다." 오류 발생 – 사용자 이름을 정확하게 입력했는지 확인하세요(대소문자 구분). 먼저 등록한 사용자여야 합니다.
공유 재생 목록이 표시되지 않습니다. – 브라우저 콘솔(F12)에서 오류를 확인하세요. 두 사용자 모두 친구이고 "친구와 공유" 체크박스가 선택되어 있는지 확인하세요.
실시간 알림이 작동하지 않습니다. – Socket.io가 연결되어 있는지 확인하세요. 브라우저 콘솔에서 "🔗 서버에 연결됨"을 확인하세요.

다음 단계 및 확장 아이디어

이제 작동하는 소셜 음악 앱이 있으니, 이를 더욱 발전시킬 수 있는 몇 가지 아이디어를 소개합니다.

친구 요청 – 즉시 친구 관계를 맺는 대신, 사용자에게 수락 또는 거부할 수 있는 요청을 보내도록 요구합니다.
개인 메시지 – Socket.io를 사용하여 채팅 시스템을 추가하여 친구들이 서로 메시지를 주고받을 수 있도록 합니다.
재생 목록 댓글 – 사용자가 공유 재생 목록에 댓글을 달 수 있도록 합니다.
트랙 좋아요/싫어요 – 재생 목록의 각 트랙에 좋아요/싫어요 버튼 추가
음악 취향 호환성 – 두 사용자의 음악 취향이 얼마나 유사한지에 따라 백분율을 계산합니다.
사용자 검색 – 사용자 이름으로 사용자를 찾을 수 있는 검색 기능을 추가합니다.
삭제/친구 삭제 – 친구 삭제 또는 공유 재생 목록 삭제 기능 추가
프로필 페이지 – 사용자 통계, 좋아하는 분위기, 최근 재생 목록 표시
공동 재생 목록 – 여러 친구가 공유 재생 목록에 트랙 추가 가능
재생 목록 기록 – 이전에 생성한 모든 재생 목록 보기

실시간 기능과 영구 데이터 저장 기능을 갖춘 풀스택 소셜 음악 앱을 만들었습니다! 최신 웹 개발을 이해하는 데 필요한 탄탄한 기초가 됩니다. 계속해서 실험하고 발전시켜 보세요!🎵✨