: 재생목록
지금까지 배운 HTML/CSS/JS만을 사용한 프론트 프로젝트입니다. 저를 포함해 총 4명이 팀을 구성했고 회의 결과 다양한 기능을 가진 음악 재생 목록 페이지가 구현되었습니다.
파트는 총(메인,차트,뮤직,프로필,터미널)으로 나누어지며, 팀원 4명이 순차적으로 총 전공 분야를 배정했다. 제 분야는 터미널(cmd)과 프로필을 만드는 것이었습니다.
지금 생각해보면 플레이리스트와는 많이 동떨어진 것 같지만.. 더 재밌어야 한다는 생각이고, 꼭 하고 싶은 마음이 있다.
'추천 관련글,
프로젝트를 배포하지는 않았지만 간단한 PPT를 만들어 주요 기능만 설명하도록 하겠습니다.
1. 메인 페이지 -> Canvas로 곡선 그리기, js로 곡선의 높이와 속도 조정
2. 메인 페이지 -> 검색 기능 -> 크롤링된 멜론 차트를 데이터에 삽입하는 기능 및 검색 데이터 -> 검색 데이터 클릭 시 모달창으로 구현
3. 메인 페이지로 전환할 수 있는 지도 구현 -> 지도 선택(차트, 음악, 프로필).
4. 카드 1: 차트 페이지 -> 멜론 차트 크롤링 및 item.json 파일 생성
5. 2nd 카드: 음악 페이지 -> 오브젝트에 이미지 및 음악 파일 이름 저장 -> 스크립트 파일 불러오기 / 스크립트 데이터 인덱스 값 지정 후 -> 각 데이터 인덱스에 맞는 음악 및 배경 이미지 불러오기
팀원과 함께 구현한 사이트입니다 -> 개인적으로 프로젝트 구현에서 가장 어려웠던 부분이라고 생각합니다.
6. 단말기 : 실제 Mac 단말기와 유사하게 구현
– 실제 명령어를 처리할 일이 적기 때문에 일반 자바스크립트로 구현이 가능했지만… 300줄 이상의 코딩을 하면서 절대 그렇게 구현해서는 안 된다는 것을 배웠다.