유블로그

vuex vuejs application에 대한 상태관리패턴 + 라이브러리 application의 모든 컴포넌트들의 중앙 저장소 역할 ( 데이터 관리 ) - vuex 저장소 state : 단일 상태 트리 사용. application마다 하나의 저장소 관리한다. ( data와 동일 ) Getters : Vue Instance 의 Computed 와 같은 역할. State 를 기반으로 계산 ( computed ) Mutations : State의 상태를 변경하는 유일한 방법 ( methods ) Actions : 상태를 변이 시키는 대신 액션으로 변이에 대한 커밋 처리 ( 비동기 methods ) - state 접근 방식 : this.$store.state.data_name - getters 사용 : thi..

SFC 확장자가 ".vue"인 파일 .vue = template + script + style 구문 강조 가능 컴포넌트에만 CSS 범위 제한 가능 전처리기를 사용해 기능 확장 가능 - 기본 언어는 html 하나의 .vue 파일에 최대 하나의 template 블록! - 기본 언어는 js 하나의 .vue 파일에 최대 하나의 script 블록! - 하나의 .vue 파일에 여러 개의 style 블록! scoped 속성으로 현재 컴포넌트에서만 사용 가능한 css 지정 가능

vue-router 라우팅 : 웹 페이지 간의 이동 방법 라우터는 컴포넌트와 매핑 SPA(Single Page Application) 제작할 때 유용 Router Home 게시판 QnA 앨범 는 와 같다. => 현재 라우트에 맞는 컴포넌트가 렌더링된다.

- axios promise 기반의 http 통신 라이브러리! * Promise 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 라이브러리. 데이터를 요청하고 받아올 때까지 기다렸다가 화면에 나타나는 로직을 실행해야할 때 주로 Promise를 활용한다. API 유형 처리 결과 axios.get('URL 주소').then().catch() 해당 URL 주소에 대해 HTTP GET 요청을 보냄. 서버에서 보낸 데이터를 정상적으로 받아오면 then() 실행, 오류 발생하면 catch() 실행. axios.post('URL 주소').then().catch() 해당 URL 주소에 대해 HTTP POST 요청을 보냄. 서버에서 보낸 데이터를 정상적으로 받아오면 then() 실행..

Component vue의 강력한 기능! HTML Element를 확장하여 재사용 가능한 코드를 캡슐화한다. Vue Instance 이기도 하기 때문에 모든 옵션 객체를 사용한다. Life Cycle Hook 사용 가능하다. 전역, 지역 둘 다로 사용가능 - 전역 컴포넌트 - 지역 컴포넌트 - component template {{msg}} - 컴포넌트간 통신 부모(상위)는 자식(하위)에게 props를 전달하고, 자식은 부모에게 event만 전달한다. 자식은 부모의 값을 직접 참조할 수 없다. data와 마찬가지로 props 속성의 값을 template에서 사용가능하다. - 사용자 정의 이벤트 이벤트는 대소문자 변환 안 되니 정확한 이벤트 이름을 작성할 것. 케밥 표기법 권장! 자식이 부모에게 $emit..

- Vue filter : {{ }} 또는 v-bind 속성에 사용 가능. 결과 : {{ msg | count1 }} {{ msg | count2('문자를 넣어보세요') }} - Vue computed 특정 데이터의 변경사항을 실시간으로 처리 캐싱을 이용하여 데이터 변경이 없을 경우 캐싱된 데이터를 반환 Setter와 Getter를 직접 지정할 수 있음 작성은 method 형태로 작성하지만 Vue에서 proxy 처리하여 property 처럼 사용 원본 메시지: "{{ message }}" 역순으로 표시한 메시지1: "{{ reversedMsg }}" 역순으로 표시한 메시지2: "{{ reversedMsg }}" 역순으로 표시한 메시지3: "{{ reversedMsg }}" 원본 메시지: "{{ messa..

- 보간법 - 문자열 Mustache 구문(이중 중괄호 {{ }} ) 사용한 텍스트 보간 v-once 속성을 이용하면 데이터 변경 시 업데이트 되지 않는 일회성 보간을 수행한다. {{ msg }} {{ msg }} {{ }} 는 HTML이 아닌 일반 텍스트로 데이터를 해석한다. 실제 HTML을 출력하려면 v-html 디렉티브를 사용한다. {{ msg }} vuejs는 {{ }} 내에서 자바스크립트 표현식의 모든 기능을 지원한다. {{message + ' Vue~'}} {{num > 10 ? num * num : num + 100}} {{message.split("").reverse().join("")}} {{ changeMsg('Gooood') }} * v-text는 {{ }}와 같다. - 디렉티브 디렉..

속성 설명 el Vue가 적용될 요소 지정. CSS Selector or HTML Element data Vue에서 사용되는 정보 저장. 객체 또는 함수의 형태 template 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성. 뷰의 데이터 및 기타 속성들도 함께 화면에 그릴 수 있다. methods 화면 로직 제어와 관계된 method를 정의하는 속성. 마우스 클릭 이벤트 처리와 같이 화면의 전반적인 이벤트와 화면 동작과 관련된 로직 추가 created 뷰 인스턴스가 생성되자 마자 실행할 로직을 정의 - Vue Instance Life Cycle 라이프 사이클을 크게 나누면 인스턴스를 생성, 화면에 부착, 내용 갱신, 소멸 4단계로 나눌 수 있다. life cycle 속성 설명 befo..