vue2 cli로 vue 프로젝트를 진행하던 중, 라우터를 사용하려는데 설치 중에 오류가 났다. 아래와 같은 오류 발생 npm i vue-router npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: saekdong@1.0.0 npm ERR! Found: vue@2.6.14 npm ERR! node_modules/vue npm ERR! vue@"^2.5.11" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer vue@"^3.0.0" from vue-router@..
vue.js
- 기존 파일을 열고 싶을 때 (본인의 새 프로젝트를 만들고 싶다면 아래로) 레포지토리 clone을 해준 뒤 폴더를 비주얼 스토리에서 열어줌. git clone "레포지터리 주소" "폴더명" terminal > new terminal 을 통해 터미널 창을 켠 뒤에 지금의 파일을 지워준다. (아직 vue-cli 실행 이전이라면 생략 가능) rm -rf vue-todo/ 그 뒤에 바로 열어주려고 했지만 다음과 같은 문구가 떴다. "Command vue init requires a global addon to be installed." vue init 해서 프로젝트를 열려면 global 로직이 담긴 무언가를 다운 받아야한다는 뜻 npm i -g @vue/cli-init - 새로운 프로젝트를 만들고 싶을 때 n..
라우터 라우터란 특정 url에 들어갔을 때 어떤 페이지로 갈지에 대한 정보를 포함하는 속성이다. vue 인스턴스의 router 라는 속성을 이용해 연결해준다. new Vue({ el:'#app', //app 이라는 태그 안에 인스턴스 정의 router:router //router 변수를 속성에 연결한다. }) 라우터 링크를 이용하는 방법 라우터를 위한 링크 태그가 존재한다. 내용을 이용해 html 부분에서 연결해주면 된다.이때 router-view에서는 라우터가 제공하는 컴포넌트를 보여주는 역할을 한다. Login Main routes에 라우터 객체를 배열로 정의한다. 해당 페이지의 정보는 path 에 선언하고,페이지에 뿌릴 컴포넌트는 component 에 선언한다. 단, 컴포넌트는 페이지 당 하나만 가..
컴포넌트 통신방법 - 같은 레벨인 경우 바로 같은 레벨로 전달 불가능. 위의 루트 컴포넌트를 거쳐 다시 하위 컴포넌트 (루트 기준)이자 같은 레벨의 컴포넌트 (전달하고자 하는 레벨 기준)야 한다. 아래와 같이 이벤트 발생과 프롭스 전달을 동시에 함으로써 구현해야 한다. app-content 컴포넌트의 'methods'이자 이벤트 발생 대상인 pass를 인스턴스(루트)의 deliverNum이라는 '컴포넌트 데이터'로 전달한다. 실제로는 deliverNum(num)과 같고, data를 처리해주기 위한 methods를 사용한다. num값을 전달받은 인스턴스의 데이터를 app-header 방향으로 props 전달한다. 이때 props속성은 propsdata가 되며, 인스턴스의 num값을 넘겨받는다.
프롭스 상위 컴포넌트에서 하위 컴포넌트로 프롭스의 속성을 전달한다. 하위 컴포넌트에 아래와 같이 propsdata를 연결해준다. var appContent={ template:'{{ propsdata }}', props:['propsdata'] } 프롭스 속성 만드는 법이때 '프롭스 속성 이름'은 위의 propsdata가 되고, '상위 컴포넌트의 데이터 이름'은 상위 중 할당하고 싶은 컴포넌트를 넣어준다. 상위 컴포넌트의 데이터를 수정하면 바로 하위 컴포넌트의 프롭스로 반영됨. [reactivity] 이벤트 하위 컴포넌트에서 상위 컴포넌트로 이벤트를 발생시킨다. 상위 컴포넌트에 아래와 같이 전달할 메소드 함수와 템플릿을 담은 컴포넌트를 만든다. var appHeader={ template:'click m..
+ 기본 구조 DOM View Model Model (js objects) DOM Listeners Data Binding HTML 기본 ! tab : html 자동완성 div#app : 태그 이름까지 바로 생성 document.querySelector()나 innerHTML로 html 태그와 돔을 조절 Reactivity Object.defineProperty : 객체(또는 객체의 속성)의 동작(할당, 접근 등)을 재정의하는 API. get: function() : 속성에 접근했을 때 동작을 정의 set: function() : 속성에 값을 할당했을 때 동작을 정의 Object.defineProperty(대상 객체, 객체의 속성, { 정의할 내용 }) reactivity: 값을 바꿀 때마다 바로 반영이..
