Vue

Vue는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크이다.Vue는 Component기반의 SPA(Single Page Application)을 만들 수 있는 프레임워크 입니다.기존의 WEB에서 하나의 화면을 만들기 위해서는 html 파일을 만들고 css, js를

vue-cli는 Vue 개발 환경을 서정해주는 도구입니다. 기본적인 프로젝트 세팅을 해주기 때문에 초기 세팅에 대한 고민을 덜 수 있습니다.CLI(Command Line Interface) : 터미널에서 사용자와 컴퓨터가 키보드의 명령어를 통해서 상호 작용하는 방식np

Component는 화면을 구성하는 하나의 조각 또는 하나의 요소입니다. 일반적으로 HTML을 구성할 때 우리는 header, footer, nav, content 등의 영역으로 구분지어 화면을 구성합니다. 이러한 요소들 하나 하나가 Component가 되게 됩니다.

기존의 Web 생태계는 jQuery를 통해 직접 DOM을 제어했습니다. 하지만 Vue는 DOM을 직접 제어하지 않으며 state라는 상태를 이용하여 DOM을 관리합니다. state는 나의 데이터, Props는 누구로부터 받은 data를 의미합니다.(Props는 보통 부

Loop를 이용한 List Rendering

v-for 디렉티브를 통해 여러 component를 리스트로 보여주었습니다. 하지만 특정 조건에 따라 해당 component들이 보일 수도, 안보일 수도 있는 것을 조건부 렌더링이라고 하며 Vue에서 조건부 렌더링은 v-if와 v-show 디렉티브로 구현할 수 있습니다

양방향 데이터 바인딩은 Vue의 핵심이라고 할 수 있습니다. 우리가 지금까지 한 component에 값을 주입하는 것은 Vue 인스턴스의 값을 component에 준 것이기 때문에 단방향 데이터 바인딩이라고 할 수 있습니다.양방향 데이터 바인딩은 Vue 인스턴스와 co

Computed는 연산 결과를 캐싱해주게 됩니다. Vue는 state 또는 props의 값이 변경이 되기 때문에 연산을 {{}}를 이용해 값을 넣는 경우 매번 연산을 해 속도 저하가 올 수 있다는 부담이 있습니다. 이러한 연산을 줄이기 위해 연산 결과를 캐싱하여 사용할

Vue는 대표적인 SPA를 구현하는 프레임워크 중 하나입니다. SPA Single Page Application 즉 단일 페이지 어플리케이션 패러다임입니다. SPA를 사용하면 배포가 간단하며 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다는 장점이 있습니다. (&l

Vue 인스턴스를 생성하면 미리 정의되어 있는 속성과 메서드들이 있습니다. 이 기능들을 이용하여 빠르게 화면을 개발할 수 있습니다.el : 인스턴스가 그려지는 화면의 요소(HTML 태그)template : 화면에 표시할 요소(HTML Tag)data : Vue의 반응성

Vue의 템플릿 문법이란 뷰로 화면을 조작하는 방법을 의미합니다. 크게 보면 data binding과 directive로 구성됩니다.데이터 바인딩은 Vue 인스턴스의 data()에 정의한 속성들을 화면에 표시하는 방법입니다. 화면에 이런 state를 보여줄 때는 v-t

컴포넌트는 화면의 영역을 구분하여 개발할 수 있게하는 최신 JS의 특징입니다. Vue 또한 그런 특징을 갖고 있습니다. 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 화면을 빠르게 제작할 수 있습니다.앞에서 본 Vue.component는 전역 컴포넌

Vue에서 권고하는 HTTP 통신 라이브러리로 Promise기반입니다. 또한 다른 HTTP 통신 라이브러리에 비해 문서화가 잘되어 있고 API가 다양합니다.axios를 설치하고 나면 axios 변수에 접근할 수 있게 됩니다.axios 객체를 통해 GET 통신을 수행하는

Vue로 빠르게 프로젝트를 구성하고 프로토타이핑을 하고 싶을 때 사용하는 CLI 도구입니다.개발접근법의 하나로 개발 초기에 시스템의 모형(prototype)을 간단히 만드는 것.Vue CLI를 설치하기 앞서 Node.js가 시스템에 설치되어 있어야 합니다. Node가

SPA는 화면의 특정 영역에 대한 HTML, CSS, JS 코드를 한 파일에서 관리하는 방법입니다. 뷰 우리가 vue에서 정의하는 Component들이 SFA입니다.싱글 파일 컴포넌트는 뷰 로더에 의해 HTML, CSS, JS와 같은 웹 자원으로 분리되어 실행됩니다.뷰

Vue의 Method는 특정 기능 별로 묶을 수 있는 JS 함수를 의미합니다. Vue에서 메서드는 이벤트를 처리하는 것부터 HTTP 통신까지 다양한 형태의 함수가 존재하게 됩니다.메서드에는 단순히 화면 조작을 위한 기능 뿐만 아니라 특정 로직을 담아 놓는 장소로도 활용

Computed 속성은 템플릿의 데이터 표현을 직관적이고 간결하게 도와주는 속성입니다.가장 첫번째의 div를 보게 되면 message라는 state를 역으로 변환해주는 코드입니다. 하지만 이처럼 계산 식이 많아지면 템플릿의 가독성이 떨어지며, 매번 연산이 필요로 하므로

watch 속성은 data() 안의 state의 변화를 감지하여 특정 로직을 수행하게 해주는 속성입니다.message state가 바뀔 때마다 watch안에 정의한 메서드가 수행되게 됩니다. immediate는 변경과 관계 없이 처음 한 번 실행해야 하는 경우에 tru

Vue의 filter는 화면에 표시되는 텍스트의 형식을 쉽게 변환해주는 기능입니다.예시를 들면 대문자, 다국어, 국제 통화 표시 등 다양하게 사용할 수 있습니다.위의 코드가 실행되면 원래는 hello가 나와야겠지만 filter가 적용되어 Hello가 출력되게 될 것입니

Form은 웹 어플리케이션에서 가장 많이 사용되는 코드 형식으로 로그인, 상품 결제 등 사용자의 입력을 처리하는데 주로 사용됩니다.가상 돔인 Vue에 맞게 직접 Document에 접근($refs)하지 않고 v-model로 값을 갖고 올 수 있습니다. 버튼을 눌렀을 때의

slot은 컴포넌트의 재사용성을 높여주는 기능입니다. 특정 컴포넌트에 등록한 하위 컴포넌트의 마크업을 확정하거나 재정의할 수 있습니다.자식 Component에서 구체적인 태그를 정하지 않고 slot 태그로 남겨놓게 되면 부모 Component에서 따로 마크업을 재정의해

믹스인은 여러 컴포넌트에서 공통으로 사용하고 있는 로직, 기능들을 재사용하는 방법입니다. 믹스인 안에는 data, methods, created 등과 같은 컴포넌트 옵션을 공유할 수 있습니다.믹스인을 주입할 컴포넌트에 mixins 속성을 선언하고 배열 안에 주입할 믹스

플러그인은 애플리케이션에서 자주 사용될만한 속성, 함수, 라이브러리 등의 사숑성을 높여주는 기능입니다. 대표적인 예로 Vue Router, Vuex 등의 코어 라이브러리가 뷰 플러그인 형태로 제공되고 있습니다.

상태 관리는 모던 프레임워크들 모두 사용하는 개발 패턴입니다. Vue에서는 Vuex라는 상태 관리 패턴을 사용합니다. 상태 관리가 필요한 이유는 컴포넌트의 숫자가 많아졌을 때 컴포넌트 간의 데이터 전달이나 관리가 어렵기 때문에 데이터 전달을 더 명시적이고 효율적으로 하

액션은 뮤테이션 중에서 비동기 처리 로직들을 정의하는 속성입니다. 동기적인 코드는 mutations에 비동기 처리는 actions에 정의합니다.비동기 처리Javascript는 서버에 요청할 경우 그 응답에 대해서 대기하는 것이 아닌 요청을 보내고 그 다음 코드를 실행하