Vue.js

웹페이지의 화면 개발을 하기 위해 나온 프론트엔드 프레임워크이다.Evan You에 의해 Vue.js가 탄생을 하게 되었다.Evan Yoo는 Angular.js(또 다른 프론트엔드 프레임워크)의 명시적 데이터 바인딩과 같은 필수적인 요소들만 가지고 화면을 구현하기 시작했

다른 주요 프론트엔드 프레임워크(Angular, React)와 비교했을 때 뷰(Vue)의 가장 큰 강점은 바로 시작하기가 정말 쉽다는 점이다.CDN으로 Vue.js 코드를 가져와 바로 Vue 인스턴스를 하나 생성하여 간단한 페이지를 생성해보았다. 기존의 구현된 시스템에

뷰의 템플릿 문법이란 뷰로 화면을 조작하는 방법을 의미한다.템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉜다.데이터 바인딩은 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법이다.가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag)이다.div

뷰의 메서드는 특정 기능 별로 묶을 수 있는 자바스크립트 함수를 의미한다.메서드는 흔히 뷰 템플릿의 버튼 이벤트 처리부터 HTTP 통신까지 다양한 성격의 코드로 구성된다.메서드를 선언하는 방법은 아래와 같다.메서드를 이용해서 버튼 클릭 이벤트를 처리하면 다음과 같다.위

Vue.js 프레임워크에서 제공하는 함수들로 컴포넌트의 재사용성을 높일 수 있다. 슬롯 슬롯(slot)은

Vue.js 프레임워크에서 재사용성을 높일 수 있는 Slot 외의 기능들을 알아보고자 한다.믹스인(Mixins)은 여러 컴포넌트 간에 공통으로 사용하고 있는 로직, 기능들을 재사용하는 방법이다.믹스인에 정의할 수 있는 재사용 로직은 data, methods, creat

상태 관리란 현대 프론트엔드 프레임워크에서 모두 사용하는 개발 패턴이다.뷰에서는 뷰엑스(Vuex)라는 상태 관리 패턴을 사용한다.상태 관리가 필요한 이유는 컴포넌트의 숫자가 많아졌을 때 컴포넌트 간의 데이터 전달이나 관리가 어렵기 때문이다.데이터 전달을 더 명시적이고

뷰 프로젝트 폴더 구조, 코드 분할, 네비게이션 가드, Transition & Animation에 대해 알아보자.

컴포넌트 디자인 패턴을 배워보자

Nuxt란? Nuxt는 Vue.js로 빠르게 웹을 제작할 수 있게 도와주는 프레임워크이다. 웹 어플리케이션을 제작할 때 필요한 뷰엑스, 라우터, axios와 같은 라이브러리들을 미리 구성하여 싱글 페이지 어플리케이션(Single Page Application), 서버

Nuxt의 폴더 구조 넉스트의 프로젝트 생성 며령어를 실행하고 난 뒤 생성된 넉스트의 기본 폴더 구조를 살펴보겠다. 다음은 넉스트의 기본 폴더 구조이다. Nuxt의 폴더 구조 넉스트의 프로젝트 생성 며령어를 실행하고 난 뒤 생성된 넉스트의 기본 폴더 구조를 살펴보겠

Nuxt 서비스 배포 방법 Nuxt.js 서비스를 배포하는 방법은 프로젝트를 생성할 때 선택한 Universal 모드의 배포 방식에 따라 다르다. 아래 2가지 유형에 따른 배포 방법을 살펴보자. SSR(Server Side Rendering) SSR 모드는 위 그