[영화검색 웹 페이지 - 트러블슈팅]

⁉️ 너 잘 됐잖아...? 내가 뭘 잘못했니?

개인과제를 진행하던중 여러 문제들이 있긴 했지만 나를 가장 화나게 했던 부분이다.
몰라서 안되는건 그러려니 한다. 알아가면 되고 배우면되는 것이니까.. 그런데 너 잘 되던거였잖아!?

1. 문제 발생

필수과제를 완수 후에 코드정리를 하면서 재확인 하는 과정중 잘 나타나던 영화 목록이 나타나지 않았다. 😦이게 무슨일??

눈을 꿈뻑거리며 코드 저장과 새로고침하기를 여러번.. 아 안나오는거 맞구나..

---

2. 원인 추론

어디에서 문제가 생긴걸까?

문법 오류 or 오타

진짜 진짜 많이겪어 봤기 때문에 제일먼저 생각나는 부분이었고, 코드정리를 하는 과정이었기 때문에 충분히 가능성있음!
fetch 함수가 있는 코드와 HTML에 그려주는 코드를 중점적으로 확인!

API 키 권한 제한 가능성

코드작성하다가 401 Unauthorized 오류를 경험 했기 때문에 API키와 읽기전용 토큰 재확인!

개발자도구 콘솔 확인

어떤 오류가 어디서 발생했는지, 또 API데이터를 잘 받아오고 있는지 확인하기.

콘솔창에서 확인시 데이터는 잘 받아오고 있었기 때문에 HTML에 그려주는 코드에 문제가 있겠구나 예상, 콘솔창 오류도 동일한 코드를 지목!

---

3. 해결 방안

정리 후 코드에서는 어떤문제인지 찾아내지 못했다.
시간을 많이 소요했기 때문에 다른 코드들 정리를 한 후에 다시 확인하기로 했다.
.
.
.

🪄 정리하기 전 코드와 비교

당연하겠지만 데이터를 받아와서 그려줘야 하는데 그리지를 못하니 다른 코드들에서도 동일한 곳을 가리키면 진행이 되지 않았다.

정리 전 코드와 비교를 해도 어떤 문제인지 모르겠다..
그러다가 콘솔에서 에러지목 코드를 확인하니..아? 배열을 이용하는 코드인데 배열을 못받왔단건가?? 콘솔에는 데이터가 잘 나오는데 왜?? 하면서 정리전 코드에서짐작되는 부분을 다시확인해 보니..아!!

🪄 내게 필요한 데이터로 가공

내가 필요한 부분은 이 데이터들 중에서 results로 묶여있는 배열이 필요했다. 그런데 콘솔창에 출력되는 자료 형태는 그 상위 요소부터 가져온것이 아닌가!?

바로 코드 수정!!

    const res = await fetch(url, options);
    const data = await res.json();
    // console.log(data.results);
    return data.results;  // .results 부분이 필요했다고..ㅠㅠ

리턴에 data.results만 가져오도록 수정해 주었다.

내게 필요한 자료들만 받아온 것이 확인!

---

4. 결과

매우 정상적으로 잘나옴 😭

---

to. 나에게

모르는건 모르니까 짜증이 난다거나 화가난다거나 감정기복은 거의 없다. 단지 피로할 뿐.
근데! 잘 작동하던 부분이 안되면... 뭐 찾아가면 된다.
다만 제출기한, 마감이 있는경우 벌어지면 슬슬화가나기 시작한다.
눈에 보이던 것도 안보이고.. 팀 과제였다면 팀원들에게 sos를 요청해보겠지만, 안되는 기능에 대해서 힌트를 요청하는 것도 아니고 각자 개인과제를 하고 있기 때문에 오류좀 찾아달라고 하기가 미안했다. 그래서 더 시간이 오래 소요되고 짜증이 났던것 같은데.. 그래도 이런경우도 있었다는 경험을 했기에 비슷한 문제가 발생한다면 원인을 추론할 수 있는 또 하나의 데이터가 쌓였다고 생각하고 잘 기록하자!