[최종프로젝트] 두개의 배열 중복되지않는 값 찾기 (Set , every )

문제

마플리 테이블에 뮤직아이디배열이 있음 마플리로 추가한 뮤직 아이디가 들어가야 한다

체크박스로 복수선택해서 등록 가능

마플리에는 1번 아이디가 있음

내가 1번 3번을 선택해서 등록하면 3번만 들어가야 함

그래서 데이터베이스에 있는 배열과 내가 선택한 배열의 값을 비교해서 중복값을 제외한 나머지를 반환함

그리고 디비에 있는 아이디 배열과 위에서 추출한 중복되지 않는 값을 풀어서 하나의 배열로 만들면 끝임 

근데 여기서 문제 includes가 배열에 특정 요소가 포함되어 있는지를 확인시켜 주는 역할을 하는데 중복값이 같이 나와버린다

---

해결과정

 

1. Set을 이용해 중복 없이 마플리 저장

set은 객체 함수이기도 하고, 마플리에는 중복값이 없기 때문에 has를 위해 사용하는 건 가독성이 떨어질 수 있다는 단점이 있다

const onInsertMyPlayListHandler = async () => {
    if (checkedList.length === 0) {
      alert('노래를 선택해주세요')
      return
    }
    if (uid === '') {
      alert(
        '로그인 후 사용할 수 있는 서비스입니다. 로그인 페이지로 이동합니다.',
      )
      router.replace('/login')
      return
    }
    if (window.confirm('선택한 곡을 마이플레이 리스트에 추가하시겠습니까?')) {
      // 마이플레이리스트 배열을 가져옴
      if (myPlayList && myPlayList.length > 0) {
        console.log('myPlayList', myPlayList)
        console.log('checkedList', checkedList)

        // 마플리의 중첩을 풀고 뮤직아이디배열 반환
        const myIndex = myPlayList.flatMap((item) => {
          return item.myMusicIds
        })
        // .flat() 평탄화 , 중첩 요소를 하나로 만들어줌 / flatMap -중첩 배열을 하나로 만들어줌 메서드 체이닝을 사용하지않고 한번에 중첩배열을 풀어 요소를 반복하며 새 배열을 반환해준다
        console.log('myIndex', myIndex)

        // 뮤직아이디배열에 선택한 뮤직아이디의 값과 같지않은것을 반환
        // set을 사용한 이유 - 중복값을 확인하기위해 아래 코드와도 같은로직이긴함
        const setIndex = new Set(myIndex)
        console.log('setIndex', setIndex)
        const uniqueValues = checkedList.filter((val) => {
          return !setIndex.has(val)
        })
        // const uniqueValues = checkedList.filter((value) => {
        //   return myIndex.some((item) => {
        //     console.log('item', item)
        //     return !item?.includes(value)
        //   })
        // })
        console.log('uniqueValues', uniqueValues)
        if (uniqueValues.length === 0) {
          alert('이미 추가된 노래입니다.')
          setCheckedList([])
          return
        } else {
          console.log('addMyMusicList', uniqueValues)
          const updateList = [...myIndex, ...uniqueValues]
          updateMutation.mutate({ userId: uid, myMusicList: updateList })
          alert('마이플레이리스트에 추가 되었습니다.')
          setCheckedList([])
        }
      } else {
        insertMutation.mutate({ userId: uid, musicId: checkedList })
        alert('현재 재생목록에 추가 되었습니다.')
        setCheckedList([])
      }
    }
  }

 

---

 

2. includes 가 안 됐던 이유 

some은  OR과 같아서 배열중 하나라도 거짓이 나오면 반환하고 every는 and 조건과 같다

두 배열의 값이 모두 같은지 확인하기 때문에 includes를 사용하지 않아도 된다

  const onInsertMyPlayListHandler = async () => {
    if (checkedList.length === 0) {
      alert('노래를 선택해주세요')
      return
    }
    if (uid === '' || !uid) {
      alert(
        '로그인 후 사용할 수 있는 서비스입니다. 로그인 페이지로 이동합니다.',
      )
      router.replace('/login')
      return
    }
    if (window.confirm('선택한 곡을 마이플레이 리스트에 추가하시겠습니까?')) {
      if (myPlayList && myPlayList.length > 0) {
        const myIndex = myPlayList.flatMap((item) => {
          return item.myMusicIds
        })

        // some - || / every - &&
        const uniqueValues = checkedList.filter((value) => {
          return myIndex.every((item) => {
            console.log('item', item)
            return item !== value
          })
        })
        if (uniqueValues.length === 0) {
          alert('이미 추가된 노래입니다.')
          setCheckedList([])
          return
        } else {
          const updateList = [...myIndex, ...uniqueValues]
          updateMutation.mutate({ userId: uid, myMusicList: updateList })
          alert('마이플레이리스트에 추가 되었습니다.')
          setCheckedList([])
        }
      } else {
        insertMutation.mutate({ userId: uid, musicId: checkedList })
        alert('마이플레이리스트에 추가 되었습니다..')
        setCheckedList([])
      }
    }
  }