[개인과제] 눈물의 영화 검색 사이트(4)

과제 제출

주말에 반응형을 만들었다.
그리고 오늘 아침에 과제 제출했었다.
팀에서 이야기하다가 alert 이야기가 나와서 깜빡하고 안하고 제출을 했었다 ;ㅅ;
급히 하기로 했다...

혼자 해보기도 했는데 조금 막막했다.
카드 클릭 시에는 클릭한 영화 id 를 나타내는 alert 창을 띄우는 것이였다.

    let movie_id = movie_box['id']

      let temp_html = `    <div class="card" id="${movie_id}">
                            <p><img src="https://image.tmdb.org/t/p/original${movie_poster}"></p>
                            <h3 class="title">${movie_title}</h3>
                            <div class="txt">${movie_overview}</div>
                            <p class="rating">⭐ ${movie_rating}</p>
                            <p class="movie_date">🎬 ${movie_year}</p>
                          </div>`
      document.querySelector('#card_box').insertAdjacentHTML('beforeend', temp_html);
      // console.log(movie_poster);
    });
    const movie_cards_box = document.querySelectorAll('.card');
    //
    movie_cards_box.forEach(function (card) {

      card.addEventListener('click', function () {
        alert('선택한 영화: ' + card.id);
      });
    });
  }) 

최종적으로는 재상 튜터님께 도움을 받아서 완성하게 되었다.
let movie_id = movie_box['id']를 addEventListener나 movie_cards_box의 forEach안에 넣으니 계속 movie_id is not defined만 뜨고.. 너무 고정관념이 있었던 것 같다.

너무 생각만하고 구현을 하지 않았다고 하셔서 이번엔 생각없이 구현만 하다보니 순간적으로 방향을 잃었던 것 같다.

미리 변수에 할당을 해주고 저런식으로 응용이 가능하다는 것을 배웠다.

오전에는 alert 관련해서 해결하고 깃에 다시 업로드 하고. 오후에는 국취지 3번째 상담을 다녀왔다. 거리가 멀어서 시간적으로 많이 오래 걸렸다.

해설영상 보기 + 카멜케이스

그리고 해설 영상이 업로드 되었다.보는데 아는 것도 있었고 Prettier는 신기했다.
아 늘 _로 코딩하는게 습관이여서 movie_list 이렇게 썼는데 카멜케이스를 권장하셨다. movieList같은.. 뭔가 좀더 알게 되는 거같다.

코드 폴더 구성

asset : 이미지같은 자료담기
style : css 폴더
src : 자바스크립트 폴더
보통 이런식으로 폴더를 구성한다고 한다.

파싱

보통 위에서 아래로 순차적으로 코드가 실행되는데 head에 자바스크립트가 있으면 먼저 자바스크립트를 파싱하고 body로 내려가면 특정한 값이 null이 되는 경우가 있음
1) 간단한 방법은 body 태그 바로 위에 넣기
2) head에 자바스크립트를 위치하고싶다면 defer를 이용할 것

<script defer src = "main.js"></script>

☞ 2번을 사용하면 좋은점은 미리 다운로드를 받기 때문에 사용성이 더 좋아짐
3) type=module을 사용할 수 있음 2번과 동일함

<script type="module" src= "main.js"></script>
<script type="module" src= "movie.js"></script>
<script type="module" src= "search.js"></script>

☞ 3번을 사용하면 좋은점은 위의 코드처럼 각각의 js파일에서 동일한 변수명을 선언할 경우 보통 하나의 스코프로 보기때문에 type="module"을 쓰게 되면 동일한 변수명을 써도 오류가 되지않음

3-1) 그럼 위에처럼 쓸 경우, 다른 js 파일의 변수가 필요할땐?

//search.js
export let getMovie = () => [1, 2, 3]/;


//movie.js
import { getMovie } from "./search.js"

let movie = getMovie();

☞ export와 import로 가능함
☞ html에는 main js를 명시하고 import로 서브 js들을 main js에 넣으면 편리하게 사용이 가능해짐

CSS 변수 선언

/* 주로 테마 색상들은 변수로 관리 */
:root {
  --bg-header-color: #ffe194;
  --bg-card-color: bisque;
}

header {
  background-color: var(--bg-header-color);
}

☞ 변수 지정을 해주고 필요한 곳에 var()을 하면 컬러 선택이 되어서 편리함

오늘의 한줄평 : 내일 팀과제 힘내자!!