판교님 400에러 관련해 다음 강의 진행이 안되어 도움을 찾고자 글 올리게 되었습니다. /post에 get으로 빈 [] 을 가지고 오는 것은 되는데 다음 부분인 /post에 post하여 게시물 생성하는 것은 안되네요 ㅠ  

인프런 아이디 : leesujeong 인프런 이메일 : leesujeong@lotte.net 깃헙 아이디 : callu9   감사합니다.

안녕하세요  component에 template 항목으로 화면을 구성하는데   vue.runtime.esm.js?2b0e:619 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build. 이런 오류가 발생했습니다.  한 화면에 팝업창을 하나 띄우려고하는데 큰 기능이 없어서 단순 template으로만 구성하려고 했습니다.  화면 자체 코드는 아래와 같습니다.  <template> <!-- 위쪽에는 일반적인 화면 구성 --> <h4>환불 신청 및 처리 내역</h4> <div class="pay_history"> <!-- 중략 --> </div> <!-- 팝업--> <popupStatus v-if="isModal" > </popupStatus> <!-- 팝업--> </template> <scripte> var mHtml = ` <div class="pop_body"> <table></table> </div>` export default { name: 'RefundHistory', components : { 'popupStatus' : { template : mHtml } , data() { return{ isModal : true, } }, } } </script>   스택오버플로우를 살펴보니 config.js에서 runtimeCompiler: true  로 바꾸면 된다고 하는데요..  제가 사용하려던 템플릿이 non-precompiled Vue templates. 이라고 하는데요..  왜 이런 오류가 발생하는건가요?? 컴포넌트의 템플릿을 procompile 시키는 방법이 따로 있는걸까요? (그게 뷰 config 를 수정하는 방식인건지?),  컨피그 파일 수정 없이 procompile 된 템플릿을 사용하는 방법이 따로 있는지도 궁금합니다 .    

안녕하세요, 파일 절대경로 @관련해 에러 코드가 나와 질문드려요! 추가적으로 설정해 줘야 하는 부분이 있는 것 같아 구글링 해 보았는데 잘 안나오더라구요 ㅠ우선 스크린샷 올리도록 하겠습니다, 급한건 아니니 넘어가도록 할게요.

처음에 fetch 함수를 작성하신 storage 객체를 생성하셔서 저는 그 객체에 localstorage 관련 처리 함수를 모두 정의하고 그 함수을 mutations에서 호출하여 localstorage에 대한 기능을 분리하는 것이 구현하였습니다.   저는 초기에 storage 객체를 생성하시고 fetch 함수를 만드셔서 당연히 storage 객체에 localstorage 관련 로직을 처리하는 역할을 부여하셨다고 생각했는데, 혹시 이렇게 하시지 않은 이유가 있으신지 궁금합니다.

안녕하세요, 강사님   vue-router 옵션 내부적으로 component를 등록할 때, 지역 컴포넌트로 등록된 컴포넌트는 라우팅 되지 않는 걸 확인하였습니다. 해당 사진은 공식문서를 캡쳐한 이미지인데요,  this.appHeader 가 아니더라도 단순히 지역 컴포넌트가 선언된 위치를 찾아내서 연결만 시켜주면 되지 않을까 하는 생각이 있었는데 잘 안되더라구요,  그냥 전역 컴포넌트나 싱글파일 컴포넌트 체계에서 라우팅 가능하다 정도로만 이해하면 될까요? 원하는 답변을 얻지 못해 질문합니다! routes: [ { path: '/header', component: this.appHeader, }, ],     new Vue({ el: '#app', router, components: { appHeader: { template: '<header>app header</header>', }, }, }); 참고한 질문

안녕하세요! 좋은 수업 늘 감사히 잘듣고 있습니다. 궁금한 점이 있어서 문의드립니다.   저는 지금 Todo App - 프로젝트 구현에서 깃헙 브랜치 안내 해주시는 부분 강의 듣고 있습니다. 깃 권한도 승인받았고, 강의해주신 경로대로 진행했는데 수업내용 올려주신 자료가 없더라구요.  (TodoFooter.vue, TodoHeader.vue, TodoInput.vue, TodoList.vue) 저는 위 4가지 파일이 없고 HelloWorld.vue 파일만 있더라구요.. 터미널에 git checkout todo-app/components-implementation 하면 덮어씌워진다고 하셔서, 혹시나 제코드가 날아갈까봐 시도해보지는 못했어요.   제가 경로를 잘못타고 들어간건가요? 확인부탁드립니다.

{ id: 1, subject: "휴대폰 사기", completd: false },   위 처럼 작성된 코드를 강사님 처럼 자동으로 아래처럼 바꾸고싶은데 어떻게 하는지 검색을 해도 잘 모르겠어요... vscode 사용하고 있습니다. {. id: 1, subject: "휴대폰 사기", completd: false },    

처음 설계하는게 어렵지 기능구현은 쉬운 것 같은데 스케폴딩 하는 부분에서 머리 터질 것 같네요. 그래도 바닐라 자바스크립트 부분은 신경써야 하겠죠?

강의 듣던 중 질문 남깁니다 저의 경우 예시처럼 하나의 state, action, mutation 파일로 나눠져 있는 것이 아닌서비스 별로 모듈로 나눠져 각 모듈에 state, mutation, action이 있는 구조로 구현 되어 있습니다. 혹시 이런 경우에 타입스크립트로 변환을 어떻게 해야하는지 가이드 부탁드리겠습니다!  

  강사님 설명이 너무 부실합니다 ㅜㅜ 다른강의에서 한거라서 건너띈다는 부분이 너무 많네요.. firebase.firestore() firebase.auth().currentUser db.collection 이런 부분 무슨 기능인지 모르겠는데 따로 제가 다 찾아봐야 되는거죠?        

    어떻게 해결해야 할까요? 강의 진행을 못하고 있습니다 ㅜㅜ    

addTodo 함수 내부에 if문 예외처리 시 연속된 space bar를 누르면 추가가 되는 부분이 있습니다, js로직으로 어떻게 예외처리가 가능할 지 답변 가능할까요?

판교님, 질문있습니다. data는 function()에 다시 새 객체를 반환하는데,  methods는 바로 객체를 열어서 addTodo: ... 로 작성하는 이유를 알 수 있을까요?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.   안녕하세요. 선생님 하이오더 컴포넌트가 CreateListView.js이잖아요. 이걸 쓰는 이유가 중복되는 코드의 재사용이라고 하셨는데요. NewsView, JobsView, AskView에서 List로 뿌려주는 부분이 공통적이기 ListView.vue라는 공통 컴포넌트를 만들어 줬잖아요. 그렇다면 데이터를 불러오는 부분이 공통적이면 ListView.vue처럼 공통적인 소스코드를 넣을 컴포넌트를 만들면 되지 않나요? js파일이라는 하이오더 컴포넌트랑 공통부분을 따로 뺀 vue 파일이랑 어떤 부분이 차이점이 있는지 잘 이해가 되지 않습니다.

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.   선생님 강의 아래 이미지에 vue cli 4.5x는 default vue2를 선택해서 프로젝트를 생성하라고 나왔는데요. 그럼 관련된 test는 안깔립니다. npm i -g jest로 설치했는데요. jest외에 더 설치해야 하는게 있나요?

- (base) mac@Macui-MacBookPro learn-vue-js-master % npm install -g @vue/cli npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated npm WARN deprecated har-validator@5.1.5: this library is no longer supported npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated npm WARN deprecated apollo-tracing@0.15.0: The `apollo-tracing` package is no longer part of Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#tracing for details npm WARN deprecated graphql-extensions@0.15.0: The `graphql-extensions` API has been removed from Apollo Server 3. Use the plugin API instead: https://www.apollographql.com/docs/apollo-server/integrations/plugins/ npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address' npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. npm WARN deprecated apollo-cache-control@0.14.0: The functionality provided by the `apollo-cache-control` package is built in to `apollo-server-core` starting with Apollo Server 3. See https://www.apollographql.com/docs/apollo-server/migration/#cachecontrol for details. npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi' npm WARN deprecated graphql-tools@4.0.8: This package has been deprecated and now it only exports makeExecutableSchema.\nAnd it will no longer receive updates.\nWe recommend you to migrate to scoped packages such as @graphql-tools/schema, @graphql-tools/utils and etc.\nCheck out https://www.graphql-tools.com to learn what package you should use instead   changed 944 packages, and audited 945 packages in 24s 65 packages are looking for funding run `npm fund` for details 23 vulnerabilities (4 moderate, 19 high) To address issues that do not require attention, run: npm audit fix Some issues need review, and may require choosing a different dependency. Run `npm audit` for details.           npm 최신 안정버전설치, 전부 삭제 후 그냥 최신 버전 설치 다 해봤는데 cli 설치가 안되네요. npm audit fix하면         (base) mac@Macui-MacBookPro learn-vue-js-master % npm audit fix npm WARN deprecated har-validator@5.1.5: this library is no longer supported npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details. npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen) npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli added 245 packages, and audited 246 packages in 2s 7 packages are looking for funding run `npm fund` for details # npm audit report ansi-regex >2.1.1 <5.0.1 Severity: moderate Inefficient Regular Expression Complexity in chalk/ansi-regex - https://github.com/advisories/GHSA-93q8-gq69-wqmw fix available via `npm audit fix` node_modules/inquirer/node_modules/ansi-regex node_modules/string-width/node_modules/ansi-regex strip-ansi 4.0.0 - 5.2.0 Depends on vulnerable versions of ansi-regex node_modules/inquirer/node_modules/strip-ansi node_modules/string-width/node_modules/strip-ansi inquirer 3.2.0 - 7.0.4 Depends on vulnerable versions of string-width Depends on vulnerable versions of strip-ansi node_modules/inquirer vue-cli >=2.9.0 Depends on vulnerable versions of inquirer node_modules/vue-cli string-width 2.1.0 - 4.1.0 Depends on vulnerable versions of strip-ansi node_modules/string-width 5 moderate severity vulnerabilities To address all issues, run: npm audit fix     이렇게 나와서 npm audit fix 하면 또 위에 상황 반복이구요... 전에 vue 잘 설치해서 공부하다가 잠깐 쉬고 지금 다시 설치하는건데 계속 안되서 진행을 못하고 있습니다....ㅠ

다음주이나 다다음주에 vue.js 프로젝트를 구현하게 되는데 이 강의 공부하는 중에 아래 코드가 회사 노트북에서는 되는데 집 노트북에서는 안 되네요..

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.   vue transition을 활용하여 강사님 강의 내용과 동일하게 Modal을 적용하였습니다. 그런데 modal창이 처음 등장할 때 애니메이션 효과는 적용되지 않네요. 강사님 코드는 다른가해서 클론받아 확인해봤는데, 마찬가지로 모달창이 처음 등장했을 때 애니메이션은 적용되지 않은상태입니다.   이 부분 관련해서 확인해주실수 있으실까요?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.   학습은 정도로 가는것이 맞다고 생각하지만, 제 개인적인 상황은 비교적 짧은시간 내에 이직을 목적으로 하고 있습니다. 공부시간도 일과 병행하다보니 많이 나는 상황은 아닙니다 ㅠ 복습을 할때 안보고도 칠 수 있는정도로 외우면서 원리까지 다 익혀야 하는게 맞는건지, 아니면 원리만 머리속에 이해하고 넘어가도 되는건지 복습을 어느정도까지 해야하는지 좀 감이 안옵니다. 사실 시간이 제한적이다보니 효율적인 방법을 자꾸 찾게 되는것 같습니다. 강사님 조언좀 부탁드립니다!