전체 글 검색 결과
275 개의 검색 결과가 있습니다.
[DEV] App Dev ∕ Web Front/Framework ∕ Vue

[vue.js] 공통 컴포넌트/Event Bus/Multi,Single Page 개념

# 재활용 가능한 공통 컴포넌트란? - 어떤 이벤트가 발생했다는 정보만 (onDragStart...?, onDragEnd...?) 부모 컴포넌트에 전달해주는 것 - 실제 구현은 부모와 자식 둘중, 어디서 구현해야하는지 잘 구분해야 함 # Event Bus 방식 - 부모/자식 간 Depth가 깊을 경우, 같은 레벨간 데이터 전달이 쉽지 않으므로, 리스너만 등록해주고, Event 발생 시점에 EventBus로 emit # Multi Page 방식(기존) - 페이지별로 url과 리소스가 존재하고, 검색엔진은 개별 페이지를 참조한다. # Single Page 방식 - 검색 엔진이 하나의 페이지만 인식하는 문제로, Routing 기능을 만들고, Browser의 history 기능을 사용하여, 모든 페이지를 이미 ..

2020. 12. 2. 10:44
[DEV] App Dev ∕ Web Front/Framework ∕ Vue

[vue.js] 템플릿 문법 - 기본

# 뷰의 템플릿 문법 - 뷰로 화면을 조작하는 방법 > 데이터 바인딩 {{ message }} > 디렉티브 v-로 시작하는 Vue에서 정의한 디렉티브 속성 # 데이터 바인딩과 computed 속성 // 3. Root로 사용될 Element 정의 // 8. v-bind라는 디렉티브 사용하여, 인스턴스 내 데이터 변수와 데이터바인딩 // v-bind:="인스턴스내 데이터변수명" // v-bind:id="아이디명을 담은 데이터변수"" // v-bind:class="클래스명을 담은 데이터변수" {{ num }} // 7. 변수 데이터 바인딩 {{ doubleNum }} // v-if="불리안 값을 가진 데이터변수" : true일 경우에만 보여줌(실제로 dom 그리지 않음) Loading... // v-else ..

2020. 12. 2. 10:20
[DEV] App Dev ∕ Web Back/ETC

[vue.js/react] HTTP 통신 라이브러리 : axios

axios.html # 액시오스 (Axios) : HTTP 통신 라이브러리 - 뷰에서 권고하는 HTTP 통신 라이브러리 - github 페이지 존재 - Ajax 기반 - 원래 vue-resource라는 라이브러리였는데, 옮겨졌음 - Promise 기반의 HTTP 통신 라이브러리 - github Star / Commit / Contributer 중요 # 자바스크립트의 비동기 처리 패턴 1. callback 2. promise 3. promise + generatoer 4. async & await get user // 6. 인스넌트 내 데이터 View에 표시 {{ users }} // 1. axios 참조 new Vue({ el: '#app', data: { // 3. 인스턴스 내 users라는 데이터 변..

2020. 12. 2. 09:45
[DEV] App Dev ∕ Web Front/Framework ∕ Vue

[vue.js] 뷰 라우터

router.html # 뷰 라우터 - 뷰라이브러리를 이용해 싱글페이지 어플리케이션을 구현 - 페이지 이동을 구현하는 라이브러리 - 구글에 vue router 검색 후, cdn 링크로 스크립트로 가져오면 적용해 볼 수 있다. - 추후, npm 라이브러리로 적용한다. // 3. Root로 사용할 엘리먼트 선언 // 12. 태그로 라우터 이동 구현 // to="라우터 url" 속성으로 지정 가능 // Tip. routerLink*2를 입력하면 바로 입력된다. Login Main // 11. 태그 선언 // 뷰 인스턴스 내에 router 속성으로 정의하지 않으면 에러남 // Router 내 여러 페이지 중 하나가 표시된다. // 1. Vue 스크립트 선언 // 2. Vue Router 스크립트 선언(순서 주의..

2020. 12. 2. 09:26
[DEV] App Dev ∕ Web Front/Framework ∕ Vue

[vue.js] 컴포넌트 응용(같은 컴포넌트간 전달)

# 같은 컴포넌트 레벨 간의 통신 방법 Root(Intance) App Header / AppContent 위->아래: Props 아래->위: Event {{ }}라는 것을 사용하여, 인스턴스 내 data를 view에 바로 반영할 수 있다. # 같은 레벨 간의 통신 방법 먼저 A 자식 컴포넌트에서 부모 컴포넌트로 Event 로 전달 -> 부모 컴포넌트에서 Props로 B 자식 컴포넌트로 데이터 전달 // 1. Root로 사용할 View 선언 // 13. v-bind:="변수명" 으로 부모컴포넌트에서 자식컴포넌트로 데이터 전달 // 10. v-on:="메소드명" // 2. Vue 스크립트 선언 var appHeader = { template: 'header', // 14. propsdata라는 props를..

2020. 12. 2. 09:16
[DEV] App Dev ∕ Web Front/Framework ∕ Vue

[vue.js] 컴포넌트 통신

# 컴포넌트 통신 - 컴포넌트 구분했을 때, 관계가 형성됨 - 하위, 자식 컴포넌트 - 컴포넌트는 각각 데이터 유효 범위를 갖는다. - 하위 ->이벤트 발생 ->상위 - 상위 ->Props 전달 ->하위 # 컴포넌트 통신 규약이 필요한 이유 - 기존 MVC 구조와 다르게, 항상 상위 컴포넌트에서 하위로는 Props 속성만 내려가고, 올라가는 것은 Event만 있으므로, 데이터 추적이 쉽다. # props 속성 props.html // 1. Root 용으로 사용할 엘리먼트 생성 // 5. 지역 컴포넌트 사용 // 7. props 데이터이름 정의 및 매핑 : v-bind: props명="Root 인스턴스내 data 변수명" var appHeader = { // 8. {{ props변수명 }} 으로 뷰-데이터..

2020. 12. 2. 02:05