수강이 제한됩니다.
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
computed 대신 직접 this.$store.state.user 사용은 안되나요?
코드를 보면 computed: 를 통해서 user가 갱신되는걸 항상 지켜본다고 하셨는데 이렇게 단순 user 정보만 확인하고, user 정보를 바탕으로 별도의 작업이 없다고하면 this.$store.state.user를 바로 사용해도 되지않나요?
- 미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
lazy-load의 성능에 대해서 질문이 있습니다.
강의 내용을 요약해보면 component를 import 하는 방법에 1. 첫 화면로딩때 모든 컴포넌트에 대해 캐시 로딩, 2. prefetch disable-> 해당 컴포넌트를 부를때 캐시에 로딩 3. 첫 로딩때 한번에 다운? 이렇게 된다고 이해했습니다. app.js에 모든 컴포넌트가 포함되서 받아오는것(3번)과, prefetch enable해서 app.js + 각가 컴포넌트 javascript를 받아올때(1번)와의 차이를 잘모르겠습니다. prefetch의 장점이 캐시에 로드해서 해당 컴포넌트를 호출하면 캐시에서 가져와서 빠르게 로딩할수있다는 것으로 이해했습니다 하지만 3번으로 가져온 app.js도 모든 컴포넌트에 대해 로딩이 끝났기때문에 1번 경우와 동일하게 빠르게 로딩될수있는거 아닌가요? (3번의 경우에는 각 컴포넌트를 호출할때마다 캐시에 로딩하기 때문에 느린건가요?) 질문을 정리하면 아래와 같습니다 1. 브라우저는 스크립트를 받아서 컴포넌트를 실행할때마다 해당 컴포넌트를 캐시에 올려서 사용하나요? 2. 위의 가정이 맞다면 1번과 3번의 차이는 각 컴포넌트를 호출할때 마다 캐시에 올려서 시간이 오래걸림 vs 모든 컴포넌트를 캐시에 올려서 시간이 오래 걸림 일까요?
- 미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
Prefetch 관련 질문 드립니다.
안녕하세요, 강의를 수강하다 Prefetch 관련 질문이 있어 글 남깁니다. 해당 강의를 시청하며 학습도중 vue.config.js에서 Prefetch 관련 설정을 비활성화하지 않았는데도 초기에 about.js가 목록에 나타나지 않고 실행시켰을 때만 나타납니다. vue.config.js에서 Prefetch 관련 설정을 비활성화를 했을 때도 동일합니다. 혹시 하는 마음으로 vue.config.js에서 Prefetch 관련 설정을 delete하지 않은 상태에서 index.js의 about부분을 component: () => import(/* webpackChunkName: "about" webpackPrefetch: true */ '../views/AboutView.vue') 와 같이 작성하니 그제서야 강의와 동일하게 초기에 about.js가 목록에 나타납니다. 혹시 현시점에서는 Prefetch 의 default 값이 변경된걸까요 ? vue 프로젝트를 생성하는 부분에서도 일부 파일명이라던가 vue.config.js의 파일 유무 등의 부분이 차이가 있던데 혹시 Prefetch 의 default 값이 변경되어 그런것이 맞는지 문의드립니다 !
- 해결됨Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
저는 왜 하나의 단어가 지정이 안될까요?
저는 이상하게도 basic이라는 이름을 지정하면 Component name "Basic" should always be multi-word. 이라는 오류가 나오는데 뭐가 잘못된 걸까요..?
- 미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
V디렉티브 문법 오류 질문드립니다.
안녕하세요. vue강의를 듣고 현재 프로젝트에서 프론테엔드 개발중인 수강생입니다! 프로젝트 진행중 한가지 오류를 만나 여기저기 알아보다가, 명확한 원인에대한 답이 나오지 않아서 질문 드려봅니다. 문제의 화면진입시 Uncaught (in promise) DOMException : Failed to execute ' setAttribute' on 'Element' : '&&' is not a valid attribute name 오류가 발생하는데요. 디버깅 해보니 <div v-if='acount.value==1' && item.length > 0'> 요 element에서 '를 하나 더사용해서 오류가 나는것 같더라구요. 궁금한점은, 로컬호스트에서 동작할때는 오류가 전혀 나지 않는데, 실제 테스트/운영 환경에 배포시에 저런 오류가 나옵니다. 예전에도 HTML5,JavaScript 사용시에 비슷한 오류가 난적이 있었는데, 그때도 일단 오류나는 문법만 수정해줬었거든요. 지금 vue로 개발하면서 다시 겪게되었는데, 조치방법은 알았지만 왜 로컬호스트에서는 오류가 나지 않는지는 확인하지 못했습니다. 혹시 이런 현상이 발생하는 원인에 대해서 답변 주실수 있을까요?? 감사합니다.
- 미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
외부패키지(sweetalert2) 관련하여 질문드립니다
안녕하세요 선생님! 외부패키지 연결 관련하여 문의드립니다 말씀해주신 방법으로 외부패키지를 설치하고 연결하였는데요 터미널에 이런 오류가 뜨더라구요ㅠㅠㅠ 왜 이런 현상이 일어나는지 궁금합니다~
- 미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'msg')
computed: { syncMsg() { return this.$refs.childComponent.msg; } }, 위 코드 부분에 에러가 납니다. child component 및 msg 데이타도 선언되어 있구요. 어떤 문제일까요?
- 미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
Vue js Postman 오류
안녕하세요. 서버 연동이 안 되어서 다음 강의 진행이 안 되고 있는 상황이니 도움 부탁드립니다. 자세한 사진 첨부합니다. 다른 분들도 비슷한 문제가 발생하는 걸로 보아서 올려주신 해결 방안 참고하였는데 해결이 안 된 상태입니다.
- 미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
서버에서 데이타는 가져오는데 바인딩이 안 됩니다.
서버에서 데이타를 조회가 되는데, 바인딩된 테이블의 리스트가 변경이 안 되네요 왜 그럴까요? <template> <div> <div> <select v-model="city"> <option v-for="(city, i) in cities" :value="city.code" :key="i">{{city.name}}</option> </select> <input type="text" v-model="userName" @keyup.enter="searchUserList"> <button @click="searchUserList">조회</button> </div> <div> <table> <thead> <th>이름</th> <th>나이</th> <th>직업</th> </thead> <tbody> <tr v-for="(user, i) in userList" :key="i"> <td>{{user.name}}</td> <td>{{user.age}}</td> <td>{{user.job}}</td> </tr> </tbody> </table> </div> </div> </template> <script> import axios from 'axios'; export default { name: '', components: {}, data() { return { cities: [{code:'02',name:'서울'},{code:'051',name:'부산'},{code:'064',name:'제주'}], city: '02', userName: '', userList: [] } }, setup() {}, created() {}, mounted() {}, unmounted() {}, methods: { async searchUserList() { const params = { selectedCity: this.selectedCity, userName: this.userName } console.log(params); this.userList = await this.api('https://ca2cf65a-ebd5-4efc-a0c4-55baeaf6d52c.mock.pstmn.io/userList','get', params); // this.userList = [ // {name:'유재석2', age: 50, job:'연예인'}, // {name:'하하2', age: 45, job:'연예인'}, // {name:'김종국2', age: 48, job:'연예인,가수'} // ]; console.log(this.userList); }, async api(url, method, data) { return ( await axios({ method: method, url: url, data: data }).catch(e => { console.log(e); }) ).data; } } } </script> <style scoped> </style>
- 미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
안녕하세요
안녕하세요! 강의 듣던 중 궁금한 점이 생겨 질문 남깁니다. .vue 파일을 views 폴더 하위에 생성하는 경우와 components 폴더 아래에 생성하는 경우, import할 때 경로를 다르게 작성하는 것 외에는 아무런 차이가 없나요? 감사합니다.
- 미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
안녕하세요.
안녕하세요. 데이터를 동기화 할때 부모 컴포넌트에서 computed에 있는 메서드 명을 html 템플릿에 값으로 넣으니 에러가 나서 질문 드립니다. 제 생각에는 html 태그에 자식으로 부터 computed를 통해 가져오는 msg값이 초기 랜더링때 없어서 문제가 발생 하는거 같습니다.. 해당 msg를 보여주는 html템플릿을 주석 처리하면 정상적으로 랜더링 하고 해당 부분을 다시 주석을 해제하면 핫리로드를 통해 정상 작동하더라고요. return this.$refs?.child_component?.msg || ''; 나 템플릿에 {{ msg || ''}}를 해도 해결이 안되는데 이때는 어떻게 해야할까요? 제가 원하는건 자식에 있는 값을 바꾸면 부모도 감지하고 바로 바뀌는 것을 원합니다. <template lang=""> <div> <h1>Parents Component</h1> <button @click="onParentsClick">상위 엘리먼트</button> <ChildComponent ref="child_component" @send-msg="sendMsg"/> <p>{{msg || ''}}</p> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, computed: { msg() { return this.$refs?.child_component?.msg || ''; } }, methods: { onParentsClick() { console.log(this.msg); this.$refs.child_component.$refs.child_btn.click(); this.$refs.child_component.childMethod(); this.$refs.child_component.msg = 'parents msg'; console.log(this.$refs.child_component); }, sendMsg(text) { console.log(text) } } } </script> <style lang=""> </style> <template> <div> <h2>Child Component</h2> <button @click="onChildClick" ref="child_btn">하위 엘리먼트</button> <p>{{msg}}</p> <button @click="sendChild">자식 컴포넌트</button> <button @click="changeData">부모 정보 동기화</button> </div> </template> <script> export default { name: '', data() { return { msg: 'children msg' } }, methods: { onChildClick() { console.log('this is child component'); this.msg = 'children msg' }, childMethod() { console.log('this is child method') }, sendChild() { this.$emit('send-msg', this.msg) }, changeData() { this.msg = 'from children to parents'; } }, } </script> <style> </style> 감사합니다.
- 미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
안녕하세요.
안녕하세요. 루트 디렉토리에 vue.config.js 파일을 만든 후 , module.exports = { chainWebpack: config => { config.plugins.delete('prefetch'); }, } 를 넣어주고 가상 서버를 껏다 켰는데 개발자 도구 network탭에 여전히 about과 contact가 패치 됩니다. 혹시 설정 방법이 바뀐게 있을까요?
- 미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
코드는 따로 안올려주시나요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 강의를 따라하려고 해도 강의가 휙 휙 지나가니 멈추면서 따라 쓰기가 불편합니니다. img 태그 안에 링크로 나오는 부분도 어디서 가져오신건지 모르겠네요.. 카카오 페이지에서 가져오신건가요? 설명이 너무 불친절한 느낌입니다 ㅜㅜ
- 미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
sudo로 VUE cli를 설치를 안한 경우
sudo를 앞에 입력하지 않고 그냥 설치를 했는데 다시 설치를 하거나 수정하려면 어떻게 해야할까요?
- 미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
vue와 springboot login구현 관련 질문있습니다!
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. 현재 springboot와 vue를 이용하여 프로젝트를 진행중입니다. springsecurity를 사용하여 로그인을 구현하려고 하는데 vue를 사용하게 되면 spring security의 form login 대신 jwt token 기반으로만 가능한건지 궁금하여 질문 남깁니다. 감사합니다.
- 미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
Vue js Postman 오류 질문드려요
다음주이나 다다음주에 vue.js 프로젝트를 구현하게 되는데 이 강의 공부하는 중에 아래 코드가 회사 노트북에서는 되는데 집 노트북에서는 안 되네요..
- 미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
Proxy error: Could not proxy request /api/productList from localhost:8080 to http://127.0.0.1:3000. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).
몇일째 이걸로 잡혀있어요 ㅠㅜㅠ 외부 호스트에서 접근 해서 그렇다는데 ㅠㅜㅠㅜ Proxy error: Could not proxy request /api/productList from localhost:8080 to http://127.0.0.1:3000. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED). 개발자 모드에서는 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'data') at _callee$ (mixins.js?9c9e:8) at tryCatch (runtime.js?96cf:63) at Generator.invoke [as _invoke] (runtime.js?96cf:294) at Generator.eval [as next] (runtime.js?96cf:119) at asyncGeneratorStep (asyncToGenerator.js?1da1:3) at _next (asyncToGenerator.js?1da1:25) 이라고 뜨는데 아마 서버에서 값을 못가져 오는 거 같은데 ㅠㅜㅠㅜ 선생님 너무 답답해여 ㅠ
- 미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
미니 프로젝트 하고 있는 데 ..에러가 ㅠㅜ
[vue/no-parsing-error] Parsing error: x-invalid-end-tag. [vue/no-multiple-template-root] The template root requires exactly one element. [vue/no-parsing-error] Parsing error: x-invalid-end-tag. ㅠㅜ 인터넷에서 찾아서 vue.config.js module.exports = { lintOnSave: false } 해보고 .eslintrc.json // module.exports = { // "extends": "standard", // "rules": {"vue/no-parsing-error": [2, { "x-invalid-end-tag": false }], // "semi": ["error", "always"], // "quotes": ["error", "double"], // "presets": [ "es2015", "react" ], // "extends": ["airbnb-base", "prettier"] // } // }; 이거 저거 해봤는데 같습니다 , 선생님 도와주세요. eslint은 너무 어렵습니다, ㅠㅜㅜㅠ 사이트 봐도 어려워요 ㅠㅜㅠㅜ
- 미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
질문있습니다.
먼저 좋은 강의 만들어주셔서 감사하다는 말씀드립니다. 해당 강의 들으면서 커스텀 디렉티브를 사용하지 않고 포커스를 주려면 어떻게 해야하지? 라는 의문점이 들어서 해봤는데 options api를 사용할때 input 에 ref 속성을 추가해서 methosds 에 this.$refs.이름.focus() 이런식으로 접근하잖아요? 근데 compotions Api 를 사용할 경우에는 어떤식으로 해야하는지 궁금합니다. onMounted를 선언하고 그 안에 this.$refs 를 해도 this 자체를 참조하지 못하더라구요. 물론 vue를 사용하는 이상 직접적으로 돔을 참조해야하는 경우는 별로 없겠지만 다방면으로 공부하고 싶어서요 이런 경우에는 options api 의 방식으로만 가능한건지 다른 방법이 있는지 궁금합니다. (요점 : setup 함수에서 커스텀 디렉티브를 사용하지 않고 input 과 같은 돔에 직접 참조하여 focus 같은 이벤트를 주는 방법?)
- 미해결Vue.js 제대로 배워볼래?(Vue.js 프로젝트 투입 일주일 전)
페이지를 진입 할때 데이터를 불러 오고 싶습니다.
import ApiMixin from '../api.js'; export default { mixins:[ApiMixin], data(){ return { studyLists:[] }; }, mounted(){ getStudyList(); }, methods:{ async getStudyList(){ this.studyLists = await this.$callAPI( "/api/study", "get", {} ); console.log(this.studyLists); }, }, } 위와 같이 코드를 작성했는데 getStudyList is not define이라고 나오면서 오류가 발생하고 있습니다. 라이프사이클을 보면 생성 직전에 메소드를 작동하도록 해놓을 생각이였는데 보통 mounted를 먼서 실행하고 메소드를 불러 오나요? 또한 위에 사항에 대한 해결책은 어떤것들이 있을까요?