[TIL_영화사이트개발_트러블슈팅(8)] 1/19 변수명을 잘 짓자
1. 가이드를 잘 읽자 + 필요한 api를 잘 찾아보자
개인 과제는 제출하고 끝이 났지만 끝난 후에 추가한 search API 때문에
검색으로 나온 카드의 모달이 제대로 나오지 않는 문제가 발생했다
원인은 기존의 모달 카드의 내용을 그리는 방식에 있다
원래는 검색도 api를 받아서 오는건줄 몰랐어서 리스트를 필터링해서 값을 가져왔었다
그래서 바로 값에 접근할 수 있었다
근데 검색 api를 하게 되면서 처음에 가지고 있던 리스트에 없는 영화들이 나오게 되었다
따라서 클릭한 영화랑 다른 내용의 모달이 뜨게 되었다
나의 고민은 검색을 통해 새롭게 화면에 그리는 영화들의 배열을 넘겨주면 되지 않을까였다
여기서 문제는 그 리스트를 어떻게 얻을 것인가이다
검색도 모달클릭도 eventListener라서 전역 배열을 선언하지 않아 리스트에 접근하기 힘들었다
이때 가이드를 봤다면 금방 해결이 됐을 텐데,,,
내가 가진 정보는 클릭된 영화의 id값 뿐이었다
id를 통해 영화를 찾는다? searh겠구나 생각하고
tmdb의 search 카테고리를 봤는데 id값으로 찾는게 없었다
그래서 다시 리스트를 어떻게 넘겨주지하는 고민으로 돌아갔다
전역 변수를 선언해서 새로운 리스트로 갱신하는 방법이나 처음 함수를 호출하는 부분부터 수정하는 방법
이렇게 두 가지가 생각이 났다
그래도 혹시 몰라서 다시 뒤져보니 id값으로 정보를 가져오는 api를 찾았다
쉽게 해결이 됐다
카드를 클릭하면 -> 가져온 id 값으로 api를 받아온다
이 함수만 수정했고 기존의 모달 카드를 그리는 함수는 그대로 사용할 수 있어서 간단히 해결됐다
2. 변수명을 잘 짓자
이제 함수명은 그럴싸하게 짓게 되었는데
(사실 변수명도 나름 잘 짓고 있다고 생각했다 ps할 때 a, b, temp, res 이런거만 지었었으니까)
하지만 나는 함수 안에서만 사용한다고 같은 변수명을 많이 사용했다
card만 봐도 5군데에서 사용을 하고 있었다,,
코드 읽으면 아는거니까 괜찮다고 생각했는데 다시 읽고 이해하는 과정이 필요하고
한번에 읽히지 않는게 문제였다
그래서 앞으로는 변수명을 짓기 전에 클래스처럼 나만의 정의를 하고 시작하기로 했다
예를 들어,
card를 사용하려면 card에 필요한 조건들을 정해놓는거다
여기에서 card란 제목, 사진, 개봉일, 줄거리, 평점이 들어가야 한다
이 이외의 것들은 card가 될 수 없다
밑의 함수가 적절한 예시라고 생각한다
데이터를 받아와서 카드 리스트로 만들었기에 각 인덱스는 카드라고 붙여줬다
하지만 정의한 카드를 생각해보면 각 인덱스에 들어가있는 내용은 카드보다 훨씬 많은 정보를 담고 있다
그러면 card보다는 cardData에 더 가깝다고 볼 수 있다
따라서 cardList도 cardDataList가 되는 것!
또한 html코드가 들어가는 카드의 경우 cardHtml 이라고 하는 등 데이터 타입을 명시해줄 수도 있다
이렇게 한다면 일단 내가 알아보기 더 편해져고 헷갈려서 이해하는 데 시간을 더 사용하지 않을 수 있게 된다
앞으로 노력할 것!!