초보 개발자

로그인 🔰 올바른 아이디와 비밀번호를 입력하였을 시, 제대로 로그인이 되는 기능을 만들어보자. 화면은 아래와 같다. 간단히 인풋 2개 버튼 하나로 이루어져있다. data에 adminId와 adminPw를 만들어두고, 인풋과 v-model로 바인딩을 시켜준 뒤에 로그인 버튼을 누르면 adminId와 adminPw가 vuex에서 actions에 설정해놓은 login 함수가 실행이 될 것이다 ! ...mapActions는 여러 모듈로 나뉘어 져 있는 vuex에 있는 함수들을 쉽게 사용할 수 있도록 해주는 역할을 한다. 이 외에도 mapState, mapGetters, mapMutaion이 있다. Api와 그에 물려있는 기능들은 아래의 접은 글을 확인해보자! authApi, myAxios, interceptor..

Vue 에서 $(dollar)의 의미 1. vue에서 전역 객체 속성이다. private하게 사용하는게 아닌 public하게 사용하는 속성 ex) this.$emit, this.$router.push({}) ..... 등등

플러그인은 여러 컴포넌트에서 사용되는(특히 전역) 기능을 만들 때 사용한다. Vue.use(Vuex); Vue.use(VueRouter); Vue.use(Vuex)를 호출하면, Vuex에 정의되어있는 install()이라는 메서드가 호출된다. 이 사실이 가장 간단하면서도 가장 중요하다. 첫 번째 방법 🛺 간단히 console.log를 찍는 플러그인을 하나 만들어보려고한다. plugins안에 하나의 파일을 만들자. plugins/gogosing.js import Vue from 'vue' export const GoGoSSing = { install (Vue) { Vue.prototype.$mygogo = () => { console.log('고고싱...') } } } Vue.use(GoGoSSing) ​..

아래와 같은 코드가 있다고 가정해보자. v-if가 처음 false라서 보이지 않을 것이다. 그리고 mount된 후 load의 값을 true로 변경하여 그 보여질 것이다. 그리고 ref값이 target인 DOM에 접근하려고 했으나 과연 값은 어떨까? 처음에 생각했을 때 당연히 dom이 출력될 것이라고 생각하였지만 실제로는 undefined가 출력이 되었다. 이 이유는 Vue가 DOM업데이트를 비동기로 하기 때문이라고 한다. 따라서 저 값을 제대로 얻으려면 어떻게 해야할까? 이때 사용하는 것이 바로 nextTick이다. Vue가 데이터를 변경한 뒤 DOM업데이트를 마칠 때 까지 기다리려면 데이터가 변경된 직후에 nextTicㅏ을 사용하면 된다. 이건 DOM이 업데이트 된 후에 호출이 된다. 콜백함수의 형태를..

vuex-persistedstate 라는 npm 이고 vuex에 저장되는 값들을 사용하는 웹브라우저의 localstorage에 저장하며, 새로고침시 그 값이 있다면 localstorage의 값을 가져와 사용하는 방식이다.. localstorage에 올리면 누구나 다 볼 수 있으니 vuex-persistedstate 에서는 js-cookie, secure-ls를 이용하여 localstorage말고, cookie에 저장하는 방식과 암호화된 방식으로 데이터를 저장하는 방법을 알려주고 있다. 먼저 아래의 모듈을 설치해주자 npm install vuex-persistedstate 그리고 아래처럼 플러그 store의 플러그인을 만들어서 거기에 적어준다. import Vue from vue; import Vuex f..

vuex란? 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리 React의 Flux패턴에서 기인한다. vuex가 오 ㅐ필요할까?? 복잡한 애플리케이션에서 컴포넌트의 개수가 많아지면 컴포넌트 간에 데이터 전달이 어려워진다, 이 때 컴포넌트 간 데이터 전달을 명시하고, 여러개의 컴포넌트에서 같은 데이터를 업데이트할 때 동기화 문제를 해결할 수 있다. state : 컴포넌트 간에 공유하는 데이터이다. data() 이라고 생각하면 된다. view : 데이터를 표시하는 화면 template와 같은 거라고 생각하자 action : 자용자의 입력에 따라 데이터를 변경하는 methods view에서 클릭을 하면 action이 실행되고 action이 state를 변경한다. vuex구조 컴포넌트..

removeTodo라는 함수를 만들었다. 그리고 우리는 localstorage에 정보를 담아두었기 때문에 localstorage에서 값을 지워주어야 한다. 처음에 나는 단순히 todo의 값만 가져와서 localstorage.removeItem(todo)만 해주려고 했는데 이렇게 하면 vue에서는 그 데이터가 아직 남아있다. 따라서 인덱스도 가져와서 splice를 통해서 그 배열을 지워주는 기능을 추가해주었다. 여기서 나는 인덱스를 사용해서 지우게되면.. 앞에 위치한 배열을 지우면 번호가 하나씩 앞당겨지게된다고 생각했지만 data에 정의 했으므로 splice를 하면 하나가 줄어들게 되고 다시 업데이트가되면서 새롭게 화면이 렌더된다. 따라서 새로운 인덱스 값을 가지고 있기 때문에 잘 지워지는 것을 확인할 수..

컴포넌트 생성 src폴더 밑에 components폴더를 생성한다. 그리고 그 안에 각각의 컴포넌트를 구성한다, 간단하게 만들어 보았다. 내용은 아래와 같다. 그리고 App.vue에서 이 컴포넌트들을 자식 컴포넌트로 사용해주어보자. 이렇게 import를 해온 뒤에 component에 등록을 해주고, 컴포넌트 태그 : 컴포넌트 내용 이렇게 들어간다. 우리는 import로 각 vue에 적힌 모든 내용을 저 TodoHeaders, TodoList, TodoFooter, TodoInput에 담아두었다. 템플릿에 아래와 같이 적어주면 된다. 아래처럼 케밥케이스으로 표현해주는 것이 vue에서 권장하는 방법이지만 앞으로는 파스칼케이스로 적어주려고 한다. 사실 todo-header태그는 아래처럼 해당 파일의 모든 내용을..