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

배우기에 급급해서 타입스크립트를 왜 쓰는지는 알아도 어떻게 해야 잘 활용할 수 있을까? 에 대한 개념은 확실하지 않은것 같다. 그래서 여기에서의 글은 내가 타입스크립트를 좀더 잘 활용할 수 있을 팁들을 적어나가고자 한다. (캡틴판교 장기효님의 강의를 보면서!) 마냥 쓰는게 아니라 생각하고 쓰자..! 상품목록을 보여주는 화면을 구현해야하는 상황이다. 위의 사진처럼 상품목록들이 들어오면 우리는 상품에대한 type을 정의한다. type Product = { id: number; name: string; price: number; brand: string; stock: number; } function fetchProducts(): Promise { } 하지만 저 화면중 하나의 상품을 클릭해서 들어오면 그 상품..

저게 의미하는 바가 무엇인지 몰라서 직접 vuex-module-decorator를 뒤져보았다. node_modules/vuex-module-decorator/dist/cjs/index.js function actionDecoratorFactory(params) { var _a = params || {}, _b = _a.commit, commit = _b === void 0 ? undefined : _b, _c = _a.rawError, rawError = _c === void 0 ? !!config.rawError : _c, _d = _a.root, root = _d === void 0 ? false : _d; return function (target, key, descriptor) { var modu..

개요 eslint와 prettier 설정으로 검색하기 싫어서 정리해두자. Prettier를 적용하는 방법 Prettier를 프로젝트에 적용하는 방법은 세가지가 있습니다. .prettierrc 설정 파일 사용(자주 사용된다고 한다.) `를 다음 줄로 내릴지 여부 "jsxSingleQuote": false, // JSX에 singe 쿼테이션 사용 여부 "printWidth": 80, // 줄 바꿈 할 폭 길이 "proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2) "quoteProps": "as-needed" // 객체 속성에 쿼테이션 적용 방식 "semi": true, // 세미콜론 사용 여부 "singleQuote": true, // single 쿼테이션 ..

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 프로퍼티를 없..

https://jp.vuejs.org/v2/guide/reactivity.html リアクティブの探求 — Vue.js Vue.js - The Progressive JavaScript Framework jp.vuejs.org 위에 문서를 보면 Vue는 배열의 다음 변화는 감지 할 수 없습니다. 인덱스와 함께 아이템을 직접 설정하는 경우, 예를 들어 vm.items[indexOfItem] = newValue 배열의 길이를 변경하는 경우, 예를 들어 vm.items.length = newLength 와 같이 Array이나 Map 깊은반응과 관련되는 친구들을 사용할 땐 조심해야한다. 이렇게 되면 억지로 반응성이 트리거 되게 set함수를 따로 선언해서 걸어두거나 Vue.set을 이용하는 방법을 선택해야하는데, Ma..

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

Jest version check..가 중요했다.. 원래 jest가 JSDOM이라는 내장 브라우저가 기본적으로 셋팅되어있어서 window is undefined 에러가 뜨는게 말이 안되는 상황 ⓵ 설치한 패키지 ・jest ・vue-jest ・ts-jest ・@babel/preset-env ・@vue/test-utils ・babel-jest ⓶ babel.config.js ⓷ jest.config.js 에러내용 babel core 와 설치한 패키지들의 호환성같은것도 체크했었어야했는데,, warning문구가 뜨는 jest 관련 패키지들을 버전 다운그레이드하니 잘 동작했다.

글이 너무 길어져서 나눔 middleware 넣기 middleware 라는 예약파일을 만들고 구성파일의 내용까지도 같다. (store를 끌어오는것도 가능) 하나 다른게 있다면 역시 컴포넌트내에서 선언하는 부분인데 typescript 입히기 전 export default { components: { FollowList, }, middleware: 'authenticated', } 입힌 후 import { Vue, Component } from 'nuxt-property-decorator'; import FollowList from '~/components/FollowList.vue'; @Component({ components: { FollowList, }, middleware: ['authenticate..