Vue.js

사내 프로젝트를 Vue.js로 진행하게 되면서 초반에 스터디를 진행 후 시작하게 되었다.프로젝트 진행 중 많은 난관에 봉착하였고, 부족한 점이 많아 초심으로 돌아가 기초부터 단단히다져야 된다는 생각으로 다시 시작하려 한다.Vue의 Reactivity한 특징Vue 인스턴

이번엔 Vue의 컴포넌트와 라우터에 관해 정리하려고 한다. Vue는 한 화면의 여러 요소를 단위별로 나눌 수 있다. 나뉜 하나의 단위를 Component라고 한다. 이렇게 하나의 화면을 크게 3개의 컴포넌트로 나누고, 나뉜 컴포넌트에 또 세세하게 나눌 수 있다.

이번엔 Vue Router다.하나의 사이트에는 여러 페이지들이 존재한다.대부분 a링크를 이용하여 기능을 구현한다.Vue에서 제공하는 Router는 이러한 페이지들을 이동하는 기능을 제공한다.Router를 이용하려면 cdn 방식을 이용하거나, node를 이용하여 pack

이번 포스팅에서는 Vue에서 공식적으로 지정한 HTTP 통신 라이브러리 Axios에 대해 다루려고 한다. 사실 axios가 공식 라이브러리로 지정 되기 전, vue-resource가 공식 라이브러리였다. axios가 출시된 후 수많은 업데이트와 안정성이 검토된 후

vue-cli 는 기본 vue 개발 환경을 설정해주는 도구다.vue-cli 가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, lint, build, 어떤 라이브러리로 구성을 해야되는지 webpack 설정은 어떻게 해야되는지에 대한 고민을 덜 수 있다.

지난 포스팅에서 Vue-CLI를 이용하여 실제 현업에서 어떻게 Vue 프로젝트를 생성하는지 알아봤다.이번 포스팅에서는 Vue-CLI에서 Component 생성 방법을 알아보겠다.SFC란 Single File Component의 약자로 단어 뜻 그대로 풀이하자면 단일 파

Vue에서는 특정 로직 수행이 가능한 명령어가 있다.method, computed, watch 3가지다.각각 실행 방식은 다르지만 로직을 수행하고 결과를 도출한다는 것은 모두 공통적인 특징이 있다.하지만, 각각의 실행방식이 다르다는 점이 결국 사용용도와 더 나아가서 성

ㄻ

저번 포스팅에서 Todo App을 제작하며 추가, 삭제를 하여도 화면에 즉각 반응하지 않는 문제가 있었다. 이 문제를 이번에 해결해 보도록 한다. 원인 즉각 반응하지 않는 원인이 무엇일까? 메소드 내용을 보면 모두 localStorage에 직접 추가하고 삭제한다. 즉

이번 포스팅에서는 Vuex의 개념, 설치 및 등록방법에 대해 알아보기로 한다.무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리React의 Flux 패턴에서 기인함.Facebook 앱과 같이 거대한 규모의 앱의 경우 채팅창의 이벤트와 상단의 상

이번 포스팅은 실제 Vuex사용법에 대해서 알아보기로 한다. Vuex 설치 npm으로 Vuex를 설치 후 저장소가 될 js파일을 생성한다.(대부분 이것을 Vuex의 내부객체인 Store의 이름을 따와 store.js로 생성한다.) Vuex에는 크게 4가지 속성이

지난 포스팅에서 알아본 Vuex로 Todo-App을 리팩토링 해보자.Vue.use(Vuex);const storage = { fetch() { const arr = \[]; if (localStorage.length > 0) {

지난 포스팅에서 Vuex에서는 4가지 속성이 있다고 했다.state, getters, mutations, actions4가지 속성을 접근 하는 방법은 this.$store.(속성명)... 이다.규모가 작은 프로젝트의 경우 굳이 상관없겠지만, 규모가 큰 프로젝트라면 위

Vuex Helper를 이용하여 리팩토링을 진행해보자. 이전 구조에서는 App.vue가 비즈니스 컴포넌트의 역할을 하였지만, Vuex의 도입으로 App.vue도 이제 프레젠트 컴포넌트로 변경된다. 그리고 각각의 컴포넌트가 store.js에 직접 접근하며 로직을 수행

ㄹㅇㄴㅁ

test

생성한 컴포넌트에서 실제 데이터를 가져오는 api를 구현한다.

이전 포스팅에서 axios를 이용하여 데이터를 가져오고 화면에 보여주는 기능까지 구현 하였다.이전에도 포스팅했던 vuex를 vue-news에도 적용하자.기억이 안난다면 이전 포스팅을 참조하자.Vuex 포스팅store폴더에 메인 역할인 index.js를 생성하고 gett

이전에 todo-app을 만들 때 item 등록 삭제 과정 중 transition을 구현한 적이 있다.화면 전환간 transition 또한 구현할 수 있는데 이를 router-transition이라고 한다.transition 상태는 총 6가지로 구분지어진다.v-ente

현재까지 개발된 view 컴포넌트는 총 3가지이다.(NewsView.vue, AskView.vue, JobsView.vue) 중복된 코드가 많아서 이전 포스트에서 AskView.vue만 올렸으나 동일하게 3가지 vue가 만들어진것이다. 근데, 모두 리스트를 불러오는

이전 포스팅에서 상위 컴포넌트와 하위 컴포넌트 간의 데이터 통신에 대해 다룬적이 있다.this.$emit과 props다.이건 상위,하위 컴포넌트 간의 데이터 통신인데, 상 하위 관계가 아닌 완전히 다른 컴포넌트 간의 데이터 통신은 어떻게 할까?이번 포스팅 주제인 Eve

이번 시간엔 HOC 하이 오더 컴포넌트를 알아보자. ># HOC(Higher Order Component) 정의 뷰의 하이 오더 컴포넌트는 리액트의 하이 오더 컴포넌트에서 기원된 것이다. 하이 오더 컴포넌트는 컴포넌트의 로직(코드)을 재사용하기 위한 고급 기술이다.

컴포넌트 전체를 재사용하는 기법이 HOC.부분적인 로직을 재사용하는 기법은 바로 이번 포스팅 주제인 Mixin이다.믹스인(Mixins)은 Vue 컴포넌트에 재사용 가능한 기능을 배포한다.믹스인 객체는 모든 컴포넌트의 옵션을 포함할 수 있고, 컴포넌트가 믹스인을 사용하면

Vue에서 데이터 호출 시점은 크게 2가지로 나뉜다.라우터 네비게이션 가드특정 URL로 접근하기 전의 동작을 정의하는 속성(함수)컴포넌트 라이프 사이클 훅( 컴포넌트가 생성)되자마자 호출되는 로직2가지 중에서 라우터가 먼저 호출되고 라이프사이클 훅이 나중에 호출 된다.

async, await는 자바스크립트 비동기 처리 패턴의 최신 문법이다.Promise와 Callback에서 주는 단점들을 해결하고 자바스크립트의 비동기적 사고 방식에서 벗어나 동기적(절차적)으로 코드를 작성할 수 있게 해준다.기본 문법async 함수의 기본 문법은 다음

모든 프로젝트의 노드 버전을 항상 최신 버전으로 할 수 없을 때가 있다.프로젝트마다 노드 버전을 바꿔야할 상황이 있는데NVM이 이러한 상황을 해결해준다.NVM github1.nvm github에 접속한 뒤 nvm을 설치 한다.를 복사한 뒤 터미널의 bash 모드에서 입

프로그래밍은 코드를 입력하며 진행된다.사람마다 글쓰는 방식이 다르듯, 코딩하는 스타일도 다르다.협업을 하는 과정에서 일관된 규칙 없이 코딩이 진행된다면 코드 해석이 어려워지고 더 나아가 유지보수에 지장이 생길 수 있다.이러한 문제를 해결하기 위해 코딩 컨벤션(코딩스타일

Vue-CLI3 로 버전이 올라가면서 main.js에서 전역변수 설정을 하지 못하게 막았다.하지만 프로젝트를 진행하면서 전역변수를 생성해야 할 때가 존재한다.그때 사용하는 것이 환경 변수 파일이다.환경변수 파일은 프로젝트 root레벨에 생성해야 하고 파일명은 .env로

Router란 Component View를 url에 맞춰 보여주는 도구이다.이전에 Router를 이용하여 화면을 전환하는 법을 알아봤는데 이번 시간엔 없는 페이지를 접근할 때 대처하는 법에 대해 알아보자.라우터에 다음과 같은 routes가 정의되어 있다고 하자.위와 같

본격적으로 어플리케이션을 제작해보자.이번 어플리케이션 주제는 학습 노트를 정리하는 어플을 만들것이다.주요 기능으로는 회원가입, 로그인, 게시물 CRUD가 되겠다.SignupPage.vueSignupForm.vue회원가입시 필요한 정보는 ID로 사용할 email, pw,

이전 포스팅에서 회원가입 페이지를 구성하였다. 회원가입된 정보를 이용하여 로그인 기능도 구현해보자.

이전 시간에 로그인 기능을 구현을 하였다. 현재 상황에서 새로고침을 해보면 바로 로그인이 풀리는걸 확인할 수 있다.

Vue에서 api와 호출할 때 axios 모듈을 사용한다. 제작중인 vue-til 애플리케이션은 리스트를 호출하거나 등록,수정,삭제를 할 때 로그인시 받았던 토큰 값이 필요하다. 인증 토큰은 Request Headers에 Authorization 속성에 값을 담아

현재 axios인스턴스 생성은 전부 interceptor에 의해 header-Authorization에 token이 담겨 호출된다.로그인, 회원가입의 경우 token이 필요없기 때문에 baseURL만 설정후 생성,이외 api는 interceptor를 포함하여 생성한다.

VUE-TIL프로젝트에 수정, 삭제 기능을 구현해보자.기능 구현의 flow는 다음과 같다.view 컴포넌트 생성.route 생성 및 컴포넌트 연결.api function 생성.컴포넌트 methods 생성 및 api 연결수정수정의 경우 별도의 수정 view 컴포넌트가 필

Vue에서는 특정 데이터를 가공하여 표현할 수 있는 filter라는 기능을 제공한다.사실 어떻게 보면 computed와 유사한 성격을 가지지만, 정형화된 형식을 가진 computed라고 생각하면 되고, computed와 달리 전역으로 설정도 가능하다.필터 사용방법Vue