티스토리

짐희 블로그

검색하기

블로그 홈

짐희 블로그

jhann.tistory.com/m

느리지만 꾸준히 성장하는 개발자

구독자: 0

방명록 방문하기

주요 글 목록

[Vue] Vue CLI 란? (+설치 방법) Vue CLI란? 뷰로 빠르게 프로젝트를 구성하고 프로토 타이핑을 하고 싶을 때 사용하는 CLI 도구입니다. CLI란? Command Line Interface로 사용자는 커맨드 창을 통해 문자로 입력을 주는 것을 말합니다. Vue CLI 설치 1) 먼저 node.js를 설치해야 한다. 2) Node.js를 설치했다면 아래 명령어를 버전을 확인합니다. npm은 Node Package Manager로 node.js를 설치할 때 함께 설치됩니다. node -v // 10 버전 이상 npm -v // 6 버전 이상 3) 아래 명령어를 통해 vue cli를 설치합니다. npm install -g @vue/cli 4) Vue CLI 설치 명령어 [Vue CLI 2.x] 명령어 vue init '프로젝트 템플릿 유.. 공감수 0 댓글수 0 2020. 12. 7.
[Vue] watch 속성 computed와 watch 속성의 차이점 - vuejs.org/v2/guide/computed.html#ad Watch 특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행해주는 속성입니다. {{ num }} computed 속성을 이용한 클래스 코드 작성 방법 Hello www.inflearn.com/course/Age-of-Vuejs/ Vue.js 시작하기 - Age of Vue.js - 인프런 Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으시고 나면 Vue.js로 프런트엔드 개발을 하시는게 재밌어질거에요. 초급 웹 개발 프레임워 www.inflearn.com joshua1988.github.io/vue-camp/ Cracking Vu.. 공감수 0 댓글수 0 2020. 12. 6.
[Vue] 템플릿 문법 computed, v-if, v-show 템플릿 문법 Vue를 사용하여 화면을 조작하는 것으로 크게 1) 데이터 바인딩, 2) 디렉티브로 나뉩니다. 1) 데이터 바인딩 Vue Instance에서 정의한 속성들을 화면에 표시하는 방법입니다. 가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag)입니다. {{ message }} new Vue({ data: { message: 'Hello Vue.js' } }) 2) 디렉티브 Vue로 화면의 요소를 더 쉽게 조작하기 위한 문법입니다. 화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공하고 있습니다. Hello Vue.js {{ item }} new Vue({ data: { show: false items: ['shirts', 'jeans', 'hats'] } }) 이외.. 공감수 0 댓글수 0 2020. 12. 6.
[Vue] HTTP 통신 라이브러리 - Axios 엑시오스 Axiso 란? Vue에서 권고하는 HTTP 통신 라이브러리이다. Promise(JS의 비동기적 패턴) 기반의 HTTP 통신 라이브러리로 상대적으로 다른 HTTP 통신 라이브러리들에 비해 API가 다양하다. 자바스크립트의 비동기 처리 패턴 callback promise promise + generator async & await get user {{users}} www.inflearn.com/course/Age-of-Vuejs/ Vue.js 시작하기 - Age of Vue.js - 인프런 Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으시고 나면 Vue.js로 프런트엔드 개발을 하시는게 재밌어질거에요. 초급 웹 개발 프레임워 www.inflear.. 공감수 0 댓글수 0 2020. 12. 6.
[Vue] 뷰 라우터(router) Vue Router란? Vue 라이브러리를 이용해서 싱글페이지 애플리케이션(SPA)을 구현할 때 사용하는 라이브러리 // 뷰 라이브러리 // 라우터 라이브러리 Login Main router의 path에 해당하는 컴포넌트는 하나이다. 따라서 component로 등록한다 (components X) routes: [ { path: '/login', component: LoginComponent }, ] www.inflearn.com/course/Age-of-Vuejs/ Vue.js 시작하기 - Age of Vue.js - 인프런 Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으시고 나면 Vue.js로 프런트엔드 개발을 하시는게 재밌어질거에요. 초급 .. 공감수 0 댓글수 0 2020. 12. 6.
[Vue] 같은 컴포넌트 레벨 간의 통신 방법 AppHeader와 AppContent 같이 같은 컴포넌트 레벨 간의 통신 방법에 대해 알아보겠습니다. (1)의 그림과 같이 AppContent에서 AppHeader로 데이터 10을 넘겨주는 방법은 다음과 같다 www.inflearn.com/course/Age-of-Vuejs/ Vue.js 시작하기 - Age of Vue.js - 인프런 Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으시고 나면 Vue.js로 프런트엔드 개발을 하시는게 재밌어질거에요. 초급 웹 개발 프레임워 www.inflearn.com joshua1988.github.io/vue-camp/ Cracking Vue.js joshua1988.github.io 위 강좌를 통해 배운 .. 공감수 0 댓글수 0 2020. 12. 6.
[Vue] 컴포넌트 통신 방식 Props, Event emit Vue Component 뷰 컴포넌트는 고유한 데이터 유효 범위를 갖는다. 따라서 컴포넌트 간 데이터를 주고 받을 때는 아래 방식을 따른다. 상위 컴포넌트가 하위 컴포넌트로 데이터를 전송할 때는 props 로 전달한다 하위 컴포넌트가 상위 컴포넌트로 데이터를 전송할 때는 event 로 전달한다 Props Emit www.inflearn.com/course/Age-of-Vuejs/ Vue.js 시작하기 - Age of Vue.js - 인프런 Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으시고 나면 Vue.js로 프런트엔드 개발을 하시는게 재밌어질거에요. 초급 웹 개발 프레임워 www.inflearn.com joshua1988.github.io/v.. 공감수 0 댓글수 0 2020. 12. 5.
[Vue] 컴포넌트 Component Vue Component 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능으로 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있다 전역 컴포넌트와 지역 컴포넌트 www.inflearn.com/course/Age-of-Vuejs/ Vue.js 시작하기 - Age of Vue.js - 인프런 Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으시고 나면 Vue.js로 프런트엔드 개발을 하시는게 재밌어질거에요. 초급 웹 개발 프레임워 www.inflearn.com joshua1988.github.io/vue-camp/ Cracking Vue.js joshua1988.github.io 위 강좌를 통해 배운 내용을.. 공감수 0 댓글수 0 2020. 12. 2.
[Vue] MVVM 패턴 & Reactivity MVVM 패턴 Model + View + ViewModel 패턴을 의미 Model은 자바스크립트 객체 View는 웹페이지의 DOM VIewModel은 Vue의 역할 기존 자바스크립트로 view에 해당하는 Dom에 접근하거나 수정하기 위해 jQuery와 같은 라이브러리를 이용한다 Vue는 View와 Model을 연결하고 자동으로 바인딩하므로 양방향 통신을 가능하게 한다 Reactivity Vue의 핵심으로 데이터의 변화를 라이브러리에서 감지해서 알아서 화면을 변화시키는 것 www.inflearn.com/course/Age-of-Vuejs/ Vue.js 시작하기 - Age of Vue.js - 인프런 Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으.. 공감수 0 댓글수 0 2020. 12. 1.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.