0426 TIL

개인과제 마무리

오늘은 드디어 기능 3개를 다~ 구현 성공했다!!

엊그제는 api를 이용해서 화면에 영화 리스트를 출력하는 기능,
어제는 영화 ID를 보여주는 알럿창을 띄우는 기능을 구현했다.
그리고 오늘은 대망의 제목 검색 필터링 기능을 구현하는 날!

개인 과제의 필수 요구사항 3가지 중 2가지를 성공했었는데..
(물론 이 2가지 기능도 구현하는 과정이 참으로 순탄하진 않았지만)

오늘 구현할 필터 기능은 지난 날 구현했던 두 친구들이 선녀로 보일만큼 앞이 까마득했다.. 약간 높은 벽을 마주한 느낌

그래도 지금 시대가 어느 시대인가, 모르는 게 있다면 구글링 하면
진짜 체감상 십중팔구는 도움이 되는 느낌이다..
매번 혹사시켜서 고맙고 미안하다 Google ..

여튼 필터 기능을 구현하는데 중요한 몇가지 힌트를 알아냈다.
(사실 코딩하는데 안 중요한 메서드가 어딨음?)

오늘 써먹은 메서드

• trim() : 문자열 양끝 공백을 제거하고 원본 문자열 수정X, 새로운 문자열 반환

• toLowerCase() : 문자열을 소문자로 변환 후 반환

• includes() : 배열의 항목에 특정 값이 들어있는지 판단 후 true 혹은 false 반환

그리고, 메서드는 아니지만 textContent라는 프로퍼티를 사용했다
참고로 textContent와 innerHTML을 헷갈릴 때가 있는데 정리하자면

textContent : 모든 요소의 컨텐츠(텍스트)를 가져온다.

innerHTMP : "사람이 읽을 수 있는" 요소만 처리

(출처는 당연하게도 https://developer.mozilla.org/ko/docs/Web/JavaScript)

위 3가지 메서드는 과제하면서 처음 사용해 보는데 처음 사용해보는지라 처음엔 엄청 긴가민가하면서 이렇게 쓰는 게 맞나? 맞겠지? 하면서 코드를 주르륵 써내려갔다.

문제 직면

근데.. 역시나 처음 써보는 메서드라 많이 어색했던 탓인지 아니면 그냥 내가 코딩을 못해서인지 (후자가 맞음)
코드를 얼핏 봐도 되게 난잡해 보였다 ㅠㅠ

일단 아래 코드로 말할 거 같으면.. 작성은 얼추 다 한 거 같은데 순서도 뒤죽박죽, 그렇다고 기능 구현은 되느냐? 그것도 아닌 어정쩡한 코드다..
글을 작성하는 지금의 시점에서 내가 봐도 진짜 엉망인 코드다 ㅋㅋㅋㅋ

저때만 해도 도대체 여기서 뭐가 잘못된 것일까 이유를 도통 몰랐었다!!
근데 .. 등잔 밑이 어둡단 속담이 괜히 있는 게 아니었다.

문제 해결 과정

코딩 고수 분들은 단 번에 눈치챘겠지만.. 난 이걸 알아차리는데
거진 3시간은 쓴 거 같다( + 약간의 코드 수정은 덤)

바로 forEach() 메서드 앞에 들어갈 Array이다.

메서드에는 문자열 메서드와 배열 메서드, 2가지 형태가 있는데
난 forEach()가 배열 메서드인 걸 알면서도 뭐가 이상한지 몰랐었다

근데 word.forEach() 에서 내가 45번째 줄에 변수 선언한 word는 배열인가? 아까 저 코드 하나에 애먹었을 당시 시간대의 나였으면 뭐가 이상한 건데? 하고 끄덕끄덕x100 했을 거다..

누가 봐도 배열의 형태가 아닌 문자열(string) 형태인데 도대체 저걸 왜 눈치 못 챘을까 왜 왜!!!!

그리곤 바로 수정에 들어갔다!

그렇게 수정을 다 끝낸 직후 코드다. 일단 고친 점을 적어보자면

• 1. filters() 안에 넣어주는 매개변수 수정
     ( word -> searchVal)

• 2. filters 함수 내에 영화의 정보를 담은 카드를 가리키는 movieCards 변수 선언
     (저기서 class="card"가 갖고 있는 정보는, 영화 카드의 정보를 담고 있는 배열이다. 어제자 TIL을 보면 알 수 있음!)

• 3. .forEach() 메서드 앞에
     위에 선언한 배열 movieCards로 수정

• 4. 코드의 실행 위치를 영화 카드 목록 생성 전 ->
     영화 카드 목록 출력 후 발생하게끔 수정

그리고 이 4번을 수정 가능케한 저 중간에 껴있는 console.log("검색 이벤트리스너 부분 문제없음")을 왜 썼냐면, 콘솔로 보지 않는 이상 어디까지 잘 작동하고 어디서부터 문제가 생기는지 잘 몰랐었기에 문제점을 발견하기 위해서 넣었다. 저 코드를 넣고 난 후 확인해본 결과, DOM TREE를 전부 불러오기도 전에 이미 한참 전부터 검색 인풋 이벤트 리스너가 실행된 것이었다!! 그래서 후다닥 코드의 실행 지점을 수정하자 기능이 정상 구현되는 걸 확인했다.

오늘 하루를 마치며

개인 과제를 시작한 시점부터 머리가 안 아팠던 적은 없지만
유독 오늘 했던 기능 구현이 많이 어려웠던 거 같다!!
그렇지만.. 그럼에도 즐거웠다고 생각했던 이유는, 고통 없는 성장은 없다는 얘기가 괜히 있는 게 아닌 만큼 오늘의 나는 더 성장한 기분이라서 만족