Next.js로 음악 스트리밍 앱 개발하기

18 Oct 2023

nextjs

음악 스트리밍 앱은 많은 사람들에게 인기가 있는 어플리케이션입니다. 현대 사회에서 음악은 사람들의 일상 생활에 큰 역할을 하며, 이에 맞춰 음악 스트리밍 앱의 수요도 계속해서 증가하고 있습니다.

이번 글에서는 Next.js를 사용하여 음악 스트리밍 앱을 개발하는 방법에 대해 알아보겠습니다.

1. 프로젝트 셋업

먼저, Next.js 프로젝트를 셋업해야 합니다. Next.js는 React 기반의 프레임워크로, 간편한 개발 환경과 서버 사이드 렌더링을 지원합니다. 아래의 명령어를 사용하여 Next.js 프로젝트를 생성합니다.

npx create-next-app music-streaming-app

프로젝트를 생성한 후, 생성된 디렉토리로 이동하여 개발 서버를 실행합니다.

cd music-streaming-app
npm run dev

2. 라우팅 설정

음악 스트리밍 앱에서는 다양한 페이지가 필요합니다. 예를 들어, 홈 페이지, 음악 재생 페이지, 검색 페이지 등이 있을 수 있습니다. 이를 위해 Next.js에서 제공하는 라우팅 기능을 사용하여 각 페이지를 구현해야 합니다.

먼저, 프로젝트 디렉토리에 pages 디렉토리를 생성하고, 각 페이지에 대한 파일을 생성합니다. 예를 들어, 홈 페이지를 위한 index.js 파일을 생성합니다.

// pages/index.js

import React from 'react';

const HomePage = () => {
  return (
    <div>
      <h1>Welcome to Music Streaming App!</h1>
    </div>
  );
};

export default HomePage;

위의 예제는 간단한 홈 페이지 컴포넌트를 정의한 것입니다.

3. 데이터 흐름 관리

음악 스트리밍 앱에서는 데이터를 효과적으로 관리해야 합니다. 이를 위해 Next.js에서는 상태 관리 라이브러리인 Redux를 사용할 수 있습니다.

먼저, 필요한 라이브러리를 설치합니다.

npm install redux react-redux

그리고, Redux 스토어 설정 및 리듀서를 작성합니다. 예를 들어, 음악 재생 상태를 관리하는 리듀서를 작성할 수 있습니다.

// reducers/player.js

const initialState = {
  isPlaying: false,
  currentSong: null,
};

const playerReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'PLAY_SONG':
      return {
        ...state,
        isPlaying: true,
        currentSong: action.payload,
      };
    case 'PAUSE_SONG':
      return {
        ...state,
        isPlaying: false,
      };
    default:
      return state;
  }
};

export default playerReducer;

이제, 스토어 설정과 리듀서를 연결하기 위해 store.js 파일을 생성합니다.

// store.js

import { createStore, combineReducers } from 'redux';
import playerReducer from './reducers/player';

const rootReducer = combineReducers({
  player: playerReducer,
});

const store = createStore(rootReducer);

export default store;

마지막으로, 프로젝트의 _app.js 파일에서 스토어를 Provider로 감싸줍니다.

// pages/_app.js

import React from 'react';
import { Provider } from 'react-redux';
import store from '../store';

const MyApp = ({ Component, pageProps }) => {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
};

export default MyApp;

4. 뮤직 플레이어 구현

음악 스트리밍 앱에서 핵심 기능인 뮤직 플레이어를 구현해야 합니다. 이를 위해 react-player 라이브러리를 사용할 수 있습니다.

먼저, 필요한 라이브러리를 설치합니다.

npm install react-player

그리고, 플레이어 컴포넌트를 작성합니다.

// components/Player.js

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import ReactPlayer from 'react-player';

const Player = () => {
  const dispatch = useDispatch();
  const { currentSong, isPlaying } = useSelector(state => state.player);

  const handlePlay = () => {
    dispatch({ type: 'PLAY_SONG' });
  };

  const handlePause = () => {
    dispatch({ type: 'PAUSE_SONG' });
  };

  return (
    <div>
      <h2>Now Playing: {currentSong}</h2>
      <ReactPlayer
        url={currentSong}
        playing={isPlaying}
        onPlay={handlePlay}
        onPause={handlePause}
      />
    </div>
  );
};

export default Player;

위의 예제는 뮤직 플레이어 컴포넌트를 정의한 것입니다. Redux의 상태를 이용하여 현재 재생 중인 음악과 재생 상태를 관리하고, react-player를 이용하여 음악을 재생하고 일시정지할 수 있습니다.

5. 마무리

이제 음악 스트리밍 앱을 개발하기 위한 기본적인 준비를 마쳤습니다. 이후에는 추가적인 기능과 UI를 구현하고, 음악 데이터베이스와 연동하여 음악 목록을 가져오는 등의 작업을 진행할 수 있습니다.

Next.js를 사용하여 개발하면 쉽고 간편하게 음악 스트리밍 앱을 구현할 수 있습니다. 다양한 기능을 추가하여 사용자들이 편리하게 음악을 감상할 수 있는 앱을 개발해보세요!

참고 자료:

Next.js 공식 문서: https://nextjs.org/docs
Redux 공식 문서: https://redux.js.org
react-player GitHub 저장소: https://github.com/CookPete/react-player

#음악 #스트리밍