<aside> 💡 map 함수를 이용하여 배열 데이터 반복적으로 뿌려주기! *에러가 났을 때 → key값 입력해주기

</aside>

<aside> 💡 state 리엑트에서 자동으로 변수 값을 바꿔줌~!

</aside>

✔️ component 페이지 생성

• Main.js
  • 코드보기
  • Main.js의 여러가지 연동방법

• About.js
  • 코드보기

• Contact.js
  • 코드보기

• Portfolio.js

  • 전체코드보기
  • 클래스로 컴퍼넌트화 시키기
  • 컴퍼넌트 생명주기
  • getPorts() 함수 선언
  • 반복적인 부분 컴퍼넌트화 시키기

• PortInfo.js

  • 코드보기

• Reference.js
  • 코드보기
  • 기본틀 코드보기
• ReferDetail.js
  • 코드보기

• Script.js
  • 코드보기

• Youtube.js

  • 코드보기

  1. YouTube API 사용하기

  <aside> 💡 YouTube Data API v3 를 이용하면 영상 리스트 조회 & 영상 조회 작업이 가능함 → YouTube Data API 사용 설정 후 API Key 생성

  </aside>

  • API Key 발급받기 (검색 'youtube api')
    • 링크에 접속해서 API Console 클릭
    • 🔑사용자 인증 정보 → API키 생성하기
    • ①사용 버튼 클릭 ②API 사용해 보기 → YouTube API키 생성하기

  2. YouTube영상 검색 API 요청

  Postman API Platform | Sign Up for Free

  Postman이란?

  <aside> 📌 개발한 API를 테스트하고, 그 결과를 공유하여 API 개발의 생산성을 높여주는 플랫폼

  : query string이 포함된 GET 방식의 호출 JSON이 사용된 POST 방식의 호출이 대표적 사용방법

  </aside>

  • 대상 URL에 요청할 메소드 지정 가능

  • 호출에 필요한 파라미터의 전달 방식 설정
  • 빠르게 결과 확인 가능
  • 사용방법