당신보다 고작 하루 먼저 시작한 개발자의 오지랖

백엔드와 통신을 편하게 하기 위해서 보통 Ajax와 Axios와 같은 HTTP 비동기 통신 라이브러리를 사용한다. 퀘이사 프레임워크를 설치할 때, axios를 설치할 것이냐고 묻고, 선택을 하게 되면 자동으로 boot파일에 axios를 추가해 준다. 우선, axios를 설치한 후, 스크립트에서 axios를 통해 api를 호출하는 법은 매우 간단하다. 1 this.$axios.get('http://127.0.0.1:8000/api/users/') cs 하지만, 이렇게 사용하면 백엔드 url이 변경될 때마다, 모두 찾아가서 주소 값을 변경해줘야 하는 번거로움이 생긴다. 그래서 axios의 baseUrl 속성을 사용한다. 위 코드처럼 baseUrl을 설정하면된다. 본인은 test서버와 본 서버를 구분해 놓기 ..

사용자 경험을 위해서 화면 렌더링이 완료되기 전까지 스피너를 띄워 유저를 지루하지 않게 한다. 구현하는 것은 어렵지 않다. 말 그대로 로딩이 시작되는 시점에서 스피너를 보여주고, 끝나는 시점에 스피너를 가리면 된다. Vue에서는 v-if를 활용하면 돼서 정말 간단하다. 1 2 3 4 5 6 7 8 9 // ... 기타 코드 Colored by Color Scripter cs 1 2 3 4 5 6 7 export default defineComponent({ data () { return { isLoading: true } } }) cs v-if를 활용해서 화면 로딩이 끝나는 시점에 데이터 변수를 false로 바꿔주면 된다. 1 this.isLoading = false cs 마찬가지로 API를 호출할 경우..