안녕하세요. 이번 시간에는 리액트로 음악을 추가하고 재섕할 수 있는 재생목록을 만들어보도록 하겠습니다. 먼저 아래 코드는 음원 파일을 사이트에 등록하는 코드입니다. 코드는 다음과 같습니다. import React from 'react'; import jsmediatags from 'jsmediatags/dist/jsmediatags.min'; import { useMusicDispatch, useMusicNextId } from '../MusicContext'; function b64toBlob(dataURI) { var byteString = atob(dataURI.split(',')[1]); var ab = new ArrayBuffer(byteString.length); var ia = new Uin..

안녕하세요. 이번강의에서는 뮤직플레이어중 아래 사진과 같은 ui를 구성하기 워한 컴포넌트를 제작해보겠습니다. 목차는 다음과 같습니다. --목차-- 흰버튼 컴포넌트 제작 파란버튼 컴포넌트 제작 앨범아트 컴포넌트 제작 곡 정보 컴포넌트 제작 먼저 music-player/src 폴더 안에 PlayerBlock.js라는 파일과 components/player 라는 폴더를 만들어주세요. 그리고 그 안에 Cover.js, WhiteButton.js, BlueButton.js, SongInfo.js 라는 파일을 만들어줍니다. 폴더 구조는 아래와 같습니다. ├── ./src │ ├── ./components │ │ ├── ./PlayerBlock.js │ │ ├── ./player │ │ │ ├── ./player/C..

안녕하세요, 이번 포스트에서는 리액트로 간단한 뮤직플레이어를 개발해보려고 합니다. 백앤드 없이 reactjs만으로 만들어보겠습니다. -목차- 개발환경구성 필요모듈 설치 먼저 완성된 이미지입니다. 첫 사진 오른쪽 상단 햄버거 버튼을 누르면 파일을 추가할 수 있고 파일을 추가한뒤 재생하는 방식입니다. #개발환경구성 먼저 아래 명령어로 리액트 프로젝트를 만들어주세요. npx create-react-app music-player #필요모듈설치 그리고 필요한 모듈들을 설치해줍니다. 설치할 모듈은 다음과 같습니다. jsmediatag (미디어태그 얻기) styled-component(디자인) jsmediatag는 뮤직플레이어를 만들면 아티스트와 제목, 앨범아트를 표시하는데 필요하고 styled-components ..