똑같은 삽질은 2번 하지 말자

https://github.com/pqina/vue-filepond/issues/99 Combine normal form with filepond vuejs · Issue #99 · pqina/vue-filepond I am developing using Laravel 5.6 + Vuejs and I am in doubt using Filepond 5.1. I have a form with user data and would like to send only 1 request to the server, containing the user data with the 5... github.com 참고했던 이슈 Focus를 둘 부분들은 @onUpdateFiles server="/api" server 프로퍼티를 없..

개요 Vee-Validate 란? Validation을 보다 간결하게 작성해주는걸 도와주는 라이브러리 이번에 사용한 버젼(Vue3 용은 꽤 다른방식이니 주의바람) "vee-validate": "3.4.9", vee-validate를 전역적으로 사용해 줄 수 있게 plugins에 등록해준다. nuxt.config.js plugins: [ { src: '~/plugins/vee-validate', ssr: true }, ], // build를 설정안하면 ssr이 안되므로 반드시 해야한다. build: { transpile: ['vee-validate/dist/rules'], }, plugins/vee-validate.js import Vue from 'vue' import { ValidationProvide..

Fragment template안에 무조건 하나의 루트태그만 허용되었는데, 이제는 복수여도 상관없다. data => ref or reactive ref vs reactive ref -> 모두 사용가능 reactive -> Array, Object, Map, Set reactive에 대해서는 좀더 다루고 싶으나 toRefs를 다룰때 좀 더 자세히 기술할 예정 접근방법 value로 접근하냐 안하냐의 차이이다,(template에서는 그냥 접근가능) {{ greeting(name) }} {{ greeting(names.name) }} Button Props , Emit props emit은 별 그렇게 차이는 없어보인다. 좀 눈에 띄는게 있다면 emit을 한 군데에 모아두는 곳이 생겼다. export defaul..

A higher-order component (HOC) is an advanced technique in React for reusing component logic 하이오더 컴포넌트는 컴포넌트의 로직을 재사용하기 위한 고급 기술이다. 어떤 리스트(뉴스, 질문등등)를 보는 View들이 있는데 애네들은 기능이 완전 똑같음으로 각각의 뷰 컴포넌트를 만들지말고 컴포넌트 위에 상위 컴포넌트를 두는 느낌으로 일단 라우터에서 라우팅시 상위 컴포넌트를 씌워주기 위한 작업을 해준다. HOC는 거의 써본적이 없으니깐 한번 코드로 구현해보면서 이해해보자. router.js { path: '/news', name: 'news', component: createListView('NewsView'), }, { path: '/a..

Typescript를 적용할 때, Vue의 기본적인 hook들은 Vue와 거의 유사하므로 생략하고 마이그레이션하면서 중간중간 막힌 부분들 또는 미처 몰랐던 부분들을 여기서 써 나가고자 한다. 우선 공식문서 typescript.nuxtjs.org/ Nuxt TypeScript TypeScript Support for Nuxt.js typescript.nuxtjs.org fetch hook ? Nuxtv2.12에서 추가된 fetch 훅은 어떻게 쓰면될까? 일부 훅(fetch 같은)들은 Component.registerHooks을 써서 등록할 필요가 있다고 한다. 소스코드 Component.registerHooks(['fetch', 'fetchOnServer']); @Component export defaul..

컴포넌트의 플러그인화 왜쓰냐? 전역으로 공유하고 싶은 요소가 있을때 Vue.use(MyPlugin) new Vue({ //... options }) 이런식으로 router store등등 이미 많이 써본 친구들인데 내가 직접 플러그인을 생성 작성해야하는 경우에는 어떻게 하면 될까? window의 width(브라우저의 사이즈)가 변할때 width값을 계속 갱신/습득 가능하게 하는 기능을 가진 플러그인을 만든 예제이다. /plugins import Vue from 'vue' Vue.use({ install(Vue) { // 두번째 param으로 option이라는 친구도 제공한다. const $_window = Vue.observable({ width: 0 }) if (process.browser) { cons..

middleware 미드웨어는 레이아웃, 페이지가 랜더링되기 전에 실행되는 파일이 정의되는 폴더다. 미들웨어는 클라이언트 뿐만 아니라 서버에서도 쓰이는 개념이므로 개념 자체를 알아두면 도움이 된다.= The middleware Property 형태: String, Array, Function 요소: String or Function Named middleware 이름있는 미들웨어는 아래의 사진처럼 middleware라는 파일을 만들어 안에 인증모듈을 넣고 아래의 코드처럼 사용한다. import FollowList from '~/components/FollowList'; export default { components: { FollowList, }, middleware: 'authenticated', /..

import Vue from 'vue'; import Vuex from 'vuex'; import VueRouter from 'vue-router'; Vue.use(Vuex); Vue.use(VueRouter); Nuxt에선 위의 방식을 사용해서 모듈을 가져오지 않는다. (코드반복 제거) nuxt.config.js export default { // Global page headers: https://go.nuxtjs.dev/config-head head: { titleTemplate: '%s - nuxt-ts', title: 'nodebird', htmlAttrs: { lang: 'en', }, meta: [ { charset: 'utf-8' }, { name: 'viewport', content: '..

Nuxt.js Vue의 상위 프레임워크로 SSR모드(제일 자주 이용되는)가 존재한다. Nuxt 방식 물론 CCR과 같이 SPA로 작동하지만, 서버사이드렌더링을 통해 특정페이지도 던질 수 있다.(덩어리가 아니라 거기서 쬐끔 떼어내서 던지는건가? ) (기존 CCR에서는 처음에 한번에 html css js를 웹팩을 이용해 한 덩어리째로 전송을 받고 그 이후에는 화면 리플레쉬 없이 서버에서 API로 데이터를 주고 받는다.) 그럼 왜? Nuxt일까? 클라이언트 사이드 렌더링에서도 단점이 있기때문에 나왔다. 대표적으로 프론트 자체가 한 덩어리로 검색엔진에 인식되다보니, html파일 헤드의 메타를 주로 이용하는 검색엔진(SEO) 최적화에 문제가 있다. 그리고, 화면에서 단 한번만 호출되고 변함이 없을 정보들은 서버사..

Root Vue 인스턴스 즉, new Vue ({...})를 통해 생성 된 경우, 문제없이 data : {...} 오브젝트 형태를 사용할 수 있다. 왜냐하면 new Vue를 함으로써 새로운 인스턴스를 생성한다는 의미이기 때문이다. 그리고 이 Vue 인스턴스는 SPA라면 하나만 가질 수 있을 것이다. 여기서 문제는 Vue.component (...) or export default {...}를 통해 정의 된 재사용 가능한 구성 요소가 있을 때 인데 이러한 경우에는 data () { return {...}; } 또는 data : function () { return {...}; } 을 사용해야한다. 그 이유는 재사용 가능 구성요소들은 import를 해서 한 부모 컴포넌트에서 재사용 가능한 컴포넌트를 여러개 ..