44,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Vue.js 시작하기 - Age of Vue.js
자바스크립트 모듈의 js파일을 import하여 그안의 함수(메소드)를 .vue에서 쓰는 방법
안녕하세요 선생님 강의 잘 듣고 있습니다. 현재 기존 자바스크립트로 개발한 모듈을 vue에 적용해보는 공부를 해보고 있습니다. 이 과정에서,, 기존 jsp를 vue로 전환하는데 어려움을 겪고 있습니다. 막힌 부분은 다음과 같습니다. 1. 기존 js파일을 vue파일에 import하여 해당 js의 함수를 쓸수있는 방법을 알고 싶습니다. 2. 강의에서 처럼 vue파일은 components폴더에 모아두는게 정석?관례? 인가요? 3. 강의를 보니 Vue의 개발하는 방법이 2가지 인거 같습니다. 1)html로 화면단을 구성하는 방법(강의 초반 playground) 2)html파일 거의 없이 vue파일로 화면단을 컴포넌트화 하여 구성하는 방법(강의 후반 VueCLI) 최근 추세는 vue-cli의 구조로 vue파일로 개발하는 추세인가요?? 좋은 강의 감사하고 엔드게임 완주하고 싶습니다 !ㅎㅎㅎ
- 미해결Vue.js 시작하기 - Age of Vue.js
routerview를 여러개 설정하고 싶을 때
페이지를 만들 때 클릭에 따라 내용물을 바꾸고 싶은 영역이 한 개보다 많을 수도 있잖아요? 그럴 때는 router-view 태그를 여러 개 만들어서 해결해야 할 것 같은데 그게 가능한가요? 불가능하다면 어떤 방법으로 위의 문제를 해결해야 하나요?
- 미해결Vue.js 시작하기 - Age of Vue.js
Anonymous Component라고 뜨는 이유
vue개발자 도구에서 조회했을 때 LoginComponent나 MainComponent가 아닌 Anonymous Component라고 뜨는 이유가 무엇인가요?
- 미해결Vue.js 시작하기 - Age of Vue.js
vue create <만들프로젝트명> 실행시 오류
안녕하세요. 선생님 강의 잘보고 있습니다 !! 현재 2022년 5월이구요. 제가 쓰고 있는 버전입니다 ! Node.js 버전 : v12.17.0 NPM 버전 : 6.14.4 Vue CLI 버전 : 5.XX 문제점 : PowerShell,Cmd 둘 다 vue create <프로젝트명> 명령 실행하면 아래와 같은 에러가 발생합니다. 아래 에러의 원인을 찾으려 열심히 구글링 해보았지만 해결하지 못하고 있습니다..,,, 짐작가시는 오류의 원인이 있으실까요?
- 미해결Vue.js 시작하기 - Age of Vue.js
전역 컴포넌트를 변수에 할당했을 때
강의 내용에서는 Vue.component() 하고 바로 컴포넌트를 등록하고 끝이잖아요? 혹시 component1 = Vue.component() 이런 식으로 선언하고 component1을 코드 뒤에서 추가로 활용하는 경우 또한 많이 보이는지? 또는 어떻게 활용가능한지? 궁금합니다.
- 미해결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
모듈화를 위한 여러가지 패턴들에 관한 질문
안녕하세요, 판교님 질문있어서 들어왔습니다. JS가 그 동안 역사적으로 OOP를 구현하기 위해서 여러가지 시도를 많이 한 것 같습니다. 판교님 코드를 보니 다시 한번 이해가 되었는데요, ES5에서 많이 했었던 모듈패턴의 IIFE패턴을 소개해 주셨는데, 이번에 MDN사이트가 개편됐습니다, 확인이 늦어서 그런지 모르겠네요. 아무튼 판교님께서 소개해주신 IIFE 코드가 있었고, 더 아래에 생성자 함수를 통해서 reactivity 를 구현하려는 코드가 더 있더라구요, 그래서 이제 판교님 생각에 둘의 어떤 특별한 차이가 있는지 궁금했습니다, 깊게 생각하지 않지만, 판교님께서는 이러한 부분에 대해서 어떻게 생각하시는지 궁금합니다.
- 미해결Vue.js 시작하기 - Age of Vue.js
이름 규칙
안녕하세요 질문있습니다 componet를 등록하는데 이름을 정하는 규칙이 있나요? 테스트 중 아래 그림의 하이라이트 부분이 표시가 안되어 질문드립니다.
- 미해결Vue.js 시작하기 - Age of Vue.js
Windows 에서 Code 메뉴 찾을 수 없어요
어디서 설정하는지 알려주세요.
- 해결됨Vue.js 시작하기 - Age of Vue.js
코드 순서 질문
new Vue를 통해 인스턴스가 만들어져 root컴포넌트가 생긴다고 알고있는데, 이 root컴포넌트가 생성되기전에 vue.component를 통해 하위 컴포넌트를 등록하셨는데, 이게 순서가 정확히 어떻게 되는건가요?
- 해결됨Vue.js 시작하기 - Age of Vue.js
변수명 질문
propsdata라는 똑같은 이름을 중복으로 사용해도 큰 문제가 없는건가요? 이렇게 짜면 appheader의 propsdata인지 appcontent의 propsdata인지 구분이 힘들꺼같아서요 js가 태그이름에 따라서 알아서 식별해주나요?
- 미해결Vue.js 시작하기 - Age of Vue.js
export default data 질문입니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 영상 내 설명으로는 data: function() 과 같이 새 객채를 반환하는 방식으로 해야한다고 말씀해주셨는데 하지않아도 에러가 없다면 뭐낙 설정이 덜 된걸까요?
- 미해결Vue.js 시작하기 - Age of Vue.js
루트태그 미생성에 대한 코드 질문
안녕하세요~ 이제 막 코딩을 시작한 초보생입니다. 다름이 아니라, 컴포넌트와 인스턴트의 관계 영상 중에 말씀하신 new Vue 코드 추가 생성시 root태그가 아무리 해봐도 생성되지 않아 질문드립니다.ㅠㅠ 제가 보기엔 코드 상으로 문제가 보이질 않는데 캡쳐된 코드 확인 좀 부탁드려도 될까요..? 좋은 영상 감사드립니다.
- 미해결Vue.js 시작하기 - Age of Vue.js
프로젝트 cli 버전 질문
안녕하세요 강사님! 정말 잘듣고 있습니다 ! 22년 4월 기준 디폴트값으로 Vue2, 3 중 아무거나 선택해도 상관없을까요? 21년과 달리 지금은 Vue3가 프리뷰버전이 아닌거 같아서요! 가능하시다면 현재의 버전에서 두가지의 차이점?같은 것도 설명해주시면 감사하겠습니다!
- 미해결Vue.js 시작하기 - Age of Vue.js
컴포넌트 작성순서 질문
안녕하세요! 재미있게 수강 중인 학생입니다 ㅎㅎ. 제가 코드 작성 시에 new Vue() Vue.component() 순서로 작성하니까 오류가 뜨더라구요, vue.js:634 [Vue warn]: Unknown custom element: <app-header> - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in <Root>) 위의 내용은 콘솔창에 뜬 오류내용입니다. 컴포넌트 생성 시의 순서가 궁금합니다!
- 미해결Vue.js 시작하기 - Age of Vue.js
vuex와 route에 대해…
안녕하세요. vuex가 새로고침을 하면 state가 날아가버리기 때문에 action이나 mutation을 컴포넌트의 created훅에 넣어서 쓰고 있습니다. 이렇게 하면 해당 컴포넌트에는 문제 없이 state가 유지되는데, getters를 불러들인 뒤 해당 컴포넌트의 하위 컴포넌트에 props데이터로 넘겨주면, vue개발자 도구로 보기에는 분명히 값이 존재하는데 하위 컴포넌트에서는 값이 존재하지 않게 됩니다. console.log를 작동시켜 보면 빈 값이 나오네요. 하위 컴포넌트가 라우팅에 따라서 다르게 보여져야 할 부분이라 <router-view :gettersData="gettersData"/> 이런 식으로 넣었는데 혹시 router-view 태그는 props를 받지 못하는 건지 궁금합니다. 만약 문제 없이 받을 수 있다면, 혹시 router-view가 중첩되서 발생하는 문제가 아닐까 싶네요. 지금 컴포넌트 구조가... //parent comp<router-view/> //child comp <div></div> //repetitive comp<router-view :gettersData="gettersData"/> 이런 모양새라서 혹시 router-view 태그가 중첩 되면 안되는 건가 싶기도 하고 그렇네요. 질문을 요약해보자면, 1. Getters를 하위 컴포넌트의 props로 넘겨도 되는지? 2. Router-view 태그로도 props를 보낼 수 있는지? 3. router-view 태그를 부모와 자식 태그에서 중첩해서 사용해도 되는지? 정도가 될 것 같습니다. 감사합니다!
- 미해결Vue.js 시작하기 - Age of Vue.js
vue 개발자도구에서 event탭이 나오지 않습니다
안녕하세요 강사님 따라하는와중에 개발자도구에서 event탭을 전혀 못찾겠습니다..ㅜㅜ 어찌저찌 찾아서 확인은 했는데 강사님과 같은 내용이 나오지 않아 더 당황스럽네요.. 이게 맞는건가요?
- 미해결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>
- 미해결Vue.js 시작하기 - Age of Vue.js
function props vs emit
안녕하세요! 뷰에서도 props로 function을 전달해서 사용할 수 있는것으로 확인했는데 안티패턴이라고 하더라고요...혹시 두 방식의 장단점을 알 수 있을까요? ( react만 하다 보니 function props 방식이 어째서 안티패턴인지 잘 이해가 되지 않습니다. )
- 미해결Vue.js 시작하기 - Age of Vue.js
반응형 웹앱을 제작하고 있는데
작업을 하다보니까 css 미디어 쿼리를 쓸 때도 있고 vuex 에서 window width를 저장해놓고 사이즈가 감지되면 v-if-else로 필요한 컴포넌트를 불러오는 방식을 동시에 쓰고 있습니다. 레이아웃이 크게 변하지 않는 부분은 미디어 쿼리로 해결하고너무 크게 변하는 부분은 v-if-else로 렌더링하고 있는데요 서서히 프로젝트가 커짐에 따라서 이게 나중에 유지보수가 가능할지 두렵네요 처음부터 PC/Mobile를 나눠서 따로 만들었어야 했나 싶다가도막상 또 그렇게 나누자니 레이아웃이 크게 안 바뀌는 부분도 제법 많아서 혼란에 빠졌습니다. 이와 관련해서 조언을 얻을 수 있을지 궁금합니다.