이안의 평일코딩

computed와 map methods vs computed 함수를 만들 때 methods :{}가 아닌 computed : {}를 사용해보자. export default { name: 'App', data(){ return { counter : 0, } }, methods: { now(){ return new Date() }, }, computed: { now2(){ return new Date() }, }, } methods 함수는 사용할 때마다 실행되지만, computed 함수는 사용해도 실행되지 않는다. 계산결과 저장용 함수로 쓸 수 있고 자원절약이 된다. {{now()}} {{counter}} {{now2}} {{counter}} // computed 함수는 이름만 쓴다 버튼 버튼을 누르면 co..

actions ajax요청과 같이 시간이 오래걸리는 것을 처리하기 위해서는 actions을 이용한다. 비동기식 처리를 지원하는 코드는 다음줄 부터 실행하려는 경향이 있기 때문에 의도치않는 버그가 생길 수 있고, 코드가 길어져 복잡해질 수 있다. 그래서 mutations: {}가 아닌 ajax 요청하지 않고 actions: {}에서 한다. 더보기 게시물 ajax를 요청해보자. store.js import axios from 'axios'; import { createStore } from 'vuex' const store = createStore({ state () { return { more : {}, } }, actions : { getData(){ axios.get('URL.json') .then((..

state 변경 state 변경은 store.js만 한다. state 이상이 생기면 store.js를 보자. store.js import { createStore } from 'vuex' const store = createStore({ state () { return { name : 'lee', age : 20 } }, mutations :{ changeName(state){ state.name = 'park' }, changeAge(state, payload){ //state.age++; state.age += data } } }) export default store; 먼저 store.js에 state를 수정하기 위한 방법을 mutations에 함수 정의한다. 전달할 데이터를 App.vue에서 pa..

Vuex 설치 및 셋팅 Vuex를 왜 사용할까? 하위컴포넌트 전송 props, 상위컴포넌트 전송 custom event, 또는 mitt는 데이터 주고받기 어렵다. Vuex는 모든 컴포넌트가 데이터를 공유할 수 있는 js파일로 모든 컴포넌트가 직접 꺼내쓸 수 있다. 컴포넌트, 데이터가 많을 때 Vuex를 쓰고 간단할 때는 props를 쓰자. Vuex 4 설치 npm install vuex@next 또는 yarn add vuex@next Vuex 4 셋팅 모든 컴포넌트가 쓸 수 있는 데이터 저장용 js파일 만들어야한다. src폴더에 store.js를 생성한다 import { createStore } from 'vuex' const store = createStore({ state () { return { n..

index.html head태그안에서 meta태그를 통해 정보를 넣어주면 된다. 해당하는 썸네일 이미지 크기는 800x400으로 맞춰주면 된다. 아래는 썸네일 관련 카카오 개발자의 답변이다.

Vue 전역 라이브러리 예를들어, axios를 전역에서 사용하고 싶다면 일단 설치를 한다. yarn add axios 그리고 main.js에서 셋팅해준다. main.js import { createApp } from 'vue' import App from './App.vue' import axios from 'axios' let app = createApp(App) app.config.globalProperties.axios = axios; app.mount('#app') app.config.globalProperties.는 글로벌한 변수보관함으로 보관함에 { axios : axios } 추가한 것이다. 그리고 app이라는 변수로 받았기 때문에 createApp(App)을 app으로 수정해주면 된다. 자..

slot으로 부모 -> 자식 데이터 전송법 FilterBox.vue (자식) 1. 자식 컴포넌트에서 데이터를 받아오고 싶은 곳에 을 넣는다. (출력될 위치) Container.vue (부모) {{filter}} 2. 태그사이에 데이터를 넣는다. slot 여러개 사용하기 name 속성을 주면 된다. (복잡하니 그냥 props 쓰자) FilterBox.vue (자식) 1. Container.vue (부모) 데이터1 데이터2 2. 보낼거 slot props slot 사용할 때 부모가 자식데이터 필요한 경우. FilterBox.vue (자식) 1. Container.vue (부모) {{작명.msg}} 2. 부모는 {{작명.자식데이터}} slot의 한계 slot은 HTML에만 가능하고 속성안에는 쓸 수 없다. 즉..

배열에 값 추가 .unshift() 배열의 맨 앞값 추가 .push() 배열의 맨 뒷값 추가 var fruits = ["Apple", "Banana", "Orange", "Strawberry"]; var unshift = fruits.unshift("Grape"); console.log(fruits); //"Grape","Apple", "Banana", "Orange", "Strawberry" var fruits = ["Apple", "Banana", "Orange", "Strawberry"]; var push = fruits.push("Grape"); console.log(fruits); //"Apple", "Banana", "Orange", "Strawberry","Grape" 배열에 값 제거 .sh..