[23.05.30.] 내배캠 3주차 1일

오늘의 학습내용

• 내배캠 JavaScript 문법종합반 5주차 강의 수강

DOM_API 실습

클래스 생성연습, gatters 와 setters, 상속, 정적메소드, 소개 및 예시에 대하여 강의를 들었다.

개인프로젝트 완료 후 복습할 예정이다.

• 개인프로젝트 (내배캠 최고평점 영화 콜렉션) HTML, CSS, API불러오기 - [2주차]개인프로젝트 폴더 참조

내배캠 최고평점 영화 콜렉션이라는 주제로 바닐라자바스크립트만을 이용하여 

영화 검색기능이 있는 웹사이트를 만들어야한다.

오늘은 큰 틀에서 HTML과 약간의 CSS와

부트스트랩을 이용한 카드 목록에 TMDB에서 받아온 영화데이터를 필요한 목록만 나열하는 것을 해보았다.

HTML 뼈대 잡는것은 어렵지 않았으나 CSS에서 제목과 영화검색부분이 붙어지지 않아 고민하였다.

그 이유는 제목 부분과 영화 검색부분을 class를 따로 두고 CSS에서 margin을 0으로 두려고 했기 때문인데

스터디 조원분의 도움을 받아  header 태그내에 h1태그와 search 태그를 두고 CSS의 style태그내에서 header태그 전체에 변화를 주었다. 그 결과 제목과 검색부분을 한곳에 둘 수 있었다.

 

두번째로 TMDB에서 API 불러오기가 힘들었다. 순서는 아래와 같다.

1)TMDB가입 후 method GET을 fetch하는 코드를 복사하여 자바스크립트 내에 붙여주었다.

2) 웹종반 3주차 스파르타피디아 fetch 부분을 보면서 실시하였다.

불러온 API의 결과를 rows로 변수선언한 뒤 

rows를 forEach 돌면서 내가 필요한 정보를 각각 변수선언 해주었다.

3) temp_html을 이용하여 동일한 card 형태를 복사 붙여넣기 후 위 3)의 변수들을 ${} 형태를 통해 넣어주었다.

4) 카드 내 영화 이미지 불러오기를 하기위해, 안내선 기본에 들어가 예시를 보니 https://image.tmdb.org/t/p/w500/1E5baAaEse26fej7uHcjOgEE2t2.jpg 이렇게 나타나 있었고

... /w500/ poster_path 를 넣으면 될 것 같아 해보았더니 성공했다.

 

내일의 계획

1) 영화 검색하는 방법(대문자를 소문자로 바꿔주는것)

2) J.Query사용한 부분을 JavaScript로 변경하는 것을 한 뒤 

3) 영화 카드를 클릭하면 id가 alert 되는것

4) 나머지 CSS를 더 할 것이다.