[TIL_영화사이트개발_트러블슈팅(7)] 1/17 어제의 모달 오늘은 성공!

어제 적었던 목록 중 1번을 먼저 시도했다

 

에러가 나는 이유가 closeBtn이 html코드에 없어서 로딩되지 않아 생기는거니까!

html코드에 넣어서 로딩되게 해주자

그리고 상위 div인 modal-content에 남은 부분을 innerHTML로 넣어주자.였다

 

시도 결과 : 버튼이 사라지고 그 위로 사진과 텍스트가 올라갔다

일단 실패,,

그래서 한 생각은 일단 로딩은 돼서 에러는 해결했으니까

innerHTML에 다시 넣어주면 안될까?였다

동작은 하지 않더라도 버튼은 생길테니까

 

시도 결과 : 버튼이 생겼다

하지만 여전히 closeBtn.addEventListener는 동작하지 않았다

그러다 어제 배운 document.body에서 classList.contains가 생각이 났다

상위 div에 이벤트 위임하는거!

그러니까 클릭된 곳의 클래스 리스트 중에 closeBtn이라는 이름을 가진 클래스가 있다면 버튼이 작동하게 하는것

이렇게 해주니까 된다!!!됐다!!!모달 클론 없이 해결했다!!!!

너무 기뻤다

모달클론을 하고 싶지 않았던 이유는

1. 내가 생각한 아이디어가 불가능한게 아니라면 끝까지 완성해보고 싶다

2. html파일과 js파일에 중복으로 텍스트 내용을 길게 넣고 싶지 않다

3. 어차피 앞으로 대부분 모달클론으로 사용할 것 같은데(튜터님의 예시 코드가 모달클론이라) 다른 방법을 이 기회에 써보고 싶다

라는 이유들로 고집을 부렸고 성공해서 다행이라고 생각한다,,,

 

기쁨도 잠시 뭔가 이상한 점을 발견했다

메인화면에서 카드를 클릭하면 내가 클릭한 영화의 상세 페이지가 모달에 뜨는데,

검색 결과로 나온 카드를 클릭하면 다른 영화가 뜬다

이때 뜨는 영화는 메인페이지의 순서대로 정렬된 리스트의 해당 인덱스 영화

 

처음 id값을 넣어줄 때가 문제였다

이런 오류가 생길거라 생각하지 못하고 그저 처음 배열을 만들 때 index값을 id로 설정했다

id === index -> 검색했을 때 영화 찾기 쉬움이었으니까

 

검색을 통해 새 배열을 만들었고 그 배열을 클릭하니까 상관없을거라 생각했는데 아니었다

그래서 고유한 값인 영화 data자체의 id 값으로 처음부터 id값을 변경했다

그리고 그 값과 타겟의 아이디 값이 같을 때 해당 배열의 값을 전달하게 했다

 

여기서도 살짝 에러가 생겼었는데

filter를 통해 걸렀고 값을 넘겨줬고 어차피 찾은 값은 하나니까 00.title이렇게 적으면 나올 줄 알았다

근데 에러가 났다

 

몇 번이고 콘솔을 찍어보니

filter는 배열을 리턴하니까 아무리 하나여도 배열인것!

그래서 00[0]을 넘겨주니 원활하게 00.title과 같은 코드를 사용할 수 있었다

목표 기능들을 다 구현하지는 못했지만 나의 첫 프로젝트가 끝이 났다

미완성인 부분은 해설 영상을 참고하며 완성을 해볼 예정이다

 

어떻게 보면 참 간단할 수도 있는 프로젝트지만 이론을 다 공부하지 않은채 직접 부딫쳐가며 만드니 정말 어려웠다

그치만 재밌었다

이번 프로젝트를 시작으로 앞으로는 더 성장하면 좋겠다