25%
41,250원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결프로젝트로 배우는 Vue.js 3
computed 와 검색 기능 추가 질문드려요.
computed 와 검색 기능 추가 영상 보면서 힘든 부분이 있어 작성해 보았습니다.- filteredTods = computed() => {~~~}searchText 를 변경했다고, 해당 computed가 작동하는 이유를 알고 싶습니다.- todos Add 하는 작업에서는 어째서,filteredTods = computed() => {~~~} 가 작동하지 않는 이유도 알고 싶습니다.- 결국 filteredTods = computed()에 정확한 이벤트 타이밍을 알고 싶습니다.[내가 원치 않는 곳에서 작동하면 안되니까]
- 미해결프로젝트로 배우는 Vue.js 3
[33강] pagination2 numberOfPages 호출
const numberOfPages = computed(() => { console.log(numberOfTodos.value); return Math.ceil(numberOfTodos.value / limit.value); }); const getTodos = async () => { try { const res = await axios.get( `http://localhost:3000/todos?_page=${currentPage.value}&_limit=${limit.value}` ); numberOfTodos.value = res.headers["x-total-count"]; todos.value = res.data; } catch (err) { console.log(err); error.value = "Something went wrong."; } }; getTodos(); return { todos, addTodo, toggleTodo, deleteTodo, searchText, filterTodos, error, numberOfPages, }; 이렇게 값을 호출하는데 처음 호출할때 numberOfTodos.value 값이 undefained 값으로 호출되면서 v-for문 돌릴때 오류가 나게 되는데 호출이 2번되면서 첫번째는 오류 두번째는 정상 작동되게 되는데 2번 호출되는 이유를 알수 있을까요? 또, numberOfTodos.value 여기 값이 첫번째 호출될때 값이 안들어오 return 할때 마지막에 리턴되서 getTodos() 함수가 호출되고 나주엥 호출되는데 값이 왜 안들어 오는지도 궁금합니다.
- 미해결프로젝트로 배우는 Vue.js 3
리렌더링 관련 질문
강사님 안녕하세요. 우선 좋은 강의 만들어주셔서 감사합니다.현재 axios 및 json-server 패키지 사용하여 데이터베이스 연동 부분을 작업 중인데 CRUD 작업에 따라 todos 라는 전역 배열에 값을 갱신하는 게 조금 어색하게 느껴져서요. 이유는 조회를 통해 배열의 값을 가져오게 되고 이후 추가, 수정(완료 여부 표시), 삭제에 대해서도 결국 데이터베이스에 요청을 통해 이뤄지기 때문에 갱신 이후의 결과를 조회를 통해 다시 가져와서 사용하게 되니 deleteTodo 같은 메서드 작업 이후에 todos 배열에 대해서도 직접적으로 배열 내 요소를 삭제하는 게 어색하게 느껴졌습니다. 그래서 개인적으로 코드를 단순히 API 통신만 진행하는 방향으로 코드를 짜보고 있었는데 이럴 경우 통신 이후에 갱신된 결과를 불러오기 위해 리렌더링이 되어야 할 것 같더라고요. 혹시 관련해서 정보를 좀 얻을 수 있을까요? 추가적으로 제가 느낀 어색함이 타당한 어색함인지 궁금합니다. 실제로 개발한다고 할 때도 deleteTodo 같은 메서드 내에서 서버로 삭제 요청을 보내는 작업과 전역 배열 변수에 대한 갱신 작업의 이중 작업이 이루어지는 걸까요? 만약 그렇지 않다면 제가 생각한 해결책은 리렌더링이었는데 어떤 방식으로 보완할 수 있는지 궁금합니다. 좋은 강의 감사합니다.
- 미해결프로젝트로 배우는 Vue.js 3
배포 관련 질문드립니다.
안녕하십니까 강사님!좋은 수업 잘 듣고 있습니다.다름이 아니라 배포에 관련해서 질문이 있습니다.SpringBoot 로 백엔드를 만들고Vuejs로 프론트 서버를 돌리려고 합니다.각각 다른 EC2 인스턴스로 배포하려고 합니다.우분투 환경에서 vuejs는 어떻게 배포가 가능한지 궁금합니다. 구글링해보니 nginx를 사용하는 방법이 있고,nodejs와 함께 사용하는 경우도 있었습니다.어떤 방식이 많이 쓰이는지도 궁금합니다. 우분투에 SSH로 접속하여npm run serve를 하니 접속은 가능하지만 로딩이 계속 걸려있었습니다.배포는 무조건npm run build를 통해서만 해야하는지도 궁금합니다! 긴 질문 읽어주셔서 감사합니다!
- 미해결프로젝트로 배우는 Vue.js 3
30강 질문드립니다.
delete 버튼과 check box 클릭시 작동은 되지만 console에서는 경고창이 뜨는데 왜 이런걸까요?
- 미해결프로젝트로 배우는 Vue.js 3
ref 와 reactive
안녕하세요 강사님!강사님께서 todos를 ref로 선언하고 사용하셨습니다.오브젝트나 리스트는 reactive를 사용해보고싶어 DB데이터 맵핑 전까지는 모든 todos뒤에 value를 붙이지 않고 진행했습니다. axios 의 get으로 데이터를 가지고오니'''todos = res.data;'''에서 데이터를 가지고오긴 하는데 값이 화면에 표시되지 않습니다.ref일 경우'''const todos = ref([])...todos.value = res.data'''reactive일 경우'''const todos = reactive([])...todos = res.data'''이렇게 이해했는데 값의 표시가 안되는 이유가 무엇일까요?
- 미해결프로젝트로 배우는 Vue.js 3
문의드려요~
어제 강의 신청해서 동영상 강좌 듣기시작했는데오늘 회사에 와서 개발중인 프로젝트 vue버전을 확인해보니 2.6이네요~ ㅜㅜvue2랑 vue3 이랑 많이 차이가 날까요??
- 미해결프로젝트로 배우는 Vue.js 3
25강 json-server 설치 질문드립니다.
json-server 설치 후 강의처럼 입력했는데강의처럼 localhost:3000/todos 가 아닌 다른 링크들이 만들어져서 강의처럼 안보이는데 이런경우는 어떻게 해결하나요?http://localhost:3000/todos 를 직접 쳐서 들어가면 이런 식으로 404에러가 떠서 강의 예제처럼 보여지지 않습니다
- 미해결프로젝트로 배우는 Vue.js 3
33강 pagination 에서 질문이 있습니다
안녕하세요.33강 pagination 2 듣는 중에 궁금한 점이 생겼는데요.6:50초 쯤에 class="page-item" 을 class="page-item active" 로 변경하니 전체 페이지 버튼이 파랗게 되는 것을 보여주셨었는데요.이걸 현재 페이지만 파랗게 보이게 하려고class="page-item":class="currentPage === page? : 'active' : '' "와 같이 지정해주신 걸 봤습니다.조건은 이해했는데, 조건이 충족되서 :class='active' 가 되면 class 가 "page-item active" 로 바뀐다는게 이해가 잘 안되서요.구글링을 해도 뭐라 검색해야할지 잘 모르겠어서 답이 안나오네요.동일한 이름으로 바인딩을 해주면 접미사로 자동으로 붙는 건가요??
- 미해결프로젝트로 배우는 Vue.js 3
40강 수강 중 에러가 떠서 질문 드립니다 !! ㅠㅠ
40강 이전까진 순조롭게 진행 중이였는데 구글링도 해보고 했는데도 해결이 잘 안 되서 질문 드립니다... ㅠㅠ수업 내용을 따라서 한 결과, 화면은 일단 이렇게 뜹니다 !!그래서 무엇이 문제일까 곰곰히 또 생각을 하며 영상을 몇번 돌려보았는데, Terminal 에 npm install vue-router@4 입력 시이렇게 뜨는게 혹시 문제가 되는건가요?? WARN 으로 도배가 되는군요... ㅠㅠㅠㅠ그리고 저와 비슷한 에러가 뜬 분의 질문 답변을 따라서이것도 try 해보았는데 안 되었습니다 !!도와주세요 ㅠㅠㅠㅠ
- 미해결프로젝트로 배우는 Vue.js 3
메인화면에서 로고
메인화면 네브바에 로그를 박아 놓았는데 단일컴포넌트로 들어가면 로고가 잘 뜨는데 자식이 여러개달린 부모컴포넌트로 들어가면 로고가 에러가 뜹니다ㅠㅠ... import로 선언을 해야할지..저좀 도와주세요 쌤 ㅠㅠ
- 미해결프로젝트로 배우는 Vue.js 3
검색기능
필터에 내용 입력시, 검색된 리스트를 보여줌과 동시에 화면이 맨 위로 올라가는 현상이 있는데 이건 어떻게 막을 수 있나요?
- 미해결프로젝트로 배우는 Vue.js 3
Composition API 사용한 파일 mixins
안녕하세요 강사님, 강의가 vue3 프로젝트를 구축하는데 많은 도움이 되고 있습니다! :) 강의를 아직 다 보진 못했지만 질문이 있는데요, 혹시 composition api setup()를 사용해서 만든 파일은 mixins 가 안되는건가요? mixins로 가져올 js파일에 setup() 내의 onMounted가 실행이 안되고 return 한 함수를 불러올 수 없어서요. 감사합니다.
- 미해결프로젝트로 배우는 Vue.js 3
에러 질문입니다 !
안녕하세요 코지코더님 ! 유튜브 부터 시작해서 코지코더님의 Vue 강의를 완강한지 어언 3달째 입니다. 다름이 아니라 오랜만에 소스코드를 확인해보고 싶어서 실행해 보았더니 분명 처음 완강했을 당시에는 잘 동작했는데 오랜만에 돌려보니까 사이트는 잘 접속 되는데 데이터는 연결되지 않고 오류가 발생하여 몇 시간 가까이 구글링을 해보았지만 소득이 없어 결국 여기까지 돌아오게 되었네요 Failed to load resource: net::ERR_CONNECTION_REFUSED -> npm run serve 입력 후 사이트가 실행되고 몇 초 후 발생하는 에러 POST net::ERR_CONNECTION_REFUSED -> Create Todo를 이용하여 Todo를 생성했을때 뜨는 에러 GET net::ERR_CONNECTION_REFUSED -> Todo 생성 실패 후 To-Do List로 넘어온 후 실행되는 에러 혹시 어떤 문제인지 또 어떤 방법을 사용하여야 오류를 고칠 수 있을지 싶어서 질문 남깁니다 !
- 미해결프로젝트로 배우는 Vue.js 3
ref, reactive
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. ref로 객체를 관리하면 단점이 있을까요?
- 미해결프로젝트로 배우는 Vue.js 3
강의 화면에 보이는 우측 console 화면은 어떻게 보는건가요???
강의 화면에 보이는 우측 console 화면은 어떻게 보는건가요??? vs 에서 보는건가요? 아님 npm run serve 해서 크롬창 띄우고 검사해서 콘솔 보는건가요??
- 미해결프로젝트로 배우는 Vue.js 3
watch 내의 첫번째 값
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있ㅈ는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. watch 의 첫번 째 인자로 감시할 타겟을 설정해주셨는데 5분 39초에는 화살표 함수 안에 return으로 6분 14초에는 그냥 어레이에 감싸주셨는데 차이가 뭔가요?
- 미해결프로젝트로 배우는 Vue.js 3
[55강 메모리 누수 관리] toast timer clear 오류
코지코더님 안녕하세요.양질에 강의에 감사드리며, 55강을 듣다가 2가지 의문점이 생겨 문의 드립니다. 질문1) toastTimer가 삭제되지 않는 현상 onUnmounted hook에서 toastTimer를 삭제하는 로직의 동작이 강의 내용과 상이하여 문의 드립니다. 강의와 동일하게 소스를 작성하였는데, 콘솔을 보면 onUnmountedtimeout 이 출력됩니다. timeout이 출력되지 않아야 맞는 동작인 것 같은데 왜 clear 되지 않는 걸까요? _id.vue 전체 소스는 하단에 첨부하였습니다! const toastTimer = ref(null); const triggerToast = (message, type = 'success') => { toastMessage.value = message; toastType.value = type; showToast.value = true; toastTimer.value = setTimeout(() => { console.log('timeout'); toastMessage.value = ''; toastType.value = ''; showToast.value = false; }, 3000); }; onUnmounted(() => { console.log('onUnmounted'); clearTimeout(toastTimer.value); }); 질문2) timer 변수에 ref를 사용하지 않아도 되는가? 강의에서 const toastTimer = ref(null); 과 같이 timer를 담는 변수에도 ref로 감싸셨는데요,ref로 감싸지 않고 let 으로 선언하면 안 되나요? ---- <template> <h2>To-Do Page</h2> <div v-if="loading">Loading...</div> <form v-else @submit.prevent="onSave"> <div class="row"> <div class="col-6"> <div class="form-group mb-2"> <label class="my-2">Todo Subject</label> <input type="text" class="form-control" v-model="todo.title"> </div> <button type="button" class="btn btn-outline-dark">Cancel</button> <button type="submit" class="btn btn-primary ms-2" :disabled="!todoUpdated" @click.stop="onSave" >Save</button> </div> <div class="col-6"> <div class="form-group"> <label class="my-2">Status</label> </div> <button type="button" class="btn btn-primary" :class="statusBtnClass" @click="toggleTodoStatus" >{{ statusBtnLabel }}</button> </div> </div> </form> <Toast v-if="showToast" :message="toastMessage" :type="toastType"></Toast> </template> <script> import { useRoute } from 'vue-router'; import { ref, computed, onUnmounted } from 'vue'; import _ from 'lodash'; import { getTodoItem, putTodoItem } from '@/api'; import Toast from '@/components/Toast.vue'; export default { setup() { const route = useRoute(); const todoId = route.params.id; const todo = ref(null); const originTodo = ref(null); const loading = ref(true); const showToast = ref(false); const toastType = ref('success'); const toastMessage = ref(''); const toastTimer = ref(null); const triggerToast = (message, type = 'success') => { toastMessage.value = message; toastType.value = type; showToast.value = true; toastTimer.value = setTimeout(() => { console.log('timeout'); toastMessage.value = ''; toastType.value = ''; showToast.value = false; }, 3000); }; onUnmounted(() => { console.log('onUnmounted'); clearTimeout(toastTimer.value); }); const getTodo = async () => { try { const res = await getTodoItem(todoId); todo.value = res.data; originTodo.value = { ...res.data }; loading.value = false; } catch (err) { triggerToast('Error occurred!', 'danger'); } }; const statusBtnClass = computed(() => (todo.value.done ? 'btn-success' : 'btn-danger')); const statusBtnLabel = computed(() => (todo.value.done ? 'Completed' : 'Incompleted')); const toggleTodoStatus = () => { todo.value.done = !todo.value.done; }; const todoUpdated = computed(() => !_.isEqual(todo.value, originTodo.value)); const onSave = async () => { try { const { data } = await putTodoItem(todoId, todo.value); originTodo.value = { ...data }; triggerToast('Successfully saved!'); } catch (err) { triggerToast('Error occurred!', 'danger'); } }; getTodo(); return { todo, loading, statusBtnClass, statusBtnLabel, toggleTodoStatus, todoUpdated, onSave, showToast, toastMessage, toastType, }; }, components: { Toast, }, }; </script> <style scoped> </style>
- 미해결프로젝트로 배우는 Vue.js 3
각 강의별 코드소스는 없는건가요?
각 강의별 코드소스는 없는건가요? 깃허브에는 없는거 같네요..
- 미해결프로젝트로 배우는 Vue.js 3
value ... 관련.. 급해서..자꾸 올리네요 ㅠㅠ 죄송합니다..
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인 코드를 app,vue 에 넣으면 밑줄이 생기네요.. 밑줄 없는거는 제가 html 로 따로 연습할려고 옮겨놔서 밑줄이 없어진거네요.. 답변좀 부탁드려도 될까요...ㅜㅜ밤새서..봤는데 .ㅠㅠ..프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.