본문 바로가기

전체 글

 (364)
[Udemy Vue 완벽가이드 Section5] 62. 하나의 앱 vs 여러 앱 페이지당 하나의 Vue앱만 설정이 가능할까? -> No! 여러 개의 Vue앱을 사용하는 것도 가능하다. HTML파일 Vue Behind The Scenes How Vue Works Set Text {{ message }} {{ message }} {{ favoriteMeal }} JS파일 const app = Vue.createApp({ data() { return { currentUserInpnt: '', message: 'Vue is great!' } }, } }) app.mount('#app'); const app2 = Vue.createApp({ data() { return { favoriteMeal: 'Pizza', } } }); app2.mount('#app2'); - 여기서 app, app2..
[Udemy Vue 완벽가이드 Section5] 61. Vue 반응성 심층 분석 let message = 'Hello!'; let longMessage = message + ' World!'; console.log(longMessage); // 'Hello! World!' message = 'Hello!!!'; console.log(longMessage);// 'Hello! World!' 전혀 바뀌지 않는다. 변수 message에 새 값을 할당하여도 longMessage값은 바뀌지 않았다. why? 기본적으로 JavaScript는 반응형이 아니기 때문. let longMessage = message + ' World!'; 위 코드에서 'message'라는 변수가 있고, 이후 이 변수에 변경사항이 생긴다고 하더라도 위 연산이 재실행되지는 않는다. 즉, JavaScript가 messag..
[Udemy Vue 완벽가이드 Section5] 60. Vue의 반응성 소개 본질적으로 Vue는 중요한 일을 하나 한다. 바로, data에 정의된 내용을 Vue가 지속적으로 추적한다. 즉, data객체를 반응형 data객체로 바꾼다. data객체의 모든 property를 JavaScript의 기능인 Proxy로 래핑해서 '반응형 data 객체'로 바꾼다. Vue는 이 data객체의 모든 property를 전역 property와 합쳐서 내부에서 관리하는 하나의 객체로 만든다. 이때, 메서드도 해당 객체에 합쳐진다. 이런 작업들이 Vue의 내부에서 이루어진다. 또한 this가 해당 전역 객체를 가리키도록 한다. (여기서 '전역 객체'란, Vue함수로 만든 Vue 인스턴스를 의미.) 그럼, 어떻게 data에 정의된 내용을 Vue가 추적할까? JavaScript에는 내장 기능인 Prox..
should always be multi-word-component 에러 해결 방법 .eslintrc.js 파일에서 rules에 vue/multi-word-component-names값을 off로 줘야한다.
19. 뷰 인스턴스 라이프사이클 Vue.js instance는 라이프사이클을 지나가게된다.(생명주기) 생명주기 : vue 인스턴스가 태어나서 일을겪고 죽을때까지. 1. beforeCreate : 인스턴스가 생성되기 전 -> data에 접근이 불가능하다. 그래서 undefined가 뜬다. 2. Created 인스턴스가 생성이 되었기때문에 data에 접근이 가능해진다. 인스턴스가 생성되었기때문에 this에 접근 가능.(이건 정확하게 무슨말인지 잘 모르겠다.) 보통 서버에 요청을 보내서 응답을 받아온 데이터를 data에 업데이트 해줄때 created에서 많이 한다. mounted에서 하는 경우도 많은데, created에서 서버 요청 많이 보낸다. 3. beforeMount : DOM이 마운트 되기 전. beforeMount(){ alert(..
18. slot 1. slot은 언제 사용? 이렇게 바로 닫는 태그 말고, 이렇게 하고 중간에 코드를 작성하면 slot안으로 들어가게 된다. 을 쓰면 여기에만 원하는 코드를 넣을 수 있다. AboutView.vue This is an about page hello hi fdfdfdfd 부분에 안에 있는 코드들이 삽입됨. KossieCoder.vue 2. 두군데로 나눠서 원하는 코드를 넣을 수 있다. slot마다 다른 내용을 넣고싶다. name을 넣을 수 있다. AboutView.vue This is an about page header11 hello hello KossieCoder.vue header Body footer 3. header111 뒤에 어떠한 글자를 넣고 싶다. 즉, 하위 컴포넌트의 데이터를 상위 컴포넌트..
Kossie Coder 17. 부모 컴포넌트로 데이터 보내기 (Emit) 자식 컴포넌트에서 부모 컴포넌트로 어떻게 데이터를 보낼 수 있는지. HomeView.vue This is Home page Submit {{ name }} //5.name 변경됨 inputField.vue Name
Kossie Coder 16. 자식 컴포넌트에 데이터 보내기 (props) Home에서의 title, About에서의 title을 다르게 하고싶으면? -> props를 사용하면 된다. title 안에 어떤 text를 넣을지 props로 넘겨준다. HomeView.vue This is Home page Home을 클릭했을때 나오는 화면. title이 props로 내려줬던 'home title'이 나온다. AboutView.vue This is an about page About을 클릭했을때 나오는 화면. title이 props로 내려준 'about title'이 나온다. KossieCoder.vue {{ title }} {{ name }} Change Name required:true로 하고 props를 넘겨주지않으면 아래와 같은 경고가 뜬다. 이렇게 숫자로 못보낸다. 저장하면 ..

티스토리툴바