66,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
emits사용 이유
emits: ['createPost']가 없어도 setup함수에선context를 사용해서, <template>에선 $emit을 사용해서잘 동작하는데 사용하면 달라지는 게 무엇인가요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
eslint 오류표시 질문
Option API / Composition API 수강 내용 후반에lecture폴더로 두개의 .vue 파일을 옮기고App.vue 파일을 새로 생성 후 vbase-3을 하여 초기코드 생성시 Delete ␍eslint 표시가 나오는데 왜 이러는거고 어떻게 없앨수 있나요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
vue devtools 탭이 안나와서 문의 드립니다.
안녕하세요! 강의 잘 듣고 있습니다.어느 순간 부터 vue devtools가 안나오더라고요.. vue.js detected on this page 는 뜨는데 개발자 도구에서는 vue 탭이 갑자기 안보이는 현상이 발생하였습니다.혹시 해결 방법 아실까요?? 크롬 버전 문제라던가..
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
부모 컴포넌트 reload
안녕하세요 실전편 & 기초편 수강 중인 학생입니다. 다름이 아니라 실전편까지의 강의를 듣고 공부차원으로게시판을 혼자 구현중인데요.자식 컴포넌트에서 데이터가 변경되면 부모 컴포넌트를새로고침을 해주고 싶은데 그 부분이 잘 되지 않습니다. emit을 사용해 상태를 변경해도 잘되지 않아 문의 드립니다. 게시물 detail view 내부에 댓글 영역이 자식 컴포넌트로 위치하고 있으며 자식 컴포넌트 내부에서 댓글을 삭제했을 때 부모 컴포넌트인 detail view를 새로고침 하고 싶습니다!
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
reactive( array ) 선언 후 array에 filter를 사용하면 반응이 안되요
let itemsReactive = reactive([ { id: 1, name: '딸기1', check: true }, { id: 2, name: '딸기2', check: true }, { id: 3, name: '딸기3', check: true }, { id: 4, name: '딸기4', check: true }, ]); const deleteItemReactive = id => { let tempItems = itemsReactive.filter(item => item.id !== id); itemsReactive = tempItems; }; const updateItemReactive = id => { let tempItem = itemsReactive.find(item => item.id === id); tempItem.check = !tempItem.check; };위 코드에서 updateItemReactive 함수는 check값이 true, false 바뀌는 것을 확인할 수 있는데deleteItemReactive 함수를 사용하면 반응이 안되고 있습니다.vuejs devtools로 확인해보니까 바뀌기 전에는 ItemsReactive = Reactive이고 배열 안에 요소들은 Object인데 deleteItemReactive 함수를 실행하면 ItemsReactive = Array 이고 배열 안 요소들이 Reactive로 바뀌는 것을 확인했습니다. 왜 이렇게 나오는지 모르겠습니다.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
웹페이지 새로고침 관련 질문
안녕하세요터미널에서 npm run dev하여 코딩 작성하며 강의따라가고 있는데요. 강의처럼 코드변경 후 저장을 해도 화면에 반영이 안되고 npm run dev입력 후 다시 접속해야 반영된게 보입니다.구글링해봤는데 정확한 이유를 못찾아 질문드립니다.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
현시점 기준 수강후기 이벤트 진행중인지 궁금합니다.
수강후기 이벤트 선착순 30명 까지 "Vue.js 3 완벽 마스터 실전편 무료쿠폰"을 받을 수 있는 걸로 알고 있는데 2022년 12월 12일 기준 수강평은 50개여서 끝난줄 알았는데 아직 이벤트 url은 살아 있는 것 같아서(한정된 수량 소진시 자동 종료인데 어떤게 자동 종료가 되는지... url이 없어진다던지, 이벤트 공지가 없어진다는지 헷갈려서요...) 문의 드립니다.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
CSS 적용 이후 메인영역이 상단으로 올라오지 않습니다.
컴포넌트 이해하기 편 7분2초경에 CSS적용이후 메인 영역 컨텐츠가 상단으로 올라오는 모습인데 동일한 css로 적용해도 아래쪽에 머물러 있네요. CSS는 깃에 올라온 소스 그대로 붙여봐도 동일하게 아래에 머물러 있습니다.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
해당 강의자료 스타일가이드
해당 강의자료 스타일가이드https://v3.ko.vuejs.org/style-guide/#avoid-v-if-with-v-for-essential링크가 삭제되었다고 뜨네요 ㅠㅠ참고할만한 링크없을까요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
크롬 Vue 개발자도구가 이상합니다
다음 처럼 F12눌렀을 때 컴포넌트 명이랑 실제 컴포넌트 명이 다른 현상이 발생합니다..강력새로고침해도 똑같구요무슨 일 일까요?ㅠㅠ
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
크롬 뷰 디버깅 모드 관련해서 질문드립니다.
스샷 위치는 LifeCycleHooks 강의이구요!사실 이전부터 디버깅모드에서 반응형 변수 값들이 떴다, 안떴다 할때가 많았었거든요...새로고침 엄청 하다보면 언제는 뜨고 지금은 계속 해도 안뜨고...반응형 변수 값들도 잘 선언 해놨고 리턴도 잘 해놨는데 어째서 디버깅에 안뜨는걸까요ㅜㅜ - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
프로젝트 구성
luka_kim@HY-M1-PRO learn-vue3 % npm run dev > learn-vue3@0.0.0 dev > vite failed to load config from /Users/luka_kim/#Learn/vue3/learn-vue3/vite.config.js error when starting dev server: Error: cannot test case insensitive FS, CLIENT_ENTRY does not point to an existing file: /dist/client/client.mjs at testCaseInsensitiveFS (/Users/luka_kim/#Learn/vue3/learn-vue3/node_modules/vite/dist/node-cjs/publicUtils.cjs:3432:15) at Object.<anonymous> (/Users/luka_kim/#Learn/vue3/learn-vue3/node_modules/vite/dist/node-cjs/publicUtils.cjs:3437:1) at Module._compile (node:internal/modules/cjs/loader:1105:14) at Module._extensions..js (node:internal/modules/cjs/loader:1159:10) at Object._require.extensions.<computed> [as .js] (file:///Users/luka_kim/%23Learn/vue3/learn-vue3/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:62854:17) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18) at Object.<anonymous> (/Users/luka_kim/#Learn/vue3/learn-vue3/node_modules/vite/index.cjs:7:31)강의 극 초반부입니다.시작하자마자 에러가 나니까 의욕이 너무 감소해버립니다 ㅜ몇시간 찾아도 해결이 안되서 문의 남깁니다.도와주세요 ;ㅁ;npm run dev를 하게되면 나타나는 증상입니다.노드버전 : v16.16.0CLI 버전 : 5.0.8 다음은 package.json 입니다.{ "name": "learn-vue3", "version": "0.0.0", "private": true, "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore" }, "dependencies": { "vue": "^3.2.45" }, "devDependencies": { "@rushstack/eslint-patch": "^1.1.4", "@vitejs/plugin-vue": "^3.2.0", "@vue/eslint-config-prettier": "^7.0.0", "eslint": "^8.22.0", "eslint-plugin-vue": "^9.3.0", "prettier": "^2.7.1", "vite": "^3.2.4" } }
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
emit 구현 중 오류
안녕하세요. emit을 구현하던 중 아래와 같은 에러창이 계속 뜨는데 무엇을 잘못했는지 도저히 못 찾겠습니다. 무엇이 문제일까요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
Slot 에서의 data 전달 흐름; 자식에서 부모인데 event 가 아닌이유?
자식 컴포넌트에서 부모로 data 전달 시 event( emit ) 을 사용하는게 대전제( props <-> emit ) 로 이해했습니다.부모에서 자식의 slot 에서 넘겨준 data 를 사용하는데 event 없이 data 를 받을 수 밖에 없어서 였을까요?자식은 정적 컴포넌트이기에 이벤트를 발생 시킬 수 없어서?추가질문으로 props <> emit 관계는 반응형 data 에만 의미가 있을까요? ( 사용자와의 상호작용이 있는 data 같은 것 ) - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
컴포넌트에 대해서
안녕하세요. 강의 잘 들었습니다. 1번 듣고 한번 더 들으며서 복습중인데요,컴포넌트 이해하기 강의에서요,아래와 같이 컴포넌트를 등록하고,app.component("BookComponent", BookComponent); 위에서 컴포넌트 사용한다고 했구요<book-component></book-component>여기서 궁금한 것이 컴포넌트명이 book-comppnent 라고 했는데위에서는 <book-component> 라고 작성을 하는데 ....규칙이 있는건지요아님 아래에서 만든 컴포넌트명을 그대로 작성하면 안되는건지요<BookComponent></BookComponent>사용할땐 대시를 입력하는 규틱인건지...
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
once 와 stop을 같이 사용했을 때
안녕하세요 테스트를 해보던중 이상한점이 있어서 질문 올립니다현재 코드가 위처럼 되어있을 때 테스트를 해보면 처음에 click메소드가 수행되고 .stop으로 인해 bubbling이 수행되지 않는것을 확인했는데 그 다음 클릭시 once로 인해 click은 수행되지 않지만 bubbling이 수행되는 것을 확인했습니다. 제가 이해한대로라면 bubbling도 수행되지 않아야하는 것 같은데 bubbling 수행되는 이유가 궁금합니다
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
반응형기초-readonly 질문
안녕하세요, 반응형 기초-readonly 관련 질문입니다. original을 선언하고, original의 copy를 선언했을 때 copy를 readonly로 하면 copy의 값을 직접적으로 바꿀 수 없다는 점을 이해했습니다. 그런데 original.count++를 하면 original의 count 값만이 아니라 copy의 count 값도 바뀌더라고요. 저는 readonly를 사용한 게 count의 초기값을 보존하기 위해서라고 생각하고(마치 python에서 초기값을 다른 상수에 저장해놓는 것처럼), 어떤 때에도 readonly로 선언된 값은 변경되지 않는 줄 알았는데 original을 사용하니 값이 같이 바뀌어버렸습니다. 값을 고정할 수 없다면 readonly를 왜 사용하는 것인지 궁금합니다.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
이건 뭐가 문제인걸까요
에공 자꾸 질문드려서 죄송해요....오늘 종일 강의 들으면서 잘 따라하고 했는데,setip() 함수 부분 따라서 입력해보고 있는데요,vs코드에서 자꾸 이렇게 표시나는건 왜 그럴까요? 앞전 강의 ESLint, Prettier 이 부분도 다 따라 했습니다.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
이게 맞는건지ㅜㅜ
npm run dev 명령어로 localhost 숫자 뜨면서 브라우저로 바로 실행이 되어야 맞는건지요바로 실행되지않고 매번 브라우저 띄워서 http://localhost:3000 이걸 복사해서 붙이고 있거든요이게 맞는건지.... 또 열려져 있는 브라우저창을 닫으면 그냥 종료가 되는건지요?아님 터미널에서 다른걸 뭘 해야 하는건지요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
질문드립니다.
시작하기에 프로젝트 구성을 잘 따라 했는데요,근데 전 localhost:3000 이라고 나오지 않고 localhost:5173/ 이라고 나오는데 괜찮은걸까요그 주소로 들어가면 화면은 잘 나오긴 합니다.