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

사용자 경험을 위해서 화면 렌더링이 완료되기 전까지 스피너를 띄워 유저를 지루하지 않게 한다. 구현하는 것은 어렵지 않다. 말 그대로 로딩이 시작되는 시점에서 스피너를 보여주고, 끝나는 시점에 스피너를 가리면 된다. 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를 호출할 경우..

Vue Router 사용 시에 해시모드와 히스토리모드 두 가지 설정이 가능하다. 디폴트는 해시모드 이고 url에 /#/이 붙는다. 히스토리 모드로 설정시에 url이 정상적으로 출력되지만 사용자가 직접 url을 입력하여 접근하면 404 오류가 발생한다. 이를 해결하기 위해서 서버에 포괄적인 대체 경로(index.html)을 추가하면 된다. 현재 프로젝트의 서버 구성이 완료되지 않아서 본인이 firebase를 통해 임시로 프론트개발 상황을 확인하고 있다. firebase에 배포시 firebase.json에 다음과 같은 코드를 추가하면 된다. 1 2 3 4 5 6 7 8 9 10 { "hosting": { "rewrites": [ { "source": "**", "destination": "/index.htm..