Hojin

/**
 * Adds two numbers.
 * @param {number} a - The first number.
 * @param {number} b - The second number.
 * @returns {number} The sum of the two numbers.
 */
function addNumbers(a, b) {
  return a + b;
}

parameter = @param  : 이 매개 변수가 무슨 역할을 하는지 기록 가능

@retrun : return값에 대한 설명

- 협업을 많이 할 상황에 자신이 짠 코드를 명시적으로 주석 활용 해주면 보기 편할거 같다.

// apikey는 youtube data API v3을 사용해주었다.
const apiKey = '';

// json 형식의 movie.title을 detail.html에서 setItem 해준 상태

let movieName= localStorage.getItem("movie_name");

영화 이름을 가져와준다.

평점이 높은 역대 영화 리스트를 받아온 거라 데이터가 갱신이 되어도

movieName에는 그거에 맞춰서 변경된다.

const searchQuery = movieName+' trailer';

그것과 '(영화 제목) trailer' 로 키워드를 생성한다.

let url ='...search?part=snippet&q=' + encodeURIComponent(searchQuery) + '&key=' + apiKey;
fetch(url)
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      console.log(data);
      let videoId = data.items[0].id.videoId;
      
      playYouTubeVideo(videoId);
    })
    .catch(function(error) {
      console.log('오류 발생:', error);
    });
}

유튜브에 해당 키워드를 치고 맨 위에 있는 영상 링크를 가져와주는 작업이다.

function playYouTubeVideo(videoId) {
  // iframe 요소 생성
  var iframe = document.createElement('iframe');
  iframe.src = 'https://www.youtube.com/embed/' + videoId + '?autoplay=1'; // autoplay 추가
  iframe.width = '540';
  iframe.height = '250';
  iframe.allowFullscreen = true;

이런식으로 만들어준 url를 iframe 태그를 사용해주어서 완성시켜준다.

// 버튼에 클릭 이벤트 리스너 등록
      myButton.addEventListener('click', function() {
        // 버튼이 클릭되었을 때 실행할 코드 작성
        console.log('버튼이 클릭되었습니다!');
      });

간단한 버튼 구현인데 자꾸 button이 클릭이 안됐다.

애를 먹었지만 chatgpt한테 자꾸 물으니 해답을 찾았다.

addEventListener는 비동기적 표현인데 html에서 script내에 js코드를 넣을 때 body안에 넣어야된다.

다른 방법은 밑에 방법처럼 defer를 넣어주어서 문서 파싱이 끝난 후 js파일을 불러와준다.

그래서 저 코드가 정상 수행될 수 있다.

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

async/await를 사용해도 비동기적 구현으로 오류를 방지할 수 있다 한다.

하지만,

defer 는 동기 스크립트를 차단할 수 없지만, async 는 스크립트 다운로드에 따라 차단할 수도 있다.

: 가져온 정보고 완벽히 이해는 안되지만, defer가 중요하다는 걸 알게 되었다.