[JS] JS 라이브러리 (lodash, axios)

lodash

; JS의 인기 있는 라이브러리 중 하나. 보통 array, collection, date 등 데이터의 필수적인 구조를 쉽게 다룰 수 있게 끔 하는데 사용

_.uniqBy(C,'a') ; C객체에서 'a'요소가 중복되는 것 제거

_.unionBy(A,B,'a') ; A객체와 B객체를 합치는데, 중복되는 'a'는 제거

_find(A,{a:'b'}) ; A객체에서 a:'b'인 요소를 찾아 해당 요소를 반환

_findIndex(A,{a:'b'}) ; A객체에서 a:'b'인 요소를 찾아 해당 인덱스를 반환

_remove(A,{a:'b'}) ; A객체에서 a:'b'인 요소를 찾아 해당 요소를 삭제

 

Axios

; 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리

- 백엔드와 프론트엔드가 통신을 쉽게 하기 위해 사용

 

---

 

사용 예시

서버에서 영화 데이터 가져오기

1. OMDb API에서 영화 정보 찾기

https://www.omdbapi.com/

OMDb API - The Open Movie Database

http://www.omdbapi.com/?apikey=[yourkey]&s=[Movietitle]

위 주소를 입력하면 Movietitle을 가진 영화정보들이 뜸

 

2. Axios를통해 JS로 가져오기

https://github.com/axios/axios

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

$ npm install axios ; Axios 다운로드

import axios from 'axios'		// axios를 axios라는 이름으로 사용

function fetchMovies() {
  axios
    .get('https://www.omdbapi.com/?apikey=7035c60c&s=frozen')
    .then(res => {
      console.log(res.data.Search[0].Poster)
      const h1El=document.querySelector('h1')
      const imgEl=document.querySelector('img')
      h1El.textContent=res.data.Search[0].Title
      imgEl.src=res.data.Search[0].Poster
    })
}
fetchMovies()