📋 FLOrida

💡 팀명 : FLOrida

• 모티브로 한 사이트 : https://www.music-flo.com/
• FE : 김진영 김충만 임지영 최승철
• BE : 김교은 이신희
• 개발기간 : 9/19(월) ~ 9/30(목) 14:00 (12일)

사용한 기술 스택
FE : JavaScript React.js styled-component react-h5-audio-player MUI 등
BE :JavaScript Node.js MySQL Express.js jwt bcrypt 등

JUSTCODE 과정에서 진행된 2차 팀 프로젝트입니다.

이 프로젝트는 팀장은 따로 없고 FE 총 4명, BE 2명으로 이루어진 팀으로 진행했습니다.

처음에 제 취미가 음악 감상이라 음악 플레이어 및 개인 플레이리스트 관리 등의 기능을 해보고 싶기도 하고, 1차 프로젝트보다 기능도 다양했기 때문에 제안했고 팀원분들도 모두 동의해 주셔서 FLO 사이트를 모티브로 제작하게 되었습니다.

여기서 모티브로 제작하였다는 건, 누군가의 코드를 그대로 복사 붙여넣기 한 것이 아닌 페이지의 구조를 참고하여 직접 코드를 작성한것을 뜻합니다.

---

🔗 링크

💻 GitHub

📋 회고록

---

🔧 내가 구현한 기능

🎥 내가 구현한 기능 시연 영상

제가 맡은 부분을 서버가 열려있을 때 촬영하여 유튜브에 업로드했습니다.

1. 음악 플레이어

음악 플레이어는 react-h5-audio-player 라이브러리를 통해 작업했습니다.

1-1. 현재 재생목록

현재 재생목록은 state와 세션 스토리지에 저장하여 관리했습니다.

세션 스토리지로도 관리하여 마운트 시 세션 스토리지에서 현재 재생목록을 가져오기 때문에 새로고침을 해도 현재 재생목록이 유지됩니다.

1-2. 곡 셔플 기능

셔플 기능은 라이브러리에 존재하지 않아서 직접 구현했습니다.

  const shuffleMusic = () => {
    if (JSON.parse(sessionStorage.getItem('tracks')).length !== 0) {
      const randomTracks = [...musicTracks].sort(() => Math.random() - 0.5);
      if (randomTracks[0] === musicTracks[0]) {
        const lastIndex = randomTracks.length - 1;
        const randomValue = Math.floor(Math.random() * (lastIndex - 1) + 1);
        const temp = randomTracks[0];
        randomTracks[0] = randomTracks[randomValue];
        randomTracks[randomValue] = temp;
      }
      setMusicTracks(randomTracks);
    }
  };

array.sort 메소드를 통해 랜덤하게 현재 재생목록을 뒤섞고, 첫 번째 곡이 바뀌지 않았을 경우 첫 번째 곡을 또 랜덤한 인덱스에 위치하게 하도록 로직을 구현했습니다.

1-3. 곡 다중 선택 기능

곡을 다중으로 선택해 현재 재생목록에서 삭제 및 플레이 리스트에 추가할 수 있도록 구현했습니다.

곡을 선택했을 때, 배열에 곡의 ID를 담아 state로 관리하여 삭제 및 백엔드로 전달(보관함에 추가) 할 수 있는 로직입니다.

1-4. 검색 기능

재생 중인 곡을 바꾸려면 인덱스 값을 변경해야 합니다.

그런데 검색을 하면 배열의 길이가 줄어들기 때문에 곡을 클릭하면 원래 재생목록의 인덱스에 해당하는 곡이 실행되어버립니다.

그래서 생각한 것이 검색 기능을 통해 필터링된 곡들은 곡 url을 빈 문자열로 설정해버려 빈 문자열을 가진 곡들은 출력되지 않게 로직을 구현했습니다.

2. 보관함

2-1. 보관함 다중 선택 기능

위의 곡 선택 로직과 똑같습니다. 플레이리스트 ID를 배열에 저장하여 state로 관리합니다.

2-2. 플레이리스트 재생 로직

  const playSongs = () => {
    if (playlistSongs[0].songTitle) {
      fetch(`플레이리스트요청URL`, {
        headers: {
          Authorization: sessionStorage.getItem('token'),
        },
      })
        .then(res => res.json())
        .then(plData => {
          const musicTracksId = musicTracks.map(el => el.songId);
          const filteredNewTracks = plData.filter(
            (el, i) => musicTracksId.includes(el.songId) === false
          );
          setMusicTracks([...filteredNewTracks, ...musicTracks]);
          setAlertOn('현재 재생목록에 추가되었습니다. 중복된 곡은 제외됩니다.');
        })
        .catch(err => {
          if (sessionStorage.getItem('token'))
            setAlertOn(
              '이용권을 구매해야 음악 재생 서비스를 이용하실 수 있습니다.'
            );
        });
    }
  };

전체 재생 버튼을 누르면 해당 플레이리스트의 곡들을 요청합니다.

그리고 플레이리스트의 모든 곡들을 받아 내 현재 플레이리스트에 있는 곡들을 아이디를 통해 비교해 중복되지 않는 곡들만 추가하도록 로직을 구현했습니다.

2-3. 개별 곡 재생 로직

재생 버튼을 누르면 현재 플레이리스트에 중복되는 곡이 있다면 추가하지 않도록 구현했습니다.

3. 보관함 상세페이지

3-1. 플레이리스트명 수정

바뀐 플레이리스트의 값을 백으로 전달하고 바로 반영합니다. 또한 useRef와 focus 메소드를 통해 수정 버튼 클릭 시, 바로 포커싱 되도록 설정했습니다.

3-2. 음악 플레이어 위 알림창

알림 창 컴포넌트를 만들어 setAlert(”메세지”) 를 통해 원하는 메세지를 출력할 수 있도록 했습니다.

alert 컴포넌트는 나타난 뒤 3초 후에 자동으로 사라집니다.

그 외 현재 재생목록 중복 방지 및 다중 선택 기능은 동일합니다.

4. 로딩 컴포넌트

데이터를 불러오기 전까지 로딩 컴포넌트가 빈 화면 대신 출력되도록 하고 다른 모든 페이지에 적용했습니다.

나중에 시간이 된다면 스켈레톤으로도 구현해 보고 싶습니다.

---

💪 내가 성장한 부분

1. 소통의 중요성을 깨닫다

이번 프로젝트 초반에 팀원의 사정으로 인해 연락이 되지 않아 팀 협업 간에 트러블이 생길뻔 한 상황이 있었습니다.

하지만 그 이후 회의를 통해 주기적인 회의 시간을 정해놓고, Slack (협업 메신저) 알림도 항상 켜놓기로 했더니 문제가 해결되었습니다.

이 일을 통해 팀원 간의 커뮤니케이션이 얼마나 중요한지 파악할 수 있었고, 다음엔 이런 일이 일어나지 않도록 방지해야겠다고 다짐하게 되었습니다.

2. 내가 작성한 코드의 문제점 파악

사실 이번 프로젝트까지는 오로지 기능이 작동하는 데에만 의의를 두어서 가독성을 고려하지 못하고 코드를 작성했습니다.

하지만 프로젝트가 끝나고 제 코드를 살펴보니 한눈에 들어오지 않는다는 것을 알게 되었습니다. 그래서 이 프로젝트가 끝나고 클린 코드를 작성하는 방법을 공부했고 점점 가독성도 고려하며 코딩할 수 있는 개발자가 되어가고 있는 중입니다.