Question영 이야기

React 프로젝트를 create-react-app 로 생성하려고 했을때 다음과 같은 오류가 발생했습니다. error @typescript-eslint/eslint-plugin@2.10.0: The engine "node" is incompatible with this module. Expected version "^8.10.0 || ^10.13.0 || >=11.10.1". Got "11.6.0" 오류 메세지를 살펴보니 node 버전이 호환이 안되서 문제인 것 같아 업데이트를 진행 해줬습니다. Node.js 업데이트 방법 [Node.js] 최신버전으로 업데이트 하기 Node 업데이트 $ sudo npm cache clean -f # 강제캐시삭제 $ sudo npm install -g n # n 모듈 설..

Node 업데이트 $ sudo npm cache clean -f # 강제캐시삭제 $ sudo npm install -g n # n 모듈 설치 $ sudo n stable # or sudo n 12.14.0 (버전명) $ node -v # 버전 확인 Node 업데이트 오류 bash: /usr/bin/node: No such file or directory 위의 오류가 발생하면 다음과 같이 입력해줍니다. $ sudo ln -sf /usr/local/n/versions/node//bin/node /usr/bin/node 예시 $ sudo ln -sf /usr/local/n/versions/node/12.14.0/bin/node /usr/bin/node NPM 업데이트 $ sudo npm install -g n..

Vue 프로젝트에 대한 사항을 정리하는 블로그 포스팅을 시작하려고 합니다. 자료는 Vue 공식 홈페이지 배우기 를 기본으로 하고 여러 자료들을 정리하여 필요한 사항만 정리해 두려고 계획하고 있습니다. 학습을 돕기 위한 목적이 아닌 배움의 정리의 목적으로 작성하는 글이라 다소 자료가 생략되어 있을수 있습니다. Vue 의 설치는 이전 포스팅을 참고해주세요. 설치 및 프로젝트 생성 해보자 [NodeJS/VueJS] 설치 및 프로젝트 생성 해보자 안녕하세요. 이번 포스팅은 Vue 의 설치 및 프로젝트 설정에 대해 간략하게 정리하도록 하겠습니다. 시스템 환경 운영 체제 : macOS Mojave Tool : VSCode Vue.js, ES6, Node.js 시작 Vue 를 사용하기 위해서는 다.. question..

저는 개발을 진행할때 기능별로 나누어 놓는 것을 좋아해서 UI 기준 기능을 컴포넌트들로 나눠서 관리 합니다. 사용할때 나누어 놓은 기능 컴포넌트들을 부모 컴포넌트에 연결해서 사용하죠. 그런데 간혹 부모 컴포넌트에서 연결한 컴포넌트 템플릿에 HTML 요소가 동적으로 적용되어야 하는 경우가 있습니다. 이럴 경우 Slots 을 사용하면 이런 경우 대처가 가능합니다. 슬롯은 부모와 연결된 자식 컴포넌트간에 통로 역할을 한다고 생각하면 됩니다. 연결된 통로에 동적으로 적용되는 UI 나 이벤트들을 연결하여 사용하는 것이죠. 지금부터 다루게 될 내용은 개편된 v2.6 기준 의 내용입니다. Slot(슬롯의 기본) 슬롯에 들어갈 내용입니다. 슬롯에 들어갈 내용입니다. 슬롯은 자식(하위) 컴포넌트에서 정의한 slot 영역..

Vue 에 대한 복습을 하다가 ref 속성에 대한 내용이 잘 이해가 안가서 포스팅으로 정리하여 남깁니다. 분명히 그전 공부에선 이해하고 넘어갔던 기억이 있는데... 머리가 역시 돌인가 봅니다. 그럼 간략하게 정리해보도록 하겠습니다! 이전 포스팅에서 상위, 하위 컴포넌트간 데이터 전달 방법 에 대해 정리한 적 있습니다. [NodeJs/VueJs] 상위, 하위 컴포넌트간 데이터 전달 방법 안녕하세요. 이번에는 Vue 를 사용하면서 저를 많이 혼란스럽게 했던 기능 중 주요 기능인 상위, 하위 컴포넌트간 데이터 전달 방법에 대해 살펴보려고 합니다. 오늘도 미래의 저에게 도움이 될수 있기를! 요 근래.. question0.tis..

사용 빈도수 https://www.npmtrends.com/nuxt-vs-quasar-framework-vs-vuetify npm 을 통한 다운로드 수들을 비교하여 보면 Quasar 는 다른 플랫폼에 비해 아직 다운로드 수가 적다. 설치 방법 Vuetify Quasar https://github.com/vuetifyjs/nuxt : Nuxt.js + Vuetify.js 설치 방법 JS 를 플러그인 형태로 연결하여 사용하는 방법 https://github.com/quasarframework/quasar-nuxt : Nuxt.js + Quasar 설치 방법 시도는 했으나 사용하지 못함

Nuxt 를 사용하기 위해 프로젝트를 설정하다 보면 여러 난관들이 있습니다. 저도 아직 해결 못한 난관들이 많아요. 이번엔 그 난관중에 하나인 Router 의 자동 경로 설정입니다. Nuxt 의 특징 중에 하나가 Vue 에서 수동으로 설정해주었던 Vue-Router 의 경로를 자동으로 설정해준다 라는 건데요. 자동으로 생성된 Router 의 경로와 설정을 그대로 사용한다고 하면 상관없으나 커스텀하게 사용해야하는 경우들이 있습니다. 해당되는 상황을 몇가지 예로 정리해보겠습니다. 파일 이름의 첫글자가 대문자인 경우 이렇게 파일을 구성했을 경우 Nuxt 에서 빌드를 하게 되면 자동으로 이름과 경로 끝자리 문자가 대문자로 설정됩니다. 혹은 원치않는 경로와 이름을 갖게 되는 경우도 있죠. 이 경로를 원하는대로 설..

안녕하세요. 이번에는 Vue 를 사용하면서 저를 많이 혼란스럽게 했던 기능 중 주요 기능인 상위, 하위 컴포넌트간 데이터 전달 방법에 대해 살펴보려고 합니다. 오늘도 미래의 저에게 도움이 될수 있기를! 요 근래 Vue 를 공부하는 중 상위, 하위 컴포넌트간 데이터 통신이 자주 필요했습니다. 주고 받을수 있는 방법은 정리해보자면 다음과 같았습니다. this.$root 혹은 this.$parent 를 이용 v-bind 와 props, v-on 이벤트와 $emit 를 이용 v-model 를 이용 EventBus 를 이용 vuex 의 store 공통객체를 이용 전부 다 Vue에서 데이터를 전달하고 관리하기 용의한 방법들입니다. (이렇게나 많네요!) 여기서 vuex 를 이용하는 방법은 글로벌한 공통 상태값을 관리..

오늘도 맨땅에 헤딩을 엄청 하고 있습니다. Nuxt 를 사용하여 토이 프로젝트를 구현하고 있었는데 시작부터 삐걱 거리네요. 이번에 간단하게 오늘 저를 괴롭게 했던 vue 관련 외부 라이브러리 추가에 대해 제가 겪었던 경험을 공유해볼까합니다. 일전에 포스팅 했었던 vue-owl-carousel 을 Nuxt 프로젝트에 설정하려고 했던것이 사건의 발단이었습니다. Vue 와 동일하게 컴포넌트에 설정하고 Nuxt 로 실행하는 순간 그 단어가 보였습니다. Document is not defined 처음엔 대수롭지 않게 생각했죠. Nuxt 가 Vue 기반이지만 체계가 다른 프레임워크이기 때문에 설정이 다를 것은 당연한 것일 거라 예상했기 때문이죠 Nuxt 홈페이지를 방문해봅니다. 플러그인 페이지로 이동하여 살펴보고 ..

안녕하세요 지난번 포스팅때는 Vuex 에 대한 기본적인 설명과 구성 요소, 사용하는 방법에 대해 살펴보았습니다. 이번 포스팅에서는 mapGetters, mapMutations, mapActions 에 대해서 살펴보도록하겠습니다. 시스템 환경 운영 체제 : macOS Mojave Tool : VSCode NPM, Node.js, Vue.js, Vuex, Vue Router 사용 방법 이름에서 추론해보도록 할까요? 지난번 다뤘던 Getter, Mutation, Action 에 앞에 map 이 추가되어 있고 전부 복수형입니다. 복수의 기능을 다루기 위한 구조인것을 유추할수 있는데요. 정말 맞는지 살펴보도록 하겠습니다. 지난번에 사용했던 예제 코드를 다시 한번 보시죠. # HelloWorld.vue Parent..