목록Vue.js (8)
dearbeany
[Vue] vuex 상태관리패턴 | vuex 저장소(Store)와 State, Getters, Actions, Mutations | 설치
더보기 1. Vuex - 지난실습과의 Vuex도입으로 인한 차이점 - 상태관리 패턴 2. Vuex 핵심컨셉 - 저장소(Store 개념) State, Getter, Actions, Mutations 3. Vuex 실습 - vuex 설치 1. Vuex - Vue.js 애플리케이션에 대한 상태관리패턴 + 라이브러리 - 애플리케이션 모든 컴포넌트들의 중앙 저장소 역할 (=데이터 관리를 함) *Vuex 도입 배경 더보기 지난 실습! 컴포넌트에서 데이터 누가 관리할까? 나만 쓸거라면 내가 관리. 여러 컴포넌트가 같이 쓴다면 총괄된 부모가 관리한다. 부모의 데이터가 변경되면 가지고 있는 props들은 알아서 바뀜 Youtube api 실습 흐름 (1) 자식 컴포넌트(YoutubeSearch)가 클릭하면(Search)..
[Vue] Vue Axios, AJAX
더보기 1. Vue Style Guide 2. AJAX - 동기와 비동기 3. Axios 4. API실습 1. Vue Style Guide Priority A - 필수 (1) 컴포넌트 이름에 합성어 사용 - root 컴포넌트인 App과 , 등 Vue에서 제공되는 빌트인 컴포넌트를 제외하고 컴포넌트의 이름은 항상 합성어를 사용 - 모든 HTML 요소의 이름은 한 단어이기 때문에 합성어를 사용하는 것은 기존 그리고 향후 HTML 요소와의 충돌을 방지 (2) 컴포넌트 데이터 - 반드시 함수형태로 객체를 반환 (3) Props - 적어도 타입은 명시되도록 가능한 상세하게 정의. (코드 이해, 가독성 제고) (4) v-for에 key지정 - 서브트리의 내부 컴포넌트 상태를 유지위해 v-for는 항상 key와 함께..
[Vue] Vue Router 라우팅 | router-link와 router-view
1. Vue Router (1) 웹에서의 라우팅 : 웹 페이지 간의 이동 방법 - 페이지 이동 시 서버 요청해 새로 갱신하는 게 아닌, 미리 해당 페이지 받아놓고 페이지 이동 시 클라이언트의 라우팅을 이용해 화면을 갱신. 이를 SPA(Single Page Application)라고도 함 - 라우팅으로 화면 간 매끄러운 전환 - Vue, React, Angular 라우팅 이용해 화면 전환 함 더보기 예시 1. 브라우저 url 입력 시 해당 페이지로 이동 2. 링크 클릭 시 해당 페이지로 이동 3. 뒤로가기 누르면 히스토리의 이전 페이지로 이동 (2) 뷰 라우터 - Vue.js 공식 라우터, SPA를 쉽게 구축 가능 - 라우트(route)에 컴포넌트를 매핑한 후, 어떤 주소에서 렌더링할 지 알려줌. vue파..
[Vue] Vue Component 통신 | JS Module | Vue CLI 실행환경 구축
더보기 1. Vue Component 통신 - props : 부모 > 자식 - emit : 자식 > 부모 2. JS Module 3. Vue CLI 4. Vue SFC 5. Vue Router -> 다음 포스팅 1. Vue Component 통신 - 컴포넌트는 트리구조로 되어있다. 상하관계(부모-자식) - 통신도 부모와 자식 간에 한다. (자식과 자식끼리 잘 안 함. 부모를 거쳐서 한다!) - Pass Props : 부모는 자식에게 데이터 전달 (아래로↓) - Emit Event : 자식은 부모에게 일어난 일 알림 (위로↑) (1) 부모 → 자식 - 부모가 가진 데이터를 자식에게 내려주고, 자식은 데이터를 수정하면 안 됨. 만약 수정하고자 하면 부모에게 Emit Event로 알려주고 부모가 반영해서 다시..
[Vue] 이벤트 핸들링(v-on) | 바인딩(ref, v-bind, v-model) | 뷰 컴포넌트
더보기 1. Vue Event Handling (v-on) - event.preventDefault() - Vue Key Modifier (keyup) 2 Vue Bindings - ref, @refs - Class Bindings (v-bind) - Form Input Bindings (v-model) 3. Vue Component - 전역 컴포넌트 Vue.Component() - 지역컴포넌트 components - 사용 시 주의점 1. Vue Event Handling - v-on 디렉티브를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JS를 실행가능 클릭 - 많은 이벤트 핸들러의 로직은 복잡하여 v-on 속성 값으로 작성X. method이름을 작성한다. 인사 - 메소드명을 직접 바인딩 하는 대신 인..
[Vue] v-bind 디렉티브로 이미지 속성 바꿔보기
v-bind - HTML의 요소인 id, class, style 등에 대해 model의 데이터(=Vue상태 데이터)를 연결할 때 사용된다. v-bind는 전달인자로 연결하려는 속성을 지정해주면 된다 v-bind:src 해당 이미지의 src를 vue instance의 'url' 속성으로 값을 최신상태로 유지하게 한다. 뷰인스턴스에서 이미지경로(고양이, 강아지)를 데이터로 전달해줘보자! - url1은 고양이 사진을, url2는 강아지 사진으로 뷰인스턴스에서 속성값으로 각각의 이미지 경로를 지정해주었다. - 실행할 경우 각각 사진이 로드되는 걸 확인 할 수 있다. - 개발자도구를 확인하면, 코딩한 것과 다르게 태그에 src속성이 들어간 것을 확인할 수 있다 - 즉, ⓛ 의 src속성값을 Vue.js를 통해 전..
[Vue] 라이프사이클 | 뷰 인스턴스 옵션(methods, filter, computed, watch)
▪ 각 Vue 인스턴스는 생성될 때 일련의 초기화 단계를 걸친다. 데이터 관찰 설정이 필요한 경우 템플릿을 컴파일 하는 경우 인스턴스를 DOM에 마운트 하는 경우 데이터가 변경되어 DOM을 업데이트 하는 경우 등. ▪ 그 과정에서 사용자 정의 로직을 실행할 수 있는 Life Cycle Hooks도 호출 ▪ 4개 파트 (생성, 부착, 갱신, 소멸)로 나뉜다. ▪ 모든 Life Cycle Hooks은 자동으로 this 컨텍스트를 인스턴스에 바인딩하므로 데이터, 계산된 속성(computed) 및 메소드에 접근할 수 있다. (화살표 함수를 사용해 라이프 사이클 메소드를 정의하면 X) {{count}} 증가 {{count}} - mounted 가 끝났을 때 확실히 연결되었다 (beforeMount때는 연결이 될려..
[Vue] Vue 옵션(el, data, methods) | 보간법과 디렉티브(v- once, text, bind, html, model, show, for, on)
더보기 프론트 엔드 프레임워크 3 : ⓛReact (Meta) ②Angular (Google) ③ Vue.js (에반유) - Vue.js 에서 js는 자바스크립트 - Vue 3버전을 사용하기엔 아직 미흡하므로, Vue 2버전(한국어 지원, 다양한 라이브러리 탑재 등)을 쓰도록 하자. https://v2.vuejs.org/ 지난 SpringBoot 서버를 REST API로 만들어놨다. (Data만 넘겨주도록) 그렇다면 이러한 Data를 받아서 JS를 통해서 화면을 꾸며보자. 이 방식으로는 Vue.js 프레임워크를 사용하자! 1. Vue.js - UI(사용자 인터페이스) 만들기 위한 Progressive framework - SPA(Single Page Application)를 완벽하게 지원 - ⓛ 접근성 ..