본문 바로가기

분류 전체보기89

node.js] 개발 용도로만 필요한 패키지들 관리? 개발을 하다보면 배포용도로는 필요하진않지만 개발 용도로 잠깐 잠깐 필요한 패키지들을 설치하고 싶을 때가 있습니다. 이럴때 개발용도로 받은 패키지들은 따로 관리해서 쉽게 깔고 지우고 싶은데 방법이 없을까요? 이를 도와주는 것이 '--save-dev' 명령어입니다. 일반적으로 다운 받은 패키지들의 정보는 package.json의 'dependencies'에 기록되는데요~ 개발용 패키지 다운 시 '--save-dev'명령어를 사용하면, 요 패키지들은 package.json의 'devDependencies'에 기록됩니다. 이렇게되면 배포용패키지와 개발용 패키지를따로 구분할 수 있겠죠? 디펜던시를 구분하면 필요에 따라 개발 패키지를 쉽게 설치 하고 지울 수 있습니다. 그럼 아래 상황에 맞는 예시를 풀면서 명령어를.. 2022. 8. 2.
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.