Vue.js

FrontEnd 개발자로 진로를 정한 뒤,프론트엔드 프레임워크인 vue.js를 먼저 공부하기로 했다.참고 도서는 Do it Vue.JS입문 이다.이 글에서는 vue의 특징과 장점에 대해서 설명할 것이다.React와 angular에 비해 성능이 우수하고 빠르다.리액트의

뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위이다.뷰 인스턴스 생성new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 한다. Vue 생성자는 뷰 라이브러리를 로딩하고 나면 접근 가능하다. 생성자를 사용하는 이유는 뷰로 개발할 때 필

TodoInput 컴포넌트 : 할 일을 입력하는 공간이다.1번칸에 입력된 값을 localStorage에 추가시켜준다.추가된 목록 중에서 해당 Item을 삭제시킨다.Toggle 버튼을 활용해 해당 item을 완료, 미완료로 표현할 수 있다.clearAll 버튼을 눌러 모

참고자료 : 짐코딩채널 => https://www.youtube.com/channel/UCZ30aWiMw5C8mGcESlAGQbA Vuetify란? Vue 기반 UI프레임워크이다. 구글의 Material Design을 기반으로 설계되었다. UI프레임워크를 이용하면.

Vue2를 사용해 프로젝트를 하던 중 API 통신을 위해 버튼을 이용해 click 이벤트를 발생시키려 했는데 클릭이 두 번 되거나 페이지가 새로고침 되는 등의 문제가 발생했다.script code여러 개의 API 통신을 시도하면서 필요에 따라 form 객체 안에 데이터

프론트엔드 백엔드 파트를 나누어 프로젝트를 진행 중,모든 페이지에서 매번 api통신을 통해 정보를 요청하는 것은 되게 비효율적으로 느껴졌다.그래서 프론트단에서 Vuex store를 이용해 데이터들을 저장하는 방법에 대해 알아보았다.이 글은 state와 mutations

예시코드비동기 처리 로직을 선언하는 메소드, 비동기 로직을 담당하는 mutations데이터 요청, Promise, ES6 async과 같은 비동기 처리는 모두 actions에 선언예제 1예제 2언제 어느 컴포넌트에서 해당 state를 호출하고, 변경했는지 확인하기가 어

Vuex에 선언한 state 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼Vuex에 선언한 getters 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼Vuex에 선언한 mutations 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼Vuex에 선언한 actions 속성을

컴포넌트의 로직(코드)를 재사용하기 위한 고급 기술ProductList와 UserList 두 컴포넌트는 각각 상품과 사용자 정보를 서버에서 받아와 표시해주는 컴포넌트이다.그리고 공통적으로 들어가는 코드가 있다.name은 컴포넌트의 이름을 정의해주는 속성,mounted(

믹스인(Mixins)은 여러 컴포넌트 간에 공통으로 사용하고 있는 로직, 기능들을 재사용하는 방법이다. 믹스인에 정의할 수 있는 재사용 로직은 data, methods, created 등과 같은 컴포넌트 옵션들이다.믹스인을 주입할 컴포넌트에 mixins 속성을 선언한

vue의 믹스인과 하이오더 컴포넌트 접근 방식을 학습하면서 두 가지 방법의 차이점에는 어떤 것이 있는지 의문이 생겨서 찾아보았다..HOC는 리액트의 함수형 프로그래밍에서 기반한 컴포넌트 개발 패턴이다.컴포넌트의 코드를 재사용하기 위한 방법이기도 하지만 캡슐화와 컴포넌트