Yongtube Toy project 진행중 사용했던 라이브러리, 문법 정리

ym j·2021년 8월 9일
0
post-thumbnail

이전에 사용하지 않았던 postman, axios, async, await 등에 대해 학습하고자 Youtube API를 사용하여 영상을 불러오는 간단한 토이프로젝트를 진행해보았다. 토이 프로젝트를 진행하면서 새로 학습하고 직접 적용해본 툴, 라이브러리, 기능, 로직에 대해서 간단히 정리하고자 한다.

구조분해 할당(할당 시 이름 바꾸기, 깊은 값 비구조화 할당)

할당 시 이름 바꾸기

const obj = { a: 10, b: 20 };
const { a, b } = obj;
console.log(a, b); // 10, 20
//
const obj2 = { c: 10, d: 20 };
const { c, d: e } = obj2; // 변수명 d를 e로 변경
console.log(c, e); // 10, 20 (e로 )
  • 위에서 보는것처럼 일반적으로 사용하는, 구조분해 할당 방법은 위의 obj를 객체 안의 속성명인 a,b에 할당하여 이를 변수로 사용하는 것이다. 하지만 obj2처럼 기존 객체에 존재하는 속성명이 아닌, 다른 변수명을 지정하여 해당값을 할당할 수 있다.

깊은 값 비구조화 할당

const test1 = { target: { value1: 30 } };
const { value1 } = test1.target; // 비구조화 할당 1번 적용
console.log(value1); // 30
//
const test2 = { target: { value2: 30 } };
const {
  target: { value2 },
} = test2; // 비구조화 할당 2번 적용
console.log(value2); // 30
  • 깊은 비구조화 할당은 중복객체 즉 객체 안에 또다른 객체가 존재할 때 사용이 가능하다. 물론 비구조화 할당을 2번에 걸쳐서 하는 방법도 있지만, 위처럼 한번에 적용하여 값을 추출할 수 있다.


모듈화, Async, Await

class Youtube {
  constructor(key) {
    this.key = key;
    this.getRequestOptions = {
      method: "GET",
      redirect: "follow",
    };
  }
  //
  search(query) {
    return fetch(
      `https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&q=${query}&type=video&key=${this.key}`,
      this.getRequestOptions
    )
      .then((response) => response.json())
      .then((result) => {
        return result.items.map((item) => ({ ...item, id: item.id.videoId }));
      });
  }
}
export default Youtube;
class Youtube {
  constructor(key) {
    this.key = key;
    this.getRequestOptions = {
      method: "GET",
      redirect: "follow",
    };
  }
  //
  async search(query) {
    const response = await fetch(
      `https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&q=${query}&type=video&key=${this.key}`,
      this.getRequestOptions
    );
    const result = await response.json();
    return result.items.map((item) => ({ ...item, id: item.id.videoId }));
  }
}
export default Youtube;
  • 위 로직은, 유튜브 API로부터 영상 관련 데이터를 받아오는 모듈화된 로직이다. 예전에 프로젝트를 진행하면서 작업했던 방식은 기존 컴포넌트마다 일일이 fetch 로직을 작성하는 방식으로 진행했다. 하지만 위와 같이 특정 클래스 안의 메서드로 모듈화하여 사용해보니 재사용성이 높고, 실제 컴포넌트에 불필요한 로직이 줄어들어 가독성을 높일 수 있었다.

  • 또한 프로미스를 리턴하는 fetch 함수를 사용할때 async, await 적용하니 기존 프로미스의 then 체이닝을 피하고 비동기 처리 관련 로직의 가독성을 높일 수 있었다.



fetch => axios

import axios from "axios";
//
class Youtube {
  constructor(key) {
    this.youtube = axios.create({
      baseURL: "https://www.googleapis.com/youtube/v3",
      params: { key: key },
    });
  }
  //
  async search(query) {
    const response = await this.youtube.get("search", {
      params: {
        part: "snippet",
        maxResults: 25,
        type: "video",
      },
    });
    return response.data.items.map((item) => ({
      ...item,
      id: item.id.videoId,
    }));
  }
}
  • JS에서 제공하는 기본 내장 비동기 통신 fetch 함수 대신, axios 라이브러리를 통해서 비동기 통신 로직을 구현해봤다.

  • create를 통해 기본 baseURL 및 API key값을 정한 후, 비동기 처리할 메서드안에서 필요한 쿼리를 params로 지정하여 사용하였다. (그 외 필요한 쿼리 및 변수들은 공식문서에서 참고할 수 있다.)

  • API 주소가 길었던 fetch와 다르게, axios를 사용하니 좀더 간결하게 코드를 작성할 수 있었다. (axios 관련해서는 다음 글에 정리할 예정이다.)



환경변수 파일 적용

프로젝트를 진행하면서 API를 사용할 때 key값을 발급받게 된다. 이러한 key값은, 개인 고유의 것이기 때문에 github에 올릴 수없다. 따라서 이를 환경변수 파일에 적용하여 해당 key값을 숨길수 있다. ( 노드 환경에서는 dotenv 라이브러리를 통해 환경변수 파일을 관리하지만 CRA의 경우 dotenv가 기본적으로 내장이 되어있기 때문에 CRA 공식문서를 참고하여 바로 사용할 수 있다.)

  • 위처럼 최상단 디렉토리에 .env 명의 파일을 생성하여 원하는 이름으로 key값을 지정해주면 된다. (key값 앞에는 반드시 REACT_APP_ 키워드가 와야한다.)

const youtube = new Youtube(process.env.REACT_APP_YOUTUBE_API_KEY);
  • API key값에 접근할 때는, 지정해준 키 값 앞에 process.env.키값이름으로 접근할 수 있다.


Reference

profile
블로그를 이전하였습니다 => "https://jymini.tistory.com"

0개의 댓글