초보 개발자

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태그는 아래처럼 해당 파일의 모든 내용을..