월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
computed에서 인자 전달방법
안녕하세요 <template> 코드 내에 서 computed에 인자 전달할 방법이있나요? options에선 해보았는데 composions api에선 잘안되가지구요 ,,
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
components.d.ts 자동작성 안됨
해당 플러그인이 먹질 않습니다. 뭐를 잘못했는지 모르겠어요 components.d.ts 자동 작성이안됩니다. 사용하는 익스텐션은 다음과 같습니다.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
cors 에러
strict-origin-when-cross-originapi호출시 위에러납니다. 확장프로그램도 깔아봤지만 해결이 되지 않아 질문드립니다.네이버웨일사용중이며 소스코드는 다음과 같습니다.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
제가 설정 잘못한걸까요?
저는 머든지 설치를 하면 다 오류나서 구글검색해보니 --save --legacy-peer-deps 를 붙여야 되네요.그리고 부트스탭도 선생님 알려주신대로 하면 오류나요.오전 11:42:30 [vite] Internal server error: Failed to resolve import "./bootstrap/dist/js/bootstrap.js" from "src\main.js". Does the file exist? Plugin: vite:import-analysis File: D:/web/withvue/src/main.js:14:22 12 | createApp(App).use(router).use(vuetify).mount('#app'); 13 | 14 | import './bootstrap/dist/js/bootstrap.js'; | ^ 15 | 16 | at formatError (file:///D:/web/withvue/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:39975:46) at TransformContext.error (file:///D:/web/withvue/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:39971:19) at normalizeUrl (file:///D:/web/withvue/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:36839:33) at async TransformContext.transform (file:///D:/web/withvue/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:36972:47) at async Object.transform (file:///D:/web/withvue/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:40228:30) at async loadAndTransform (file:///D:/web/withvue/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:36615:29) 이유가 무었을가요>?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
마무리 개선 changeTitle의 개선이 된 것 같지 않습니다만...
const changeTitle = e => { setTimeout(() => { console.log('update:title'); emit('update:title', e.target.value); }, 500); };이 코드는 타이핑 한 횟수대로 요청을 보내게 되네요. 말씀하신 부분은 디바운스나 스로틀로 해결하는 것이 좋을 것 같아요. 서버에 요청하는 횟수를 줄이는 것이 요점이라고 생각됩니다. 해당 개념에 대해 언급해주시고, 관련된 방법을 제안해주시는 편도 좋을 것 같다고 생각합니다.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
컴포저블 함수 구현에서 초기화 이유?
이부분 초기화 하는 이유가 있을까요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
강의교안 링크로 들어가는데 안나와요
어떻게 해결 할 수 있을까요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
Nested 방식을 쓰고있는데
404 Not Found & 중첩 라우트 적용 파트 공부하고있습니다. 근데 Nested children 해서 NestedOneView 와 NestedTwoView의 내용을 불러올려고 해도 내용이 안뜹니다. 혹시나 싶어 따로 NestedOneView를 자식으로 안쓰고 따로 메뉴를 만들어서 써봤더니 내용이 나옵니다..혹시 제가 다른 라이브러리를 다운 안받아서 그런건가요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
Axios에 posts/${id}에 숫자를 보내서 에러가 발생하는군요
// PostListView.vue <PostDetailView :id="2"></PostDetailView>위 코드에서 id를 숫자값으로 전달하고 있어서 에러 메시지가 노출되고 있는 것으로 보입니다. 수업에서 이를 안내해주시면 좋을 것 같습니다. 인프런 서비스 버그: 글 작성 Editor에 이미지 업로드가 안되는 군요. png 파일 업로드인데, 조치 부탁드립니다.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
$router.replace가 사용되어야 할 상황의 예시가 무엇이 있을까요?
- window.location.replace가 사용되는 사례를 검색해보면 보안상의 이유로 이전 페이지에 접근해서는 안될 상황에 사용하면 적절하다고 설명하는 페이지들을 볼 수 있었습니다. 링크- 관련 질문은 검색에서 나오지는 않네요. 확인부탁드리겠습니다.- 제가 생각해본 사례는 비밀번호 변경 이후 로그아웃을 시켜서 다시 새로운 비밀번호로 로그인하는 정책이 있는 경우입니다. 이 경우에 비밀번호가 바뀌고 로그아웃되어 로그인 페이지에서 뒤로가기로 비밀번호 변경 페이지로 접근할 수 있다면 안되겠죠? 이 경우 $router.replace가 적절하다고 생각했습니다.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
$slots 의 $역할이 뭔가요?
그냥 slots 가 아니고 $slots인 이유가 무엇일까요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
route.id
안녕하세요 슨생님 잘보고있습니다.강의 너무 맛있습니다. parseInt() 말고 es6 문법인 + 를 붙이면 더욱 맛있게 쓸수 있습니다.요로코롬 .. 이미 알고 계실수도 있지만서도 혹시나 공유하는 마음에 올려 보나이다... props: route => { return { id: +route.params.id, }; },
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
router에서 component import하는 방식에 관한 질문입니다
라우터 디렉토리의 index.js에서 컴포넌트를 최상단에서 전부 import하시고, 컴포넌트에서 해당 임포트를 적어주는 것과,component: 여기에서 화살표 함수로 import하는 것의 차이가 있을까요?.? 이전 프로젝트에서 그렇게 하시는 것을 보고 따라서 해보긴했는데, 의미적인 차이를 모르겠어서 질문 남깁니다:))+) 추가적으로, 짐코딩님을 구글링해서 들어가는 페이지에서 들어갈 수 있는 강의교안 페이지에는 코드예제들이 빠져서 보이는 현상이 있는데, 수정이 어려우실까요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
props으로 가져온 반응형 변수 업데이트 이슈
안녕하세요? 항상 좋은 강의 감사드립니다🙂아래와 같은 상황에서 warning이 발생하고 있는데 답변주시면 정말 감사하겠습니다 ㅠㅠ부모 컴포넌트에서 자식 컴포넌트로 prop으로 값을 넘겨줌<ChildVuev-model:my-value="value"/><script setup>import { ref } from "vue";const value = ref("");</script>자식 컴포넌트에서 toRef를 이용하여 반응성을 잃지 않도록 구조분해 할당import { toRef } from "vue";const props = defineProps({myValue: String,});const myValueInput = toRef(props, "myValue");구조분해 할당한 반응형 변수를 자식 컴포넌트 내 text input에 binding. 입력값이 변경되는 경우 emit을 통해 업데이트<input type="text"@input="$emit('update:myValue', $event.target.value)"v-model="myValueInput" />위와 같이 개발을 하니 제가 생각했던대로 동작은 잘 하는데요... 계속 아래와 같은 warning이 뜨고 있습니다 ㅠㅠreactivity.esm-bundler.js:4 [Vue warn] Set operation on key "myValue" failed: target is readonly.강의에서 짚어주신 점들(자식 컴포넌트 내부에서 props 직접변경 X, 반응형을 잃지 않는 구조분해 할당 등)을 제 나름대로 고려했는데 왜 저런 warning이 지속적으로 뜨는 걸까요...?답변주심 정말 감사드리겠습니다 ㅠㅠ +) 혹시 다음 강의 계획은 어떻게 되시나요?
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
post 시 id가 6자리문자열로 들어옵니다
{ "title": "자! 새로운 글입니다!", "content": "희망찬 vue3!", "createAt": 1664546739213, "id": "SJ5GpEi" }16:15id 가 6으로 되지 않고 7자리 문자열로 들어오는 이유를 모르겠습니다.createPost.vue에서마지막 id를 추가로 따로 받아서 +1을 하고 그값을 form값에 포함시켜 post하는 방법도 있겠지만,왜 선생님은 id가 저절로 +1되고, 저는 따로 설정해야 하는 이유를 모르겠습니다. 참고) 제 버전"dependencies": { "axios": "^0.27.2", "vue": "^3.2.38", "vue-router": "^4.1.5" }, "devDependencies": { , "json-server": "^0.17.0", "prettier": "^2.7.1", "vite": "^3.0.9" }
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
vue-router 질문 드립니다.
안녕하세요.기본편부터 정주행하면서 다시 공부하고 있는 뷰린이입니다.이번 강의를 보면서 vue-router를 사용하게 되는데요.router.push({ name: 'user', params: param }) 위와 같이 push에 params를 넣으면 아래와 같은 워닝메세지가 나오고,vue-router.mjs:35 [Vue Router warn]: Discarded invalid param(s) "email", "name" when navigating. See https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22 for more details.이동한 컴포넌트에서 route.params를 꺼내보아도 값이 없더라구요.좀 더 찾아보니, vue-router 버전에 차이로 인해서 발생하는 것 같은데요..(제가 설치한 버전은 4.1.5입니다.)버전을 다운그레이드해서 사용해야 할까요?아니면 latest버전에서 params를 사용하지 않고 다른방법으로 파라미터를 넘겨주는 방법이 있을까요?(Query는 URL 붙기 때문에 지양하고 있습니다..)
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
Micro Front 관련 질문 드립니다.
안녕하세요, 강사님.기본편에 이어 실전편을 완강 하였는데요, 실무에 적용하기 전, 한가지 여쭤볼게 있어 질문 남깁니다.새로 시작하려는 프로젝트를 Micro Front로 구성하기 위해 Webpack5의 Module Federation을 사용하려고 합니다.리액트의 경우에는 관련된 레퍼런스가 많이 나오는데 Vue3와 관련된 레퍼런스는 많지 않은것으로 보아 사용성이 낮은 것 같더라구요...[ 질문 ]현재 실무에서 Micro Front를 많이 사용하는지 궁금합니다.Vue3를 Micro Front로 구성할 경우 Module Federation 외에 다른 방법이 있는지 궁금합니다.Vue3에 안정화된 UI Framework이 있는지가 궁금합니다.( Vuetify or Bootstrap을 사용하려고 하는데, 공식 문서에서는 Beta버전으로 application용으로는 권장하지 않는다고 합니다.) 감사합니다 : )
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
build시 환경변수 설정방법
안녕하세요?.env 파일, .env.development 파일을 생성하여 환경변수를 분리하여 관리하는 방법을 강의에서 가르쳐주셨는데요. import.meta.env.VITE_API_URL 이런 식으로 소스코드에서 가져와서 사용하는 방법도 알려주셔서 잘 이해가 되었습니다. 다만 저렇게 환경변수를 관리하는 방식이 개발중에는 잘 사용하겠는데, vite build시에는 생각한대로 잘 안되네요 ㅠㅠ예를 들어, 강의에서 알려주셨듯(1) .env 파일에 production 환경에서 사용할 환경 변수를 기입하고(2) vite.config.js 파일에서 mode : 'production' line을 추가한 후 build했는데(3) dist 폴더의 build 결과물에서는 .env파일이 아닌 .env.development의 환경변수가 적용되어 있습니다 ㅠㅠ 도움주시면 정말 감사하겠습니다!!
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
글 올리는 방법은 알았는데.
이미지나 파일은 어떻게 올리나요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
save 함수 error, loading ref 할당 질문입니다.
18:14초에 save함수에 사용되는 error, loading을 구조 분해 할당 시 객체에 값을 바로 할당해서 반응형을 잃게 된다고 지적해주셨는데요.useAxios.js에 반환 값이 ref로 반환해서 돼야 하는 것아닌가요?그런데 저장 버튼이 안 바뀌는 것을 보니 안되는 것같긴한데,,, 왜그럴까요?코드({ loading, error } = useAxios(url, config, options));