good_da22

axios HTTP 통신 : axios axios npm install axios Vue에서 권고하는 HTTP 통신 라이브러리는 axios promise 기반의 HTTP 통신 라이브러리이며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘되어 있고 API가 다양하다. axios.get(URL) // promise 객체를 return, then, catch 사용 가능 axios promise promise란 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 라이브러리 자바스크립트는 단일 스레드로 코드를 처리하기 때문에 특정 로직의 처리가 끝날 때까지 기다려 주지 않는다. 따라서 데이터를 요청하고 받아올 때까지 기다렸다가 화면에 나타내는 로직을 실행해야 할 때..

@vue/cli @vue/cli 실행 환경 구축 NodeJS 설치 - LTS 버전(NPM 같이 설치) NPM을 이용한 @vue/cli 설치 NodeJs 설치 NodeJS 설치 각 운영체제에 맞는 LTS버전 다운로드 NodeJS 설치 확인 node -v node --version npm -v NPM Node Package Manager command에서 써드파티 모듈을 설치하고 관리하는 툴 모듈(패키지) 검색 NPM 명령어 npm init : 새로운 프로젝트나 패키지를 만들 때 사용 (package.json 생성) npm install package : 생성되는 위치에서만 사용 가능한 패키지로 설치 npm install -g package : 글로벌 패키지에 추가, 모든 프로젝트에서 사용 가능한 패키지로 ..

컴포넌트(Component) Vue의 가장 강력한 기능 중 하나 HTML element를 확장하여 재사용 가능한 코드를 캡슐화 Vue Component는 Vue Instance이기도 하기 때문에 모든 옵션 객체를 사용 Life Cycle Hook 사용 가능 전역 컴포넌트와 지역 컴포넌트, 상하관계 존재 전역 컴포넌트 등록 전역 컴포넌트를 등록하려면 Vue.component(tagName, options) 사용 권장하는 컴포넌트 이름 : 케밥 표기법(전부 소문자, - 사용) Vue.component('my-component', { // 옵션 }) 지역 컴포넌트 등록 컴포넌트를 components 인스턴스 옵션으로 등록함으로써 다른 인스턴스 / 컴포넌트의 범위에서만 사용할 수 있는 컴포넌트를 ..

binding class binding element의 class와 style을 변경 v-dind:class는 조건에 따라 class를 적용할 수 있다. v-bind:class="{ active: boolean }" Form Input Binding v-model directive를 사용하여 form input과 textarea element에 양방향 데이터 바인딩을 생성할 수 있다. text와 textarea 태그는 value 속성과 input 이벤트를 사용한다. checkbox와 radio 태그는 checked 속성과 change 이벤트를 사용한다. select 태그는 value를 prop으로 change를 이벤트로 사용한다. form - text, textarea 문자열(text) 메시지: {{ m..

Vue Instance Vue method Vue Instance는 생성과 관련된 data 및 method의 정의 가능 method안에서 data를 "this.데이터이름" 으로 접근 가능 Vue filter 뷰의 필터는 화면에 표시되는 텍스트의 형식을 쉽게 변환해주는 기능 filter를 이용하여 표현식에 새로운 결과 형식을 적용 전역 필터 (Vue.filter())와 지역 필터 (new Vue({ filters: { }})) 사용 가능 중괄호 보간법 {{}} 또는 v-bind 속성에서 사용이 가능 {{ value | filter }} v-bind:id="rawId | formatId" Vue computed 특정 데이터의 변경사항을 실시간으로 처리 캐싱을 이용하여 데이터의 변경이 없을 경우 캐싱된 데이터..

Vue.js create by. Evan You Google에서 Angular로 개발하다 가벼운 걸 만들어 보고 싶은 생각으로 시작한 개인 프로젝트 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 Progressive Framework CDN, NPM, CLI 방식으로 installation Vue.js 특징 Approachable (접근성) Versatile (유연성) Performant (고성능) MVVM Pattern Model + View + ViewModel Model : 순수 자바스크립트 객체 View : 웹페이지의 DOM ViewModel : Vue의 역할 기존에는 자바스크립트로 view에 해당하는 DOM에 접근하거나 수정하기 위해 jQuery와 같은 library 이용 Vue 는 Vie..