25%
66,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결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를 잠깐 언급하셨지만 파라미터가 있는 경우 생각처럼 동작하지 않는 현상이 있습니다..ㅠ
- 미해결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이리로 가서 복사를 하라는 뜻인지...교안이 구버전(?)인지 코딩님... 설명 부탁드려요