Django와 Spotify로 노래 추천 웹 개발 - 1

5일간 Spotify apI를 사용하여 노래추천 웹 사이트를 만드는 프로젝트 1일차

2023.04.24 ~ 2023.04.28 동안 진행한 Django Web구현 프로젝트입니다. Playdata Encore에서 약 1달간 자바 및 웹에 대해 배우고, 1주정도 Django에 대해 배운 후 진행한 프로젝트입니다.

사용 스택

• MySQL
• Django
• git
• Elastic Search

DB설계

• 크게 유저 계정 관리 앱과 노래 앱으로 분리하여 장고에서 만들기로 했고, 그중 제가 담당할 부분은 유저 관리 부분입니다.
• 계정관리 파트에서 우선적으로 만들어야 할 테이블은 회원가입시 받을 account table과 계정별 playlist를 담아 둘 테이블이라고 판단했습니다.
• UML로 그려볼까도 생각했으나 저번주 내내 정보처리기사 공부를 하느라 시간이 없어 간단히 그림으로 나타냈습니다.
  

  

생성한 장고 앱 상황

데이터베이스 테이블 제작

• 일단 관계형 데이터베이스는 MySQL을 사용하기로 했기 때문에 필요한 설정을 해줍니다.

• 테이블을 다시 다듬어 주고 생성해줍니다.
  

  

데이터 입력 예시

from account.models import Playlist, Account
import datetime
q = Account(username = "test", password = "qwer1234", email = "test@test.com", birth = datetime.date(1999,9,9),phone_number = "010-1234-5678")
q.save()
q = Playlist(username_id = "test", music_name = "good", music_url = '' , image_url = '')
q.save()

Account

Playlist

로그인 구현

• 제가 작성한 django 카테고리의 6. 로그인 로그아웃 구현하기를 참고시면 될 것 같습니다.
• 해당 방식을 적용하여 로그인 회원가입을 제작했습니다.

발견된 문제점

• 해당 방식으로 교안에서 배운 대로 로그인 회원가입을 구현할 경우 제가 제작한 DB에 데이터가 들어가지 않음을 볼 수 있었습니다.
• 해결방안으로 아예 로그인 회원가입을 처음부터 구현하는 방식과 account 테이블을 장고에서 만들어주는 테이블로 변경하고, FK를 새로 지정해 주는 방법이 떠올랐고 후자로 database를 변경하고자 시도했습니다.

from django.db import models
from django.contrib.auth.models import User


# class Account(models.Model):
#     username = models.CharField(max_length=20, primary_key=True)
#     password = models.CharField(max_length=40, null=False)
#     email = models.EmailField()
#     birth = models.DateTimeField()
#     phone_number = models.CharField(max_length=20)

class Playlist(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    music_name = models.CharField(max_length=40)
    music_url = models.TextField()
    image_url = models.TextField()

위 코드처럼 Account 데이터베이스를 주석처리 해주었고, Playlist 데이터베이스는 장고에서 제공하는 auth.models.User의 기본키를 FK로 설정하도록 지정해 주었습니다.(auth.models.User를 찾느라 삽질 한참 했지요 ㅎ..)

데이터 삽입 시도

데이터가 잘 들어가는 것이 확인이 되었습니다.

from account.models import Playlist
import datetime

q = Playlist(user_id = "1", music_name = "good", music_url = '' , image_url = '')
q.save()

MySQL  AWS 연동

• 팀원과의 데이터 연동과 배포를 쉽게 하기 위해 코딩애플님의 아마존 웹 서비스로 RDS로 MY SQL 실행하고 접속하기를 참고하여 AWS로 데이터를 연동했습니다.
• 다만 테이블이 아직 확립된 상태가 아니기 때문에 2개의 database를 만들었고, 최종단계에서 데이터를 합치고자 합니다.
• 유튜브 링크 : https://www.youtube.com/watch?v=wdaMD6yQVh4&feature=youtu.be

시작 페이지 구현

• 시작 페이지에서 사용자가 로그인을 할 경우에만 메인 페이지로 넘어갈 수 있도록 제작하였습니다.
• 로그인을 한다면 자동으로 메인 페이지로 넘어갑니다.
• 시작하기를 누를 경우 로그인이 되어있는 경우 메인 페이지로 넘겨주고, 로그인이 되어있지 않는다면 로그인 창으로 이동합니다.

메인 페이지

• 검색창과 나의 플레이리스트 버튼, 추천곡 버튼이 들어가게 될 부분으로 같이 프로젝트를 만드는 우상욱 님이 제작 중입니다.

플레이리스트 페이지

• 데이터베이스에 저장되어 있는 데이터들을 모아 보여주는 페이지입니다. 아직 Spotify의 데이터가 넘어오지 않았기에 노래 이름만 출력하도록 미리 만들어 두었습니다.

css도 bootstrap을 사용하자만 정했을 뿐 콘셉트에 맞게끔 어떤 식으로 꾸밀지도 통일하지 않았기에 조잡한 모습을 보이고 있습니다.

내일은 이어서 Spotify에서 데이터를 가져온 뒤 플레이리스트, 추천곡 페이지의 틀을 만들어 보도록 하겠습니다.