팀 프로젝트를 시작하면서 드디어 api를 사용하기 시작했다. 항상 get만 사용하였는데 이번 경험을 통해 post와 put, delete등 다양한 요청을 시도해 볼 것 같다.
1. axios.create
- axios 비동기 처리를 도와주는 라이브러리는 보통 아래와 같은 방법으로 사용할 수 있다.
-
아래와 같은 http메서드를 제공해서 보다 편리하게 사용이 가능하다.
-
실제 사용 예시(비교)
-
이번에는 이렇게 따로 파일을 만들어서 client라는 인스턴스를 생성해서 사용하는 법을 배웠다. 전역적으로 유용하게 사용할 수 있는 방법인 것 같고 환경변수 셋팅을 추가적으로 함께 사용하면 중복되는 내용을 간편하게 만들어 줄 수 있다.
-
아래 사진은 내가 작성한 코드의 일부를 가져왔다. 이렇게 client만 import하여 url부분은 baseURL 뒤에 이어지는 내용만 적어주면 된다.(endpoint나 그 외 파라메터값 혹은 쿼리스트링)
2. 환경변수를 셋팅하는 이유
웹,앱 개발을 하다보면 포트, DB관련 정보, API_KEY등.. 개발자 혼자서 또는 팀만 알아야 하는 값 즉, git, 오픈소스에 올리면 안되는 값들이 있다. 이때 필요한 것이 dotenv 패키지 이며 환경변수 파일을 외부에 만들어 URL,포트, API_KEY등.. 을 저장시켜 소스코드 내에 하드코딩하지 않고 사용할수 있다.
-
.env 파일
외부 파일(.env)에 환경변수를 정의하여 변수로 받아오는 이유는 보안과 유지보수에 용이하기 때문이다.
.env 파일은 프로젝트의 최상위 루트에 파일을 만들어놓는다.
-
변수명은 반드시 ‘REACT＿APP＿‘으로 시작되어야한다.(create react app으로 만들면 이렇게만 해도 불러올 수 있다.)
-
React에서는 모든 환경변수 앞에 REACTAPP을 붙여줘야 .env파일을 사용할 수 있다.
create-react-app에서는 보안이 필요한 환경변수의 유출을 미연에 방지하기 위해 REACTAPP으로 시작되지 않는 환경변수는 무시한다.
-
저장한 변수들을 사용할 때는, 아래와 같이 사용할 수 있다.
*.env사용하기
process.env.REACT＿APP＿는 예약어이므로, 다른 이름은 사용하면 React가 인식하지 않는다.
process.env는 실행시 로드되기 때문에 .env의 설정을 바꾸게 되면 React 프로젝트를 다시 구동해야된다.
- .env파일을 .gitignore에 추가한다.(git의 배포 관리항목에서 제외되어 보안을 지킬수 있다.)
