월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨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를 잠깐 언급하셨지만 파라미터가 있는 경우 생각처럼 동작하지 않는 현상이 있습니다..ㅠ
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
components.d.ts파일이 없어도 타입에러가 없는 이유
강의에서 보여주시는 타입에러(색깔)이 나오지 않아 components.d.ts파일을 생상하지 않은 상태인데 강의시점보다 vue가 업데이트가 되서 그런걸까요 typeScript를 사용하지 않아서 그런건가요??+추가로 unplugin-vue-components를 사용해서 dts:true를 사용하지 않아도(즉, components.d.ts파일 미생성) 동일하게 진행됩니다. typeScript를 사용하지 않아서 타입에러가 없는거라면.. typescript 셋팅을 따로 해야될까요? 강의상 파일도 components.d.ts파일을 제외하면 ts파일은 보이지 않고 scripts상에서도 ts를 사용하시지는 않는것같은데 설치가 필요한지 궁금합니다.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
목록에서 상세페이지로 넘어갈때 데이터가 안넘어가요
json-server &axios편에서 목록페이지에서 상세페이지로 갈때 데이터가 안따라와요 ㅜㅜ 로그 기록보면 아래와 같은 에러가 나오는데요 props를 인자로 못받고있는것 같은데요 해결책좀 알려주세요 GET http://localhost:5000/posts/undefined 404 (Not Found)
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
PINIA 로드 시점 관련 문의 드려요
pinia로 구성하여 axios통하여 데이터를 가져오는 간단한 게시판을 구성을 한상태인데요.상단 검색 영역과 하단 게시판 리스트 영역을 분리하여 부모 컴포넌트에서 두가지 컴포넌트를 불러오고 상단의 검색한 검색 조건을 로컬 스토리지에 넣어두었다. 게시판에 진입시에 로컬스토리지에 검색조건이 남아있으면 자동으로 검색 조건 통하여 axios로 데이터를 호출하여 뿌려주고 있는데요 여기서 콘솔에 보면 pinia 관련 store installed 되기 전 보다 먼저 로컬스토리지 검색조건을 가져와 axios를 호출 하려 하다 보니 실제 axios 호출관련 부분은 store에 구성되어있어서 게시판 데이터를 가져오지를 못하네요. settimeout으로 약간 시간차를 두어 store installed 이러우진 후에는 정상적으로 검색을 해서 데이터를 가져오는데요 settimeout을 사용하지 않고 처리를 할 수 있는 방법이 있을끼요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
게시글 묶음(?)별 선택 질문
안녕하세요.현시점 섹션5. vue3 내장 컴포넌트 -> Modal까지 시청했습니다.다른건 이상없이 다 되는데.. 3개씩 보기? 6개씩 보기 선택시 반응이 없습니다.공부겸 해결해보고 싶은데 어디파일로 가서 해결해 볼 수 있을까요?components > posts > PostFilter.vue 파일에서 해결해보면 될까요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
1:52 ESLINT 설정
ctrl+, -> 설정탭에서 eslint를 입력 하면 설정을 찾을수 없음이라고 나오는데 어떤 설정이 안된걸까요? 프로젝트 생성부터 영상그대로따라하여 생성했습니다.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
글 삭제 컨펌 팝업에서 취소를 눌렀을 때
postDetail에서 삭제버튼을 누른 후 뜬 삭제 하시겠습니까? 팝업 창에서 취소를 눌러도로딩 스핀이 생겨요. 왜 그럴까요??<html><div class="col-auto"> <button class="btn btn-danger" @click="remove" :disabled="removeLoading" > <template v-if="removeLoading"> <span class="spinner-grow spinner-grow-sm" aria-hidden="true" ></span> <span class="visually-hidden" role="status">Loading...</span> </template> <template v-else>삭제</template> </button> </div><setup>const removeError = ref(null); const removeLoading = ref(false); const remove = async () => { try { if (confirm('삭제 하시겠습니까?') === false) { return; } removeLoading.value = true; await deletePost(props.id); vSuccess('삭제가 완료되었습니다.'); router.push({ name: 'postList' }); } catch (err) { removeError.value = err; vAlert(err.message); } finally { removeLoading.value = true; } }; 취소를 하면 저절로 false가 돼서 removeLoading.value = true로 안넘어가야하는 것 아닌가요?제가 빼먹은 부분이 어디일까요 ㅠㅠ
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
axios에 값을 보낼때 { ...data } 하는 이유
axios의 post, put에 data를 보낼 때{ ...data }로 보내는 이유를 알려주실 수 있을까요?v-model의 값을 바로 보내면 어떤 불이익이 있을 수 있나요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
라우트(view파일.vue) 관리
사이트를 개발하다보면화면수가 당연히 많아 질텐데요그에따라 등록되는 컴포넌트 (router 개수)가 늘어(등록)나면그만큼 index.js 파일에는import homewiew1 from /path /homewiew1 .vueimport abcwiew2 from /path/homewiew2 .vueimport defwiew 3from /path/homewiew3 .vueimport zzzwiew f4rom /path/homewiew4.... 계속.... (화면수가 늘어나면 아주 많이 생기면 ㅎㅎㅎ그때마다파일 라인수가 몇백줄..아니 몇천줄....몇만줄이 퇼텐테..( 설마 몇만줄은 ㅎㅎㅎ)ex: 라우터(component) 100개 .... 늘어나는 component를 특별히 관리하는 방법이있는지요? - (..따로 파일이나 폴더로 분리 한다던지...index.js(main.js)라는 파일은 원래 라우터(component)를 등록하는 파일인지. ....ㅎㅎ ) - index.js 라인수가 당연히 증가const routes = [{path: '/'compoennt: hellovew;},path: '/'compoennt: hellovew;},... 등록 늘어나는라우터(화면 componet) 등록/관리는 방법을 여쭤 봅니다. 이상하네.... 전에 질문드렸는데...ㅠㅠ;; 삭제가 ... 없어 졌습니다.설명이 부족하면 다시 작성 하겠습니다. (죄송합니다.)짱^^ 코딩님... 설명 좀...ㅠㅠ;
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
modalTitle.value = title; 에서 title은 어디서 받아오는거죠?
이렇게 작성하고<div class="col-3 text-muted">제목 :</div> <div class="col-9">{{ modalTitle }}</div> 이렇게 작성했는데요,const modalTitle = ref(''); const openModal = ({ title }) => { show.value = true; modalTitle.value = title; };(content, createdAt은 생략했어요)openModal에서 받아오는 title이어디서 나오는 건지 모르겠어요.정상적으로 작동은 되는데 저 부분이 이해가 안돼서요..title 같은 data들은 fetchPosts() 에서 받아올 때 posts에 넣었으니modalTitle.value = posts.value.title 이어야 할 것 같은데 왜 이렇게 작성하면 오류가 나고 title만 작성해야 title 데이터가 잘 들어오는건가요..??
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
게시판 UI 만들기
UI 화면 만들기 편을 보면서 궁금한 점이 생겼습니다. 다름이 아니오라..궁금한 점:route 로 구현 (setting)하면서 화면을 만들고 이동을하고 있는데요... (당근?)그러면 ... 보여줄 화면이 많을때... 아주 많을때는 ... 어떻게 처리를 하는지 ( 소스 관리)지요...... 파일로 처리를 하나? ? (제 생각에는 ..다른 방법이...궁금)URL에 따라 뿜빠이(^^)를 하는지.. 열강중에 궁금한 점이 .... ??? 화면(본수)이 정말 많을때 ..어떻게 처리를 하는지.... index.js import ... 화면1.vue;import ... 화면2vue;import ... 화면3.vue;import ... 화면4.vue;import ... 화면5.vue;import ... 화면6.vue;,,import ... 화면N.vue;화면(100개 (이상? ㅋㅋㅋ) ... 이럴때 말이줘... 화면 100개: 화면당 ***.vue 파일 100개?... (이건 아닌듯..)(암튼..화면 겁내 많음..... ) URL_listView.vue 같이URL 정보를 다른 파일을 따로 만들어 처리를 해야 하는지?(아무래도 ...이방법이...흐음...)...짱~ 코딩님... 질문 마치겠습니다.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
Date.now() is Not working!!
글쓰기 작성 중const save = () => { try { createPost({ ...form.value, createdAt: Date.now(), }); router.push({ name: 'PostList' }); } catch (error) { console.log(error); } }; Date.now() 함수가 날짜 값이 입력이 되질 않습니다.타입? 을 생각해야 하나...이유가 뭔질 모르겠네요.질문 드립니다. 흐음... 이번엔.... input v-model="params.title_like" title_like 가 동작을 안하네요...ㅎㅎㅎjson 자료 역시 찾아 보고... 흐음... 질문2 드립니다.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
VSCode jsconfig.json
안녕하세요 강의 잘 듣고 있습니다.아주 융통성 없이 따라해보는 습관이 있는지 Vigte,EsLint, pritier 설치 강의를 보면서그대로 따라해보고 있습니다.질문내은 [강의 화면] 3분 화면 쯤 jsonconfig.json만드든 내용중 '교안에 있는 이러한 내용을 복사해서 ..' 라는 말씀을 하시면서화면이 나오는데 영상에 나오는 VSCode jsconfig.json 디렉토리에 jsonconfig.json 파일이 있으면...blsh blsh...이 부분이 보이질 않습니다. ※ https://code.visualstudio.com/docs/languages/jsconfig이리로 가서 복사를 하라는 뜻인지...교안이 구버전(?)인지 코딩님... 설명 부탁드려요
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
텔레포트 할때, 영상에서 페이지네이션 active 부분
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 선생님 모달을 텔레포트 후 오픈 했을때, 페이지네이션 액티브 부분이 조금 이상해서요,, 영상에서도 그렇구요 어떤게 문제인지 어떻게 해결해야할지 궁금해서 문의 남깁니다 .
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
useAxios
안녕하세요.useAxios 내부에서 this를 찍어보면 undefined로 나오는데 왜 그런건지 잘 이해가 안되네요. ㅠㅠuseAxios를 사용하는 컨텍스트가 찍혀야 될 것 같은데 왜 그런지 알려주시면 감사하겠습니다.
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
toRef 관련
안녕하세요PostDetailView에서const idRef = toRef(props, 'id');const { isOdd } = useNumber(idRef );를 통해 반응형으로 넘겨주는데요, composable 함수인 useNumber내에서 unref 를 사용하는 이유가 무엇인지 이해가 잘 안가네요.unref 를 사용하지 않고 반응형으로 두면 안되는 이유가 무엇인지 궁금합니다.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
섹션4 >alert > validator오류
validator 경고가 떠서 어떤 부분에서 경고가 뜨는지 알 수가 없어서 질문드립니다!