[유튜브 뮤직 클론코딩] 5. MariaDB + NodeJS 연동하기

2022. 6. 8. 22:02·개인 프로젝트/[2022] 유튜브 뮤직 클론코딩
반응형

이번엔 지난번 포스팅에 적었던대로 데이터베이스를 연동하여 데이터를 가져오도록 해보았다.

우선 MariaDB 를 깔고, NodeJS 에 연동하기 위해 MySQL 모듈을 설치했다.

 

이걸 설치할 당시 가장 최근 버전이었던 10.8.3 버전을 깔았는데

오늘 다시 들어가보니 10.9 버전이 나왔다.

그런데 1년밖에 지원안하니까 10.6을 까는걸 권장한다고 나와있다..

 

그리고 어제 설치할 때는 Harukasan 에서 다운로드를 할 수가 없었다.

그냥 아예 명령어를 복사 붙여넣기 했는데 404에러가 떴다.

그래서 YongBok.net 으로 받았다.

 

아직은 Express하고 mysql 밖에 없다

그리고 다음과 같이 코드를 작성했다.

 

DB에 접속하기 위한 코드 부분을 따로 분리했다.

DB서버와 nodejs 서버가 같은 곳에 있어서 localhost 로 접속하도록 했다.

 

db연결 정보가 담긴 자바스크립트 모듈을 가져온다.

그리고 노래 정보를 담을 객체를 생성하는 생성자 함수를 만든다.

 

클라이언트에게 json으로 보내줄 resultObj 를 미리 준비하고,

쿼리를 실행해서 쿼리에 오류가 없다면 resultObj에 아까 미리 만들었던 노래 정보 객체를 담아서

클라이언트에게 보내준다.

 

이제 노드 앱을 실행시키고 접속을 해보자.

데이터베이스에는 다음과 같이 데이터를 넣어두었다.

 

노래 하나 말고는 아직 노래 이미지 파일을 서버에 넣어두지 않아서 그냥 임의 경로를 저장했다.

 

실행 결과는 아래와 같다.

 

 

다음에 할 일은 각 노래를 클릭했을 때 음악 재생창을 디자인하고 띄우도록 해볼 것이다.

추가적으로 로그인 기능도 직접 구현해볼 생각이다.

로그인 기능을 구현하다보면 세션과 쿠키에 대한 부분도 공부할 수 있을 것 같다.

반응형
저작자표시 비영리 변경금지 (새창열림)

'개인 프로젝트 > [2022] 유튜브 뮤직 클론코딩' 카테고리의 다른 글

[유튜브 뮤직 클론코딩] 7. 로그인 시 발생할 수 있는 에러처리  (0) 2022.08.16
[유튜브 뮤직 클론코딩] 6. 프로젝트 구조 수정과 로그인 구현  (0) 2022.08.05
[유튜브 뮤직 클론코딩] 4. Express 프레임워크 적용과 API 서버에서 데이터 받기  (0) 2022.06.05
[유튜브 뮤직 클론코딩] 3. Fetch API & Node.js 에서 CORS 해결하기  (0) 2022.05.20
[유튜브 뮤직 클론코딩] 2. nginx에 서브도메인 등록하기  (0) 2022.05.16
'개인 프로젝트/[2022] 유튜브 뮤직 클론코딩' 카테고리의 다른 글
  • [유튜브 뮤직 클론코딩] 7. 로그인 시 발생할 수 있는 에러처리
  • [유튜브 뮤직 클론코딩] 6. 프로젝트 구조 수정과 로그인 구현
  • [유튜브 뮤직 클론코딩] 4. Express 프레임워크 적용과 API 서버에서 데이터 받기
  • [유튜브 뮤직 클론코딩] 3. Fetch API & Node.js 에서 CORS 해결하기
에버듀
에버듀
개발은 좋은데 뭘로 개발할까
  • 에버듀
    Blog. 에버듀
    에버듀
  • 전체
    오늘
    어제
    • 분류 전체보기 (615)
      • 개인 프로젝트 (43)
        • 토이 프로젝트 (3)
        • [2020] 카카오톡 봇 (9)
        • [2021] 코드악보 공유APP (22)
        • [2022] 유튜브 뮤직 클론코딩 (9)
        • [2025] 한글 SQL 데이터베이스 (0)
      • 팀 프로젝트 (22)
        • [2020] 인공지능 숫자야구 (4)
        • [2022] OSAM 온라인 해커톤 (10)
        • [2024] GDSC 프로젝트 트랙 (6)
        • [2025] 큰소리 웹 페이지 (2)
      • CS (335)
        • 자료구조 (19)
        • 어셈블리 (41)
        • 멀티미디어응용수학 (7)
        • 컴퓨터 구조 (29)
        • 알고리즘 분석 (4)
        • 컴퓨터 네트워크 (38)
        • 프로그래밍언어론 (15)
        • HCI 윈도우즈프로그래밍 (26)
        • 기초데이터베이스 (29)
        • 운영체제 (23)
        • 오토마타 (24)
        • 문제해결기법 (11)
        • 블록체인 (22)
        • 소프트웨어공학 (21)
        • 기계학습심화 (12)
        • 컴퓨터그래픽스와 메타버스 (8)
        • 분산시스템특론 (6)
      • 자기계발 (45)
        • 생각 정리 (23)
        • 대외활동 (11)
        • 동아리 (7)
        • 자격증 (3)
        • 머니 스터디 (1)
      • 알고리즘 (PS) (107)
        • BOJ (101)
        • Programmers (5)
        • 알고리즘 이모저모 (1)
      • WEB(BE) (8)
        • express.js (1)
        • Spring & Spring Boot (7)
      • WEB(FE) (2)
        • html, css, js (1)
        • React.js (1)
      • Tool & Language (6)
        • Edit Plus (1)
        • Git (1)
        • Python3 (2)
        • Java (2)
      • Infra (12)
        • AWS (1)
        • Oracle Cloud (8)
        • Firebase (2)
        • Network (1)
      • Android (18)
        • Java (6)
        • Flutter (12)
      • Window (2)
        • Visual Studio 없이 WPF (1)
        • MFC (1)
      • 독서 (14)
        • Inside Javascript (7)
        • Database Internals (6)
        • 한 글 후기 (1)
  • 링크

    • github
    • website
  • 인기 글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.6
에버듀
[유튜브 뮤직 클론코딩] 5. MariaDB + NodeJS 연동하기
상단으로

티스토리툴바