[udemy] Web Developer javascript AXIOS

AXIOS (공식)

 

설치하지 않고 사용

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

 

BTC 가격 가져오기

다른 코인에 대한 정보를 부를 수도 있게 ALL 에서 BTC를 찾았지만, BTC로 입력으로 BTC 정보만 가져올 수 있다

 

header 세팅

header 입력하여, 데이터를 요청
데이터 정보를 받아 목록에 집어 넣어서 보여주는 작업

 

---

 

TMDB API 받아보기 (여기)

• 회원가입
• 계정 설정 - API 요청

API 신청

• API 키 가져오기

해당 API 가져오기 위한 참고 : 여기1, 여기2

Image 사용을 위한 Tip (여기)

 

index.html

기본적인 정보 제공을 위해 radio로 체크하여 보여줌

 

imageBaseURL : GET으로 정보를 불러올 때, 이미지 파일명만 제공되기에 필수적 요소

 

radio 사용 (참고)

<form>
  <p>Please select your preferred contact method:</p>
  <div>
    <input type="radio" id="contactChoice1"
     name="contact" value="email">
    <label for="contactChoice1">Email</label>

    <input type="radio" id="contactChoice2"
     name="contact" value="phone">
    <label for="contactChoice2">Phone</label>

    <input type="radio" id="contactChoice3"
     name="contact" value="mail">
    <label for="contactChoice3">Mail</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

type은 radio, 같이 연동할 객체들을 name으로 묶음

 

const select = document.querySelector("input[type='radio']:checked").id;

선택된 문자열을 얻기 위한 코드

 

API 정보 가져오기

form.addEventListener("submit", async function (e) {
  e.preventDefault();
  const res = await axios.get(
    `https://api.themoviedb.org/3/${select}/popular?api_key=0b9543b723169b2470~~~`
  );

해당 API에서 tv 혹은 movie의 정보를 가져오기 위해 버튼 누를 때마다 정보를 가져옴 (비효율적..)
두 가지를 가져와서 저장을 해놓고 사용을 하는 게 더 나을 거 같긴 하지만 radio가 선택된 부분과 매끄럽게 하는 방법을 몰라 우선적으로 보여주기 위한 코드

 

자식 노드 추가 및 삭제

appendChild (참고)
removeChild (참고)

 

결과물

 

axios 사용을 위해 API에 대해서 찾다보니 코인에 대한 정보 그리고 영화에 대한 정보를 불러오는 것은 API마다 방식이 다르고 사용방법에 대해 기록해 놓은 문서들이 있다보니, 읽어보고 필요한 정보가 무엇인지 어떻게 사용하는지를 확인을 해야 된다