🎵 Music Drop

🔗 배포URL

프로젝트 소개

[ 개요 ]

• Music Drop은 음악을 들을 수 있는 웹 애플리케이션입니다.
• open API (deezer)를 활용하여 다양한 음악을 검색 및 추가 할 수 있고 30초 미리듣기를 제공합니다.
• 국내, 해외차트 순위를 확인할 수 있습니다.
• 나만의 플레이리스트를 만들어 원하는 음악을 들을 수 있습니다.
• 플레이리스트에 담긴 음악을 기반으로 랜덤 재생, 한곡 반복, 다음곡/이전곡 재생 기능을 사용할 수 있습니다.
• 모든 기능구현을 VSC live share를 활용하여 페어 프로그래밍으로 진행했습니다.

[ 제작 기간 ]

2023.01.19 - 2023.03.31

⬆️Top

📍 목차

1. 프로젝트 소개
2. 팀원 소개
3. 개발 환경
4. 구현 기능
5. 프로젝트 구조
6. 트러블 슈팅
7. 프로젝트 진행 중 새로 알게 된 것들
8. 프로젝트 배포 후 느낀 점

🙋‍♀️ 팀원 소개

김다정	정수현	조민지
DADA6041	IntHyun	ming-Jo

⬆️Top

⚙️ 개발 환경

[ 기술 스택 ]

• Front-End
  • 
• Back-End
  • 
• Design
  • 🔗

[ 형상관리 및 협업 도구 ]

• 
• GitHub Issues : 활동 내역에 대해 이슈 등록 후 작업 진행
• VScode liveshare : 페어 프로그래밍으로 진행 및 코드 리뷰
• Discord : 실시간 소통 및 화면 공유

[ 이슈 관리 ]

• 활동 내역에 대해 이슈 등록 후 작업 진행
  

• GitHub Project 사용
  

• GitHub 코드리뷰
  

[ 커밋 컨벤션 ]

✨ Feat: 새로운 기능 추가
🏷️ MarkUp: 마크업
💄 Design : CSS, 사용자 UI 디자인 변경
📝 Docs : 문서 수정
🎨 Style : 코드포맷, 세미콜론, 개행, 코드 구조, 형태
🤔 Test : 테스트 코드
♻️ Refactor: 코드 리팩토링
🐛 Fix : 버그 및 오류 수정
🔥 Remove : 불필요한 파일 삭제
🔨 Chore : 빌드 업무, 패키지매니저, 폴더트리, 세팅 수정
💡 Comment : 필요한 주석 추가 및 변경

Co-authored-by: DADA6061 <d.ya96v@gmail.com>
Co-authored-by: ming-Jo <mwinterj@daum.net>
Co-authored-by: IntHyun <wjdtngus1237@naver.com>

⬆️Top

🛠 구현 기능

Splash	Home	Chart

Playlist	Search(기본)	Search(결과 없음)

Music Control	Not Found

⬆️Top

🗂 프로젝트 구조

📦frontend
┣ 📂static
┃ ┣ 📂css
┃ ┃ ┣ 📜chart.css
┃ ┃ ┣ 📜home.css
┃ ┃ ┣ 📜myplaylist.css
┃ ┃ ┣ 📜navbar.css
┃ ┃ ┣ 📜playcontrol.css
┃ ┃ ┣ 📜reset.css
┃ ┃ ┣ 📜search.css
┃ ┃ ┗ 📜style.css
┃ ┣ 📂image
┃ ┗ 📂js
┃ ┃ ┣ 📂API
┃ ┃ ┃ ┣ 📜API.js
┃ ┃ ┃ ┗ 📜apikey.js
┃ ┃ ┣ 📂json
┃ ┃ ┃ ┗ 📜memberData.json
┃ ┃ ┣ 📂views
┃ ┃ ┃ ┣ 📜AbstractView.js
┃ ┃ ┃ ┣ 📜Chart.js
┃ ┃ ┃ ┣ 📜Home.js
┃ ┃ ┃ ┣ 📜MyplayList.js
┃ ┃ ┃ ┣ 📜NotFound.js
┃ ┃ ┃ ┣ 📜PlayControl.js
┃ ┃ ┃ ┣ 📜Search.js
┃ ┃ ┃ ┗ 📜Splash.js
┃ ┃ ┗ 📜index.js
┣ 📜index.html
┗ 📜_redirects

⬆️Top

🙇‍♀️ 트러블 슈팅

1. 다른 페이지로 이동할 때 마다 요소가 추가됨

• 문제 및 원인 : createElement로 요소를 생성하고 appendChild로 요소를 추가하고 있어서 메서드가 실행될 때 마다 요소가 생성, 추가됨

• 해결 :

  • (참고) 각 페이지에는 root 요소 안에 main 컨테이너 요소가 공통적으로 존재함

  • 1차 해결

    • 클릭한 페이지의 main wrapper에 요소를 hidden하는 class를 추가

    • 라우팅 후 hidden된 요소가 DOM에 존재하지 않아 에러 발생

  • 2차 해결

    • removeElement() 함수를 생성하여 페이지 이동 시 직전 페이지의 요소를 제거하는 로직 구현

    • 뒤로가기 버튼 클릭 시 제거되었던 요소가 다시 추가되는 현상 발생

  • 3차 해결(완료)

    • 각 페이지의 main wrapper를 appendChild가 아닌 replaceChildren으로 페이지 이동 시 요소 대체

    • replaceChildren MDN 설명 참고

      // 기존 appendChild
      const wrapper = document.createElement("main");
      wrapper.classList.add("wrapper");
      this.$target.appendChild(wrapper);
      
      // 수정 replaceChildren
      const wrapper = document.createElement("main");
      wrapper.classList.add("wrapper");
      this.$target.replaceChildren(wrapper);

2. 재생바 드래그 시 정상적으로 드래그 위치 못 잡는 현상

• 문제 및 원인 : 음악을 재생할 때 재생바를 드래그 하면 드래그한 위치를 정상적으로 표시하지 않음

• 해결 : input의 range는 click이 아니라 input event로 컨트롤 해야한다.

  // click 이벤트로 했을 때 (드래그 위치 파악 X)
  $progressBar.addEventListener("click", (e) => {
    let progressInputValue = e.target.value;
    let songDuration = $audio.duration;
    $audio.currentTime = (progressInputValue * songDuration) / 100;
  });
  
  // input 이벤트로 했을 때 (드래그 위치 파악 O)
  $progressBar.addEventListener("input", (e) => {
    let progressInputValue = e.target.value;
    let songDuration = $audio.duration;
    $audio.currentTime = (progressInputValue * songDuration) / 100;
  });

3. 화살표 함수 내부에서 메서드 실행 안되는 현상

• 문제 및 원인 : 화살표 함수 내부에서 this가 지칭하는 대상이 달라서 부모 Class의 메서드가 작동하지 않음

• 해결 : this.method()가 아닌 super.method()로 부모 Class의 prototype-method를 참조하기

    setLocalData() {
      const btn = document.querySelectorAll(".music-add-btn");
      btn.forEach((button) => {
        button.addEventListener("click", (event) => {
          super.toast();
  
          let id = Number(event.currentTarget.dataset.id);
          let title = event.currentTarget.dataset.title;
          let coverImg = event.currentTarget.dataset.cover;
          let artist = event.currentTarget.dataset.artist;
  
          // 기존에 작성했던 this는 상위 클래스의 setLocalStorage()를 찾지못함.
          // this.setLocalStorage(id, title, coverImg, artist);
  
          super.setLocalStorage(id, title, coverImg, artist);
        });
      });
    }

4. 비동기로 DOM 요소 생성 시 event 작동 안함

• 문제 : anchor 태그의 새로고침을 방지하며 페이지를 이동하기 위해 anchor 태그에 접근하는 과정에서 anchor 태그를 찾지 못하는 문제 발생

• 원인 : createElement로 모든 요소들을 생성하였는데 비동기 통신으로 인해 요소가 생성되기 전 DOM에 접근하여 해당 요소를 찾지 못함

• 해결 : 비동기 통신 이후 변경된 DOM 데이터를 감지하기 위해 MutationObserver로 속성과 자식노드, 자손노드에 변경되는 요소가 있는지 감지한 뒤 해당 요소에 접근하여 event를 적용

  let target;
  
  if (location.pathname === "/") {
    target = document.querySelector(".home-wrapper");
  } else if (location.pathname === "/search") {
    target = document.querySelector(".searchlist-main");
  } else if (location.pathname === "/chart") {
    target = document.querySelector(".chart-main");
  }
  
  if (target) {
    const callback = () => {
      const $playControl = target.querySelectorAll(".to-play-control");
      $playControl.forEach((url) => {
        url.addEventListener("click", (e) => {
          e.preventDefault();
          navigateTo(e.currentTarget.href);
        });
      });
    };
  
    const observer = new MutationObserver(callback);
  
    const config = {
      attributes: true, // 속성 변화 할때 감지
      childList: true, // 자식노드 추가/제거 감지
      subtree: true, // 손자노드까지 추가/제거 감지
      characterData: true, // 데이터 변경전 내용 기록
    };
  
    observer.observe(target, config);
  }

⬆️Top

✏️ 프로젝트 진행 중 새로 알게 된 것들

• Promise 객체를 생성하여 불러온 데이터를 렌더링 하기 전 로딩화면 띄우기

  new Promise((resolve) => {
    const contCategory = data
      .map((list, idx) => {
        return `
          ... 페이지 요소 생성하는 코드 ...
          `;
      })
      .join("");
  
    resolve(/* 생성되고 난 뒤 넘겨줄 데이터 */);
  })
    .then((/* resolve에서 받은 데이터 */) => {
      // 데이터를 불러오고 난 뒤 실행할 코드
    })
    .catch((error) => {
      throw new Error(error);
    });

• scroll method 특정 위치로 스크롤 하기

  • scrollBy MDN 설명 참고

  • scrollBy는 left, top, behavior 프로퍼티를 가짐

  • left는 x축 / top은 y축 이동

  • behavior

    • auto(기본값) : 브라우저가 선택
    • smooth : 부드러운 스크롤 애니메이션
    • instant : 한 번의 점프로 즉시 실행

  • Home 화면 가로 스크롤 버튼 구현 시 사용

  horizontalScroll() {
    const $leftBtns = document.querySelectorAll(".left-scroll-button");
    const $rightBtns = document.querySelectorAll(".right-scroll-button");
  
    $leftBtns.forEach((item) => {
      item.addEventListener("click", () => {
        const contAlbum = item.previousElementSibling;
        if (contAlbum.scrollLeft + contAlbum.offsetWidth >= contAlbum.scrollWidth) {
  
          contAlbum.scrollBy({ left: -290, top: 0, behavior: "smooth" });
        } else {
          contAlbum.scrollBy({ left: -260, top: 0, behavior: "smooth" });
        }
      });
    });
  
    $rightBtns.forEach((item) => {
      item.addEventListener("click", () => {
        const contAlbum = item.previousElementSibling.previousElementSibling;
        contAlbum.scrollBy({ left: 260, top: 0, behavior: "smooth" });
      });
    });
  }

• css filter 속성으로 asset 추가 없이 이미지 컬러 변경하기

  • 내비게이션 아이콘 active 효과 구현

  .nav-list-item.active {
    filter: invert(63%) sepia(51%) saturate(3249%) hue-rotate(136deg) brightness(93%) contrast(97%);
  }

  const menuItems = document.querySelectorAll(".nav-list-item");
  
  let currentActive;
  
  menuItems.forEach((item) => {
    const itemHref = item.querySelector("a").getAttribute("href");
    if (location.pathname === "/") {
      if (itemHref === "/") {
        currentActive = item;
        currentActive.classList.add("active");
      }
    } else if (location.pathname.includes(itemHref) && itemHref.length !== 1) {
      currentActive = item;
      currentActive.classList.add("active");
    }
  });

⬆️Top

👩‍👧‍👧 프로젝트 배포 후 느낀 점

🐼 김다정

• 멋사 과정이 끝나고 일단 이력서에 쓸 결과물을 더 만들어야 한다는 생각에 시작한 프로젝트지만 기술적인 것뿐 아니라 소통하는 방법까지 너무 많은 것을 배우고 얻어 가는 시간이었습니다. 프로젝트를 진행하면서 첫 페어 프로그래밍에 초기 세팅 등 매번 고비가 왔지만 어느새 자랑하고 싶은 저의 메인 프로젝트입니다. 어려운 부분이 나올 때마다 모두 적극적으로 나서고 같이 해결하려고 노력한 덕에 순탄하게 잘 마무리하게 된 것 같고 앞으로도 더 열심히 해야겠다는 원동력도 얻었고 자신감도 얻어 가게 되었습니다. :) 정해진 마감기한이 있지도 않은 데다 하루 2시간, 2달이란 기간이 길다면 길고 짧으면 짧다고 느끼겠지만 포기하지 않고 꾸준히 같이 진행해 준 팀원들 감사하고 너무 고생 많으셨습니다!❤️

💗 정수현

• 프로젝트를 시작하기 전에는 객체지향에 대해 모르는 것이 많은 상태였는데 Class문법을 실제로 사용해보고 특정 메서드를 상위 Class에 적용해 재활용도 해보면서 Class문법이 좀 더 익숙해진 것 같습니다. 또한 이전에는 알지 못했던 css의 filter속성, scrollBy 메서드, 동적으로 DOM을 감지할 수 있는 MutationObserver 등에 대해 배웠고 netlify를 통해 직접 배포를 하고 github Releasese로 버전관리도 해보면서 웹 애플리케이션이 이런식으로 버전관리가 되고 배포가 되는구나에 대해 좀 더 자세하게 알게 된 것 같습니다. 이번 프로젝트를 통해 JavaScript에 대해 더 많이 알게 되었고 이후에도 다양한 프로젝트를 통해 지식을 확장해나가고 싶다는 생각이 들었습니다.

😎 조민지

• 바닐라 자바스크립트로 구현하는 과정이 생각보다 쉽지 않았지만 다정님, 수현님과 함께여서 처음에 생각했던 것보다 더 멋지게 프로젝트를 완성할 수 있었습니다! 구현하면서 막히는 부분이 있을 때 '일단 뭐든 해볼까요?' 라는 마인드로 다같이 우당탕탕 해나가는 과정이 너무 재밌었어요😁 프로젝트를 진행하면서 평소에 어렵다고 생각했던 클래스 문법, 비동기 패턴과 마주하게 되어 걱정이 많았지만 함께 정면돌파로 해내게 되어 너무 뿌듯합니다😎 앞으로 더 멋진 개발자가 될 수다조 삼두마차 여러분 정말 수고하셨습니다💪

⬆️Top