최진실

Sejong Univ. DataScience woowacourse

1 분 소요

Web 8주차 워크북

UMC notion

📝 실습 체크리스트

  • 실습결과 : https://chlwlstlf.github.io/UMC/index8.html

    const $contentBox = document.querySelector("#contentBox");

const API_KEY = "AIzaSyCqVlpc4zisorUoXGfENEit1CeouztXTko";

function fetchVideo() {
  fetch(
    `https://youtube.googleapis.com/youtube/v3/videos?part=snippet%2C%20statistics&chart=mostPopular&maxResults=100&regionCode=kr&key=${API_KEY}`
  )
    .then((response) => response.json())
    .then((result) => result.items.map((video) => videoCardTemplate(video)))
    .catch((error) => console.log(error));
}

fetchVideo();

function videoCardTemplate(data) {
  console.log(data);
  const videoItem = `
    <div class="videoItemContainer">
      <a href=${`https://www.youtube.com/watch?v=${data.id}`}>
        <div class="videoThumbnailContainer">
          <img class="thumbnailImg" src=${
            data.snippet.thumbnails?.high.url
          } />
        </div>
      </a>
      <div class="videoDetailsContainer">
        <a class="videoChannelLink" href=${`https://www.youtube.com/channel/${data.snippet.channelId}`}>
          <img class="channelImg" src="https://yt3.ggpht.com/8T1OF6XdiT2t5fjitlxh5KzcrqSsTbrEUxCF0JOM_fCKgWCenl0X8lvmv6NGmLVDSVsP4wZvwQ=s68-c-k-c0x00ffffff-no-rj" />
        </a>
        <a href=${`https://www.youtube.com/watch?v=${data.id}`}>
          <div class="videoMetaDetails">
            <div class="videoTitle">
              <h3>${data.snippet.title}</h3>
            </div>
            <div class="videoMetaData">
              <p class="metaText">${data.snippet.channelTitle}</p>
              <p class="extraMeta">
                <span class="metaText viewCount">${
                  Number(data.statistics.viewCount) > 1000
                    ? (Number(data.statistics.viewCount) / 1000).toFixed(0) +
                      "K"
                    : Number(data.statistics.viewCount)
                } views</span>
                <span class="metaText">•${luxon.DateTime.fromISO(
                  data.snippet.publishedAt
                ).toRelative()}</span>
              </p>
            </div>
          </div>
        </a>
      </div>
    </div>
  `;

  $contentBox.insertAdjacentHTML("beforeend", videoItem);
}

🔥 트러블 슈팅(실패한 경험도 성장을 위한 경험!)

  • 트러블 슈팅 양식 [ 문제 원인 ] [ 해결 방안 ] [ 참고 자료 ]

핵심 키워드 🎯

  • HTTP = HyperText Transfer Protocol

  • Request : front에서 sever로 데이터를 요청하는 것
    • 요청 메소드
      • GET : 조회 (body X)
      • POST : 추가 (body O)
      • PUT : 수정 (body O)
      • DELETE : 삭제 (body X) ```jsx
      ```

  • Response

    • XML : James
    • JSON : { “id” : 1 }

  • 데이터 통신

    • fetch : fetch(url, options)

      //promise
fetch("https://jsonplaceholder.typicode.com/users")//promise 형태
.then(response => response.json())
.then(data => data.map(item => result.push(item))
.catch(error => console.log(error))
console.log(result[0])

//aysnc, await
const dataFetch = async() => {
	const response = await fetch("https://jsonplaceholder.typicode.com/users");
	const data = await response.json();
	return data;
}
const dataResult = dataFetch();

    • axios

      //html <body> 태그 아래에
//<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 추가

axios
  .get("https://jsonplaceholder.typicode.com/users")
  .then((response) => console.log(response.data));

const dataFetch = async () => {
  const response = await axios.get(
    "https://jsonplaceholder.typicode.com/users"
  ).data;
  return response;
};
const dataResult = dataFetch();

console.log(dataResult);

8주차 수업 후기 📢

  • 8주차 수업을 듣고 서로 느낀 점을 이야기해주세요!
  • 핵심 키워드에 대해 완벽하게 이해했는지? 혹시 이해가 안 되는 부분은 뭐였는지? 서로 이야기해주세요!

!주의사항

  1. 과제 피드백 기반 진행입니다 - 한명씩 본인의 과제를 발표하는 시간 그리고 해온 과제에 대한 피드백을 하는 시간 (ex:전 이렇게 생각해서 이런 부분 다르게 해왔는데 저것도 괜찮은 것 같아요!)이 무조건 기반이 되어야 합니다!
  2. 부가적으로 워크북에서 제공되는 키워드 혹은 강의에서 들은 디테일 적인 부분에서 더 토의해봐도 좋을 것 같습니다

논의해보면 좋은 것들 🔥

  • XML 대신 JSON을 데이터 통신에서 많이 쓰는 이유에 대해 토의해보기
  • api를 JavaScript로 호출하는 방식에 대해서 서로 공유하고 각각 스타일별로 장단점을 분석해보기
  • api를 호출하는 다른 라이브러리에 대해서도 조사해보기

카테고리:

업데이트:

댓글남기기

참고