IT 내맘대로 끄적끄적

[Vue] 캘린더 만들기 Vue를 사용하다보면 캘린더를 만들어야 할 때가 있다. Vue에서 캘린더를 Datepicker라고 부른다 install 및 사용 방법은 밑에 참고문서 확인하면 된다. Data  선언 data () { return { state: { highlighted : { dates:[ ], }, disabledDates:{ }}, 특정 요일 higlight하기 methods: { setScenarioDatesList(){ var list =[] for(var i =0;i<this.scenario_dates.objectList.length;i++){ var today_year = this.scenario_dates.objectList[i].substring(0,4); var today_month = this.scenario_dates.objectList[i].substring(4,6); if(today_month.substring(0,1)==="0"){ today_month=today_month.substring(1,2) } var today_date = this.scenario_dates.objectList[i].substring(6); this.state.highlighted.dates.push(new Date(today_year,today_month-1,today_date)) list.push(new Date(today_year,today_month-1,today_date)) } 특정 요일 제외 disabled하기 this.state.disabledDates.customPredictor= function(date){ ...

[Vue] v-bind, v-on 정리 v-bind 약어 v-bind:href='url'을 줄여서 :href='url'이라고 표기 가능 <!-- 전체 문법 --> <a v-bind:href="url"> ... </a> <!-- 약어 --> <a :href="url"> ... </a> html속성에 Vue내의 값을 사용할 수 있도록 도와주는 v-bind <a href="{{ link }}">링크</a> // (x) 이렇게 사용할 수 없음 <script src="https://cdn.jsdelivr.net/npm/vue"></script> <div id="app"> <a v-bind:href="link">링크</a> </div> //이렇게 사용해야 함 v-on 약어 v-on:click='doSomething'을 줄여서 @click='doSomething'이라고 표기 가능 <!-- 전체 문법 --> <a v-on:click="doSomething"> ... </a> <!-- 약어 --> <a @click="doSomething"> ... </a> 출처 https://medium.com/@hozacho/맨땅에-vuejs-003-vuejs-directive-v-bind-a4844574e6ae

[Vue] Vue시작하기 Vue.JS는 빠른 Vue.JS프로젝트 생성을 지원하기 위해 공식 CLI(Commnad Line Interface)를 제공한다. # vue-cli 설치 npm install -g vue-cli # "webpack" 템플릿을 이용해서 새 프로젝트 생성 vue init webpack my-project 위의 두 줄의 명령어만 실행하면 Vue.Js 프로젝트가 생성 됨 Vue CLI를 설치하면 CLI설치후, CLI를 사용하여 Vue.JS 프로젝트를 생성 할 수 있다. 위의 명령어를 실행하면 webpack을 사용한 Vue.JS 프로젝트가 생성된다. 프로젝트 설정 위의 그림과 같이 vue-cli를 통해 프로젝트를 설정하고 프로젝트를 생성한다. 터미널을 켜고 생성된 프로젝트의 디렉토리로 이동하여, npm start  를 shell에 입력하면 default는 8080포트지만, 지금 8080포트를 다른곳에서 사용중이라 8081로 됐다. 위의 그림과 같이 Vue 어플리케이션이 실행된다. 브라우저에 https://localhost:8080 을 통해서 접근하면 위의 그림과 같이 실행화면을 볼 수 있다. npm start 로 실행된 어플리케이션은 개발용이다 배포버전으로 빌드하기 위해서는 npm run build 명령어를 사용하면 배포버전의 파일이 dist 디렉토리 밑에 생성된다. 또는 http://www.daleseo.com/vue-cli3/ 여기 가볼것 출처 https://beomy.tistory.com/40

[Vue] Hide div onlick 버튼 숨기기 방법 1 var app = new Vue({ el: '#app', data: { isHidden: false } }) <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <div id="app"> <button v-on:click="isHidden = true">Hide the text below</button> <button v-on:click="isHidden = !isHidden">Toggle hide and show</button> <h1 v-if="!isHidden">Hide me on click event!</h1> </div> 방법 2 new Vue({ el: '#app', data () { return { toggle: true } }, }) <script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script> <div id="app"> <button @click='toggle = !toggle'> click here </button> <div v-show='toggle'>showing</div> </div> 출처 https://stackoverflow.com/questions/48929139/hide-div-onclick-in-vue

[Vue] prop이란? 컴포넌트는 parent-child관계에서 가장 일반적으로 함께 사용하기 위한 것 컴포넌트A는 자체 템플릿에서 컴포넌트B를 사용 가능 서로 의사소통 부모는 자식에게 데이터를 전달해야 할 수도있으며, 자식은 부모에게 일어난 일을 알릴 필요가 있다. 그러나, 부모와 자식이 명확하게 정의된 인터페이스를 통해 가능한한 분리된 상태로 유지하는 것도 매우 중요 이렇게하면 각 컴포넌트의 코드를 상대적으로 격리 할 수 있도록 작성하고 추론할 수 있음 Vue.js에서 부모-자식 컴포넌트 관계는 props는 아래로 events는 위로 부모는 props를 통해 자식에게 데이터를 전달하고 자식은  events를 통해 부모에게 메시지를 보냄 Props로 데이터 전달하기 모든 컴포넌트 인스턴스에는 자체 격리 된 범위가 있다. 즉, 하위 컴포넌트의 템플릿에서 상위 데이터를 직접 참조할 수 없으며 그렇게 해서도 안됨 데이터는 props옵션을 사용하여 하위 컴포넌트로 전달 가능 prop는 상위 컴포넌트의 정보를 전달하기 위한 사용자 지정 특성 하위 컴포넌트는 props옵션을 사용하여 수신 할 것으로 기대되는 props를 명시적으로 선언해야 함 Vue.component('child', { // props 정의 props: ['message'], // 데이터와 마찬가지로 prop은 템플릿 내부에서 사용할 수 있으며 // vm의 this.message로 사용할 수 있습니다. template: '<span>{{ message }}</span>' }) 그런 다음 일반 문자열을 다음과 같이 전달 할 수 있음 <child message="안녕하세요!"></child> 결과 출처 https://kr.vuejs.org/v2/guide/components.html ...

[Vue] @의 의미 <!-- 위와 같습니다 --> <input v-on:keyup.enter="submit" /> <!-- 약어 사용도 가능합니다 --> <input @keyup.enter="submit" /> @ = v-on 출처 https://kr.vuejs.org/v2/guide/events.html

[Vue] 이벤트 리스너 v-on v-on 디렉티브를 사용하여 DOM 이벤트를 듣고 trigger 될 때 Javascript를 실행할 수 있다. v-on 이벤트 리스너의 역할 ex) 로그인 페이지에서 아이디와 패스워드를 넣고 실행 버튼을 누르는 순간에 로그인 버튼은 자신이 클릭 되는 순간에 이 로그인 이벤트를 실행 여기서 이벤트를 실행하기 위한 trigger(로그인 버튼 클릭)와 이벤트를 연결 해주는 것이 이벤트 리스너 v-on:이벤트이름=”method 이름” ex) v-on:click= "rollDice()" 출처 https://medium.com/@hozacho/%EB%A7%A8%EB%95%85%EC%97%90-vuejs-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A6%AC%EC%8A%A4%EB%84%88-v-on-vuejs-directive-625bfc661c75

[Vue] Vue 인스턴스 <div id="app">{{ msg }}</div> <script> var vm = new Vue({ el: '#app', data: { msg: 'Hello world' } }); </script> Vue 생성자 함수로 뷰모델을 만드는데 이것이 Vue 인스턴스이다. Vue 인스턴스 자바스크립트 객체인데, 내부적으로 연결된 템플릿이 필요하다 그것을 el 키에 셀렉터 값으로 넣어주면 된다 { el: '#app' } 그리고 data 객체는 인스턴스 상태를 저장하는 역할을 하는데 템플릿에 바인딩할 데이터들의 집합이다. msg 변수값을 템플릿에 인터폴레이션 문법으로 바인딩하여 출력하였다 {{ msg }} 출처 http://blog.jeonghwan.net/vue/2017/03/27/vue.html

[Vue] Vue란? Vuex 로 해결 할 수 있는 문제 MVC 패턴에서 발생하는 구조적 오류 컴포넌트 간 데이터 전달 명시 여러 개의 컴포넌트에서 같은 데이터를 업데이트 할 때 동기화 문제 Vuex 개념 State : 컴포넌트 간에 공유하는 데이터 data() View : 데이터를 표시하는 화면 template Action : 사용자의 입력에 따라 데이터를 변경하는 methods Vuex 구조 Component -> async logic -> sync logic -> state state : 여러 컴포넌트에 공유되는 데이터 data getters : 연산된 state 값을 접근하는 속성  computed mutations : state 값을 변경하는 이벤트 로직, 메서드  methods actions : 비동기 처리 로직을 선언하는 메서드  aysnc methods State state가 변경되면 자연스럽게 뷰 리액티비티에 의해서 화면이 다시 갱신됨 // Vue data: { message: 'hi vue' } // Vuex state: { message: 'hi vue' } ----------------------------------------- // vue {{ message }} // vuex {{ this.$store.state.message }} Getter state값에 접근한다. computed()처럼 미리 연산된 값에 접근한다 // store.js state: { num: 10 }, getters: { getNumber(state) { return state.num; }, doubleNumber(state) { return state.num * 2; } } -----------------------------...

[Vue] mapState, mapGetters, mapMutations, mapActions 정리 mapState Vuex에 선언한 state 속성을 뷰 컴포넌트에 더 쉽게 연결해주는 헬퍼 // App.vue import { mapState } from 'vuex' computed() { ...mapState(['num']) // num() { return this.$store.state.num; } } // store.js state: { num: 10 } ------ .vue ------ <!-- <p>{{ this.$store.state.num }}</p> --> <p>{{ this.num }}</p> mapGetters Vuex에 선언한 getters 속성을 뷰 컴포넌트에 더 쉽게 연결 해주는 헬퍼 // App.vue import { mapGetters } from 'vuex' computed() { ...mapGetters(['reverseMessage'])} // store.js getters: { reverseMessage(state) { return state.msg.split('').reverse().join(''); } } -------- .vue -------- <!-- <p>{{ this.$store.getters.reverseMessage }}</p> --> <p>{{ this.reverseMessage }}</p> mapMutations Vuex에 선언한 mutations 속성을 뷰 컴포넌트에 더 쉽게 연결 해주는 헬퍼 // App.vue import { mapMutations } from 'vuex' methods: { ...map...

[Vue] actions, getters, index, mutations 란? actions 함수 dispatch 로 actions 사용 가능 ex) this.$store.dispatch("scenarios/getScenariosOutput") getters 불러오는 것 index 기본 파일 ...mapGetters( {})로 index에 있는거 가져올 수 있음 state 로 index 사용 가능 ex) context.rootState.open_api~~; mutations 함수(비동기식) commit mutations 사용 가능 context.commit("setOutputData", data_json.data); context를 보려면 JSON.stringify(context) Vuex 저장소에서 실제로 상태를 변경하는 유일한 방법은 mutation을 사용하는 것

[Vue] Computed, Watch, methods 차이   Computed(계산된 속성) <p>뒤집힌 메시지: "{{ reversedMessage() }}"</p> // 컴포넌트 내부 methods: { reversedMessage: function () { return this.message.split('').reverse().join('') } } 복잡한 Javascript 표현식은 HTML 정보가 들어가야하는 부분보다는 vue인스턴스 안에서 처리하는 것이 좋음 간단한 연산을 할때는 좋지만, 너무 많은 연산을 하면 코드가 비대해지고 유지보수가 어려움 computed 속성은 그런 처리를 담당하는 데이터 연산들을 정의하는 영역 computed는 data 속성에 변화가 있을 때 자동으로 다시 연산 computed는 message같은 프로퍼티가 변화가 있을 때만 다시 연산을 하고 한번 연산한 값을 캐싱해놓았다가 필요한 부분에 다시 재 활용 같은 페이지내에서 같은 연산을 여러번 반복할 때 사용하면 효율적 computed: { now: function () { return Date.now() } } 또한 Data.now()처럼 아무곳에도 의존하지 않는 computed속성의 경우 절대로 업데이트 되지 않음 methods 캐싱이라는 개념이 없기 때문에 매번 재 렌더링 됨 캐싱 효과가 필요없으면 methods 사용하고, 필요하면 computed 사용할 것 ex) 데이터가 자주 변동되면, 비용적인 면에서 -> computed ex) 데이터가 수시로 업데이트 된다면, 계속해서 캐시를 저장하는 computed보다는 mehtods가 더 효과적 Watch(감시자) 데이터(data()) 변화를 감지하여 자동으로 특정 로직(<temple> 등)을 수행 대부분의 경우 comput...

[Vue] Axios(엑시오스)란? Vue에서 권고하는 HTTP 통신 라이브러리는 엑시오스 Promise 기반의 HTTP 통신 라이브러리이며, 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘 되어 있고 API가 다양함 엑시오스 설치 프로제그 엑시오스를 설치하는 방법은 CDN방식과 NPM방식 2가지가 있음 CDN 방식 <script src="https://unpkg.com/axios/dist/axios.min.js"></script> NPM 방식 npm install axios Axios사용 방법 라이브러리를 설치하고 나면 axios라는 변수에 접근할 수 있게 됨 axios변수를 이용해서 아래와 같이 HTTP GET 요청을 날리는 코드를 작성 <div id="app"> <button v-on:click="fetchData">get data</button> </div> new Vue({ el: '#app', methods: { fetchData: function() { axios.get('https://jsonplaceholder.typicode.com/users/') .then(function(response) { console.log(response); }) .catch(function(error) { console.log(error); }); } } }) 위 코드는 get data 버튼을 클릭했을 때 사용자 정보를 받아오는 코드 실행하면 사용자 정보가 브라우저 개발자 도구의 콘솔에 출력됨 만약 API에서 GET으로 URL을 가져오면 Axios도 GET메서드를 활용하면 된다 기타 엑시오...