npm install
npm run serve
npm run build
npm run lint
npm install vue-router@4
npm install axios
npm install
npm run serve
npm run build
npm run lint
npm install vue-router@4
npm install axios
주요 페이지 3개 컴포넌트를 반환하는 HOC 작성 중 발생한 현상.
Vue 버전 차이로 Vue3에 맞는 마이그레이션 작업을 진행함.
문제가 발생한 부분은 Vue 컴포넌트를 반환하는 렌더 함수에서 발생하였음.
'h' 함수를 통해 javascript를 통해 렌더링 되도록 수정. (Vue3 공식문서)
네이게이션 가드 단계에서 데이터를 가져오고, 컴포넌트 인스턴스 생성 후에도 Spinner가 남아있는 현상이 발생.
강의의 경우 mounted 훅에서 종료하도록 수정했으나,
beforeRouteEnter 로 구현되어 mounted 훅이 다시 발생하지 않음.
따라서 vue.js의 this.$nextTick 메소드를 통해 인스턴스 내 DOM요소 변경이 완료된 이 후 Spinner를 종료하도록 수정하였음.
아래 개발 과정에서 문제가 발생.
1.News 리스트를 fetch
2. fetch 되어 출력된 리스트 안에 'item' 혹은 'user' 값을 인자로 갖는 페이지로 이동.
리스트의 내용이될 '비동기 데이터' 보다 템플릿이 router-link 태그를 렌더링하는 시점이 앞서 있었기 때문일 것으로 예상됨.
Vue3 에서는 이벤트 버스에 대한 개발 형식을 지양함.
"mitt"라는 패키지를 통해 글로벌 이벤트를 등록, 호출 할 수 있으나 생성과 해제에 대한 주의를 요구함.
[현상 & 원인 분석]
mixin의 created 라이프사이클 훅에서 데이터를 호출하여 페이지 전환 간에 비동기 데이터의 반영 과정이 어색하게 표현됨. (페이지 이동 > 데이터 출력)
라우터 네비게이션 가드를 사용하여 아래 목적을 달성하고자 함.
[조치 결과]
[활용]
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.