dev_0hoon

https://cli.vuejs.org/ Vue CLI cli.vuejs.org 공식 사이트 이다. npm install -g @vue/cli-init-g는 글로벌을 뜻한다고 함. global은 OS레벨로 설치가 된거기에 현재 폴더가 아닌 전체 컴퓨터 내에서 사용한다는 뜻이다. npm은 노드패키지매니저vue create vue3-app 설치가 되면cd vue3-app으로 이동npm run serve로 실행한다. 여기서 serve의 의미는 패키지 내의 package.json의 "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, serv..

위의 코드는 (상위 컴포넌트) root(하위 같은 레벨 컴포넌트) app-header , app-contents가 있다. 1) app-contents에서 버튼을 클릭하면 app-header의 데이터가 변경되어야 한다.2) app-contens에서 버튼 클릭하면 sendEvent()가 발생하며 emit으로 상위 컴포넌트에 메세지를 보냄3) emit을 v-on:에밋으로 설정하며 상위컴포넌트의 receive()가 발생한다.4) receive에서는 data()를 변경하게 된다. 전에 배웠듯이 reative로 인해 데이터가 변경된다.5) 이 변경된 데이터는 props를 app-header에 v-bind:프롭스명을 통해 전달되며6) app-header에는 props로 정의된 appTitle에 저장된다.7) app-..

하위 컴포넌트의 이벤트를 발생시켜 상위컴포넌트로 이동시키는 것이 emit이다. 하위에서 쪽지를 주며 '뭐좀 실행시켜줘' 하는 것으로 받아들이면 편하다.   이와 같이 아래의 emit을v-on:emit이름="상위의 함수"를 사용하면 하위 컴포넌트에서 상위컴포넌트의 이벤트를실행하도록 할 수 있다.

1) 상위 컴포넌트에서 하위컴포넌트로 데이터를 내려보낼 떄 사용하는 것은 props이다.- 정확히는 컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법이다. 먼저 컴포넌트 안에 template와 같은 레벨에 props를 작성해 준다.- template : 그릴 화면- props: 상위에서 받은 매개변수 정도로 생각해면 될 것 같다.  디렉티브 v-bind를 이용해서 :props 즉 연결할 props의 이름을 적용해주고 그 값을 ="appTitle"로 담아준다. #app 내부의 데이터를 보내주고 있는 것이다. 그리고 확인해보면 1) Vue.createApp() 인스턴스를 생성하며 내부에 components에 props로 값을 보내주며 그 값을 template 내에서 사용할 수 있게 된다.

{{message}} 1. Vue.createApp()은 Vue에서 제공하는 함수이다. vue2와 비교를 해보면,  vue2: new Vue();vue3: Vue.createApp();결국 함수를 통해 객체를 만들고 있다.콘솔로 찍었을 때에도 같은 결과가 나온다.new Vue({ el: , template: , data: , methods: , created: , watch: ,}); Vue.createApp({ template: , data: , methods: , created: , watch: ,});인스턴스의 속성을 보면 결국 같은 객체를 넘겨서 볼 수 있다. 예상하자면function createApp(obj) { return new Vue(obj);}이런느낌이지 않을까? ..

https://vuejs.org/ Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org The ProgressiveJavaScript Framework 란 무엇인가? - 간단한 화면 ui 개발부터 라우팅, SSR 등의 애플리케이션 레벨의 개발을 지원하는 프레임워크 라우팅(routing) : 페이지 간의 이동SSR(Server Side Rendering) : 서버 사이드 렌더링 - 리액트와 더불어 실무에서 가장 많이 사용되고 있는 프런트엔드 개발 라이브러리- 리액트에 비해 진입 장벽이 낮고 쉽게 배울 수 있다.- 개발 생산성이 높고 자바스크립트 지식이 크게 요구되지 않는다.- 프런트엔드, 백엔드 등 점차 직무적으로 전문화 되고 있는 상황에서 처음 개발..