이안의 평일코딩

Composition API 프로젝트가 커지면 데이터와 관련된 함수 찾는 것도 일이다. 지금까지 했던 문법은 Options API고 Composition API를 쓰면 관련있는 코드를 한 곳에 모을 수 있다. 편한걸로 컴포넌트마다 Composition 또는 Options 선택하면 된다. Composition API 써서 개발하려면 setup() 안에 코드를 짠다. setup() 안에서 데이터 생성, 조작, methods, computed, watch, hook걸기 등 거의 모든 기능개발을 setup 한 곳에서 가능하다. 먼저 vue에서 {ref}를 import 해온다. setup() 안에서 데이터 생성하는 법은 ref(데이터) 함수를 사용하면 된다. 모든 데이터를 refrence data type으로 감..

style scoped vue파일들에 있던 css는 하나로 합쳐지는데 싫으면 style scoped를 사용하자. scoped가 있으면 다른 vue파일로 전염되지 않는다.

PWA(Progressive Web App) Progressive Web App을 사용하면 웹사이트를 그대로 모바일앱처럼 쓸 수 있다. PWA를 발행하기 위해 먼저 라이브러리를 설치한다. vue add pwa PWA의 구성요소로 manifest.json과 service-worker.js있다. manifest.json은 앱의 이름, 아이콘, 테마색상 등을 설정할 수 있고, service-worker.js는 어떤 html, css, js 파일들을 캐싱할건지 명시하는 파일이다. (오프라인 이용가능) 두 파일은 빌드할 때 자동으로 생성된다. (dist 폴더안에 있는 파일들을 올려주면 된다) npm run build PWA의 설정을 바꾸고 싶으면 vue.config.js라는 파일을 프로젝트 폴더안에 생성한다. m..

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..

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으로 수정해주면 된다. 자..