📋 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]) {
        let lastIndex = randomTracks.length - 1;
        let randomValue = Math.floor(Math.random() * (lastIndex - 1) + 1);
        const temp = randomTracks[0];
        randomTracks[0] = randomTracks[lastIndex];
        randomTracks[lastIndex] = 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. 문제 해결 및 예방 능력

1차 프로젝트를 진행하면서도 수많은 에러를 마주했지만, 이번 프로젝트에서는 에러뿐만 아니라 위에 작성한 팀 협업 간에 생기는 트러블들도 겪었습니다.

덕분에 문제 해결 능력뿐만 아니라 다음엔 이런 트러블을 겪지 않기 위해 문제를 예방할 수 있는 능력도 가지게 되었습니다.

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

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

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