44,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Vue.js 시작하기 - Age of Vue.js
emit의 목적
완강 후 개념들을 확실히 숙지하려고 코드, 문법, 메소드등을 직접 기록하면서다시 강의를 보는 중입니다. <body> <div id="app"> <p>{{num}}</p> <!-- <app-header v-on: 하위 컴포넌트에서 발생한 이벤트 이름="상위컴포넌트의 메서드 이름" ></app-header> --> <app-header v-on:pass="logText"></app-header> <app-content v-on:increase="increaseNumber"></app-content> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var appHeader = { template: '<button v-on:click="passEvent">click me</button>', methods: { passEvent: function() { this.$emit('pass'); } } }; var appContent = { template: '<button v-on:click="addNumber">add</button>', methods: { addNumber: function() { this.$emit('increase'); } } } var vm = new Vue({ el: '#app', components: { 'app-header': appHeader, 'app-content': appContent }, methods: { logText: function() { console.log('hi'); }, increaseNumber: function() { this.num = this.num + 1; } }, data: { num:10 } }); </script> </body> 위 코드에서 기능적인 메소드들은 상위컴포넌트 vm에 logText와 increaseNumber로 정의 되있으니 하위컴포넌트인appHeader와 appContent가 없어도 문법만 맞추면 해당 기능들을 구현하는데는 문제가 없을거라고 느껴집니다.그렇게 생각이 드니 여기서 emit의 기능은 이벤트의 이름을 정의해주는 것 같은데emit을 활용하는 방법을 더 알고싶습니다,이벤트의 이름을 정의하는 기능만 있다고 생각하면 뭔가 허전해서요실제로 혹시 프로젝트에서 emit은 어떤 용도로 사용될까요?
- 미해결Vue.js 시작하기 - Age of Vue.js
프로젝트를 해보고 싶습니다
기초 강의 완강했는데 배운 기능들을 되도록 많이 활용해서 프로젝트를하며 배운 걸 제 것으로 만들어보고 싶습니다.근데 프로젝트를 하는게 아직은 막막해서 뭘 해야할지 모르겠는데 혹시 추천해주실 프로젝트 없을까요?
- 미해결Vue.js 시작하기 - Age of Vue.js
Prettier 따옴표 자동수정 바꾸고 싶은 분들
질문은 아니지만 수업을 따라가면서 플러그인 설정같은건 안알려주셔서 다른분들도 보라고 남깁니다. 홑따옴표가 쌍따옴표로 자동 저장되는건Prettier 옵션에서 single quote 를 사용하지 않는게 디폴트더라구요.위에거 외에 자동개행 글자수등등 취향에 맞게 수정하면 될거같아요.
- 미해결Vue.js 시작하기 - Age of Vue.js
안녕하세요 Cannot GET /login 오류가 뜹니다!
router-link에서 login 들어가서새로고침하면 Cannot GET /login이런 오류가 뜨는데 어떻게 해결해야 할가요?
- 미해결Vue.js 시작하기 - Age of Vue.js
이벤트명명규칙
실무에서는 보통 이벤트 명을 클릭이벤트명 -> 전달할 이벤트명 -> 받은 이벤트명 어떻게 명명규칙을 갖나요?
- 미해결Vue.js 시작하기 - Age of Vue.js
vue method 작성할때
method작성시 passNum: function() {} 대신에passNum(){} 이런식으로 사용해도 무방한거죠??
- 미해결Vue.js 시작하기 - Age of Vue.js
CLI 강의 흐름?에 대한 질문입니다.
이전 강의랑 뭔가 내용이 자연스럽게 이어지지 않는 것 같아요..이전 강의가 터미널 열어서 cli 설치하고, 에러 잡는데서 끝났거든요,..근데 이번 강의에서 프로젝트 템플릿 유형을 적는데 갑자기 vue init 은 왜 하는 걸까용 ㅠㅠ?그리고 우리 프로젝트가 클론해온 걸로 있는데 왜 템플릿 유형을 적어야 하는지도 궁금합니다.잘 따라오다가 여기서 헤매고 있어요 ㅠㅠ
- 미해결Vue.js 시작하기 - Age of Vue.js
App.vue 에서 live server가 작동 안됩니다.
live server가vue-cli 에서는 잘 나오다가 App.vue 수업들어면서 실행하려니 실행이 안되고, 마우스 오른쪽 버튼 눌러도 라이브서버 클릭하는게 없습니다근데 html파일에서는 오른쪽 버튼눌러도 나오고, 연결도 잘됩니다 .. 이럴땐 어떻게 해야하나요?
- 미해결Vue.js 시작하기 - Age of Vue.js
axios 에러 질문 드립니다.
실습하면서 코드 작성 중에 axios.get() 이 부분에서 에러가 발생해서 샘플 코드로 실행해봐도.적상적으로 작동하지 않으면서[Vue warn]: Error in v-on handler: "TypeError: axios.get is not a function"에러가 발생해서 구글링 해봤는데.. 못 찾아서 질문드려요.
- 미해결Vue.js 시작하기 - Age of Vue.js
Vue3에서 바뀐 것들에 대한 강의 진행 의향이 있으신가요?
Vuetur이 Volar로,VueX가 Pinia로,vue-type-check가 vue-tsc(vloar)로변경되는 등, vue2에서 vue3으로 넘어오면서 많은 것들이 바뀌었는데혹시 해당 내용들에 대해 추가로 강의하실 의향이 있으신지 궁금합니다.
- 미해결Vue.js 시작하기 - Age of Vue.js
methods 에 함수를 정의하고 watch 에서 호출하는 이유가 있을까요?
안녕하세요. 좋은 강의를 듣게 해주셔서 감사합니다. 강의를 듣다가 궁금한 것이 생겨서 여쭤보려고 합니다.methods 에 정의한 함수를 watch 에서 호출해서 사용하시는 이유가 재사용성을 위해서 일까요? 아니면 다른 이유가 있을까요? 있다면 어떤 것을 검색하면 더 공부할 수 있는지 알려주시면 감사하겠습니다.
- 해결됨Vue.js 시작하기 - Age of Vue.js
문법 관련 질문(get, set)
아래 코드에서 get과 set은 자바스크립트에서 지원하는 예약어 인건가요?https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/get참고를 해보니 문법 형태가 달라서 질문 드립니다.// 즉시실행함수 js 문법 -> 노출x (function () { function init() { Object.defineProperty(viewModel, "str", { // 속성에 접근 했을 때의 동작을 정의 get: function () { console.log("접근"); }, // 속성에 값을 할당했을 때의 동작을 정의 set: function (newValue) { console.log("할당", newValue); //div.innerHTML = newValue; render(newValue); }, }); } function render(value) { div.innerHTML = value; } init(); // 호출 })();
- 미해결Vue.js 시작하기 - Age of Vue.js
Volar vs Vetur
강사님은 Vetur을 설치하셨는데, vue3.0지원 등의 이유로 최근에는 Vetur보다 Volar가 권장된다고 소문을 들어, 강사님은 어떻게 생각하시는지 궁금합니다!
- 미해결Vue.js 시작하기 - Age of Vue.js
오류 생겼습니다!
저 동영상대로 설치해봤는데 오류가 생겼습니다. 어떻게 해결하나요?
- 미해결Vue.js 시작하기 - Age of Vue.js
1분 36초 "[ ? ] 방향 통신의 문제점"
안녕하세요. 좋은 영상 공유해주셔서 감사드립니다.잘 짜여진 강의를 빠르고 즐겁게 따라가고 있습니다.'컴포넌트 통신 규칙이 필요한 이유'를 듣다가 1분 36초쯤에 잘 들리지 않는 부분이 있어 어떤 말씀을 주셨는지 여쭙습니다.특정 상태, 데이터가 바뀌었을 때 그로 인한 버그를 추적하기가 어려운게 어떤, " [ ??? ] 방향 통신의 문제점입니다." 이전에 mvc패턴에서 이런 문제점이 많이 있었구요.m방향, n방향 검색해보았는데 제가 원하는 답이 나오지 않더라구요. 혹시 이 글을 발견하시고 어떤 방향이었는지 기억이 나신다면 답변 부탁드립니다. 지금은 그냥 n개의 어떤 방향으로 데이터가 이동할 수 있다는 의미의 'n방향'으로 이해하려 합니다.감사합니다.
- 미해결Vue.js 시작하기 - Age of Vue.js
기존 backend(express) 설계에 vue-cli(혹은 nuxt)를 붙이는 경우에는 디렉토리를 어떤식으로 설계하는지 궁금합니다.
안녕하세요? 퀄리티 높은 강의 덕분에 많은 도움을 받고 있습니다. 정말 감사합니다 강사님!제가 궁금한 점은, 저는 기존에 백엔드만 학습했었습니다. 그래서 제가 작성했던 코드들도 백엔드만 고려하여 디렉토리를 설계했었습니다. 예시로 제가 이전에 진행했던 API 로직 관련 프로젝트의 디렉토리 구조는 다음과 같습니다.. ├── config │ ├── config.ts ├── controllers │ ├── post.ctrl.ts │ └── user.ctrl.ts ├── models │ ├── index.ts │ ├── sequelize.ts │ ├── hashtag.ts │ ├── like.ts │ ├── post.ts │ ├── user.ts │ └── refreshToken.ts ├── node_modules ├── routes │ ├── index.ts │ ├── post.router.ts │ └── user.router.ts ├── types │ └── express.d.ts ├── utils │ ├── generateToken.ts │ └── authenticateToken.ts ├── index.ts ├── tsconfig.json ├── package-lock.json └── package.json이 프로젝트는 SNS와 관련된 api 로직들을 작성하는 것이었습니다. 강사님 강의를 보면서 이 프로젝트에 vue(nuxt)를 이용하여 프론트엔드단의 코드도 작성하려고 하는데, 이럴 경우 디렉토리를 어떻게 설계하면 되는지 궁금해서 질문드렸습니다.추가로, vue나 nuxt + express 같은 경우 먼저 vue-cli나 nuxt init을 통해 생성되는 짜여진 디렉토리 위에서 backend를 나중에 추가하는 방식이 일반적인 것 같은데, 이런 식으로 구성되는 이유도 궁금합니다.
- 미해결Vue.js 시작하기 - Age of Vue.js
vue-cli 설치 오류
안녕하세요 말씀 하신대로 진행하다가 vue-cli설치에서 막혀 질문드립니다.무엇때문에 오류가 나는건지 모르겠습니다 ㅠ
- 미해결Vue.js 시작하기 - Age of Vue.js
var말고 기본적으로 let을 사용하는 것으로 알고있는데요
var말고 기본적으로 let을 사용하는 것으로 알고있는데요3 4년전 강의라 ES6문법으로 안하는건가요??그렇다면 이 강의를 들어도 괜찮은건지 궁금합니다.
- 미해결Vue.js 시작하기 - Age of Vue.js
에러질문드립니다
두 번째 사진 맨 아래 부분에 npm, node 버전이 있습니다.
- 미해결Vue.js 시작하기 - Age of Vue.js
뷰 개발자 도구 소개 및 실행 방법 영상에서
F12를 눌러 개발자 도구를 열었으나 Vue가 안 보입니다