240802

FACTS(사실, 객관) : 내가 한 일

 

예시 영화를 라라랜드로 했는데 감독정보가 없는건지? 안나와서 서치 하니 

tmdb질문란에 같은 질문이 올라와 있어서 참고

fetch(`https://api.themoviedb.org/3/movie/<<movieID>>/credits?api_key=<<your_api_key>>`)
            .then(response => response.json())
            .then((jsonData)=>jsonData.crew.filter(({job})=> job ==='Director'))
            
//질문링크: https://www.themoviedb.org/talk/53ba24bac3a3685eba0067ea

 

fetch 부분을 보면 credits 와 링크가 비슷한데 

기존에 넣어둔 코드에 합치면 되지 않을까 

fetch(
  `https://api.themoviedb.org/3/movie/${movieId}/credits?language=ko`,
  options
)
  .then((response) => response.json())
  .then((response) => console.log(response))
  .then((jsonData) => jsonData.crew.filter(({ job }) => job === "Director"))
  .catch((err) => console.error(err));

이렇게.

 

=>

안된다고 함!

https://developer.themoviedb.org/reference/movie-credits

Credits

여기에 job이라는 속성이 없어서 오류가 뜰 것이라고함..

detail에서도 못찾았는데 그럼 감독정보는 대체 어디에서 어떻게. . .

 

"쿼리스티링 기법"

검색 등을 통해 페이지를 이동할땐 각각 검색어마다 url을 새로 지정해 만들어주기 힘느니까

검색어나 id값을 url에 붙여주는 느낌?

https://www.홈페이지주소.c0m/?type=123/?id=4568

이런식으로 있으며 ?= 엔드기호를 기준으로 값을 구분하는것.

아직 감은 잘 안잡힌다..

let parameters = new URL(location.href).searchParams;
let Id = parameters.get("id");

 

지금 프로젝트에선 조원이 이런 코드를 넣어주셨는데

엔드기호(=)를 기준으로 split을 써서 값들을 배열로 만들어 사용할 수도 있을 것 같다고 하셨음!

 

그리고 다시 더듬더듬 코드짠 결과

이미지들만 표시되지 않음!!

 

먼저 backdrop_path

const backgroundBox = document.getElementsByClassName(
    "movie_detail_container"
  )[0];
  console.log(backgroundBox);
  backgroundBox.style.backgroundImage = `url(${backgroundImgPath}${object.backdrop_path});`;

 

암만 봐도 틀린부분이 없어보였는데 튜터님이 지적해주신 세미콜론.

css에서 항상 값을 주면 세미콜론을 써서 여기에도 그대로 가져왔는데,

무슨 파싱 .. 뭐때문에 세미콜론은 제외하고 url()까지만 넣어야 했던것.!

const backgroundBox = document.getElementsByClassName(
    "movie_detail_container"
  )[0];
  console.log(backgroundBox);
  backgroundBox.style.backgroundImage = `url(${backgroundImgPath}${object.backdrop_path})`;

 

세미콜론을 제외하니 정말 정상적으로 표시됨.!!

 

그리고 포스터는 단순히 클래스명을 실수해서 그런것..

그리고 이제 모든 영화 상세 정보가 불러져 온다

장르, 제목, 개봉일, 평점, 줄거리, 포스터,배경이미지까지 !!

---

 

FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌

개인과제로 한번 해봤던거라고 막혀도 질문해서 힌트를 얻으면 뭔가 술술 풀어나간 느낌이라 너무 뿌듯하다

---

FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것

"쿼리스티링 기법"

 url을 가져와 엔드기호를 기준으로 split해서 여러 값을 가져올 수 있음

물론 이것 말고도 다른 여러가지 방법으로 코드를 짤 수 있음

그리고

이미지.style.backgroundImage = `url(${object.backdrop_path})`;

여기선 백틱 안에 세미콜론을 넣으면 안된다는 것

뭔가 안되는게 있으면 콘솔창을 적극 이용해서 안되는 부분/오류나는 부분을 꼭 확인할 것 

---

FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지

공용: dev // 개인: feature/(기능명)

 

푸쉬하기

1. git add .

2. git commit -m "뭘 했는지"

3. git push origin feature/(기능명)

4. 깃허브에서 pull request생성

 

풀하기

1. git switch dev

2. git pull origin dev =>(이건 안해도 되나?)

3. git switch feature/(기능명)

4. git pull origin dev

 

자꾸 헷갈려서 메모..