0. MusicTree

이 프로젝트는 'Melon'에서 인스퍼레이션을 얻어 진행하게 되었습니다.

RESTful API를 이용한 Music Infomation Application을 목표로 계획했으며,

모바일과 데스크톱의 두가지 반응형 디자인으로 구현했습니다.

프로젝트 링크 : https://songforthemute.github.io/musictree

미디엄 블로그 링크 : https://medium.com/@songforthemute

powered by : "https://www.last.fm"

• 이전에 커밋한 내역 : https://github.com/songforthemute/Deprecated-musictree

---

목차

1. 기술 스택
2. 프로젝트 기능
3. 프로젝트 스크립트
4. 프로젝트 디자인

---

1. 기술 스택

• Language : HTML, CSS, JavaScript

• Frontend : React.js

• Distribution : gh-pages

---

2. 프로젝트 기능

• 메인 페이지 최신 차트 Top 10 표시

• 트랙 / 아티스트명으로 검색 기능 구현

• 국가별 트랙 / 아티스트 차트 랭킹 오름차순으로 검색 기능 구현

• 미디어 쿼리를 이용한 모바일 & 데스크톱 2종류의 반응형 디자인

• API 호출 후 대기 시간동안 사용자 경험적 손실을 줄이기 위해 로딩 컴포넌트 구현

---

3. 프로젝트 스크립트

npm start

프로젝트를 개발 모드로 실행할 수 있습니다. http://localhost:3000 환경에서 실행되며, 기본 포트 넘버는 3000입니다.

npm build

애플리케이션이 build 폴더에 빌드됩니다.

npm predeploy

애플리케이션의 gh-pages를 이용한 배포를 하기 위한 사전 빌드 작업입니다. npm run build와 같습니다.

npm deploy

-d 디렉토리명 폴더의 애플리케이션을 gh-pages를 통해 배포합니다. Github repository에서도 확인할 수 있습니다.

---

4. 프로젝트 디자인

아이덴티티 컬러

• #009933

프로젝트 로고

---

봐주셔서 감사합니다!