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 모듈 설..

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

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

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 를 이용하는 방법은 글로벌한 공통 상태값을 관리..

Node.js 를 공부했었지만 오래되다보니 Vue 를 공부하고 있다가 익숙한 구조가 눈에 띄었습니다. 'export default' Vue 공부하면서 단순히 Vue.js 라이브러리에서 정의하고 있는 고정된 양식이겠지 라고 생각하고 그냥 넘어가려다 찜찜해서 찾아본 결과 ES6 의 모듈 구조였었습니다. ES6 의 기초를 싸그리 까먹었나봅니다... 이번 포스팅은 Vue 에서 자주 다루고 있었던 컴포넌트 구조와 ES6 의 모듈 구조 관계를 살펴보도록 하겠습니다. // HelloWorld.vue ... vue-cli 을 이용하여 프로젝트 초기 구성하게 되면 폴더에 다음과 같이 기본 Vue 파일이 생성되어 있습니다. templete, script, style 태그들은 Vue.js 의 컴포넌트를 정의하기 위한 기본 ..

안녕하세요. 이번 포스팅은 Vue 의 설치 및 프로젝트 설정에 대해 간략하게 정리하도록 하겠습니다. 시스템 환경 운영 체제 : macOS Mojave Tool : VSCode Vue.js, ES6, Node.js 시작 Vue 를 사용하기 위해서는 다음과 같은 방법이 있습니다. 공식 사이트에서 개발자 버전 혹은 배포 버전 을 다운받아 Script 로 연결하여 사용한다. CDN 에 올라간 Vue 버전을 Script 로 연결하여 사용한다. npm에 올라간 최신 버전의 URL ( https://unpkg.com/vue/ ) 로 연결 NPM 을 이용하여 설치한다. npm install vue vue-cli -g 위 방법중 마지막 3번째 방법을 이용하여 vue 를 설치하고 프로젝트를 생성해보겠습니다. NPM 을 이..