안녕하세요 캡틴님! 항상 잘듣고 있고 어느덧 엔드게임까지 왔네요! 강의를 듣고 다른프로젝트를 위해서 개발환경을 맞추는중 package.json에서 궁금한게 생겼는데 @vue경로가 잡힌 라이브러리와 일반 라이브러리가 있더군요. 혹시 이 두가지의 차이점이 어떻게 되는지 궁금하고 중복되어도 상관없는지 궁금합니다 :)

vue cli 프로젝트 생성 시 vue3로 진행시 서비스 적용에 무리가 있다고 글에 작성되어 있는데 어떤 부분이 사용 서비스에 무리가 있는지 알려주실수 있을지 문의드립니다. 

전 강좌까지 따라서 진행했습니다.   영상시간 : 1:35 처럼 blog list에 게시글이 나와야 하는데 나오지 않습니다. ㅠㅠ 무슨 문제인지 모르겠습니다.... 아래 사진과 같이 x박 및 클릭해도 사이트 이동이 되지 않습니다.     해결방법 알려주실 수 있나요?   - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

개발 공부 팁 같은 것 있나요?

안녕하세요 기초 강의 완강하고 실제 프로젝트에 투입하려고 하는데 공통 css 파일은 컴포넌트 단위로 관리하는 vue에서 권장하지 않는 방식일까요? 유지보수 측면에서 각 컴포넌트에서도 재사용성이 높은 스타일은 하나의 파일에서 한번에 관리하고 싶은데 기초강의에서나 기존 다른 프로젝트 파일을 열어보아도 그렇게 관리가 되어 있지 않은 거 같아 문의드립니다.  혹시 공통 css 파일로 관리하는 방법이 따로 있거나 다른 강의에서 다루고 있을까요? 답변 부탁드립니다.

안녕하세요. 본강의와 상관없는 글을 올리게 되서 죄송합니다,아직 실무편은 목차만보고중급까지 Vue를 수강하고있는 초보 개발자 입니다.   현재 Vue로 앱웹을 만들고 있는데, 뒤로가기 버튼을 제어하는데 애를 먹고 있어도움을 얻고자 문의글 적습니다ㅠㅠ   현 페이지에서 Url변경없이 FullPopup창을 띄우는 과정에서 뒤로가기 버튼 클릭시 ㅠㅠ modal이 닫히는 형태를 구현하려고 하는데 어떻게 하는게 좋을까요   <div v-if="isOpenModal"> <component :is="modalGbn" v-bind:selectmodal="modalObj" v-on:popupdata="modalData"> <div class="modal-header" slot="header"> <h3>{{ modalTitle }}</h3> </div> <p slot="body" v-html="modalContent"></p> <button slot="moveBtn1" @click="modalData" class="btn modal-default-button">확인</button> </component></div> 오픈하는 모달창이 복수개라 위와같이 구현했는데 뒤로가기버튼으로 모달만 닫고싶습니다ㅠㅠ

vue-advanced 리포지터리 권한요청합니다   Github ID : jwoojun 인프런 ID : jj9w1@naver.com

MineForm.vue 작성할 떄, value 를 v-bind로 하고, onChange 이벤트를 추가해서, value 가 바뀔 때마다 vue 인스턴스에 data도 바뀔 수 있도록 하는데요! v-model 을 사용해서 간단하게 해도 괜찮나요? 성능상에서 문제가 따로 발생할까요? 아님 아예 똑같은 기능인가요?

안녕하세요 강의 잘 보고있습니다. 투두리스트를 만드는 중인데 강의처럼 따로 api 디렉토리로 만들어서 베이스 유알엘 설정후 서버에 get 요청을 보내려는데 에러가 발생합니다. 어떻게 해결해야 할까요?

nuxt를 쓰는데    v-for="(rowItem, idx) in superMarketList"         :key="rowItem.user_id"         :class="{ even: idx % 2 == 1 }"       >         <td v-for="(colItem, name, j_idx) in rowItem" :key="colItem.user_id"> 빨간줄 부분을 넣으면 Cannot read property 'user_id' of undefined 계속 떠요ㅠ  이게 컬럼에 데이터를  비운채로 실행하니까 뜨는거 같은데 빈컬럼을 지우니까 안뜨더라구요  데이터를 안넣고 배열된 테이블을 띄우는 방법이 없을까요? 

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를 먼서 실행하고  메소드를 불러 오나요? 또한 위에 사항에 대한 해결책은 어떤것들이 있을까요?

1. "export 'default' (imported as 'Vue') was not found in 'vue' 2. Cannot read property 'use' of undefined  Error 가나요 ㅜㅜ 메인에서도 나고 news

vue로 프론트 엔드 개발을 하고 배포를 하려고 하는데 막히는 점에 있어서 질문을 드립니다..ㅠㅠ 백엔드는 없고 api 사이트에서 회원가입을 하여 데이터를 받아옵니다. 무료지만 많은 접속을하게되면 요금이 청구되는데.. 여기서 궁금한 점이 있습니다. 1. api-key를 vue에서 숨길 방법은 없나요? dotenv 설치 후 .env를 이용하여 봤는데 F12 개발자도구 탭에서  Requests Headers 를 보면 api 키가 적나라하게 나오더라고요.. 만약 숨길 방법이 없다면 해커들이 제 api key 를 보고 악용을하여 어마어마한 요금이 청구되는 사태는 막을수 없나요? Nuxt를 이용하여 ssr:false ,  target:'static' 으로 vue 개발을 했고 netlify 에서 배포 예정입니다.  @nuxtjs/dotenv 모듈을 이용하였습니다.

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. vue, typescript 사용 중에 ie11에서 화면이 안나오고 있어서 문의드립니다. javascript1002 에러가 나타나고 있으며, 현상은 아래 url의 화면과 동일합니다.https://jacklyons.me/how-to-fix-vuejs-not-working-in-ie11/ 플러그인은 크게 ui프레임웍 quasar를 쓰고 있는 정도이며, package.json 아래와 같이 사용하고 있습니다. "dependencies": { "@quasar/extras": "^1.0.0", "@sentry/browser": "^5.15.5", "@sentry/integrations": "^5.15.5", "@shopify/draggable": "^1.0.0-beta.8", "animate.css": "^4.1.0", "axios": "^0.19.0", "core-js": "^3.1.2", "konva": "^4.0.16", "libphonenumber-js": "^1.7.38", "lodash": "^4.17.15", "moment": "^2.24.0", "moment-range": "^4.0.2", "quasar": "^1.11.3", "query-string": "^6.12.1", "register-service-worker": "^1.6.2", "v-calendar": "^1.0.0-beta.23", "validator": "^12.1.0", "vue": "^2.6.10", "vue-axios": "^2.1.5", "vue-bounce": "^1.1.0", "vue-class-component": "^7.0.2", "vue-infinite-loading": "^2.4.4", "vue-konva": "^2.0.11", "vue-loaders": "^3.0.2", "vue-multiselect": "^2.1.6", "vue-online-2": "^2.2.0", "vue-pinch-zoom": "^1.0.1", "vue-property-decorator": "^8.1.0", "vue-router": "^3.0.3", "vue-scroll-sync": "^1.0.5", "vue-uuid": "^1.1.1", "vuex": "^3.0.1", "vuex-class": "^0.3.2" }, "devDependencies": { "@babel/plugin-proposal-optional-chaining": "^7.7.5", "@bahmutov/add-typescript-to-cypress": "^2.1.2", "@cypress/webpack-preprocessor": "^5.4.1", "@types/chai": "^4.1.0", "@types/lodash": "^4.14.149", "@types/mocha": "^5.2.4", "@types/moment-range": "^4.0.0", "@types/uuid": "^3.4.6", "@types/validator": "^12.0.1", "@vue/cli-plugin-babel": "^4.0.3", "@vue/cli-plugin-e2e-cypress": "^4.0.3", "@vue/cli-plugin-eslint": "^4.0.3", "@vue/cli-plugin-pwa": "^4.1.1", "@vue/cli-plugin-typescript": "^4.0.3", "@vue/cli-plugin-unit-mocha": "^4.0.3", "@vue/cli-service": "^4.0.3", "@vue/eslint-config-prettier": "^5.0.0", "@vue/eslint-config-typescript": "^4.0.0", "@vue/test-utils": "^1.0.0-beta.29", "babel-eslint": "^10.0.1", "babel-plugin-transform-imports": "1.5.0", "chai": "^4.1.2", "console-panel": "^1.0.4", "cypress": "4.12.1", "cypress-intellij-reporter": "^0.0.4", "eslint": "^5.16.0", "eslint-plugin-prettier": "^3.1.0", "eslint-plugin-vue": "^5.0.0", "lint-staged": "^10.0.0-0", "mochawesome": "^6.1.1", "mochawesome-merge": "^4.1.0", "node-sass": "^4.9.0", "prettier": "^2.0.5", "sass-loader": "^7.1.0", "stylus": "^0.54.5", "stylus-loader": "^3.0.2", "ts-loader": "^7.0.5", "typescript": "^3.4.3", "vue-cli-plugin-quasar": "^2.0.0", "vue-template-compiler": "^2.6.10", "vuex-module-decorators": "^0.10.1", "webpack": "^4.43.0" }, "prettier": { "singleQuote": true, "arrowParens": "always", "trailingComma": "none", "jsxBracketSameLine": true, "htmlWhitespaceSensitivity": "css" }, "postcss": { "plugins": { "autoprefixer": {} } }, "browserslist": [ "> 1%", "last 2 versions" ], "gitHooks": { "pre-commit": "lint-staged" }, "lint-staged": { "*.{ts,tsx,*.vue}": [ "vue-cli-service lint --fix", "git add" ], "*.{ts,tsx,*.vue,*.scss,*.css}": [ "prettier --write", "git add" ] } plugin 좀 더 자세한 내용은 아래와 같습니다. import Vue from 'vue'; import { Quasar } from 'quasar'; import './push'; import VueAxios from 'vue-axios'; import axios from './axios'; import VueKonva from 'vue-konva'; // @ts-ignore import VueLoaders from 'vue-loaders'; import 'vue-loaders/dist/vue-loaders.css'; import InfiniteLoading from 'vue-infinite-loading'; // @ts-ignore import VCalendar from 'v-calendar'; // @ts-ignore import Bounce from 'vue-bounce'; import * as Sentry from '@sentry/browser'; import { Vue as VueIntegration } from '@sentry/integrations'; import PinchZoom from 'vue-pinch-zoom'; import 'animate.css'; // vue-axios : rest 통신용 라이브러리 Vue.use(VueAxios, axios); // vue-konva : svg 좌석 그리는 용도 Vue.use(VueKonva); // vue-loaders : 로더 모양 (추후 필요 없으면 삭제) Vue.use(VueLoaders); // vue-infinite-loading : list 무한 스크롤 // @ts-ignore Vue.use(InfiniteLoading, { slots: { noMore: Quasar.lang.props.msg.noMore, noResults: '' } }); // Use v-calendar & v-date-picker components Vue.use(VCalendar, { isDark: true }); // vue-bounce, ios scroll bounce handler Vue.use(Bounce); Vue.component('pinch-zoom', PinchZoom); // sentry if (process.env.NODE_ENV !== 'development') { Sentry.init({ dsn: 'https://b22383345c094318a3ca4cc89cdac858@o389025.ingest.sentry.io/5226673', integrations: [ new VueIntegration({ Vue, attachProps: true }), new Sentry.Integrations.GlobalHandlers({ onerror: false, onunhandledrejection: false }) ] }); } 이 상태에서 아래 url 에서의 상황을 실행해봐도 잘안되고 있습니다.https://program-error-review.tistory.com/32 모르는게 많아 질문도 어떻게 드려야 할지 몰라 혹시 추가로 알아야 하는 사항이 있으면 말씀부탁드립니다.

<template> <div> <h1>{{ title }}</h1> <input type="text" v-model="title" /> </div> </template> <script> export default { name:'', components : {}, data(){ return { title: 'Hello World' }; } } </script> <style scoped> h1 { color:red; } </style> 선생님이 알려주신것 처럼 코드를 작성하였는데 input에 글을 작성하는 경우 영어는 바로 반영이 되는데 한글같은경우에는 좀 한글자씩 빼고 나오더라구요 예를 들어서 "안녕하세요" 라고 적은경우 input부분에는 "안녕하세요" 가 잘나오는데 {{ title }} 부분에는 "안녕하세" 까지만 나오더라구요 나중에 게시판을 만들때 제목이나 내용을 적고 데이터베이스로 전송할때 문제가 될까봐 미리 질문 드립니다.

제목 그대로 입니다.  npm run serve를 통해 실행 시,  router path에 정의되지 않은 url을 웹브라우저에 입력했을때 정상적으로 application이 동작하는 이유를 모르겠습니다. 예를 들어  localhost:8080/new/newnew localhost:8080/ne localhost:8080/new1234 등 어떠한 url을 입력해도 정상적으로 page가 로드 됩니다. 물론 url에 연결되어 있는 page component까지는 보이지  않지만 바탕이되는 toobar componet 까지는 브라우저에서  확인이 가능한것을 보면  어떤 이유에서 저렇게 동작하는지 궁금하네요또한 설정을 통해서 접근을 하지 못하도록 404 오류 같은 것을 발생할 수 있는지 궁금합니다.

제로초님 안녕하세요! 강의 항상 잘 듣고 있습니다! 오랫만에 노드버드 강의를 들으려고 왔는데 뷰 버전이 달라서 맞추려고 하는데(3⇨2) 잘 안되네요... 혹시 뷰 버전을 낮추는 방법을 아시나요? 인터넷에서 버전 변경으로 검색해보면 다 업그레이드만 있고 지운 다음 다시 설치를 하려고 해도 잘 지워지지가 않아서....이런 메세지가 뜨면서 잘 지워지지가 않네요... npm ERR! Must provide a package name to remove npm ERR! A complete log of this run can be found in:

강의에서는 모든 데이터를 vuex에 저장해서 사용하시는데요. 실제 개발할 때도 모든 데이터를 vuex에 저장하는게 좋나요? 프로젝트가 커져도요? 딱 한 컴포넌트 내에서만 사용되는 데이터가 있다면 그 컴포넌트 내에서  비동기 처리하고 데이터 사용 하는게 좋나요? 아니면 vuex에서 action, mutation해서 중앙에서 모든 데이터를 관리하는게 좋나요?

안녕하세요, Vue 강의를 학습 중인 학생입니다. 수업 내용 중에 'watch 속성' 회차에서 아래와 같이 num 의 값이 변경되었을 때 logText function 이 수행되도록 하는 로직을 같이 실습하였는데요, <script> new Vue({ el: '#app', data: { num: 10 }, watch: { num: function() { this.logText(); } }, methods: { addNum: function() { this.num = this.num + 1; // this.logText(); }, logText: function() { console.log('changed'); } } }) </script> 해당 방법에 대해 언급해주시기 전에 제가 생각했던 방법은 아래와 같았고, 실제로 동작도 동일하게 수행되는 것 같은데 혹시 watch 속성을 사용했을 때의 장점이 따로 있는걸까요? <script> new Vue({ el: '#app', data: { num: 10 }, // watch: { // num: function() { // this.logText(); // } // }, methods: { addNum: function() { this.num = this.num + 1; this.logText(); }, logText: function() { console.log('changed'); } } }) </script> 변경점에 대한 관리는 watch 속성으로 하는 것이 일반적이다 같은.. 게 있는지 궁금합니다 :)

안녕하세요!! 수업 열심히 듣고 있는 학생입니다!! 감사합니다!!! 강의를 듣던 중 이제 webpack에 대한 내용을 시작했는데 .vue 확장자 파일을 만드는 것을 따라했는데 생성이 되지 않습니다ㅠㅠ 제가 intellij를 쓰고 있는데 그때문인가 싶기도 하구,,,, 확장자를 추가하는 법을 구글에 검색해보았지만 잘 나오지 않아서 질문드립니다..