66,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결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 }
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
프로젝트 시작시 명령어 npm create vue@latest 사용해도 될까요?
안녕하세요.vscode에서 깃 배쉬를 기본 터미널로 사용하고 있습니다.공식문서를 읽어보다가 npm create vue@latest 를 입력하니까, 자동으로 프로젝트를 생성해주는데 혹시 이 명령어로 수업을 따라가도 될까요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
메서드의 스코프 문의 드립니다.
영상 11분 TheView component에서 MyButton component로 click event 속성 상속이 되었습니다.MyButton component에는 sayHello 라는 메서드가 없는데, 실행이 된 것이 궁금합니다.부모 component의 메서드들이 자식,손자 component 에서 사용할 수 있나요??
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
컴포넌트에 props내리는법에 대해 질문
컴포넌트에 props내릴때 질문 있습니다.회사 프로젝트중에 팝업창을 띄울일이 있었고, 팝업창을 띄울때 데이터를 props로 넘겨줘야 할 일이 있어서props로 넘겨줬습니다. //팝업에 props로 데이터 넘겨주는 부분 <MNGDA0030Popup ref="mNGDA0030Popup" :cmpny-div="searchPopupParam.CMPNY_DIV" :year="searchPopupParam.YEAR" :asgn-full-nm="ASGN_FULL_NM" :bsns-cd="searchPopupParam.BSNS_CD" :asgn-cd="searchPopupParam.ASGN_CD" :in-out="searchPopupParam.IN_OUT" :seq="searchPopupParam.SEQ" /> //props 받는부분 const props = defineProps({ cmpnyDiv: { type: String, default: "", }, year: { type: String, default: "", }, asgnFullNm: { type: String, default: "", }, bsnsCd: { type: String, default: "", }, asgnCd: { type: String, default: "", }, inOut: { type: String, default: "", }, seq: { type: Number, default: "", }, })let searchParams = reactive({ CMPNY_DIV: useUserStore.company, YEAR: props.year, BSNS_CD: props.bsnsCd, ASGN_CD: props.asgnCd, IN_OUT: props.inOut, SEQ: props.seq, }) console.log("프롭스", props) console.log("서치파람", searchParams)제 질문은console.log("프롭스", props)props를 콘솔 찍었을땐 값이 제대로 들어가는데,searchParams에 따로 값을 할당해서 찍어보면 값이 들어가지 않습니다. 제 생각에는 props로 넘기고, 값을 할당했을때 반응성을 잃어 버린거 같습니다.그래서 toRefs?로 감싸봤지만 해결하지는 못했습니다.props.데이터 등으로 개발은 할수 있겠지만searchParams에 props데이터를 할당 하는 방법이나 짐코딩님 강의중 어떤 부분을 다시 보면 될지 알수있을까요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
프로젝트 실행방법..
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요. 질문이 생겨서 남깁니다ㅠㅠApp.vue 실행하는 방법은 알고 있는데요,혹시 예를들어서 8폴더에 있는App_computed.vue 실행하려면 어떻게 해야되나요?App_computed.vue 코드 열어놓은 상태에서 새 터미널 해도 안열리더라구요ㅠㅠ
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
디렉티브 v-colak 예제 할 때 cdn으로 vue 다운로드
강사님, 디렉티브 v-colak 예제 할 때 cdn javascript 부분에 왜 주소 붙여넣기 한거인가요? 초반에 세팅할 때 vue와 관련된 모든 라이브러리 npm vue cli해서 받은거 아니였나용?? html 쪽 작업시에는 저렇게 원래 해야하는건가요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
변수 선언시 const로 작성하는 이유가 있나요?
제가 반응형 데이터에 대한 이해가 부족한 거일수도 있지만const로 작성을 하면 상수 취급이 되어서 데이터를 한번 선언하면 변경할수 없다고 알고 있는데,vue3에서는 const data = ref('') 또는 const obj = reactive({})등으로 변수 선언을 하더라고요제가 알던 지식으로는 let data = ref('') 또는 let obj = reactive({})등으로 변수를 선언해야 할거 같은데const로 반응형데이터를 선언했을때 어떻게 let과 같이 변수의 값이 바뀌는지 궁금합니다.(반응형데이터라서...?)
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
객체안에 배열있을때
객체안에 배열 안에 있는 값들을 나열하고싶을때는 어떻게 하나요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
vue3 에서 메소드에 대한 내용
스팀블록체인 api를 불러오려고 하는데 과거의 경우와 많이 달라진 것 같습니다예전의 경우 예제를 보니 <script> import steem from 'steem' // 스팀잇 라이브러리 임포트 export default { data () { return { discussions: [] } }, methods: { getDiscussions () { let query = { tag: 'kr', limit: 10 } // 스팀잇 최근글 가져오기 steem.api.getDiscussionsByCreated(query, (err, result) => { console.log(err, result) }) } }, created () { this.getDiscussions() } } </script>로 했다고 하는데 vue3의 경우로 하면 어떻게 되는지vue3의 경우 const getDiscussions =()=> {steem.api.getDiscussonsByCreated(querr, (err, result) => { console.log(err, result) })}로 했는데 잘안됩니다.제가 질문한 내용이 실전편에 해당되는 것인가요? 그럼 실전편까지 열심이 따라가겠습니다. 그렇지 않다면 좀 가르쳐 주세요
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
영상에 나오는 사이트가 궁금합니다.
안녕하세요수업 잘 보고 있습니다.수업 중간중간에 예시 소스 올려져있는 사이트가 있는데 정보를 찾을수가 없어서 문의글 남겨드립니다.감사합니다.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
글쓰기 생성날짜 date.now() 오류
게시글 목록 보시면 시간정보가 화면과 같습니다.(당연히 db.json 에도 똑같 저장 되고요)type 문제인지 의심스럽고... 튼. 모르겠네요 ㅡㅡ;;; 코딩님.. { "title": "555", "content": "444", "createdAt": 1698000915492, "id": 13 }, { "title": "jjj", "content": "jj", "createdAt": 1698000930032, "id": 14 }, { "title": "글쓰기", "content": "글쓰기 내용", "createdAt": 1698032034496, "id": 15 } -- db.json --
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
상세질문: Date.now() : not working
<template> <div> <h2>게시글 등록</h2> <hr class="my-4" /> <form @submit.prevent="save"> <div class="mb-3"> <label for="title" class="form-label">제목</label> <input v-model="form.title" type="text" class="form-control" id="title" /> </div> <div class="mb-3"> <label for="content" class="form-label">내용</label> <textarea v-model="form.content" class="form-control" id="content" rows="3" ></textarea> </div> <div class="pt-4"> <buttont type="button" class="btn btn-outline-dark me-2" @click="goListPage" >목록</buttont > <button class="btn btn-primary">저장</button> </div> </form> </div> </template> <script setup> import { ref } from 'vue'; import { useRouter } from 'vue-router'; import { createPost } from '@/api/posts'; const router = useRouter(); const form = ref({ title: null, content: null, }); const save = () => { try { createPost({ ...form.value, createdAt: Date.now(), }); router.push({ name: 'PostList' }); } catch (error) { console.log(error); } }; const goListPage = () => router.push({ name: 'PostList' }); </script> <style lang="scss" scoped></style>index.js 에서는 { path: '/posts', name: 'PostList', component: PostListView, },.. 로 정의 했고요 api/posts.js export function createPost(data) { return axios.post('http://localhost:5000/posts', data); }※ PostCreateView.vue 에서 save 함수는 const save = () => { try { createPost({ ...form.value, createdAt: Date.now(), }); router.push({ name: 'PostList' }); } catch (error) { console.log(error); } };위 전체 소스 중 위 부분입니다. 크게 복잡한 내용이 아니라고 생각되고 있는데 ..코딩님 위에 내용 보시고 혹시 더 확인하고 싶은 부분이 있으시면 말씀해 주세요.확인 하고 다시 질문 드리겠습니다.번거롭게 해드려 죄송하네요. 감사합니다.
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
vue framework 관련
안녕하세요 vue를 공부하다가 궁금한 점이 있습니다.컴포넌트는 사용할 때 마다 새로운 인스턴스가 생성된다고 하셨는데 이 인스턴스들을 관리(생성, 소멸 등)하는 vue framework(백엔드의 spring framework 같은) 인스턴스는 따로 존재하지 않나요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
질문드립니다.
안녕하세요~ 처음에 v-base3 눌러서 만들면<template> <div> </div> </template> <script> export default { setup () { return {} } } </script> <style lang="scss" scoped> </style>이렇게 , 이런 콤마 하나도 없이 나오던데, 강사님은 어떻게 콤마가 있는건가요?
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
질문있습니다.
안녕하세요~ 지금 회사도 vue3사용중인데요, 회사 프로젝트는 잘 열립니다. 근데 인강을 따라하다가 에러가 떠서요!PS C:\Users\MAoo\Desktop\practice\Vue> npm installnpm ERR! code ENOENTnpm ERR! syscall opennpm ERR! path C:\Users\MAoo\Desktop\Practice\Vue/package.jsonnpm ERR! errno -4058npm ERR! enoent ENOENT: no such file or directory, open 'C:\Users\MAoo\Desktop\Practice\Vue\package.json'npm ERR! enoent This is related to npm not being able to find a file.npm ERR! enoentnpm ERR! A complete log of this run can be found in: C:\Users\MAoo\AppData\Local\npm-cache\_logs\2023-10-04T07_46_21_746Z-debug-0.log npm install 터미널창에 입력하면 이렇게 에러가 뜹니다.package.json 파일도 있는데, 왜 그런지 모르겠어요..ㅠㅠ혹시 vite 설치 안해서 그런건가요?그리고, vsc 옆에 경고창이 뜨더라구요, App_CompositionAPI.vue Doctor❗ Use volar-service-vetur instead of VeturDetected Vetur enabled. Consider disabling Vetur and use volar-service-vetur instead.❗ Bad TypeScript versionTS 4.9 has a bug that will cause auto import to fail. Please downgrade to TS 4.8 or upgrade to TS 5.0+.Issue: https://github.com/vuejs/language-tools/issues/2190Have any questions about the report message? You can see how it is composed by inspecting the source code. 2시간 넘게 찾아봐도 해결이 안됩니다ㅠㅠ 이거때문에 진도를 못나가고 있어요..ㅠㅠㅠ
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
shallowRef 질문드립니다.
안녕하세요! 강의 보다가 궁금한 사항이 있어서 질문드립니다!ref로 정의한 데이터와 shallowRef에 대한 데이터 설명주실때,shallowRef에 대한 데이터의 속성은 변경되지 않는다고 하셨는데요.devtools로 shallowRef데이터의 속성을 변경하고 ref 데이터의 속성을 변경하니까 두 속성이 같이 변경되더라구요.. 혹시나 오타인가 하고 찾아봤는데 오타는아닌거같아요 ㅠㅠㅠ..하나의 속성이 변경되면 변경안되는 속성들도 변경되는걸까요? 이부분에 대해 설명부탁드립니다!
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
index.html open with live server 관련문의
ESLint, Prettier 강의의 마지막 부분에서, hello Vue3만 남기고 불필요한 것들을 삭제했을 때에, index.html 를 "go live" 로 브라우저가 열리면 웹화면에 아무내용이 없고, (http://127.0.0.1:5500/index.html) 커맨트창에서 npm run dev 를 하면 열리는 웹화면에서는 ( ➜ Local: http://localhost:5173/ ) 'hello Vue3'가 보이는 데 왜 이런 차이가 있는 지 모르겠습니다.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
eslint, prettierr 충돌
초기 세팅을 하던 중 포매팅을 하게 되면 에러가 발생합니다 eslintrc.cjs 파일/* 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', ], env: { 'vue/setup-compiler-macros': true, }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': 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', endOfLine: 'auto', }, ], }, };prettierrc.json 파일{ "$schema": "https://json.schemastore.org/prettierrc", "semi": true, "tabWidth": 2, "singleQuote": true, "printWidth": 80, "trailingComma": "none" }settings.json 파일{ "workbench.iconTheme": "material-icon-theme", "workbench.startupEditor": "none", "files.autoSave": "afterDelay", "editor.fontFamily": "MesloLGS NF", "terminal.integrated.fontFamily": "monospace", // Eslint-settings "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "editor.tabSize": 2, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact", // "html", // 삭제 "vue", "markdown" ], // Prettier-settings "prettier.printWidth": 80, "prettier.tabWidth": 2, "prettier.trailingComma": "all", "prettier.jsxSingleQuote": false, "prettier.semi": true, "prettier.useTabs": true, "prettier.proseWrap": "preserve", "prettier.arrowParens": "avoid", "prettier.singleQuote": true, "prettier.htmlWhitespaceSensitivity": "ignore", "prettier.endOfLine": "auto", "prettier.quoteProps": "as-needed", "prettier.requireConfig": false, "prettier.ignorePath": ".prettierignore", "prettier.bracketSpacing": true, "prettier.requirePragma": false, "prettier.insertPragma": false, "prettier.vueIndentScriptAndStyle": false, "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "explorer.confirmDragAndDrop": false, "explorer.confirmDelete": false, "workbench.colorTheme": "Tokyo Night", "workbench.settings.applyToAllProfiles": [ ], "settingsSync.ignoredExtensions": [ ], "window.zoomLevel": -1 } eslint랑 동일하게 다 설정을 했는데도 오류가 나네요 다시 처음부터 하면서 해도 똑같은 오류가 반복이라 글 남겨 봅니다
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
섹션 5 - Events 강의, v-model computed 생성 문의드립니다
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 강사님. 강의 너무 재밌게 잘 듣고 있습니다. 지금 emit을 다루는 영상 파트를 보고 있습니다. 보다보니 머리가 좀 복잡하긴 한데 쭉 정리를 하다가 문득 궁금한게 있어 질문드립니다.강의에서도 말씀해주셨듯이 v-model을 만들 때 comptued로도 생성할 수 있고, 실습까지도 다 마쳤는데요. 개인적으로 궁금한 부분은 업무에서는 보통 v-model 구현 시 computed를 사용하는지 혹은 :value, $emit 이벤트로 구현하는지 궁금합니다.그리고 상황에 맞게 쓰인다면 어떤 차이점이 있을까요? 감사합니다.