자바스크립트 강의를 들음과 동시에 개인별로 부과된 과제를 수행해야 한다.
만들고자 하는 결과물은 아래와 같다.
영화 정보를 검색할 수 있는 사이트
1) 영화 정보 오픈API인 TMDB를 사용하여 영화 정보를 가져온다.
2) 가져온 영화 정보에서 제목을 기준으로 검색할 수 있게 한다.
3) 영화를 클릭 시 모달(팝업창)으로 추가 정보를 보여준다.
과제 진행 단계별로 기록하기보다는 진행하면서 부딪쳤던 에러와 해결하고자 했던 노력, 해결방안과 결과물을 위주로 정리하고자 한다.
(프로젝트의 오답노트라고나 할까...?)
#1. Cannot read.. 왜 읽지를 못하니..?
0) 문제 : 콘솔창에 아래와 같은 오류..
1) 배경
TMDB의 API를 통해 데이터를 가져와서 카드형식으로 HTML에 구현하고자 했을 때, 위와 같은 오류가 콘솔창에 뜨면서 데이터가 나오지 않음.
2) 해결하고자 했던 노력 (이번에는 프로젝트 진행기 남길 생각을 못하고 수정해버려 캡쳐를 못했다..ㅠ)
<Try1.>
카드 형식으로 변환하는게 문제인가 싶어, 카드형식으로 데이터를 받는 것이 아닌 텍스트로만 불러오기 시도
=> 동일한 오류 발생 (카드형식 문제는 아님)
<Try2.>
예상했던 문제 원인이 아니었기에 코드가 진행될 때마다 console.log(); 로 찍어봄
=> 역시나 위 사진에 나왔던 .appendChild 부분에서만 오류 발생
<Try3.>
결국 문제 원인을 명확하게 찾지 못하고, 오류 문구 그대로 구글링 검색 실행
=> 동일한 현상은 꽤나 자주 있다고? 문제 원인 확인 !
script를 body의 상단에 작성하게 되면, 간혹 html이 로드 되기 전에 script를 먼저 불러와버리는 경우가 생긴다.
그렇게 되면 addEventListener을 부여할 DOM을 찾지 못하게 되어 에러가 발생하게 된다.
<참고 블로그>
https://velog.io/@ahn-sujin/Uncaught-TypeError-Cannot-read-property-addEventListener-of-null
Uncaught TypeError: Cannot read property 'addEventListener' of null
addEventListener 오류 해결방법 > Uncaught TypeError: Cannot read property 'addEventListener' of null image 💥에러 원인 script를 body의 상단에 작성하게 되면, 간혹 html이
velog.io
나의 경우도 확인해보니 HTML문서에서 <script>가 <head>에 있었다.
3) 해결방안
<Solution 1.> script를 바디 하단(</body> 윗줄)으로 옮겨준다.
사실 난 이 방법을 차용하지 않았지만 실제로 옮겼을 때 오류가 발생하지 않았다.
<Solution2.> <script> 내 defer 속성을 추가한다.
해당 솔루션은 같은팀 조장님께서 말씀해주신 방법인데, 결과적으로 해당 방법을 택했고 아래와 같이 기입했다.
두 방법의 차이점은 잘 모르겠으나.. defer란 녀석이 뭔지 몰라 똑똑한 chatGPT 에게 물어봤다.
그렇다고 한다.
하지만 명확한 구분이 되진 않아서 추후 담당 매니저님이나 튜터님들께 여쭤보도록 하겠다.
********* 해당 내용에 대한 확인 사항 ********
관련 내용은 프로젝트 해설 강의에서 정확하게 확인할 수 있었다.
문제 원인
HTML과 자바스크립트를 읽어드리는 상황에서 HTML을 읽는 와중에 자바스크립트를 다운받게되는데
아직 읽어드리지 못한 HTML부분의 DOM요소를 설정했기 때문에 발생한 문제였다.
defer는 HTML을 모두 다운로드 받은 후 자바스크립트를 실행시키는 역할을 하는 함수였다.
따라서 해결책은 위에 두 가지 모두 사용할 수 있으나 한 가지 새롭게 알게된 사실은 module이다.
<script = "module"> 처럼 사용할 수 있는데 협업 시에 거의 필수적으로 사용된다.
이번 문제를 자연스럽게 해결함과 더불어 협업에서는 아주 유용하게 쓰이는데 아래와 같다.
1. defer 명령어를 내장하고 있어 별도로 넣어주지 않아도 된다. (이번 문제에 대해 자연스럽게 해결)
2. 협업 시 기능별로 파일을 나눠서 관리하는 경우가 대부분인데 export/import를 통해 다른 파일에 있는 함수를 사용할 수 있다.
(관련하여서는 별도로 내용을 정리하면 좋을 듯 하다.)
3. 모듈 별로 독립적인 scope 생성하여 각 파일에서 동일한 변수를 사용할 수 있다.
4. Strict 모드가 기본 내장되어 있어 변수 선언 없이 사용이 불가하거나 예약어를 변수명으로 사용하는 것을 막아준다.
등 다양한 기능들이 있었다.
결론은 협업 시에 자연스럽게 모듈을 쓰면서 위와 같은 문제는 자연스레 해결되었다.
# 검색이 안되어야 하는데.. 되네?
0) 문제
검색창에 검색어를 입력하지 않아도 검색이 되는 문제
1) 배경
페이지 최초 진입 후 검색 시에는 검색어가 없으면 '검색어를 다시 입력해주세요' 라는 alert 이 뜨지만 !
다른 검색어로 검색 후에 검색창에 입력값 없이 검색 버튼 클릭 시 위와 같이 검색이 되어버린다.
2) 해결하고자 했던 노력
<Try1.>
74번째 줄에 검색어가 입력되지 않았을 경우를
searchList.length === 0 으로 기입했었는데, 길이의 수가 아닌 데이터 형태로 변경해보았다.
=> 결과 : 실패.. 동일한 현상 유지됨
<Try2.>
searchList가 어떻게 나오나 확인해보고자 console.log(searchList); 를 찍어봄
그 결과 1차 검색 후 검색창에 남아있던 검색어를 지워도 searchList 안에는 20개의 영화 데이터가 들어가 있음 !!
-> searchList에 데이터를 넣는 방법이 검색창에 데이터를 입력하면 그 값을 포함하여 넣는 방식이라 발생하는 문제라고 판단
<Try3.>
데이터가 무조건 할당될 수 밖에 없는 searchList를 검사하는게 아니라 검색창에 입력되는 값($searchInput.value)을 검사하는게 맞다고 판단 !
검사하는 데이터를 검색창에 입력되는 값으로 변경 !
3) 해결방안
searchList에는 계속 데이터가 쌓여있기는 하지만 검사하는 값은 검색창에 입력된 값 ($searchInput.value)임으로
내가 의도한 바가 정확하게 작동한다.
문제가 발생하면 원인이 무엇인지 파악하고 가설을 세워서 시도해보는데 많은 시간이 걸리더라..ㅠㅠ
그래도 해결되었을 때의 짜릿함이 아직까지 기억에 남는다.
(혹시 더 좋은 해결방안을 찾으면 알려주시길 바랍니다 ~ )
오늘도 자바스크립트 끝판왕에 반발작 나아갔다.
'프로젝트 진행기' 카테고리의 다른 글
| 끝판왕의 프로젝트_Node.js CRUD 실습(4)_미들웨어 구축 (0) | 2023.11.17 |
|---|---|
| 끝판왕의 프로젝트_Node.js CRUD 실습(3)_로그인 (0) | 2023.11.16 |
| 끝판왕의 프로젝트_Node.js CRUD 실습(2)_회원가입 (1) | 2023.11.15 |
| 끝판왕의 프로젝트_Node.js CRUD 실습 (0) | 2023.11.06 |
| 끝판왕의 프로젝트_영화 검색 사이트 만들기(심화) (0) | 2023.10.27 |
