[vue] vue 리팩토링: 공통 컴포넌트화(api 통해 뉴스 사이트 구현 ver.6) 오픈 API를 통하여 블로그 형식의 뉴스 사이트를 vue로 구현하는 예제(ver.6)입니다. - 리팩토링 - 예제는 인프런의 캡틴판교, "장기효"님의 Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념을 들으면서 공부한 내용입니다. 리팩토링 컴포넌트 공통화 페이지에서 사용되는 컴포넌트들의 패턴이 중복되어 사용되었을때 이를 공통 컴포넌트화 시킴으로써 코드를 간편화, 구조화 시킵니다. 구현 내용 News/Ask/Jobs 각 페이지를 ListItem.vue에서 컴포넌트를 시킨 후 각각의 페이지에서 ListItem.vue를 import 시킵니다. 리팩토링 before vue > NewsView.vue {{ item.points }} {{ item.title }} {{ item.time_ago }}.. [vue] vue.js 컴포넌트 생성(컴포넌트로 쪼개기) vue.js 하위 컴포넌트 만들기 한개 이상의 페이지를 레이아웃 또는 기능별로 쪼개어 분리하고, 상위 vue 파일에서 통합 관리 하는 것을 컴포넌트화 라고 합니다. 순서 1. 폴더 안에 각 하위 컴포넌트 vue 파일 생성 2. 상위 컴포넌트(App.vue) script 내에 하위 컴포넌트로 import로 콜 3. export default, components 메소드 안, import한 하위 컴포넌트 export 처리 4. 상위 컴포넌트 template 태그내, 각 하위 컴포넌트 태그 삽입 이렇게 컴포넌트 작업이 완료되었습니다. main.js 파일을 확인해 보면, 각각의 하위 컴포넌트가 하나로 합쳐진 App.vue 파일이 import가 되어 아래 vue 인스턴스를 통하여 Virtual Dom 화면에 출력.. 이전 1 다음 반응형
