[ES6] 7) FindIndex

# findIndex 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex

Array.prototype.findIndex()

 

 

협업 프로젝트를 진행 중에,

회원가입 완료 버튼을 클릭 하기 전, 입력받은 회원가입 정보와 DB에 있는 기존 회원정보들 중에서

email과 name의 값을 비교하는 중복확인 기능이 필요하여, 이 메서드를 사용하였다.

 

 

사용 이유에 대해 좀더 상세히 말하자면,

DB 내부에 있는 기존 회원정보 양이 얼마나 쌓여있을지 모르기 때문에,

forEach와 같이 모든 원소에 대해 탐색하는 메서드를 사용하기에는 부담이 컸고,

굳이 다 탐색할 필요 없이 중복 여부만 알아보면 되기 때문이였다. 

 

 

뭔가 모양새가 indexOf 와 비슷하게 생겼고, 쓰임새도 조금 비슷하다.

 

 

다만 indexOf 로는 배열 내부의 원소에 대해서

그 원소가 객체라면, 객체 밸류 값에 대한 탐색이 불가능하다는 점이다.

 

 

더군다나 진행중인 협업에서 Back-end API를 Django Rest Framework를 사용하고 있었기에, 

응답 값이 배열 내부에 각 원소가 객체로 되어 있는 구조였다.

Ex)  responseData = [ { ..... } ,  { ..... } ,  { ...... } ]  

 

 

 

사용 이유에 대해서는 이정도로 하고,

 

실제 어떻게 사용하는지 한번 보자.

 

 

위 처럼 findeIndex 내부에 정의한 조건에 해당되는 원소가 존재할 경우,

그 원소의 인덱스 값을 리턴한다.

( 조건에 해당되는 원소가 하나도 없을 경우 -1 을 리턴.)

 

 

그렇다면 처음에 구현하고자 했던 email과 name에 대한 중복확인 기능을

구현해보자.

 

 

 

 

결론적으로,

 

배열 내부에 객체로 정의된 원소가 있을 경우,

 

이에 대한 탐색을 진행하고 싶을 때 findIndex 메서드를 통해,

 

본인이 정의하는 조건에 따라 결과를 낼 수 있다.

 

 

 

 

 

 

( + 번외 )

 

위의 코드 같은 경우, Django 서버와의 통신을 통해 DB에 저장되어 있던 모든 User들에 대한 정보를 받아온 후, 클라이언트 단에서 중복 비교를 하게 되는 것 인데, 처음에는 아무 이상 없겠지? 라고 생각했다.

 

하지만, 같이 협업을 진행하고 있는 친구가 말하길,

클라이언트 단에서 DB정보를 가지고 비교하는 것은 보안 상의 이슈가 있을 수 있으니,

서버 쪽에서 중복 확인을 거치는게 나을 것 같다고 말해줬다.

 

...반성의 시간을 가졌다. 단순히 중복확인에 너무 초점을 맞춰서 코드를 짜다보니 거기까지 생각을 못했던 것 같다. 

중복확인을 위한 리퀘스트를 보낼 때는, 

[GET] .... / userlist / checkEmail ? email = { input_join_email } 이런식으로 비교 값을 보내서, 

실제 비교 관련 처리는 장고 쪽에서 진행하고, 비교 결과에 대한 값을 클라이언트에서 다시 받아서,

사용자에게 보여주는 방식으로 진행해야 될 것 같다.