▪️ 프로젝트 소개
동영상 스트리밍 서비스를 제공하는 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으로 전달해주었다.
자세한 소스코드는 github의 repo를 참고 부탁드립니다.index.js로부터 전달받은 httpClient을 할당해주었다. 그리고 각 데이터를 받아올 때 사용해주었다. 코드의 가독성을 높이기 위해서 각각의 데이터 조건에 해당하는 값들은 get으로 받아온 뒤 params 안에서 정리해주었다.
자세한 소스코드는 github의 repo를 참고 부탁드립니다.
TIP API KEY 주소를 넣어둔 .env 파일은 git에 업로드 되지 않도록 반드시 .gitignore 파일에 주석설명을 달아서 작성해주어야 했다.
#API KEYs .env
axios 라이브러리를 사용하여 반복적이고 가독성이 낮은 코드들을 리팩토링 하면서 프로젝트를 진행할 때에 조금 더 나은 방식, 효율적인 방식으로 코드를 작성하는 법에 대해서 새로이 상기할 수 있었기에 가장 기억에 남는 코드로 뽑았다. 앞으로 진행될 다른 토이 프로젝트를 위해서 가독성과 효율성, 그리고 성능을 고려한 코드를 작성할 수 있도록 노력하고 싶다.
✨✨ 사이트 둘러보기! 👉🏻👉🏻 Tetatube
