1. API 통해 받아온 데이터들이 잘 들어왔는지, 어떤게 있는지 어디서 확인해야할까?
- 아래 방법 몰라서 콘솔에 찍어서 확인했다.!
- 개발자도구 -> Network -> Fetch/XHR -> 왼쪽 Name 선택 -> Response
2. 전역변수에 대해
- 처음에는 동적으로 카드를 생성하는 함수를 만들었다. 영화제목만 담을 배열을 함수 밖의 eventListener에서 사용하고 싶었는데, 팀원분의 피드백으로 전역변수 / let 으로 선언하니 (어차피 영화제목이 forEach 돌면서 계속 추가되므로) 이벤트리스너 안에서도 사용가능했다.
3. 띠로리.. 영화 제목값만 모아진 배열을 만들었네...
- input 으로 받은 영화제목과 데이터 안의 제목을 비교해서 겹치는 문자가 있으면 그 영화제목의 카드만 남기려고 했는데 -> '영화 제목' 비교에 꽂혀서 -> 제목들만 담긴 배열을 만들었다..
-> 영화 제목만 출력되는 요상한 기능으로 ...~ - api 받는 js 파일, search 기능 js, create card 기능 js 파일 이렇게 3개로 모듈화 시키려고 했는데 import/export 가 계속 오류가 나니ㅜ ..
-> 지금 시기에는 코드 길어지더라도 우선 한파일에 모아서 작성하자.
위와같은 고민을 들으시고 기능과 디자인 구현이 다 된 후에 함수와 CSS 자세히 살펴보면서 분리시켜도 될 것 같은 내용만 모듈화 시켜보는 걸 추천하셨다!
정말 감사함 가득 ㅜ 반나절동안 모듈화로 머리싸매다보니 너무나 이해되고 납득이 가는 코멘트였다.
<Q&A>
1. 분명 잘 받아지던 데이터가 export 와 import 를 하면 영화정보 데이터가 안받아진다.
- api.js 와 createCards.js 로 모듈화 시켰으며 데이터 받아오자마자 createCards(data.result) 함수 호출해서 카드 생성
-> api.js 에서 createCards( ) 호출하므로 createCards.js import 하는 것임.
->import { createCards } from "./createCard.js";작성해야하고,
-> " " 안의 파일경로에서. js꼭 붙여야한다!
-> script type = "module" 로 꼭 지정해주기
-> script 태그는 바디태그 바로 위에 작성해야함. 중간에 동작하게되면 오류날수도 있다.
코드 다읽어오고 젤 늦게 동작해야되기때문<script type ="module" src="./createCard.js"></script> <script type ="module" src="./apiRequest.js"></script>
2. 검색기능을 구현해야하기위한 틀을 어떻게 잡아야할지.
- 나는 우선 전체영화목록을 다 보여주고, 검색버튼이 눌렸을때 영화제목들 중에 입력받은 문자와 같은걸 찾아내려고 함.
-> 중심기능은 영화검색이니, 문자 입력받기전인 첫 화면을 예외처리라던지..
-> 조건과 필터를 사용해서 분기 걸어주기
3. getTitle 함수 import 안됨
-> gitTitile 에서 매개변수로 넘어오는 movie 가 다른곳에서 받아온 데이터, 즉 순수하게 선언된 내부의 데이터가 아니어서 자꾸 undefined 가 뜨는것!
-> 어디에서 선언되었는지, 어떤 데이터인지 다시 분석해볼것.
