자바스크립트 Immer를 활용한 비디오 스트리밍 애플리케이션 개발하기

27 Sep 2023

immer

이제는 인터넷에서 영상을 스트리밍하는 것이 일상이 되었습니다. 이번 블로그 포스트에서는 자바스크립트의 Immer 라이브러리를 활용하여 간단한 비디오 스트리밍 애플리케이션을 개발하는 방법을 알아보겠습니다.

Immer란?

Immer는 불변성 유지를 위한 상태 관리 라이브러리입니다. 이를 통해 복잡한 상태 관리를 간소화하고 업데이트된 상태를 새로운 객체로 반환하는 데에 유용합니다.

개발 순서

프로젝트 설정
비디오 리스트 컴포넌트 만들기
상태 업데이트 로직 작성하기
화면에 비디오 플레이어 표시하기
테스트 및 디버깅

1. 프로젝트 설정

먼저, 프로젝트 디렉토리를 생성하고 Package.json 파일을 생성합니다.

$ mkdir video-streaming-app
$ cd video-streaming-app
$ npm init -y

그리고 필요한 패키지를 설치합니다.

$ npm install immer

2. 비디오 리스트 컴포넌트 만들기

이제 Immer를 사용하여 상태를 관리할 비디오 리스트 컴포넌트를 만들어보겠습니다.

import React from 'react';
import produce from 'immer';

class VideoList extends React.Component {
  state = {
    videos: [
      { id: 1, title: 'Video 1', url: 'https://example.com/video1.mp4' },
      { id: 2, title: 'Video 2', url: 'https://example.com/video2.mp4' },
      { id: 3, title: 'Video 3', url: 'https://example.com/video3.mp4' },
    ],
  };

  handleDeleteVideo = (id) => {
    this.setState((prevState) =>
      produce(prevState, (draftState) => {
        const index = draftState.videos.findIndex((video) => video.id === id);
        draftState.videos.splice(index, 1);
      })
    );
  };

  render() {
    const { videos } = this.state;

    return (
      <div>
        <h2>Videos</h2>
        <ul>
          {videos.map((video) => (
            <li key={video.id}>
              <h3>{video.title}</h3>
              <button onClick={() => this.handleDeleteVideo(video.id)}>Delete</button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default VideoList;

3. 상태 업데이트 로직 작성하기

비디오 리스트 컴포넌트에서는 Immer의 produce 함수를 사용하여 상태를 업데이트합니다. handleDeleteVideo 함수에서는 produce 함수를 사용하여 videos 배열에서 삭제할 비디오를 찾고, 해당 비디오를 배열에서 제거한 후, 업데이트된 상태를 반환합니다.

4. 화면에 비디오 플레이어 표시하기

비디오 리스트 컴포넌트를 사용하여 비디오 플레이어를 화면에 표시해보겠습니다.

import React from 'react';
import VideoList from './VideoList';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Video Streaming App</h1>
        <VideoList />
      </div>
    );
  }
}

export default App;

5. 테스트 및 디버깅

이제 애플리케이션을 실행하여 테스트하고, 필요한 경우 디버깅을 진행합니다.

$ npm start

위와 같이 명령어를 실행하면 비디오 리스트 컴포넌트와 비디오 플레이어가 화면에 정상적으로 표시될 것입니다.

마치며

이번 블로그 포스트에서는 Immer를 활용하여 자바스크립트 비디오 스트리밍 애플리케이션을 개발하는 방법을 알아보았습니다. Immer를 사용하면 복잡한 상태 관리를 간소화할 수 있으며, 업데이트된 상태를 쉽게 반환할 수 있습니다. 이 기술을 활용하여 비디오 스트리밍 애플리케이션을 개발하고, 좋은 사용자 경험을 제공해보세요!

#비디오 #스트리밍