몽쯔

1. google api검색후 접속 

2. 좌측에 라이브러리 클릭 

3.youtube 검색후 'youtube data API v3' 클릭 -> '사용' 클릭

4. '사용자 인증 정보' 클릭 -> '+ 사용자 인증 정보 만들기' 클릭

5. 'API 키' 클릭

6. API 키 발급 완료 

7. youtube API 사용 법

https://developers.google.com/youtube/v3/getting-started?hl=ko 

8. 유투브에서 원하는 영상 클릭 후 '+저장' 새로만들기로 디렉토리만들고 공개로 설정

9. 디렉토리가 없다면 새로 만들고 있다면 해당 디렉터리에 체크하고 끄기

10. 좌측상단 햄버거 버튼 클릭하면 내가 만든 디렉토리가 생성되어 있다. 클릭 후 상단 주소의 list id 복사

playlist?list=리스트 id 주소

const api_key = '구글 API KEY 값';
const vidid = '유투브 리스트 주소 id 값';

const url = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&key=${api_key}&maxResults=${num}&playlistId=${vidid}`;

fetch(url)
  .then(res => {
    console.log(res);
    return res.json();
  })
  .catch(err => {
    console.log(err);
  })
  .then(json => {
    console.log(json); // 디렉토리에 담긴 정보를 출력할 수 있다
  });

class 추가

document.querySelector('.elem').classList.add('클래스');

class 제거

document.querySelector('.elem').classList.remove('클래스');

해당 DOM 모든 class가져오기

document.querySelector('.elem').className;

class 전체 삭제

document.querySelector('.elem').className = '';

class 포함여부(boolean값 반환)

document.querySelector('.elem').classList.contain('클래스');

css에 선언된 스타일 가져오기

let width = getComputedStyle(elem).width;

이벤트 발생 시 연속 클릭등 같은 이벤트가 중복으로 발생하는 경우가 생긴다.

예를 들어 같은 버튼 연타 같은것

그럴때는 성능 최적화를 위해 이벤트를 중단시키는 코드를 작성해줘야한다.

e.currentTarget은 현재 이벤트가 타겟을 가져온다.

그때 구분할 수 있는 클래스등을 판별해서 아예 리턴 시켜서 이벤트를 빠져 나와버리게 하면된다.

btns.forEach((btn, idx) => {
    btn.addEventListener('click', e => {
        e.preventDefault();

        let isOn = e.currentTarget.classList.contains('on');
        if (isOn) return;
        activation(idx);


    })
});

객체의 속성을 메서드로 사용할 때 function 예약어를 생략하고 생성가능

var nums = {
 num : 100,
 //ES5
 viewNum: function() {
  console.log("aa");
 },
 //ES6
 viewNum() {
  console.log("aa");
 }
};

nums.viewNum(); //aa

객체의 속성명과  값의 이름이 동일하면 축약 가능하다.

var number = 10;
var obj = {
//number: number
 number
};

function이라는 키워드를 사용하지않고 화살표를 쓴다.

기본식

// ES5
function () {}

// ES6
() => {}

//ES5 함수 정의
var fn = function(a, b) {
 return a + b;
};

//ES6 함수 정의
let sum = (a, b) => {
 return a + b;
}

sum(10, 20);

배열 반복문 비교

// ES5 반복문
var arr = ["a", "b", "c"];
arr.forEach(function(value) {
 console.log(value); // a, b, c
});

// ES6 반복문
let arr = ["a", "b", "c"];
arr.forEach(value => console.log(value)); // a, b, c

const

const로 지정한 값은 변경이 불가능하다.

const a = 1;

a = 3; //Uncaught TypeError: Assignment to constant variable.

하자만, 객체나 배열의 내부는 변경 할 수 있다.

const obj = {};
obj.num = 5;
console.log(obj); //{num: 5}

const arr = [];
arr.push(20);
console.log(arr) //[20]

let

let은 값을 변경할 수 는 있으나 재선언는 안된다.

let a = 1;
a = 3; // 3

let a = 3; //Uncaught SyntaxError: Identifier 'a' has already been declared

for문은 값이 계속 바뀌기 때문에 let을 써야함