2024/07 4

Axios를 이용한 통신 모듈 구조화 - ts 버전

연계 컨텐츠1. Axios를 이용한 통신 :  https://dev-leon.tistory.com/822. Axios를 이용한 통신 모듈 구조화 : https://dev-leon.tistory.com/83 구조화가 필요한 이유1. 통신 결과를 Interface로 선언하여, 통신 결과를 사용하는 개발자는 ts 모듈이 약속된 타입을 모두 알려줍니다.2. 요청과 응답을 한곳에서 관리하므로, 백엔드 API가 변경되더라도 프런트엔드의 한 곳에서만 수정해주면 전체에 반영됩니다.즉 개발자들이 호출한 곳을 일일이 찾아가며 변경할 필요가 없어 집니다. 통신의 반환값의 타입을 Interface로 지정하는 방법ts에서는 반환값을 지정할수 있는데, 함수를 하나 만들어서 백엔드와 약속된 형식이 있다면 해당 형식을 Promise..

Web/Quasar 2024.07.09

Axios를 이용한 통신 - ts 버전

연계 컨텐츠1. Axios를 이용한 통신 :  https://dev-leon.tistory.com/822. Axios를 이용한 통신 모듈 구조화 : https://dev-leon.tistory.com/83 Axios란프런트엔드에서 Promise 방식으로 HTTP 통신을 수행하는 라이브러리입니다.프런트엔드에서 가장 많이 사용하는 라이브러리입니다. 설치방법  npm 방식    npm install axios  yarn 방식     yarn add axios 사용 방법  api.ts 파일에 Axois 객체 생성하고 intercepters까지 적용import axios, { Axios } from 'axios';const api: Axios = axios.create({ baseURL: 'your-backen..

Web/Quasar 2024.07.09

Quasar에서 환경 변수 사용하기 - 보류(파일로 사용하는 방식은 보안이 안됨)

환경 변수가 필요한 이유  개발과 테스트 배포, 실제 서비스 배포에서 각각 다른 설정값을 사용해야 할 경우에 현재 구동되는 환경을 알아야 하는데 이때 사용하는 방법이 환경 변수입니다.  Quasar에 환경 변수 알아보기  process.env 변수안에 현재 환경에 대한 값들이 들어 있습니다.  개발시 구동할때, env 변수의 값을 보여줍니다. Quasar에 환경 변수 사용하는 법  환경변수로 구분해야 할 것은 개발과 테스트 배포, 실서비스 배포 이렇게 3가지 인데, 위에 나온 변수들을 이용하여 구분하여 보겠습니다.   각 환경에 맞는 명령어를 사용하여 서비스 실행    개발 모드  : $ quasar dev    테스트 배포 모드 : $ quasar build -d (--debug)     제품 배포  ..

Web/Quasar 2024.07.02