Toy Project : Tetatube

ichbinmin2·2021년 2월 1일
1

Toy Project

목록 보기
1/2
post-thumbnail

▪️ 프로젝트 소개

동영상 스트리밍 서비스를 제공하는 YouTube 사이트를 기획과 디자인을 제외하고 주요 기능만을 구현한 clone 프로젝트입니다. youtube의 API를 활용하여 영상 스트리밍 페이지 및 검색 기능을 구현했습니다.

👩🏻‍💻 Toy Project : Tetatube

▪️ 기술 스택

  • ReactJS / React-Hooks / PostCss
  • Axios 라이브러리
  • JavaScript(ES6) / HTML

▪️ 진행 도구

  • Notion (프로젝트 기능 구현 계획과 일정 관리)
  • Git + GitHub
  • Postman (API data 관리)

▪️ 구현한 기능

  • 기존의 디자인을 바탕으로 Component 설계
  • PostCSS를 이용한 효율적인 웹 디자인 구현
  • Youtube API와 Map method를 이용한 data render
  • 검색 결과에 따른 data render 기능 구현
  • Axios 라이브러리와 Dependency Injection을 통한 효율적인 API 관리
  • 각각의 component에 따른 Modal 구현
  • 반응형 웹페이지 구현

▪️ 구현 기능 영상

** 1) Main Page(YouTube Most Popular Videos API) **

  • Most Popular Videos API와 Map method를 이용한 자동 Data render
  • Modal 구현

** 2) Search Page (YouTube Search Videos API)**

  • 검색 결과에 따른 data render 기능 구현

  • 검색 결과 후 main 으로 돌아오기


◼️ 기억에 남는 코드

Axios 라이브러리 와 Dependency Injection을 통한 API 보안 관리

  • 공개적으로 배포하는 일이 있을 경우 보안상 문제가 되는 것이 바로 API Key이다. 팀 프로젝트를 진행했을 때에는 백엔드에서 관리를 해주고, 프론트에서 받아오는 방식으로 사용했었는데, 직접 API를 받고 배포까지 진행해야 했기 때문에 간단하게나마 Axios 라이브러리를 사용하고 Dependency Injection 을 통해 보안과 가독성을 염두에둔 효율적인 API 관리가 필요했다.

  • 최상위에서 .env(환경파일)을 만든 뒤에 API KEY 주소를 담아 변수 선언 해주고 가장 최상위 파일인 index.js에 axios.create 명령어를 사용하여 params의 오브젝트 key를 process.env.REACT_APP_YOUTUBE_API_KEY 로 값을 설정해주었다. 그리고 해당 변수를 youtube라는 변수 안에 new 키워드로 오브젝트 안에 할당해주고 최상위 component에 props으로 전달해주었다.
import axios from "axios";

const httpClient = axios.create({
  baseURL: "https://youtube.googleapis.com/youtube/v3",
  params: { key: process.env.REACT_APP_YOUTUBE_API_KEY },
});

const youtube = new Youtube(httpClient);

ReactDOM.render(
  <React.StrictMode>
    <Main youtube={youtube} />
  </React.StrictMode>,
  document.getElementById("root")
);

index.js로부터 전달받은 httpClient을 할당해주었다. 그리고 각 데이터를 받아올 때 사용해주었다. 코드의 가독성을 높이기 위해서 각각의 데이터 조건에 해당하는 값들은 get으로 받아온 뒤 params 안에서 정리해주었다.

class Youtube {
  constructor(httpClient) {
    this.youtube = httpClient;
  }

  async mostPopular() {
    const response = await this.youtube.get("videos", {
      params: {
        part: "snippet",
        chart: "mostPopular",
        maxResults: 24,
      },
    });
    return response.data.items.map((item) => ({
      ...item,
      id: item.id,
    }));
  }

  async search(query) {
    const response = await this.youtube.get("search", {
      params: {
        part: "snippet",
        maxResults: 24,
        type: "video",
        q: query,
      },
    });
    return response.data.items.map((item) => ({
      ...item,
      id: item.id.videoId,
    }));
  }
}

export default Youtube;

TIP API KEY 주소를 넣어둔 .env 파일은 git에 업로드 되지 않도록 반드시 .gitignore 파일에 주석설명을 달아서 작성해주어야 했다.

#API KEYs
.env

axios 라이브러리를 사용하여 반복적이고 가독성이 낮은 코드들을 리팩토링 하면서 프로젝트를 진행할 때에 조금 더 나은 방식, 효율적인 방식으로 코드를 작성하는 법에 대해서 새로이 상기할 수 있었기에 가장 기억에 남는 코드로 뽑았다. 앞으로 진행될 다른 토이 프로젝트를 위해서 가독성과 효율성, 그리고 성능을 고려한 코드를 작성할 수 있도록 노력하고 싶다.


✨✨ 사이트 둘러보기! 👉🏻👉🏻 [Tetatube] (https://ichbinmin2.github.io/tetatube/)

profile
N개월차 프론트엔드 개발자, Teta Min

0개의 댓글