25%
41,250원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결프로젝트로 배우는 Vue.js 3
value 에 밑줄이 자꾸 생기네요..
-영상하고 다 똑같이 코딩을 했는데... todos.value.push 등 value 가 들어가있는곳은 다 밑줄이 쳐져있고 for 문 작성하신것도 따라 적었는데.. 박스안에 글자를 넣어도 추가로 투두리스트가 생겨나질 않습니다... 아 그리고 전 부트스트랩 안쓰고 뷰티파이제이에스 쓸거라 클라스에 꾸며주는건 안넣었습니다...ㅠ 급한데 답변좀 부탁드려요
- 미해결프로젝트로 배우는 Vue.js 3
40강 vue router문의
안녕하세요 강의 듣고 있는데 eslint문제인지 계속 /Users/파일경로/test123/vue3/src/pages/todos/index.vue 1:1 error Component name "index" should always be multi-word vue/multi-word-component-names eslint오류같은데 어떻게 처리해야할까요? eslint관련된 js파일 추가하라는 얘기가 있어서 다 넣어서 해봐도 해결이 안되어서 다시 롤백해서 하고있는데 어떻게해야할까요 ㅠㅠ?
- 해결됨프로젝트로 배우는 Vue.js 3
강의내용은 아니지만 vue에 대해 질문합니다
1. 템플릿을 만들때 아래내용대로 만들었습니다 <template> <div class="xNode" id="lawcurtree"> <div class="curNode"> <img id="d0imgtree" class="inline-block" src="/image/tree/base.gif"> <span class="lawmark">법률</span> <div class="inline-block hover:text-blue-500" @click="viewContents('A0000000887Z1817620210518')">일반상식</div> </div> <div id="b0imgtree" style="display: block;"> <div class="curNode"> <img id="c1imgtree" class="inline-block" src="/image/tree/minus.gif" @click="displayOnOff('b1imgtree', 'c1imgtree')"> <img id="d1imgtree" class="inline-block" src="/image/tree/folderopen.gif"> <span class="lawmark">시행령</span> <div class="inline-block hover:text-blue-500" @click="viewContents('A0000001009Z3213020211119')">일반언어</div> </div> </div> </div> </template> 위내용을 vue파일에 직접 edit하여 컴파일후 실행시키면 잘 동작을 합니다(특히 event부분) 그런데 위내용을 database table에 저장한후 어떤 버튼에 의해 db로 부터 읽어 (tdata변수에 저장) <div > <p v-html="tdata"></p> </div> v-html로 넣으면 모양을 제대로 나옵니다 하지만 @click event를 동작시키면 실행이 되지를 않습니다 원인을 찾다보니 컴파일이 안되어서 그런것 같기도하구 약 1주일 정도 헤메고 있습니다 조언 부탁드립니다
- 미해결프로젝트로 배우는 Vue.js 3
emits 문의 드립니다.
안녕하세요... emit 을 사용할 때 emits 속성은 반드시 작성해야 하는 건가요? vue3 부터 추가되었다고 하는데 emits 속성의 명확한 기능과 사용 필요여부가 궁금합니다.
- 미해결프로젝트로 배우는 Vue.js 3
안녕하세요 44강 듣는중에 질문드립니다
안녕하세요 제가 44강 파일 듣다가 똑같이 코드작성해 봤는데 에러가떠서 코드파일 도바꿔보고 계속해봤는데도 에러가 뜨네요 Node.17.8.0버전 쓰고 있습니다 npm run serve 돌리면 이렇게 뜨네요
- 미해결프로젝트로 배우는 Vue.js 3
체크시 클래스바인딩 각각 하려면
목록을 여러개 Add 시키고 체크를 하면 전체다 클래스가 들어가는데 각각 한개씩 클래스가 적용되게 하려면 어떻게 해야 할까요? 혹시 강의를 더 들어보면 이에 대해 해결법이 나올까요?
- 미해결프로젝트로 배우는 Vue.js 3
Vue Router
아래 의 hello를 작성해도 화면에 hello가 display되지 않습ㄴ디ㅏ. <template> hello <router-view/> </template> <script> export default { } </script> <style> </style> navbar도 display 되지 않습니다. 깃헙 소스 코드: https://github.com/kossiecoder/vue3-basic/tree/42 에서 source를 download받아서 실행해도 display가 되지 않습니다.
- 미해결프로젝트로 배우는 Vue.js 3
import {useRouter}from 'vue-router' 문의 합니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. import {useRouter}from 'vue-router' const router = useRouter; const moveCreatePasge = () =>{ router.push('/todos/create') } ========= vs ============ import router from '../../router const moveCreatePasge = () =>{ router.push('/todos/create') } import {useRouter}from 'vue-router' 와 mport router from '../../router 의 차이점이 있는가요? 차이점이 없다면 어떤걸 사용하는게 더 나을까요? useRouter import도 하고 setup에 등록도해야 하고 router 는 import 만 하고 사용해도 되는데 어떤걸 사용해야 될지 궁금합니다.
- 미해결프로젝트로 배우는 Vue.js 3
placeholder 유지
분명 코드는 똑같은 것 같은데 리스트를 하나 입력하면 왜 입력input창에 "Type new To-Do"가 안뜰까요...? ㅠㅠ <template> <div class="container"> <h2>To-Do List</h2> <form @submit.prevent="onSubmit"> <div class="d-flex"> <div class="flex-grow-1 mr-2"> <input class="form-control" type="text" v-model="todo" placeholder="Type new To-Do" > </div> <div> <button class="btn btn-primary" type="submit" > Add </button> </div> </div> <div v-show="hasError" style="color: red"> This field cannot be empty </div> </form> <div v-for="todo in todos" :key="todo.id" class="card mt-2" > <div class="card-body p-2"> <div class="form-check"> <input class="form-check-input" type="checkbox" v-model="todo.completed" > <label class="form-check-label"> {{ todo.subject }} </label> </div> </div> </div> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const todo = ref(''); const todos = ref([]); const hasError = ref(false); const onSubmit = () => { if (todo.value === '') { hasError.value = true; } else { todos.value.push({ id: Date.now(), subject: todo.value, completed: false, }); hasError.value = false; todo.value = " " } }; return { todo, todos, onSubmit, hasError, } } } </script> <style> .name { color: red; } </style>
- 미해결프로젝트로 배우는 Vue.js 3
route 갯수가 많을때 처리하는 방법
안녕하세요 45강에 보면 route추가가 있는데 여기에서 프로그램 내용은 아래와 같습니다 const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', name: 'Home', component: Home }, { path: '/todos', name: 'Todos', component: Todos }, { path: '/todos/:id', name: 'Todo', component: Todo } ] }); 현재 routes수가 3개인데 이게 50개정도가 되면 분리를 해야할것으로 판단되는데 어떻케 분리를 할수가 있나요 수고하세요
- 미해결프로젝트로 배우는 Vue.js 3
bootstrap5에서는 ml, mr이 없어지고 ms, me로 바뀐건가요?
강사님과 똑같이 mr-2로 마진right를 주려는데 계속 안먹어서 찾다보니 me(margin-end)로 하니까 먹어서요...
- 미해결프로젝트로 배우는 Vue.js 3
{ id: 1, subject: "휴대폰 사기", completd: false },
{ id: 1, subject: "휴대폰 사기", completd: false }, 위 처럼 작성된 코드를 강사님 처럼 자동으로 아래처럼 바꾸고싶은데 어떻게 하는지 검색을 해도 잘 모르겠어요... vscode 사용하고 있습니다. {. id: 1, subject: "휴대폰 사기", completd: false },
- 미해결프로젝트로 배우는 Vue.js 3
npm run serve 사용시 에러 발생 합니다
프로그램 따라하면서 하기와 같은 에러가 발생합니다 혹시 몰라서 Git에 있는 자료를 down 받아 사용해도 에러는 동일하게 발생합니다 에러 내용 > vue3-project@0.1.0 serve > vue-cli-service serve INFO Starting development server... 98% after emitting CopyPlugin WARNING Compiled with 1 warning 오후 6:31:32 warning in ./src/components/TodoList.vue?vue&type=script&lang=js "export 'useContext' was not found in 'vue' App running at: - Local: http://localhost:8080/ - Network: http://192.168.0.10:8080/ Note that the development build is not optimized. To create a production build, run npm run build. 이 에러는 1. import { useContext } from 'vue'; 을 사용하는 시점부터 나왔습니다 2. 프로그램은 git에 나온 내용을 그대로 copy하여 사용하였기 때문에 프로그램 edit에러는 없을것으로 추정 3. 차이점이라고는 package.json에서 vue-router 버젼이 본인 PC에는 4.0.12이고 강사 깃자료를 보면 4.0.4로 차이가 있습니다 4.0.12버젼을 삭제하고 4.0.4로 설치할려고 했으나 실패하여 현재는 4.0.12 입니다 위에러 해결방안에 대해 검토 해주시기 바랍니다 수고하세요
- 해결됨프로젝트로 배우는 Vue.js 3
라우터 40강 <router-view/> 관련 질문 입니다
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 강의를 듣다가 40강에서 <router-view/> 를 넣었는데 빈 화면이 나오는 오류가 발생하였습니다 구글링도 해보고 강의 게시판에서 검색도 하였으나 해결방법을 찾지못하여 이렇게 질문을 드려봅니다 강의를 3번씩 따라서 해보아도 같은 오류가 나왔습니다 감사합니다 콘솔에서 보이는 오류를 사진첨부하였습니다
- 미해결프로젝트로 배우는 Vue.js 3
문의드립니다.
v-for를 이용하여 input datalist를 작성하였습니다. datalist에서 선택한 항목의 value와 index를 모두 반환받으려고 하는데 v-model을 사용하니 value만 반환이 되네요.
- 미해결프로젝트로 배우는 Vue.js 3
ref 로 선언한 변수 접근 방식
안녕하세요~ ref 로 선언한 변수 접근할 때 value 를 붙일 때가 있고 안붙일 때가 있는데요 html 영역에서는 안붙이고, javascript 영역에서는 붙이는 건가요? 그런데, watch 에서는 value를 안붙이네요.. .value 를 언제 해야 하는지 정리해 주시고, 이유도 설명 부탁드립니다.
- 미해결프로젝트로 배우는 Vue.js 3
질문이 있습니다!
안녕하세요! 좋은강의 정말 감사합니다. 질문이 있어 글을 남깁니다. getTodos 에서 const res = await axios.get( `http://localhost:3000/todos?subject_like=${searchText.value}&_page=${page}&_limit=${limit}` );여기서 왜 searchText는 .value를 붙이고 page나 limit는 안붙이는지 모르겠습니다!감사합니다!
- 미해결프로젝트로 배우는 Vue.js 3
Vue3 swiper 라이브러리 사용하기가 힘듭니다.
하루종일 헤매네요 vue3 청강후 vue3로 사이트 개발중입니다. 퍼블리셔가 swiper 사용하여 만든디자인을 vue3에서 사용하려니 안돼네요. vue-swesome-swiper은 vue3가 지원이 안되는거 같고요~ㅠㅠ swiper 공식사이트 (https://swiperjs.com/vue) 에가서 시키는대로 설치하고 코딩하였는데 빌드시 오류가 납니다. 오류내용 ERROR Failed to compile with 2 errors 오후 6:08:44 These dependencies were not found: * swiper/css in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/pages/index.vue?vue&type=script&lang=js * swiper/vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/pages/index.vue?vue&type=script&lang=js To install them, you can run: npm install --save swiper/css swiper/vue 고수님들 이유를 알수 있을까요 ?
- 해결됨프로젝트로 배우는 Vue.js 3
vuex 에서 type을 전달받지 못합니다.
github clone 으로 해도 똑같이 나오네요.. 무조건 성공으로 나오고 값을 다 지우고 전달 받는지 콘솔로 찍어보면 그냥 언디파인드만 나옵니다. 영상 마지막에서 값을 다 바꾸시고 failed 경우는 안보여주는데 혹시 확인 해 주실 수 있나요?
- 미해결프로젝트로 배우는 Vue.js 3
useContext가 deprecated 경고가 나오는데 대신 쓸수있는게 있나요?
강의중 나오는 useContext를 이용해 emit을 가져오는 코드가 <script> import { useContext } from 'vue'; export default { setup() { const { emit } = useContext(); const onClick = (page) => { emit('click', page) }; return { onClick } } } </script> 크롬 콘솔창에서 경고가 아래와 같이 나오네요 runtime-core.esm-bundler.js?5c40:38 [Vue warn]: `useContext()` has been deprecated and will be removed in the next minor release. Use `useSlots()` and `useAttrs()` instead. useContext()이 deprecated 된다고 나오는데 useContext대신 useSlots(), useAttrs()을 어떻게 활용해야는지 궁금합니다.