월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결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'는 어떤 역할을 하는걸까요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
fetch 코드를 강의에 나온 것 처럼 axios 로 변경하고 싶습니다.
현재 구글캘린더를 OAuth2.0 으로 연동하는걸 테스트 해보고 있습니다.authorization code 까지 얻어서 access token 을 가져오려고 포스트맨에서 테스트 해보니 access token 을 잘 가져왔습니다.이제 이걸 강의에 나온 방식으로 vue.js 로 옮기고 싶은데 잘 안되네요.포스트맨에서 성공한 fetch 코드는 아래와 같습니다.var myHeaders = new Headers(); myHeaders.append('Content-Type', 'application/x-www-form-urlencoded'); var urlencoded = new URLSearchParams(); urlencoded.append('code', code.value); urlencoded.append('client_id', clientId); urlencoded.append('redirect_uri', redirectUri); urlencoded.append('client_secret', clientSecret); urlencoded.append('grant_type', 'authorization_code'); var requestOptions = { method: 'POST', headers: myHeaders, body: urlencoded, redirect: 'follow', }; fetch(`https://oauth2.googleapis.com/token`, requestOptions) .then(response => response.text()) .then(result => console.log(JSON.parse(result))) .catch(error => console.log('error', error));이 코드 그대로 vue.js 에 사용해도 잘 되더라구요.그런데 강의 처럼 변경해 보고 싶은데 잘 안되네요. 일단 api/index.js 파일은 아래처럼 했구요.import axios from 'axios'; function create(baseURL, options) { const instance = axios.create(Object.assign({ baseURL }, options, { withCredentials: true })); return instance; } export const token = create('https://oauth2.googleapis.com');api/token.js 파일은 아래 처럼 했봤습니다.import { token } from '.'; export function getToken(params) { const data = JSON.stringify(params); console.log('data:', data); const config = { headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, maxBodyLength: Infinity, data: data, }; return token.post('/token', params, config); } 사용 페이지에서는 아래처럼 적용했습니다.import { getToken } from '@/api/token'; async function getAccToken() { const params = { code: code.value, client_id: clientId, client_secret: clientSecret, redirect_uri: redirectUri, grant_type: 'authorization_code', }; try { const response = await getToken(params); } catch (error) { console.log('error:', error); } }그런데, 이렇게 저렇게 여러가지로 해보고 있는데 통신오류 나면서 안되네요. fetch 코드를 강의의 코드 형식으로 어떻게 변경해야 할까요?변경 안하고 그냥 fetch 코드를 그대로 써도 되긴하는데 뭔가 좀 찝찝하고, 왜 안되는지 궁금하기도 해서 질문드립니다.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
alert Store - composable 이중으로 들어가는 이유
안녕하세요. 해당 강의에서 alert Store를 만들고 적용할 때 기존 composable파일에서 alertStore파일을 연결하는데 템플릿 파일에서 직접 alertStore로 접근하지 않고(예시의 counter처럼) composable파일을 통해 우회 접근한 이유가 있을까요? 단지 기존 composable파일을 물고있는 파일들의 수정소요때문이라면 각 파일들이 store를 직접 바라봐도 상관없는건지, 아니면 추후 유지보수 등의 이유로 의도적으로 한번 건너서 접근한것인지 궁금합니다