2023-02-16 목요일

🥵 무엇이 어려웠나

1. includes 메서드에 보내는 변수에 문자를 여러 개 담을 순 없을까?

if (selectedTech.length > 0) {
	DATA = DATA.filter((item) => item.partyStack.includes(selectedTechText));
}

다중 필터링 & 정렬 기능을 구현했다.

selectedTech는 배열인데 셀렉터에서 고른 기술 스택이 객체 형태로 들어간다.
사용자가 고른 기술이 데이터 안에 있는지 확인하고 사용자가 고른 기술이 있는 데이터만 보여주려고 했다.
일단 사용자가 1개만 선택했을 때는 위 코드가 문제 없이 잘 돌아가는데, 2개 이상을 선택했을 때는 위 코드가 작동하지 않는다.

includes 메서드는 아래처럼 여러 개의 문자형 데이터를 넣어도 작동하기 때문에

const data = ['a', 'b', 'c']

data.includes('a', 'b')
// true

selectedTech를 스프레드문법을 이용해 분해해주고 배열로 만든 다음 이걸 문자열로 바꿔 변수에 할당했다. includes에 이 변수를 파라미터로 전달해주면 알아서 돌아가겠지, 예상했지만 작동하지 않았다.

배열을 문자 데이터로 바꾸기 위해 toString, Spilt 등을 사용해봤지만 내가 원하는 결과로 이어지지는 않았다. 삽질을 하면서 알게 된 것은 아래와 같다.

내 상상 : 'a', 'b'
실제 : ' 'a', 'b' '

'a', 'b' 라는 하나의 문자형 데이터로 인식해버리기 때문이었음. 이걸 어떻게 해결하면 좋을지 내일 다시 생각해보자.