자바스크립트와 Vercel을 사용한 음악 스트리밍 애플리케이션 개발하기

10 Nov 2023

vercel

오늘은 자바스크립트와 Vercel을 사용하여 음악 스트리밍 애플리케이션을 개발하는 방법에 대해 알아보겠습니다. 이 프로젝트를 통해 웹에서 음악을 스트리밍하고 재생할 수 있는 간단한 애플리케이션을 만들어볼 수 있습니다.

1. 프로젝트 설정

먼저, 프로젝트를 위한 디렉토리를 생성하고 자바스크립트 파일을 생성합니다. 이번 예제에서는 index.html과 script.js 파일을 생성하도록 하겠습니다.

2. 음악 데이터 가져오기

음악 데이터를 가져오기 위해 서드파티 API를 사용할 수도 있지만, 여기서는 간단한 예제를 위해 하드코딩 방식을 사용하겠습니다. script.js 파일에 다음 코드를 추가합니다.

// 음악 데이터 배열
const songs = [
  { title: 'Song 1', artist: 'Artist 1', duration: '3:30' },
  { title: 'Song 2', artist: 'Artist 2', duration: '4:15' },
  { title: 'Song 3', artist: 'Artist 3', duration: '2:45' },
];

// 음악 데이터를 보여주는 함수
function displaySongs() {
  const songList = document.querySelector('.song-list');

  // 각 음악 데이터를 순회하며 HTML로 변환하여 추가
  songs.forEach((song) => {
    const listItem = document.createElement('li');
    listItem.innerHTML = `${song.title} - ${song.artist} (${song.duration})`;
    songList.appendChild(listItem);
  });
}

// 애플리케이션 실행시 음악 데이터를 보여줌
displaySongs();

위 코드는 음악 데이터 배열을 생성하고, displaySongs() 함수를 통해 각 음악 데이터를 HTML로 변환하여 화면에 출력하는 기능을 구현한 것입니다.

3. Vercel로 배포하기

이제 Vercel을 사용하여 애플리케이션을 배포해보겠습니다. Vercel은 정적 웹사이트를 간편하게 호스팅할 수 있는 플랫폼입니다.

Vercel 웹사이트에 접속하여 계정을 생성하고 로그인합니다.
프로젝트 디렉토리에서 Terminal 또는 명령 프롬프트를 열고 vercel 명령어를 실행합니다.
이후에 뜨는 프롬프트에서 프로젝트 디렉토리의 경로를 입력합니다.
Vercel은 자동으로 프로젝트를 빌드하고 배포합니다.
배포가 완료되면 Vercel은 배포된 애플리케이션의 URL을 제공합니다.

이제 Vercel로 배포된 애플리케이션에 접속하여 음악 데이터가 정상적으로 표시되는지 확인해보세요.

마무리

이제 자바스크립트와 Vercel을 사용하여 간단한 음악 스트리밍 애플리케이션을 개발하는 방법에 대해 알아보았습니다. 더 많은 기능을 추가하여 완전한 음악 플레이어로 발전시킬 수도 있습니다. Happy coding!

References:

#javascript #vercel