유튜브 클론코딩 Axios부분 리팩토링 & 환경변수

원본코드처럼 api를 무분별하게 호출하게 된다면  대규모 프로젝트에 투입하게 됐을때 네트워크통신이 계속해서 중첩되면서  버그가 생길수도 있고 시간과 비용을 낭비된다. 이를 위해 네트워크 통신하는 컴포넌트를 따로 모아놓은 class를 만들어 놓고 거기서 필요한 것을 컴포넌트 안에다가 injection + dependency하게 해주면   코드의 단순화 뿐만 아니라 재사용을 높혀줄 수있다 여기서 injection + dependency 이란 내부에서 만든 변수를 외부에서 넣어주는 것이다. 

Dependency
의존 관계를 가지는 상황에 대한 이해를 하시면 될 것 같습니다. 예를 들어 B 클래스에서A 클래스를 내부에 변수로 사용하게 됨으로써 B 클래스는 A 클래스에 의존관계가 생기게 됩니다.

Injection
 내부가 아니라 외부에서 객체를 생성해서 넣어주는 것을 주입한다고 합니다.

<원본코드>

<리팩토링 코드>

🌹fetch api 사용

🌹axios사용

 

💡environment variable 설정💡

리액트를 이용하여 프로젝트를 만들 때, 외부 서비스 제공자의 서비스를 사용하는 경우가 존재한다. 이때 중요한 것이 API를 사용하기 위해 등록하면서 발급받은 API Key(Secret)과 Client ID를 잘 기억하고 사용하는것이 중요한데  API KEy같은 중요한 정보는 절대로 외부로 노출되어서는 안된다. 관리의 편의성 및 보안을 위해 환경변수를 이용해 보고자 한다.