hyun0721 / vue-news

vue-news

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Vue Router

npm install vue-router@4

Install Library

npm install axios

vue-news's Issues

[ISSUE] HOC(High Order Component) 적용

주요 페이지 3개 컴포넌트를 반환하는 HOC 작성 중 발생한 현상.

Vue 버전 차이로 Vue3에 맞는 마이그레이션 작업을 진행함.

문제가 발생한 부분은 Vue 컴포넌트를 반환하는 렌더 함수에서 발생하였음.
'h' 함수를 통해 javascript를 통해 렌더링 되도록 수정. (Vue3 공식문서)

[ISSUE] 데이터 fetch 이 후, DOM 조작 완료 시점에 Spinner 종료

네이게이션 가드 단계에서 데이터를 가져오고, 컴포넌트 인스턴스 생성 후에도 Spinner가 남아있는 현상이 발생.

강의의 경우 mounted 훅에서 종료하도록 수정했으나,
beforeRouteEnter 로 구현되어 mounted 훅이 다시 발생하지 않음.

따라서 vue.js의 this.$nextTick 메소드를 통해 인스턴스 내 DOM요소 변경이 완료된 이 후 Spinner를 종료하도록 수정하였음.

[ISSUE] 동적 라우팅 개발 간의 발생한 문제.

아래 개발 과정에서 문제가 발생.

1.News 리스트를 fetch
2. fetch 되어 출력된 리스트 안에 'item' 혹은 'user' 값을 인자로 갖는 페이지로 이동.

리스트의 내용이될 '비동기 데이터' 보다 템플릿이 router-link 태그를 렌더링하는 시점이 앞서 있었기 때문일 것으로 예상됨.

[ISSUE] Event Bus 구현

Vue3 에서는 이벤트 버스에 대한 개발 형식을 지양함.

"mitt"라는 패키지를 통해 글로벌 이벤트를 등록, 호출 할 수 있으나 생성과 해제에 대한 주의를 요구함.

[ISSUE] 라우터 네비게이션 가드를 통한 데이터 호출로 변경

[현상 & 원인 분석]

1. mixin의 created 라이프사이클 훅에서 데이터를 호출하여 페이지 전환 간에 비동기 데이터의 반영 과정이 어색하게 표현됨. (페이지 이동 > 데이터 출력)

2. 라우터 네비게이션 가드를 사용하여 아래 목적을 달성하고자 함.

• 화면 전환이전 (beforeEnter, beforeRouteEnter) 시점에 데이터 fetch
• 위 가드의 시작 지점에 Spinner 시작
• 위 가드의 비동기 fetch 완료 후 Spinner 종료

3. 강의와의 차이점. (ISSUE)

• Spinner를 mitt를 통한 Event Bus로 구현하여, 라우터 가드 (beforeEnter)에서 호출하지 못함. (컴포넌트 인스턴스가 생성되기 이전이기 때문)

[조치 결과]

1. 컴포넌트 내부의 가드를 통해 조치 (beforeRouteEnter)
2. 확인된 내용 정리

1. 라우터 가드의 수행 순서
   전역 (beforeEach) > 라우터 (beforeEnter) > 컴포넌트(beforeRouteEnter)
2. 컴포넌트 인스턴스 접근
   컴포넌트(beforeRouteEnter) 레벨의 next 콜백함수의 비동기성을 이용해 구현함.

[활용]

1. "조치 결과"의 인스턴스 접근 부 구현에서, 모든 컴포넌트 코드에서 beforeRouteEnter의 동일한 코드가 반복됨.
2. 따라서, mixin 으로 내용을 공통화 하고자 하였음.
3. 그러나 mixin은 컴포넌트가 인스턴스화된 이 후 호출되기 때문에 컴포넌트 인스턴스에 접근하여 mitt (Spinner)를 호출하지 못함.
4. 결과적으로는 Event Bus 라이브러리 보다, store를 통한 Spinner 구현이 좀 더 활용적일 것으로 판단됨.