월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
headers에 값이 들어오지 않아요.
예전에 한번 완강 하고 오랜만에 다시 듣고있는데예전에는 잘 됐던 headers 부분에서 막히네요.. 이렇게 작성했고이렇게만 들어오고 있어요.페이로드입니다!이상하게 sort, order도 안먹히고 (정렬안됨)_limit 3만 적용돼서 리스트에서 3개씩 보이기는 하는데또 headers에는 값이 안들어오네요.. 어떻게 확인해서 고칠 수 있을까요..?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
질문있습니다!
안녕하세요 짐코딩님! 기본부터 실전편까지 완강하고 실무에 적응중입니다! 강의와는 상관없는 내용이지만 궁금한게 있습니다!현재 실무에서 드롭다운 여러개를 클릭 하여 form에 업데이트해서 업로드 하는 기능과 페이지를 구현하고 있습니다. 제가 강의를 좀 급하게 들어서 기억을 잘 못하는건지, 아직 실력이 부족해서 watch문으로 form을 관리하고 있는데요.예를들면,watch(([data1, data2, data3..]), ([newData1, newData2,newData3...]) => {if(newData1 && newData2 && newData3) { formData.value => { ...formData, data1 = newData1, data2 = newData2, ... } }}, {immediate: true, deep: true})대략 이런 느낌입니다..! 근데 감지해야할 데이터의 수가 10개가 넘어가면서 코드 퀄리티가 떨어진다고 느끼고있는데, 도통 어떻게 개선해야할지 모르겠습니다.. 그리고 찾아보니 watch문을 많이 사용하면 좋지 않다고 하던데,,ㅠㅠ 저는 거의 모든 코드가 watch문을 사용하고 있었는데,, 최대한 computed로 대체하는게 좋을지도 궁금합니다,,강의와는 연관없는 질문이지만, 저에겐 짐코딩님이 vue 1타 강사님이시기 때문에..ㅎㅎ 어떻게 리팩토링하는게 좋을지 조언 좀 부탁드리겠습니다..😭
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
RouterLink와 router.push()
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 어떨 때 RouterLink를 사용하고, 어떨 때 router.push를 사용해야하나요?? 두 개의 기능이 똑같아보이는데, 404에서는 RouterLink를 사용하신 이유가 궁금합니다
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
페이징 구현 질문드려요!
페이지 구현을 모두 완료했지만 게시글이 나오지 않습니다.여기저기 찾아봐도 알 수가 없네요.뭔가 문제인 건가요?.. Axios API, 컴포넌트 매핑도 확인했고 dev서버, db서버도 모두 확인했습니다. { path: '/posts', name: 'PostList', component: PostListView, },import axios from 'axios'; export function getPosts(params) { return axios.get('http://localhost:5000/posts', { params }); }// PostListView.vue <template> <div> <h2>게시글 목록</h2> <hr class="my-4" /> <form @submit.prevent> <div class="row g-3"> <div class="col"> <input v-model="params.title_like" type="text" class="form-control"> </div> <div class="col-3"> <select v-model="params._limit" class="form-select"> <option value="3">3개씩 보기</option> <option value="6">6개씩 보기</option> <option value="9">9개씩 보기</option> </select> </div> </div> </form> <hr class="my-4" /> <div class="row g-3"> <div v-for="post in posts" :key="post.id" class="col-4"> <PostItem :title="post.title" :content="post.content" :createdAt="post.createdAt" @click="goPage(post.id)"> </PostItem> </div> </div> <nav class="mt-5" aria-label="Page navigation example"> <ul class="pagination justify-content-center"> <li class="page-item" :class="{ disabled: !(params._page > 1) }"> <a class="page-link" href="#" aria-label="Previous" @click.prevent="--params._page"> <span aria-hidden="true">«</span> </a> </li> <li v-for="page in pageCount" :key="page" class="page-item" :class="{ active: params._page === page }"> <a class="page-link" href="#" @click.prevent="params._page = page">{{ page }}</a> </li> <li class="page-item" :class="{ disabled: !(params._page < pageCount) }"> <a class="page-link" href="#" aria-label="Next" @click.prevent="++params._page"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> <hr class="my-5" /> <AppCard> <PostDetailView :id="1"></PostDetailView> </AppCard> </div> </template> <script setup> import PostItem from '@/components/posts/PostItem.vue'; import PostDetailView from './PostDetailView.vue'; import AppCard from '@/components/AppCard.vue'; import { getPosts } from '@/api/posts'; import { ref, watchEffect } from 'vue'; import { useRouter } from 'vue-router'; import { computed } from '@vue/reactivity'; const router = useRouter() const posts = ref([]) const params = ref({ _sort: 'createdAt', _order: 'desc', _page: 1, _limit: 3, title_like: '' }) // Pagination const totalCount = ref(0) const pageCount = computed(() => { Math.ceil(totalCount.value / params.value._limit) }) const fetchPost = async () => { try { const { data, headers } = await getPosts(params.value); posts.value = data; totalCount.value = headers['x-total-count'] } catch (error) { console.error(error) } } watchEffect(fetchPost) const goPage = (id) => { router.push({ name: 'PostDetail', params: { id } }) } </script> <style lang="scss" scoped></style>
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
교안 업데이트
안녕하세요! 프로젝트 구성 교안이 동영상에 나오는 내용과 실제 교안 내용이 다릅니다.. 업데이트가 안 된 것일까요?Bootstrap 설치도 동영상에서는 아이콘 한꺼번에 설치 명령어로 나오는데 실제는 따로따로 입니다 제가 본 교안 : https://gymcoding.notion.site/Bootstrap5-a1ec7644ec5f43c2a3fcb8ef848708a0 어느 교안을 봐야 하는지 확인 부탁 드립니다.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
vscode 자동완성 관련하여 동작하지않을 때가 있습니다..
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. 현재 vue3 강의 열심히 듣고 있는데요, 가끔 vscode에서 vue 파일을 생성하고 나면 해당 파일을 인식하지 못해서 자동완성 같은 것이 안될 때가 있습니다. 이럴 때 vscode를 껐다가 키면 다시 인식하기는 하는데 원인을 찾아봐도 알 수가 없네요.. 이는 짐코딩님이 알려주신 환경이 아닌 vscode로 vue를 사용할 때 전반적으로 나타나는 현상 같은데요, 혹시 이런 현상이 발생하지않으시나요? 혹시 발생하신다면 극복 방법이나 팁 같은 것 있으신가요? 안될 때마다 vscode를 껐다 키는 것이 너무 불편하네요..
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
eslint 링크 에러
eslint와 관련된 설정값 파일 링크가 404가 발생합니다!
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
typscript 적용
안녕하세요! 기본편부터 실전편까지 전부 다 듣고 현재 실전편에서 만든 프로젝트에 타입스크립트를 적용하려고 합니다!아무리 찾아봐도 vue3에 타입스크립트를 이후에 추가하는 자료가 보이지 않아서 질문글에 올려요!혹시 세팅하는 순서와 방법 좀 알려주실 수 있으실까요?거기에 현재 volar가 삭제되어서 vue가 좀 불안정한? 느낌이라 더더욱 타입스크립트 세팅이 잘 안되고 있습니다 ㅠ_ㅠ부탁드릴꼐요..!
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
코드 자동으로 prettier 질문
프리티어 extensions이거 설치하지말라고했떤거같은데 이거 적용안하느거맞나요?강의 였나 교안에서 prettier설치하지말라고했던거같은데 충돌떄문에코드를 자동으로 formatter안해주니까 너무 불편한거같은데
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
axios 컴포저블2 에서 useAxios에서 전달받은 resp값이 null로 나옵니다
useAxios.js 내 axios 연결 .then에서const resp = ref(null); //생략 .then(result => { resp.value = result; data.value = result.data; })이렇게 전달을 주면 postList.vue에서const totalCount = computed(() => resp.value.headers['x-total-count']);이렇게 받아오면 cannot read properties of undefined 'x-total-count' 이렇게 콘솔창에 x-total-count를 읽을수가 없다고 나와 콘솔에 resp.value를 해보니 null 이 찍혔습니다. 하여 useAxios.js에서.then(result => { resp.value = result; resp.value = resp.value.headers['x-total-count']; data.value = result.data; })resp에 x-total-count를 넣고postList.vue에서const { data: posts, resp: totalCount } = useAxios('/posts', { method: 'get', params, });구조분해?할당으로 totalCount에 넣으니 동작이 되었는데 원인을 알 수 있을까요..
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
안녕하세요. api , 크롤링 관리 관련 질문이 있습니다.
안녕하세요! 회사에서 vue3 로 프로젝트를 진행중인데, api 및 크롤링 관리와 프로젝트 구조에 대해 질문이 있어 글을 남기게 되었습니다!작업하고 있는 홈페이지에 open api 와 크롤링이 굉장히 다양하게 들어가 있고, 쓰임도 다양합니다.도표, 차트, 그냥 단순 데이터 나열까지 거의 크롤링과 open api 범벅인 사이트인데요..!속도와 사용자 중심의 개발이 중요한 상황이라서 먼저 불러온 것부터 띄운 뒤 아직 뜨지 않은 것들은 로딩바 처리를 해야 합니다.서로 다른 영역에 있는 2-3개의 컴포넌트가 같은 api를 쓰기도 하는 경우가 있어서 관리와 구조를 어떻게 짜야할지 등이 고민입니다. api 관리와 크롤링 관리는 어떤 것들을 이용해서 어떻게 진행해 주면 좋을지 궁금합니다. (찾아보고 궁리한 방법은 vuex(pinia)를 통한 관리, 라우터에서 한꺼번에 호출, 부모 컴포넌트에 몰아넣기 등이 있습니다..! 더 좋은 방법이나 추천해주실 방법이 있을지 궁금합니다.)이러한 작업을 위해 프로젝트 구조는 어떻게 짜는 것이 좋을지 궁금합니다.상태 관리에 vuex와 같은 것이 필요하다면, vuex 대신 pinia를 추천해 주셨는데 이런 상황에서도 추천해 주실지 궁금합니다. 질문이 너무 길어 죄송합니다. 조언 주시면 감사할 것 같습니다.. ! 긴 글 읽어주셔서 감사합니다!!!
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
form 태그에 이벤트 발생시 작동하지 않는건에 대해
질문은 아니고~ 수업을 진행하다 form @submit.prevent="함수명"해당 부분이 작동하지 않아(아예 무반응) button태그에 실행 함수를 넣으니 잘 작동하여 form 문제인거 같아 확인해보니 form안에 button이 존재할 경우 발생하는 문제였네요.form 태그안에 @submit.prevent="함수명" 은 유지하고버튼에 @click.self.prevent="함수명"을 넣으면 됩니다. 동일 문제가 발생하신다면 진행해 보세요.
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
PostEditView 에서 수정 후, PostDetailView 에서의 데이터 동기 문제
[문제점]PostEditView 에서 post 데이터를 수정한 후, PostDetailView 로 이동했을 때, 수정된 데이터가 아닌 이전 데이터가 출력되는 문제 발생. [테스팅]json-server 를 최신 버전으로 업해서 테스트 >> 개선안됨.다양하게 코드를 변경하며 테스트를 해봤지만 개선안됨.PostDetailView 에서 ref, reactive 를 변경하며 다양하게 시도했지만 개선 안됨. [원인]updatePost 함수가 수행 후 반환 하더라도 json-server 내부적으로 실제 데이터 갱신에 시간이 걸리는 것이 아닌지 의심됨.udatePost 후, getPostById 로 데이터를 가져와 콘솔에 출력하면, 갱신되기 전의 데이터가 출력되는 것으로 보아 vue cache or refresh 문제는 아닐 것으로 생각됨. [임시해결]const onUpdate = async () => { try { await updatePost(props.id, form); nextTick(async ()=> { const { data } = await getPostById(props.id); console.log('After updatePost, data: ', data); // router.push({ name: 'PostDetail', props: {id: props.id} }); router.back(); }); } catch (error) { console.log('onUdate error: ', error); } }; 다음 Tick 에서 getPostById 함수를 이용하여 갱신된 데이터를 조회(시간 지연 및 데이터 확인)하고 PostDetailView 로 이동하면 제대로 출력됨... a. 위 코드에서 출력되는 데이터는 갱신 전의 데이터가 출력됨.b. 위 코드에서 getPostById 로 데이터 조회를 빼면 PostDetailView 에 갱신 이전 데이터가 출력됨.c. 위 코드에서 router push, go, back 함수 무엇을 쓰던 현상은 동일함. 보다 정확한 문제 원인 또는 문제 해결 방법이 있을까요 ??
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
PostForm.vue 분리 문의 드립니다.
PostForm.vue 파일로 컴포넌트 분리 중PostCreateView , PostForm 동작에 대해서 이해가 잘 안가서 문의 드립니다. PostCreateView 에서 PostForm 사용시 title, content 를 v-bind가 아닌 v-model 사용하는것이 어떻게 동작되는지 모르겠습니다. v-model을 사용해도 자식 컴포넌트에서 defineProps 으로 받을 수 있는건가요?PostForm 에서 $emit('update:title', $event.target.value) 하면 상위 컴포넌트에서는 어떤 동작이 발생되는지 궁금합니다.@update 와같이 받는 부부분이 없는데, update:title, update::content 가 어떤 동작을 의미하는지 모르겠습닏다.
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
상세게시글 조회시 에러가 발생합니다.
제 코드에 문제가 있는것 같아서, 브랜치를 클론해서 실행해도 동일한 에러가 발생합니다. 이 에러를 어떻게 처리해야할지 모르겠습니다 ,,, json-server 버전이 바뀐것과 관련 있을까요?
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
json-server 설치 후 실행이 안됩니다!
npm install -D json-server입력 후npx json-server --watch db.json 을 입력하면, $ npx json-server --watch db.json node:internal/util/parse_args/parse_args:98 throw new ERR_PARSE_ARGS_UNKNOWN_OPTION( ^ TypeError [ERR_PARSE_ARGS_UNKNOWN_OPTION]: Unknown option '--watch'. To specify a positional argument starting with a '-', place it at the end of the command after '--', as in '-- "--watch" at checkOptionUsage (node:internal/util/parse_args/parse_args:98:11) at node:internal/util/parse_args/parse_args:360:9 at Array.forEach (<anonymous>) at parseArgs (node:internal/util/parse_args/parse_args:357:3) at file:///C:/Users/SSAFY/Desktop/STUDY/3.%20Vue/BOARD/node_modules/json-server/lib/bin.js:13:33 at ModuleJob.run (node:internal/modules/esm/module_job:218:25) at async ModuleLoader.import (node:internal/modules/esm/loader:329:24) at async loadESM (node:internal/process/esm_loader:34:7) at async handleMainPromise (node:internal/modules/run_main:113:12) { code: 'ERR_PARSE_ARGS_UNKNOWN_OPTION'라는 에러메세지가 출력됩니다. json-server의 버전은 강의와 달라서, https://github.com/typicode/json-server이 문서를 보고 해결하려고 했는데, 어떻게 해야할지 모르겠습니다 ㅠㅠ
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
ref와 computed의 차이를 잘 모르겠어요
안녕하세요.이번 강의 실습하다가 수업 내용처럼 preview가 업데이트 안되길래 원인을 찾다보니 아래 부분이 문제였는데요.// 강사님 코드 const url = computed(() => `/posts/${props.id}`); const { error, loading, data: post } = useAxios(url);// 제 코드 const url = ref(`/posts/${props.id}`); const { error, loading, data: post } = useAxios(url);지금까지 진행하고 너무 기초적인 질문인 것 같긴한데 computed는 반응형으로 동작하고 ref는 동작하지 않는 이유를 잘 모르겠습니다.
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
localhost 통신 시 CORS 에러
안녕하세요.해당 파트 학습하다가 네트워크 에러를 발생시키기 위해 json-server를 껐다 켰더니 아래와 같은 에러가 발생하는데 원인 파악이 힘들어 질문 드립니다.Access to XMLHttpRequest at 'http://localhost:5000/posts?_sort=createdAt&_order=desc&_page=1&_limit=3&title_like=' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
route props:true
이 부분이 계속 이해가 안되서요:( routes[ ]에서 props: true 를 선언하면 전달되는 route.params(/:id)가 props로 component에 전달 된다고 이해했고, 부모 컴포넌트에서 props 속성을 v-bind해서 보내줘야한다고 이해하고 있는데 다른 학습자 분이 <PostDetailView id="1"> -> <PostDetailView :id="1"> 변경 이유 관련 문의했고, 선생님께서 아래와 같이 답변해주셨는데...Q) <PostDetailView id="1"> -> <PostDetailView :id="1"> 이 작업의 의미A) id 라는 속성값의 타입을 String으로 넘기는 것에서 Number로 넘기는 것으로 변경했음을 의미합니다.단순히 전달받은 id속성의 타입을 변화하기 위해 ':'를 붙여준건가요?? props로 부모에서 자식컴포넌트로 데이터를 전달하려면v-bind를 해줘야해서 붙인거 아닌가요?ㅠㅠ 추가적으로 url parameter로 데이터 전달 시 데이터타입은 모두 String으로 전달되는거죠? (특별한 지정 없을 시) javascript는 데이터선언시 데이터타입을 따로 해주지 않고 매개변수로 받을 데이터타입도 따로 지정을 안해주는데 수업에서 데이터타입을 parsing해주는 이유가 궁금해요!!! 예를 들어 상세페이지로 접근 시 param으로 데이터를 전달하고 해당view페이지에서 axios함수를 이용해서 상세페이지 데이터를 가져오는데, 이때 route.param.id로 매개변수를 전달하자나요? 위에 문의드린대로 데이터타입을 지정하지 않았는데, 어쩔때는 parsing을하고 어떤때는 또 그냥 사용하고..ㅠjs에서는 데이터타입 구분없이 const(var)로 데이터선언되고 java랑 다르게 해당 언어에서 유동적으로 데이터를 받아쓰는걸로 이해하고 있는데 잘못된 이해일까요? (만약 타입까지 일치시키고 싶으면 ===으로 비교, 아니면 == 로 비교함)
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
15_modal_teleport > AppModal.vue -> defineEmits
PostModal.vue 컴포넌트 분리 후에 AppModal.vue부분에 defineEmits(['close' , ... ]) 'close'는 AppModal에서 상위컴포넌트로 전달하는 것이 따로 없는 것같은데 'close'가 남겨져 있더라구요!여기서 'close'는 어떤 역할을 하는걸까요?