묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
Form.js 컴포넌트 분리 과정에서 왜 같은 함수인 handleChange는 App.js에서 잘라내어 Form.js에 붙여넣어줬는데 handleSubmit는 그러지 않고 props로 넘겨주나요?
Form.js 컴포넌트 분리 과정에서 왜 같은 함수인 handleChange는 App.js에서 잘라내어 Form.js에 붙여 넣어줬는데 handleSubmit는 그러지 않고 props로 넘겨주나요?
-
미해결Vue.js 시작하기 - Age of Vue.js
문자열 리터럴로 템플릿을 등록하는 방식에 대한 의문점
안녕하세요, 강의 듣는 중 질문이 있어 글 남깁니다. 실습때 본 아래 코드처럼, component 의 template 를 등록하는데에 있어서 문자열 리터럴을 사용하는 듯 합니다. 제 생각엔, html 엘리먼트를 문자열 리터럴로 등록하게 되면 (태그 속성등도 마찬가지로) 디버깅이나 유지 보수 측면에서 불리하지 않을까 생각이 듭니다. 다른 방법이 있는건가요? 아니면 뷰를 사용하면 이 방식으로 항상 템플릿을 등록해야 하나요? 감사합니다 var appHeader = { template: '<button v-on:click="passEvent">click me</button>', methods: { passEvent: function() { this.$emit('pass'); } } } new Vue({ el: '#app', components: { 'app-header': appHeader } })
-
미해결Vue.js 시작하기 - Age of Vue.js
Vue 컴포넌트 사용법
Component 사용법에 대해 질문 드립니다. 현재 아래와 같이 코드를 작성하였습니다. 이 때 header, content, footer의 순서로 객체를 생성하였고, header는 app-header로 전역 등록 content는 app-content라는 전역 등록 local_header는 local-header라는 이름으로 지역 등록 footer는 app-footer라는 이름으로 지역등록 하였으며, 이 때 footer 객체에는 components 프로퍼티를 주어서, local-header라는 이름의 컴포넌트를 사용하고자 하였습니다. 이 때 드는 의문점 1. 전역 컴포넌트는 어떤 컴포넌트에서도 접근가능하다고 하였는데, 아래의 코드를 보면 전역 등록한 app-content 컴포넌트 하위로 app-header 컴포넌트를 사용하고 있습니다. 하지만 렌더링 결과에는 app-content안에 app-header가 뜨지 않습니다. 개인적으로 template 속성이 의미가 있는거 같은데, 어떤 의미가 있을까요... 2. 지역 컴포넌트는 하위 컴포넌트에서는 상위를 접근하지 못하고, 상위는 하위를 사용할 수 있다고 들었습니다. 하지만 전역과 마찬가지로 지역 등록한 app-footer에서 local-header를 사용하려고 태그를 하위로 넣으면 local-header의 렌덩링이 안됩니다. 결국 궁극적으로 컴포넌트를 어떻게 재사용할 수 있는건지 궁금합니다. 재사용하려면 컴포넌트 안에 컴포넌트를 밀어 넣을 수도 있어야할텐데, 어떻게 하는지 모르겠네요.... <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <app-header></app-header> <app-content> <app-header></app-header> </app-content> <app-footer> <local-header></local-header> </app-footer> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> //전역 등록 var header = { template: '<h1>Header</h1>' } //지역 등록 var local_header = { template: '<h1>Local Header</h1>' } //지역 등록 var footer = { template: '<footer>footer</footer>', components: { 'local-header' : local_header } } //전역 등록 var content = { template : '<div>content</div>' } Vue.component('app-header',header); Vue.component('app-content',content); new Vue({ el: '#app', components: { 'app-footer' : footer, 'local-header': local_header } }); </script> </body> </html>
-
미해결Svelte 입문 강의 - A부터 Z까지
컴포넌트 이벤트
강의내용에 보면 Parent.svelte 파일에서 dispatch('message', event.text) 라고 되어있는데 event 객체에서 detail에 {text: hello}가 담겨있으니 dispatch('message', event.detail)로 App.svelte에 넘겨주는게 맞는것 아닌가요? 이 부분이 헷갈리네요
-
미해결Vue.js 시작하기 - Age of Vue.js
컴포넌트 등록 후 개발자모드 vue 에서...
강의 영상에서 컴포넌트 등록 후 "개발자모드 > vue" 에 <Root>를 보면,영상에서는 <Root><app-header> 라고 보이는데,제 브라우저에서는 <Root><AppHeader>로 보입니다.script에서는 app-header로 기재했는데 이유를 못찾겠어요 노드 버전 문제인가,,
