지금, 개발하기82 Vue] Getters 파헤치기 이번시간에는 Vuex에서 Getter를 사용하는 방법을 알아보겠습니다. 먼저 아래와 같은 예시를 만들어주세요. Getter의 개념을 이해하기 위해서 예제는 최대한 쉽게 만들었습니다 :) 1) main.js import Vue from 'vue' import App from './App.vue' import { store } from './store/index.js' Vue.config.productionTip = false new Vue({ render: h => h(App), store }).$mount('#app') 2. store > index.js - 멤버들의 정보가 담김 import Vue from 'vue'; import Vuex from 'vuex' Vue.use(Vuex); export c.. 2022. 4. 28. javascript] 구조분해할당(destructuring)이란? 구조분해할당(destructuring)이란? ES6에서 사용하는 문법인 Destructuring(구조 분해 할당)은 배열이나 객체의 속성을 분해서서 그 값을 개별 변수에 담아주는 javascript 표현식입니다. 말이 조금 길고 어렵죠? 아래의 간단한 예제를 보면 금방 이해가가실겁니다 ;) 1. 배열의 구조분해할당 let student = ['jiwon', 'heebin', 'minsu']; let student1 = student[0]; let student1 = student[1]; let student1 = student[2]; console.log(student1);// 'jiwon' console.log(student1);// 'heebin' console.log(student1);// 'min.. 2022. 4. 27. Vue] State, mutations, actions 한 눈에 보기 Vuex vue에서 컴포넌트 간의 정보 전달을 위해서는 props(부모→자식)와 event(자식→부모)를 사용했습니다다. 부모-자식 관계가 아니거나 계층구조가 복잡해지면 EventBus를 사용했습니다. 그러나 이벤트 버스 객체를 사용하는 방식도 애플리케이션의 규모가 커지만 복잡도가 커져서 사용이 힘듭니다. 이러한 이유로 나온것이 바로 'Vuex'입니다. 각 컴포넌트가 공유하는 상태 데이터는 전역에서 Store저장 객체를 통해서 관리할 수 있습니다. Store에 전역데이터와 메소드들을 저장해 놓으면, 언제든지 원하는 로컬 컴포넌트와 연결해서 사용할 수 있습니다. 이를 통해 우리는 좀 더 투명하고 유지보수가 뛰어난 코드를 활용할 수 있게됩니다. 지금부터 Vuex의 전역데이터와 메소드들을 어떻게 사용하는지 간.. 2022. 4. 22. node.js] url 모듈 사용하기 1. URL 구성요소 URL 모듈을 사용해보셨나요? URL 모듈을 사용하면 주소로된 문자열을 URL 객체로 만들거나 URL 객체를 일반 문자열로 변환해서 다양한 용도로 사용할 수 있습니다. 오늘은 node.js에서 URL 모듈을 간단하게 사용해보겠습니다. 먼저, 아래의 URL을 구성요소 별로 쪼개봅시다 http://nodestudy.com:9300/coding/nodejs/capter?page=5&line=23 (1) scheme 'http' : 프로토콜을 의미하며, 클라이언트와 서버가 통신할 때 정해놓은 통신규약입니다. (2) host & port 'nodestudy.com' : 네트워크에 연결된 서버에 부여되는 고유한 이름을 의미합니다. ':9300' : 하나의 host와 데이터통신을 하는 소켓들을 .. 2022. 4. 19. 이전 1 ··· 4 5 6 7 8 9 10 ··· 21 다음
