(reactjs)음악 플레이어 만들기(1) - 준비

안녕하세요, 이번 포스트에서는 리액트로 간단한 뮤직플레이어를 개발해보려고 합니다.
백앤드 없이 reactjs만으로 만들어보겠습니다.

 

-목차-

개발환경구성

필요모듈 설치

 

먼저 완성된 이미지입니다.

첫 사진 오른쪽 상단 햄버거 버튼을 누르면 파일을 추가할 수 있고 파일을 추가한뒤 재생하는 방식입니다. 

#개발환경구성

먼저 아래 명령어로 리액트 프로젝트를 만들어주세요.

npx create-react-app music-player

 

#필요모듈설치

그리고 필요한 모듈들을 설치해줍니다.

 

설치할 모듈은 다음과 같습니다.

jsmediatag (미디어태그 얻기)

styled-component(디자인)

 

jsmediatag는 뮤직플레이어를 만들면 아티스트와 제목, 앨범아트를 표시하는데 필요하고 styled-components 는 컴포넌트를 디자인 하는데 사용합니다.

npm jsmediatag styled-component --save

 

개발환경구성과 필요모듈 설치가 끝났습니다. 다음 강의는 컴포넌트 제작입니다.

 

다음강의

https://chipsnet.tistory.com/6