월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결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를 직접 바라봐도 상관없는건지, 아니면 추후 유지보수 등의 이유로 의도적으로 한번 건너서 접근한것인지 궁금합니다
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
Request URL:주소 이상함!
const fetchPost = async () => { try { const { data, headers } = await getPosts(params.value); items.value = data; totalCount.value = headers['x-total-count']; } catch (error) { console.error(error); }};TheHeader.vue에서 게시판 클릭 시 PostListView.vue 부분에서 오류가 납니다. 위의 에러콘솔부에 걸려요. 개발자도구에서 콘솔에 찍힌 코드는 하기와 같습니다ㅠㅠ AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUES........} requestURL :GET http://localhost:5173/undefinedposts/?_sort=createdAt&_order=desc&_limit=3&_page=1&title_like= 404 (Not Found) 왜 주소가 위와 같이 찍히는지 모르곘어요!! 제이슨 서버 동작 확인했고, development 모드입니당 ㅠㅠ
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
router는 스프링으로 대입하면 viewResolver가 되는건가요?
router는 화면변경이 필요할 때 필요한 링크로 이동할수 있게 연결시켜주는 것 같은데 스프링으로 보면 viewResolver가 되는건가요?
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
Axios에 connection timeout과 read timeout이 없음
안녕하세요? 짐코딩님! 유익한 강의 덕분에 잘 개발하고 있습니다!^^ Axios로 개발해보니 connection timeout과 read timeout 없이 단 하나의 타임아웃만 있는것 같습니다. 파이썬 코드를 예를 들자면 아래처럼 타임아웃을 나눠 쓸 수 있습니다.아래 코드의 의미는 연결할때 1초 기다리고, 연결 이후 15초까지 연산시간을 기다려 줍니다.import requests url = 'http://example.com' try: # timeout 매개변수를 사용하여 연결 타임아웃 1초, 읽기 타임아웃 15초로 설정 response = requests.get(url, timeout=(1, 15)) # HTTP 상태코드를 확인 if response.status_code == 200: print('요청이 성공했습니다.') else: print(f'요청이 실패했습니다. 상태코드: {response.status_code}') except requests.Timeout: print('타임아웃이 발생했습니다.') except requests.RequestException as e: print(f'요청 중에 예외가 발생했습니다: {e}') 해당 기능이 중요한 이유는 연산 시간이 10초이상 걸리는 API가 있다고 가정을 할 경우, Axios 타임아웃을 15초로 지정하면 서버가 죽었을때도 유저는 무조건 15초간 대기하는 문제가 발생합니다. 하지만 위 파이썬 코드의 경우는 1초 이내로 서버 연결불가 판단을 하고 빠르게 유저에게 피드백을 줄 수 있습니다. 해당 기능이 Axios에 있는지, 만약 없다면 다른 대체 라이브러리 추천해주실수 있으실까요?감사합니다.^^
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
플러그인 등록과 모듈함수 생성 및 사용의 장단점
안녕하세요,dayjs 플러그인을 등록해서 $dayjs(Date).format('')....로 사용하는곳이 중복되는것을 보고 모듈로 만들어 사용하면 어떨까하는 생각에 따로 모듈파일을 만들고 함수로 정의해서 사용해봤습니다.함수로 정의 후 사용시 각 파일마다 import해야하는 번거로움은 있지만 .format하위 구문을 작성하지 않아도 되는 이점이 있었는데요, 플러그인으로 등록, main.js파일에서 app.use()로 사용하는것은 단지 각 파일에 import하지않고 사용하기위함인것인지 궁금합니다.추가로 플러그인으로 추가해서 사용할때는 함수로 만들어 추가할수 있는 방법이 있는지도 궁금합니다.이전 강의에서 funcPlugins를 잠깐 언급하셨지만 파라미터가 있는 경우 생각처럼 동작하지 않는 현상이 있습니다..ㅠ