[movie PJ_day2] DOM을 활용한 바닐라 코딩🍦

하루 종일 붙잡고 있으면서 알게 된 것들과 트러블 슈팅☄️

과제 수행 순서에 따라 알게 된 것과 트러블 슈팅 부분을 자세히 적어두겠다.

---

과제 수행 순서

1. <script type="module"> 설정 💡
2. html에 css 연결 ☄️
3. css로 메인 화면 header, card 형태 만들기
4. fetch의 ulr 내의 en-US -> ko-KR로 변환 & url 한글화 ☄️
5. 클릭 시 나오는 카드 html 만들기 --> 추후 사용 예정
6. fetch로 api 정보 가져오기 -> 앨범 프로젝트&웹개발 종합반 3주차 참고
💡
     6-1. 영화 한 개의 정보 가져오기
- (전체)data의 (문자열)’results’의 0번째 값
     6-2. forEach로 하나씩 찍어내기
7. 가져온 값을 카드에 대입하기 💡
8. 사진 카드들을 grid 레이아웃 스타일링 💡
9. 사진 가져오기(DOM 형식) 💡
10. temp_html = ``

 

 

알게 된 것

1. Script 태그에 type이 module임을 명시하기

1-1. 모듈화란?
▸ 소프트웨어를 작은 단위인 모듈로 분리하여 개발하는 방법
▸ 모듈은 특정 기능을 수행하는 작은 코드 블록이며 모듈끼리 상호작용하면서 전체 소프트웨어 시스템을 구축함

1-2. 모듈화의 필요성?
▸ 개발 속도를 높이고 비용을 절감할 수 있다.
▸ 전체 코드의 영향을 최소화하여 유지보수 용이
▸ 개발시간을 단축하고 효율성을 높일 수 있음
▸ 각 모듈은 특정 기능을 담당하므로 코드의 의도를 이해하기 쉽고 가독성이 좋아짐
▸ 빠르게 버그를 발견하고 수정 가능
▸ 필요에 따라 새로운 기능을 추가하거나 기존 기능을 변경하는 작업이 비교적 간단해짐
▸ 각 모듈은 독립적으로 테스트되므로 전체 시스템의 품질을 높일 수 있다.
▸ 대규모 프로젝트에서의 분업이 용이함.
출처:https://gyaeh-coding.tistory.com/123

6-1. 영화 한 개의 정보 가져오기

• (전체)data의 (문자열)’results’의 0번째 값

 

 

6-2. forEach로 하나씩 찍어내기

function popularMovie() {
  const url = "https://api.themoviedb.org/3/movie/popular?api_key=${key}&language=ko-KR&page=1";
  fetch(url).then(res => res.json()).then(data => {
    let rows = data['results'];
    rows.forEach(a => {
      let title = a['title'];
      let vote_aver = a['vote_average'];
      console.log(title, vote_aver);
    });
  })
};
popularMovie();

 

 

 

7. 가져온 값을 카드에 대입하기 (->  DOM 활용으로 변경)

• $('#mvtitle').text(title); 을 아무리 입력해도 콘솔 창에서 $가 인식이 안 되었다.

Api 정보 Html 연결하기를 찾던 중 이걸 보고 jquery 연결 링크를 복사했더니
(추억 앨범 만들기에서 가져옴)

영화 제목과 평점이 떴다.

 

하.지.만

이것은 jQuery를 이용해서 간편하게 가져오는 방법!
하지만 지금은 바닐라자바스크립트🍦로 순수 코딩을 위해 생략..

——> DOM을 활용하기 !!!

document.querySelector("#id값")

이런 식으로 ~

 

8. 사진 카드들을 grid 레이아웃 스타일링

https://studiomeal.com/archives/533 참고하여

이번에야말로 CSS Grid를 익혀보자

(정말 정리가 잘 되어있다! 종종 참고하는 중)

.Cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

작성 완료!

 

 

9. 사진 가져오기

• 사진이 .jpg 파일이라 가져오기 곤란…
  ——> 해당 사이트를 찾아보기(공식 문서!!)
  TMDB > Guides > IMAGES > Basics > Example 링크!!!

~w500 까지 복사하여 js 빈 곳에 변수로 할당하기
(제공되는 이미지 파일이 /부터 시작하기 때문)

 

+) JSON이란,

JavaScript Object Notation의 약자로,
key와 value 쌍으로 이루어진 형태의 object 이다.
형태 => "key": "value"

 

+) vscode 확장프로그램 Prettier 설치 및 설정

-> 저장 시 코드가 일치적으로 조정됨

 

+) innerHTML

innerHTML 속성은
HTML 요소의 내부 HTML 콘텐츠를 가져오거나 설정한다.
즉, 내용을 그대로(공백 포함) 문자열로 가져오거나 설정할 수 있다.

 

[HTML]

<div id="example">
    <!-- 주석입니다. -->
    일반 텍스트입니다.
    <p>안녕하세요</p>
    <span>여기는 예시입니다.</span>
</div>

 

[JavaScript]

const element = document.getElementById("example");

console.log(element.innerHTML);

 

[출력값]

출처: https://codingeverybody.kr/자바스크립트-element-innerhtml-property/

 

 

트러블 슈팅

2. html에 css 연결

단계 1. <div>에 class 지정
단계 2. Css 파일 내 클래스명 앞에 ‘.’ 추가작성 (.클래스명/태그명으로 할 시에는 생략)
단계 3. Html 파일에 <link rel="stylesheet" href="style.css"> 추가
=> 적용 성공
https://grace-go.tistory.com/28 참고

 

 

4. fetch의 ulr 내의 en-US -> ko-KR로 변환 & api 한글화

4-1. - 영화 정보를 한글로 가져오기:
fetch의 ulr 내의 en-US -> ko-KR로 변환

 

 

4-2. api 정보 한글화

 

[상황] url을 구글에 입력하니 나오지 않음

 

 

시도 1. '?'뒤에 api_key=${key} 를 추가
( https://velog.io/@ncookie/IMDB-TMDB-API-사용법-정리 )참고 -> 실패

 

시도 2. Language ~ 삭제 -> 잘 나오지만 영문

 

 

시도 3. ?language~ 추가 -> 실패

 

 

해결 방법 및 최종 형식
<쿼리 파라미터>
쿼리(Query)는 '문의' 또는 '물음표'라는 뜻을 가지고 있는데요. 쿼리 파라미터(Query Parameter)는 URL 뒤에 물음표(?)와 함께 붙는 키-값(Key-Value) 쌍입니다. 여러 개의 쿼리 파라미터를 전달하려면 파라미터 사이에 앰퍼샌드(&)를 추가해서 하나의 문자열(string)로 전달하세요. 쿼리 파라미터로는 문자열뿐만 아니라 숫자, 리스트 등 다양한 형태의 데이터를 넣을 수 있어요.

 

https://api.themoviedb.org/3/movie/popular?api_key=${key}&language=ko-KR&page=1

출처:https://docs.tosspayments.com/resources/glossary/query-param