목록Vue (54)
똑같은 삽질은 2번 하지 말자
원인 해당에러는 store의 state의 값들을 vuex의 mutation을 통해서가 아닌 직접 값을 변형하려고 할 때 발생하는 에러이다. ex) this.$store.state.name = gwak; 해결방법 store에서 땡겨온 값들은 기본적으로 복사해서 사용하는게 좋다. (아니면 값을 변형하는 처리 자체를 하나하나 mutations을 통해 해주거나) javascript 객체를 복사하는 방법으로써는 두가지의 종류가 있다. 얕은복사(객체안의 객체같은 depth >= 2 인 경우에는 해결방법이 아님) 객체를 복사하지만 객체의 값들중에 원본객체를 참조하고 있는 요소가 존재하면 그건 얕은복사 이다. 1. 객체를 통째로 집어넣기 const obj1 = { a: 1, b: 2}; const obj2 = obj1..
개요 컴포넌트들 사이에서 공유되는 데이터들을 global state로 할것인가 local state로 할것인가? 이건 딱히 정해진 룰 같은게 없다. 하지만 UI적인 요소들은 local로해도 충분할 경우가 많고 서버에서 받은 데이터들은 global하게 관리하는게 좋다는 가설은 존재한다. 이 역시도 물론 무엇을 만드냐에 따라 틀릴 수 도 있다. 중요한건 기본 local state부터 시작해서 정말 어쩔수 없을때 global state로 하는게 좋은 접근법이라고 생각한다. 생각해야할 점 페이지의 갱신이나 뒤로가기에 대한 대응? 아마 페이지 컴포넌트가 로드 될때 fetchData를 하면 해결될 듯 싶지만, 사파리의 경우에는 조금 다를 수 있다. 특정한 캐시전략으로 페이지 뒤로가기에 대한 동작을 좀더 빠르게 렌더..
code-spitting을 확인하는 과정중에 뭔가 제대로 기능 동작이 안되는것같은 느낌을 받았는데 preload prefetch 때문이었다. vue-cli에선 이 기능들이 기본으로 들어가 있기때문에 이걸 꺼줘야하는데 preload prefetch 기능을 끌려면 vue-cli로 프로젝트를 생성했기 때문에 웹팩설정파일이 노출이 안되어있는 상태이므로 vue.config.js에서 설정해준다. 첫 페이지 진입시 로드되는 컴포넌트를 봤는데 필요없는 친구들이 목록에 포함되어있는걸 확인했다. // vue.config.js module.exports = { chainWebpack: (config) => { config.plugins.delete('prefetch') config.plugins.delete('preload..
개요 vue-cli로 만든 프로젝트에서 webpack 설정을 변경하는 방법 이번에 webpack-bundle-analyzer을 써서 프로젝트의 번들사이즈를 분석해서 좀 줄이고자 해서 플러그인으로 추가하려고 하니 이 프로젝트는 vue-cli 4.x 로 생성한거라 webpack설정파일이 따로 존재하지 않았다? 그렇다 vue-cli 3.0이상으로 프로젝트를 생성했으면 webpack은 외부로 노출되어 있지않다. 잠깐 vue-cli 2 버전대와 그 이상을 비교해 보자면 vue-cli 2.x vue-cli 3.0 이상 Command vue init vue create webpack 설정파일 있음 없음 기본 생성 파일 그냥 깃헙 템플릿 다운 git clone 느낌 플러그인으로 이것저것 기능 추가가 가능 ES6 문법 ..
Typescript 로 마이그레이션 하면서 기록하고 싶은것들 1. 결과값(JSON)이 비었을 경우 해당 결과를 빈 배열로 초기화 하고 싶을때 2. debugger 중단점 말고 키워드로 디버깅하는 방법 (꽤 유용할꺼 같아 적어놓음) 3. computed 의 반환타입은 무조건 넣어줘야 올바른 추론이 이루어질 수 있다. computed의 사용용도? 간결하고 직관적인 템플릿 표현식 조건에 따라 HTML 클래스를 추가/변경할 때 Vuex의 state값에 접근할 때 다국어 라이브러리에도 활용 가능 4. 자동 추론.. 타입을 정의해야하는 필요성에 대해 좀더 깊게 생각해보자 밑의 경우는 fetch의 리턴타입을 정의함으로써 sort안 내부 메소드의 param의 자동추론이 이루어지는 케이스인데, sort 메소드의 para..
nuxtServerInit 서버사이드에서 실행되는 Vuex action 함수이며, 비동기로 store에 데이터를 셋팅할 수 있다. 또한 storeContext(store..) nuxtContenxt(res,req...)를 이용할 수 있습니다. 실용예로써는 로그인 인증 결과를 바탕으로 페이지 배정 등등 ※ 사용할 수 있는 장소는 /store/index.ts 뿐이므로 주의 middleware 페이지를 렌더링(생성)하기 전에 실행시키는 함수나 모듈입니다. /middleware 내의 파일을 만들어 파일의 이름으로 middleware를 페이지에 추가하면 사용할 수 있다. 보통 인증(Login한 User? 확인)을 위해 많이 사용되어진다. asyncData, fetch 외부 API에서 axios 등으로 데이터를 가..
1. 우선 pro가 아닌 free로 이용할 수 있는 fontawesome 패키지 추가 yarn add -D @nuxtjs/fontawesome @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons 2. 사용할 icon들을 설정 각각 필요한 icon들은 다를텐데 이걸 nuxt.config에서 직접 넣어주기보다는(아이콘 1개 2개 사용할꺼 아니니깐) 다른 설정파일을 하나 만들어서 import export로 넣어주는게 공식사이트에서 추천하고 있는 방법 icon/fontawesome.js const solid = [ 'faDownload', 'faUser' ] const regu..
헷갈리기 쉬웠던 부분이라 끄적여본다. 흔히들 tailwind를 쓴다고 하면 npx tailwindcss init해서 tailwind.config.js 파일을 생성해서 이것저것 tailwind에 관한 설정들을 하지만, @nuxtjs/tailwindcss를 이용하면 default 설정이 들어가 있어서 굳이 tailwind.config.js 파일 이나 tailwind.css을 안 만들어도 tailwind가 잘 먹힌다. (tailwind.css 파일도 @nuxt/tailwindcss 안에 있음) dist/runtime/index.js in @nuxt/tailwindcss const defaultTailwindConfig = ({rootDir, srcDir}) => ({ theme: { extend: {} }, ..
뷰를 작성할 때 너무 당연한거라 미처 체크하지 못한 부분들을 집고 넘어간다. Vue 인스턴스 우선 루트 컴포넌트 즉 App.vue같은 파일안에 보면 이하의 코드로 인스턴스를 생성하고 있다. 이건 뷰를 사용하고자 한다면 필수적으로 생성해야하는 인스턴스이다. new Vue(); 그렇게 생성된 인스턴스를 el로 id="app"인 태그에서 뷰의 api나 속성을 사용할 수 있게 연결해준다. 컴포넌트 크게 지역, 전역컴포넌트가 있다. 우리가 주로 쓰는건 지역 컴포넌트로써 말 그대로 등록한 해당 부모에서만 사용할 수 있다. 그게 끝
저게 의미하는 바가 무엇인지 몰라서 직접 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..