66,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
eslint와 prettier를 설정 했는데.. 매번 프로젝트를 시작할 때 마다 이렇게 다 처음부터 설정을 해야하나요?
eslint와 prettier를 설정 했는데.. 매번 프로젝트를 시작할 때 마다 이렇게 다 처음부터 설정을 해야하나요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
번외 질문이긴 하지만 궁금합니다.
안녕하세요. 짐코딩 님, 매번 신기술이 나오는데 예를 들어 현 강의 주제인 vue가 처음 나왔을 때 학습하신 방법이 궁금합니다. 어떤 경로를 통해 처음 학습 하시는 건지 궁금합니다. 공식 문서나 관련 도서를 통해 공부하시는지 아님 다른 경로를 통한 것인지 궁금합니다.
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
개인 깃허브
안녕하세요 수업 잘듣고있는 초급개발자입니다~ 제가 따라치면서 공부하는걸좋아하는데 공부한걸 기록하는 의미로개인 깃허브에 수업하신부분을 클론코딩으로 올려도 상관없을까요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
watch 함수 실습
해당 강의의 App_multiple_source_type.vue 소스에서 다양한 watch 함수들 주석을 풀어가며 실습 중인데, 강사님은 소스 입력 후 저장하면 바로 웹에 적용되어 vue 개발자도구에서 데이터 변경을 하시는데 저는 watch 함수 하나 실습 후 다른 watch 함수 주석 풀어서 테스트하면 웹에서 새로 고침을 했는데도 불구하고 데이터 변경이 안되요ㅠ... 따로 이유가 있을까요?? vite.config.js 에 server: watch: usePolling 도 설정해둔 상태입니다.
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
update:value로도 커스텀 v-model 기능이 동작하네요 ;;
Vue 2의 호환성 문제로 놔둔 것일까요? 혹시나해서 바꿔봤더니 잘되네요 ;; 아무래도 Vue 3 권고 사항인 modelValue를 사용하는게 맞겠죠? <label> 이름 <input type="text" :value="value" @input="e => $emit('update:value', e.target.value)" /> {{ userName }} </label>
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
강의시 참조하는 노션 문서 질문 합니다.
안녕하세요.강의가 귀에 쏙쏙 들어오고 이해하기 쉽게 설명해주셔서 감사합니다. 다름이 아니고 강의에서 참조하는 노션 문서를 볼 수 있나요?볼 수 있으면 어디서 볼 수 있나요?감사합니다.
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
자바스크립트 유용한 Array APIs 영상 비공개
해당 영상 링크 들어가니 비공개 영상이라 볼 수 없다고 뜹니다. 확인 한 번 해주실 수 있을까요?
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
vue3+ cli로 구성해도 강의 따라가기에 문제가 없나요?
안녕하세요 짐코딩님!혹시 vue3 + cli 조합으로 해도 강의 따라가기에 문제가 없을까요...??회사 서버 상황상 vue3+ vite 가 불가능할 것 같은데, cli 조합으로 vue3를 배우려고 하면 짐코딩님 강의를 수강하면 안되는 것일지 궁금합니다!ㅠㅠ
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
강의 중 언급하는 영상을 어디서 보는거죠?
강의 중 자세한 내용을 영상 설명란에 남겨두시다고 하시는데 어디서 보는거죠? 이벤트처리에서 4분 47초에서 모르는 분들은 위한 메서드 영상을 남겨두시다고 하셨는데 찾아봐도 모르겠어서 문의드립니다.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
javascript에서 Counter가 안나오는 문제
섹션1) Vue란 무엇인가? 에서 예시로 써주신 코드입니다.javascript.html<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript</title> </head> <body> <button type="button" onClick="increment()">Counter: <span id="counter"></span></button> <script> let counter = 100; function increment() { counter++; printCounter(); } function printCounter() { let $span = document.querySelector("#counter"); $span.textContext = counter; } printCounter(); </script> </body> </html>강의 6:52초에 나오는 코드를 그대로 따라 쳤는데,Counter 숫자가 안나옵니다..ㅠ
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
{{ counter }} 인식이 안되는 문제
섹션1) Vue란 무엇인가? 에서 예시로 써주신 코드입니다.1. vue3.html<!DOCTYPE html> <html lang="en"> <head> <title>Hello Vue3</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="counter"> <button type="button" v-on:click="counter++"> Counter: {{ counter }} </button> </div> <script> const Counter = { data() { return { counter: 0 } } } Vue.createApp(Counter).mount('#counter') </script> </body> </html>https://www.gymcoding.co/eb73a52b-f54a-48da-a4ab-b22b7f499a1c강의 교안에 있는 코드를 그대로 복사했는데{{ counter }} 로 나오는데 무엇이 문제일까요??..2. javascript.html<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript</title> </head> <body> <button type="button" onClick="increment()">Counter: <span id="counter"></span></button> <script> let counter = 100; function increment() { counter++; printCounter(); } function printCounter() { let $span = document.querySelector("#counter"); $span.textContext = counter; } printCounter(); </script> </body> </html>강의 6:52초에 나오는 코드를 그대로 따라 쳤는데,여기도 Counter 숫자가 안나옵니다..ㅠ
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
props, emit 질문이 있습니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요.질문이 있습니다ㅠㅠprops emit은 단방향바인딩인거고v-model은 양방향바인딩인건가요?? 이건 개인적인 질문인데요.. ㅜㅜ input text상자에 입력된 값을 props로 전달하려면 v-model은 양방향 바인딩하는거니까 사용하면 안되는건가요..?ㅜㅜ 양방향 바인딩이 화면에서 입력된 값을 자바스크립트에서 그때 그때 동일하게 바뀌게끔 하는거잖아요.. 그럼 props, emit이랑 관련이 전혀없는건가요? 여기 개념이 좀 헷갈리는 것 같습니다.. props+emit = v-model은 아닌거죠..?ㅜㅜ그리고 수업하실 떄 Theview.vue를 사용하셨는데,그 이유가 뭔지 궁금합니다ㅜㅜ 부모 자식관계에 대한 설명을 할 때 child, parent만 만들면 데이터가 잘 오고가는지 확인하기 위해서 theview.vue를 만드신건가요?ㅠㅠ
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
watch 함수.. 질문입니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요.. 좀 이상한 질문이지만 궁금해서 남깁니다ㅠㅠ watch([x, y], ([newX, newY]) => { console.log(newX, newY); }); return { x, y }; }, 이런식으로 수업하실 때 예시를 들어주셨는데, 이런건 보자마자 바로 아는 게 아니고 공식문서 가서 사용법 보고 알 수 있는거죠..? 그냥 문법 자체를 암기하는 게 아니라 인강들으면서 어떻게 사용하는지 정도만 보고 나중에 필요할 때는 직접 공식문서 가서 쓰고 그러는건가요..?ㅜㅜ 너무 초보스러운 질문이지만 넘 궁금해서 남깁니다!ㅠㅠㅠㅠㅠ
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
emmet abbreviation
butt 까지만입력하고 자동완성버튼 누르면강사님처럼 안뜨네요 ㅠ 세팅 부분은 아래와 같고 // settings.json { "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact", // "html", // 삭제 "vue", "markdown" ], "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }, "editor.tabSize": 2, } 강의 초반에 설명해주신 플러그인은 모두설치되어있어요
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
컴포넌트 질문입니다.ㅠㅠ
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 컴포넌트를 가져와서 사용하는 경우도 부모자식관계인건가요??예를들어서 TheNav.vue를 App.vue에서 사용하는 경우도 부모자식관계인건지 궁금합니다. 아니면 데이터 관련되어있을 때만 부모자식인건가요?ㅠㅠ 부모자식관계를 언제 따지는 지 잘 모르겠습니다ㅜㅜ 컴포넌트 가져와서 사용할 때 뷰 개발자 도구 확인하시던데, 그 컴포넌트 간의 관계를 편하게 보기 위해서 사용하시는건가요??ㅜㅜ
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
npm run dev 살행 시 오류 발생
VS Code 터미널에서- npm install 실행하고- npm run dev 를 실행하면 아래 오류가 발생합니다.** 오류가 발생하여 vs code를 삭제 후 재설치하여 다시 해봐도 동일 오류가 발생합니다.PS D:\vuejs_workspace\Projects\learn-vue3> npm run dev> learn-vue3@0.0.0 dev D:\vuejs_workspace\Projects\learn-vue3> vite(node:2112) UnhandledPromiseRejectionWarning: SyntaxError: Unexpected token '??=' at Loader.moduleStrategy (internal/modules/esm/translators.js:145:18)(Use node --trace-warnings ... to show where the warning was created)(node:2112) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)(node:2112) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.PS D:\vuejs_workspace\Projects\learn-vue3> ---npm 버전 정보는 아래와 같습니다.PS D:\vuejs_workspace\Projects\learn-vue3> npm version{ 'learn-vue3': '0.0.0', npm: '6.14.15', ares: '1.17.2', brotli: '1.0.9', cldr: '39.0', icu: '69.1', llhttp: '2.1.3', modules: '83', napi: '8', nghttp2: '1.42.0', node: '14.17.6', openssl: '1.1.1l', tz: '2021a', unicode: '13.0', uv: '1.41.0', v8: '8.4.371.23-node.76', zlib: '1.2.11'}
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
객체..
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요 강의를 거의 완강했는데요,혹시 객체에 대해 깊게 알아야되나요??ㅠㅠ문법을 보면 객체의 속성과 기능이 어디인지 한눈에 알아봐야되나요? 그게 너무 헷갈립니다ㅠㅠ 자꾸 객체에 집착하게 되네요ㅜㅜ 객체가 왜 필요한지 어디가 속성 기능인지 이런걸 너무 보게되는데, 어떻게 정리하면 좋을까요..?자바에서 객체 의미는 알고있습니다! vue3 공식문서에 자주 들어가서 보는 게 좋은가요? 보통 개발할 때 이를 참고해서 하나요?ㅜㅜ 그리고 제가 실전편도 구매해둔 상태인데요, 혹시 기본편을 2번 듣고 실전편으로 넘어가는 게 좋을까요?
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
axios CORS 에러 문의입니다.
npm install axios 이후, 강의와 동일하게 axios 요청을 보냈는데 CORS 에러가 발생합니다 ㅜㅜ포트번호가 3000에서 5173으로 바뀌면서 발생한 문제일까요...?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
index.html에 이렇게 에러가 생깁니다 ㅠㅠ
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
ESlint.cjs 설정 관련 error 표시가 계속됩니다.
/* eslint-env node */ require('@rushstack/eslint-patch/modern-module-resolution') module.exports = { root: true, extends: [ 'plugin:vue/vue3-essential', 'eslint:recommended', '@vue/eslint-config-prettier/skip-formatting' ], parserOptions: { ecmaVersion: 'latest' }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'prettier/prettier': [ 'error', { singleQuote: true, semi: true, useTabs: true, tabWidth: 2, trailingComma: 'all', printWidth: 80, bracketSpacing: true, arrowParens: 'avoid' } ] } }강의설명란을 참고해서 parserOption은 그대로 두고 나머지 부분을 추가하고, format on save 와 settings.json 파일도 수정하고, prettier 확장프로그램도 작업 영역에서 사용하지 않기를 설정 했는데도 저장만 하면 아래처럼 빨간 줄이 가득합니다 ㅠㅠ 어떻게 해야 할까요? { // eslint 적용할 파일 종류 "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact", "html", "vue", "markdown" ], // 저장시 eslint 스타일 적용 "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "editor.tabSize": 2 }