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. 기술 스택
-
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