66,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
강의교안 인쇄물로 구매할수는 없나요?
인쇄물로 같이 공부하고 싶어서 문의드립니다 - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
질문드립니다.
vue 파일을 생성하고 vbase-3 입력하면 기본형식이 자동으로 나오잖아요근데 좀 있다 바로 아래처럼 뭔가 소스가 붙어지는데, 삭제도 안되고....어떻게 없애야 하는지요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
EsLint 적용 불가 문의드립니다.
안녕하세요 강의 보고 실습 중, ESLint가 정상 작동하지 않는 것으로 보여문의 드립니다.현재 상황 (버전)npm Version : 9.6.4Vue Version : 3.2.47VsCode Version : 1.77.3설치된 확장 플러그인Auto Rename TagCSS PeekESLintHTML CSS SupportHTML to CSS autocompletionindent-rainbowKorean Language Pack For visual Studio CodeVue Language Features (Volar)Vue VSCode Snippets플러그인 충돌이 발생 할 수 있어, 기존 VS Code 전체 초기화 후 재 설치 하였습니다.강의에 나온 내용으로 .eslintrc.cjs 수정 및 Eslint.validate도 변경하였으며,오타가 있을 수 있어서 노션에 있는 코드를 그대로 복사 붙여 넣기 하였습니다.Format on save 도 체크 해제 되어 있습니다.현재 문제점이라고 생각하는 부분은npm run lint 커맨드 실행 시 PS > npm run lint> learn@0.0.0 lint> eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignoreOops! Something went wrong! :(ESLint: 8.39.0ReferenceError: Cannot read config file: \.eslintrc.cjsError: OfflineAudioCompletionEvent is not defined at Object.<anonymous> (\.eslintrc.cjs:15:70) at Module._compile (node:internal/modules/cjs/loader:1254:14) at Module._extensions..js (node:internal/modules/cjs/loader:1308:10) at Module.load (node:internal/modules/cjs/loader:1117:32) at Module._load (node:internal/modules/cjs/loader:958:12) at Module.require (node:internal/modules/cjs/loader:1141:19) at module.exports [as default] (node_modules\import-fresh\index.js:32:59) at loadJSConfigFile (\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:2562:47) at loadConfigFile (\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:2646:20) at ConfigArrayFactory.loadInDirectory (\node_modules\@eslint\eslintrc\dist\eslintrc.cjs:2856:34)에러가 출력 됩니다.구글 검색하여 npm install eslint 등 추가로 모듈을 설치 하였으나, 실행이 되지 않습니다.이 이외에는 사실상 Error Line, Warn Line 등 소스 코드에 노란 줄이나 붉은 줄은 나오지 않아사용에는 큰 불편함은 없으나, 자동 줄 정렬이 되지 않아 소스가 상당히 지저분하며, 복습 시 소스 분석에 어려움을 겪고 있어 질문 드립니다.항상 좋은 강의 감사드립니다.요약npm run lint 커맨드 사용 불가소스 자체에 붉은 색, 노란 색 줄은 생기지 않으나 코드가 자동 정렬 되지 않음입니다.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
Vue3 입력중 취소시 초기화
초기값이 존재하는 v-model로 연결된 input 태그에 입력중 취소 버튼을 누르면 다시 초기값으로 돌아가도록 만들고 싶은데 이미 반응형 데이터로 연결되어 있어 취소를 눌러도 입력중이던 값으로 저장되어있어요 ㅠㅠ초기값으로 돌아가도록 하려면 어떻게 해야하나요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
vue dev tools
강의를 잘 따라 하고 싶은데, vue dev tools 를 잘 다루지를 못하는거 같아요...반응형을 만들어주고 vue devtools 에서 강사님처럼 연필모양이 안뜰때 어디 메뉴에서 설정을 바꾸는게 있을까요....소스는 그대로 입력을 했는데도...
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
Non-props 속성
강의에서 root element라는 단어를 사용하시는데 제가 제대로 모르는것 같아서 질문드립니다.의미가 지칭하는 것의 태그 말하는 건가요?혹시 번거롭지만 이해를 돕기 위해 구체적인 예시를 들어줄 수 있나요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
퍼블리싱 된 파일을 vue프로젝트로 어떻게 옮겨야 할까요?
안녕하세요. 현재 회사에 재직중인 주니어 개발자입니다. 현재 회사에서 새로운 프로젝트를 개발하게 되었는데 공교롭게도 개발자가 저와 시니어분 밖에 안계시고 시니어분은 저한테 프로젝트를 일임하신 상태신데(시니어분도 vue는 해본 적이 없으십니다.), 프론트엔드단을 vue로 처음 개발하게 되어서 아무래도 혼자서 인터넷을 찾아보는것 보다는 강의를 듣는게 낫겠다 싶어 수강신청 하고 질문드립니다.현재 퍼블리싱 된 파일들이 있는 상태이고, 이것을 vue프로젝트로 옮겨야 되는 상황입니다.일단 css파일과 js파일은 public디렉토리 안에 css디렉토리와 js디렉토리를 만들고 그 안에 파일을 넣은 다음 index.html에 link태그와 script태그로 적용시키고 그 외 html파일에 있는 태그는 페이지별로 vue파일을 만들어서 그 안에 넣어놨습니다. 그런데 이렇게 하니 html과는 다르게 제대로 작동되지 않더군요. 혹시 이렇게 하는게 아닌 따로 적용하는 방법이 있는것인지, 아니면 방법 자체는 맞지만 어딘가 다른곳에서 엇나간것인지 궁금합니다.(참고로 대시보드 페이지를 작성하게 되어서 구글링 해서 찾아본 creative-tim에서 출시한 vue-material-dashboard에서 그래프가 필요하여 해당 vue컴포넌트와 그에 필요한 scss파일을 src-assets에 설치해뒀습니다. 혹시 scss와 적용되었던 css파일이 충돌이 나서 제대로 안되는것인지도 궁금합니다.https://www.creative-tim.com/product/vue-material-dashboard-2 참고사항으로 위에서 말한 creative-tim의 뷰프로젝트입니다.)
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
이런 경우는 어찌해야 할까요ㅡㅡ
뷰 강의중에 탬플릿 문법강좌를 들으면서 입력해보고 있는데요,근데,,,소스를 입력하면 자꾸 자동으로 아래처럼 바뀌어 버리는데 왜 그런걸까요?비주얼스튜디오코드를 사용하고 있구요,<button v-on:click="message = message + '!'">Click!</button><button v-on:click="$event => message = message + '!'">Click!</button>동작은 되는데 이렇게 안 바뀌고 입력한 소스가 그냥 떴으면 좋겠는데...ㅠㅠ
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
강의 소스 빠진 부분 올려주셨으면 합니다.
강의 잘 보고 있습니다.현재 props 강의를 보고 있는데요.AppCard.vue 소스는 자꾸 변경하고 저장되지 않은 상태라내려받은 전체 소스에도 없는 것 같습니다.bootstrap 설치 이전에는 거의 모든 소스가 내려받은 전체 소스에 포함되어 있는데bootstrap 설치 이후엔 강의마다 일부 소스가 빠져 있는 것 같습니다.강의가 완성된지 오래되어 번거로우시겠지만제공해 주실 수 있다면 빠진 소스들을 올려주셨으면 합니다.
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
클래스와 style 바인딩 수업 질문
이 코드에서 34번째줄 toggle 함수를 메서드로 받아와서 template에 있는 8번째줄 클릭 이벤트에 넣을때는 제가 예전에 option API 방식으로 할때는 toggle() 이렇게 작성했습니다. 혹시 composition API 방식은 메서드에서 받아온 함수라도 template에 작성할때 뒤에 () 를 안 붙여도 되나요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
v-model 활용 시 vue 개발자 도구 내 데이터 입력 불가
짐코딩님 안녕하세요, 양방향 바인딩 (v-model) 강의를 듣는 중인데 input 태그에서 v-model 사용시,vue 개발자 도구를 이용하여 자바스크립트 데이터를 변경하려고 할 때 이렇게 오류가 뜨면서 데이터 입력 및 변경이 되지 않습니다. 코드도 다시 확인하고 구글링도 해보았는데 해결책을 못 찾겠어서 질문을 남깁니다 ㅠㅠ 혹시 설정 같은 것이 잘못된 것일까요?
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
computed 강의 질문있습니다.
제가 작성한 코드 55번째 줄에 fullName.value는 당연히 fullName 값이 ref라서 뒤에 .value를 붙여야 하는 것은 이해가 갑니다. 그러나 44번째 줄에서 set(value)안에서 value 가 의미하는 것이 어떤것인지, 무엇을 받아왔는지 궁금합니다.
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
Composition API 강의
코드를 작성할때 마다 eslint(prettier/prettier)이 계속 문제가 생겼다고 뜹니다 너무 많이 떠서 빨간 물결줄도 많고 문제에도 많이 떠서 코드를 쓰면서 어느 부분이 잘 못됐는지 모르겠어요 어떻게 해결하면 될까요?
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
Options API vs Composition API 강의
Options API vs Composition API 강의에서 교안에 있는 코드를 그대로 복붙했을때 Option API에서는 counter button을 눌렀을때 1씩 잘 올라가는데 Composition API 코드를 위에처럼 복붙하고 라이브 서버를 켜서 button을 눌러보면 1씩 안올라가고 아무리 눌러도 계속 counter가 0 입니다.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
npm run dev 했을때 자동 새로고침 문의드립니다.
안녕하세요 강사님강의를 보면 강사님 같은 경우엔editor에서 소스 수정하고 저장하고 웹브라우저에 새로고침하면 바로바로 반영되시던데저는 이상하게 새로고침이나 강력새로고침을 해도반영이 안되고, npm run dev 새로 해줘야 반영되던데저장하면 자동으로 반영되게 어떻게 설정하는지여쭤봐도 될까요???
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
그래서.. 반응형 데이터는 무엇인가요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요.1) 반응형이 아닌 데이터도 쓰이나요? 어떤 목적으로 쓸 수 있나요?2) 반응형이 아닌 데이터도 v-bind할 수 있나요? v-bind와 반응성은 어떤 관계가 있나요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
"v-bind 사용은 해당 데이터가 반응형인지 아닌지에 달려있다"는 이해가 옳은 건가요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요, template refs 수업에서ref="input" :ref="el => itemRefs.push(el.textContent)" 이와 같이, 전자는 v-bind 없이 사용했고, 함수를 ref로 사용할 땐 v-bind를 사용했습니다.이 이유가 무엇일까요? 비슷한 맥락의 의문으로, 자식 컴포넌트에서 정의된 props (ex. props = ['data'])로 데이터를 내려줄 때,부모 컴포넌트의 script에서 선언한 정적인 데이터 (ex. const msg = "message")의 경우는 < ... data="msg" >반응형 데이터 (ex. const msgRef = ref("message")의 경우는 < ... :data="msgRef"> 로 사용하는 것으로 이해하고 있습니다.즉, v-bind의 사용은 데이터가 반응형인지 아닌지에 따라 판단한다..고 이해하고 있는데요, 이게 옳은 이해인가요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
props로 함수를 전달했을 때의 질문입니다!
부모.vue <template> <AnswerForm :postSynopsisDetail="postSynopsisDetail" /> </template> <script> ... methods : { postSynopsisDetail(synopsis) { console.log(this) // 자식에서 호출해도 부모 // 인스턴스로 나오네? }, } },AnswerForm.vue <template> <v-btn @click="postSynopsisDetail(item)" icon="mdi-information-outline" ></v-btn> </template> <script> props: { postSynopsisDetail: Function, },부모 컴포넌트에서 선언한 postSynopsisDetail 이란 함수를 자식 컴포넌트에 props로 전달했습니다. 그래서 자식 컴포넌트에서 호출했는데 this 가 부모 컴포넌트? 인스턴스? (뭐라고 말해야 되나요?) 를 가리키더라구요...그래서 궁금합니다.제가 알기로는 자바스크립트 함수 내부의 this는 화살표 함수가 아니라면 호출 방식(일반 함수, 메서드, 이벤트핸들러)에 따라 결정됩니다. 그렇다면 자식 컴포넌트에서 v-btn을 클릭하면서 호출되는 postSynopsisDetail 은 무엇으로 호출되는 건가요?이벤트 핸들러로 호출되는 거면 this는 이벤트를 바인딩한 요소 v-btn을 가리켜야 된다고 생각하고 메서드로 호출됐다면 this는 해당 메서드를 호출한 객체를 가리키니까 자식 인스턴스?컴포넌트? 를 가리킬 거 같은데 부모 컴포넌트?인스턴스?를 가리키는 이유가 뭔가요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
eslint 세팅 질문 드립니다.
vite로 프로젝트 설치 시, 영상과 다르게 extentsion설치에 대한 문의가 없어 바로 설치를 하였고,eslint의 경우 npm으로 별도 설치 하였더니영상에 보이는 cjs 파일이 보이지 않습니다.rules세팅을 어떻게 해야 할까요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
컴포넌트 이벤트 전파 관련 질문입니다
컴포넌트에서는 이벤트 전파가 안 일어나나요?예를들어 <부모 컴포넌트 @test = "함수1"> <자식 컴포넌트 /> </부모 컴포넌트> 일때 자식.vue의 자식 컴포넌트가 context.emit('test')로 이벤트를 보내면 자식.vue에서 <자식의 자식 @test = "this.$emit('test')/> 안 하고 그냥 <자식의 자식 /> 으로 따로 이벤트를 emit 안해주면 부모.vue의 함수1 이 실행 안되나요?