월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
toRef 관련
안녕하세요PostDetailView에서const idRef = toRef(props, 'id');const { isOdd } = useNumber(idRef );를 통해 반응형으로 넘겨주는데요, composable 함수인 useNumber내에서 unref 를 사용하는 이유가 무엇인지 이해가 잘 안가네요.unref 를 사용하지 않고 반응형으로 두면 안되는 이유가 무엇인지 궁금합니다.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
섹션4 >alert > validator오류
validator 경고가 떠서 어떤 부분에서 경고가 뜨는지 알 수가 없어서 질문드립니다!
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
router replace 속성 관련
안녕하세요 router가 hash모드일 때도 router replace를 사용할 경우 history 모드와 동일하게 동작하나요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
섹션3. CRUD구현 16:15초
(1)강사님과 같이글쓰기 > 저장 이후 바로 목록에 새로운 데이터가 추가되지않습니다. (2)F5, 새로고침을 해야만 목록의 글이 추가됩니다. (3)어느부분에서 놓쳤는지 알기가 쉽지않아 질문드립니다. (4)질문의도와 스크린샷 첨부가 명확하지 않으면 다시 찍어서 올리겠습니다!
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
섹션2. Props전달 > 9분 52초
definProps({}) 설정 시 왜 빨간밑줄이 생기는지 모르겠습니다. 따로 import 하지 않아도 되는데 왜 이해가 되지 않아서 질문드립니다!
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
api 호출(mock서버에서) 한 데이터로 bar chart 데이터 전달 문의
vue 공부를 하기 위해 강사님 강의 잘 듣고 있습니다. 정성스러운 준비 알찬 내용에 너무 감사드립니다.코드 작성하다가 아직은 vue 문법이나 전체적인 개념이 잘 잡히지 않아서, 이렇게 저렇게 해보다가 잘 안되어서 강사님께 질문을 드립니다.차트 그리기 위해서 아래 코드를 작성했는데요.차트에 뿌려질 데이터가 js 파일에 명시적으로 있는 것은 props 로 전달하여 잘 뿌려지고 있습니다.BarChart.vue, ChartView.vue, bar.chart.config.js이 데이터를 api 호출하여(실제 데이터가 있는 서버. 지금은 postman. mock 서버) props 전달해서 하려고 합니다. async await 로 api 호출하여 원본자료 받는것 까지는 됐는데, 받아온 자료를 bar.chart.config.js 에 명시된 데이터 처럼 가공하여 BarChart.vue 에 전달하고 싶은데, 방법을 잘 모르겠습니다.아래 CallApiView.vue 에서 this.chartList 부분으로 시도하였는데, 방법이 틀린 것 같습니다.ㅠㅠ(아직 vue 초보이니 너른 마음으로 알려주시길 부탁드립니다) BarChart.vue<script setup> import { ref, watch, computed, onMounted } from "vue"; import Chart from "chart.js/auto"; const props = defineProps({ data: { type: Object, required: true, }, }); const root = ref(null); let chart; onMounted(() => { chart = new Chart(root.value, { type: "bar", data: props.data, options: { responsive: false, maintainAspectRatio: false, scales: { y: { display: true, }, x: { display: true, }, }, plugins: { legend: { display: false, }, }, }, }); }); const chartData = computed(() => props.data); watch(chartData, (data) => { if (chart) { chart.data = data; chart.update(); } }); </script> <template> <canvas ref="root" /> </template> ChartView.vue<script setup> import { computed, ref, onMounted } from "vue"; import BarChart from "@/components/Charts/BarChart.vue"; import * as chartConfig from "@/components/Charts/bar.chart.config.js"; const chartData = ref(null); const fillChartData = () => { chartData.value = chartConfig.sampleBarChartData(); }; onMounted(() => { fillChartData(); }); </script> <template> <div style="width: 800px"> 여기는 대시보드 bar chart <bar-chart :data="chartData" class="h-96" /> </div> <template> bar.chart.config.jsexport const sampleBarChartData = () => { const labels = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]; const datasets = [ { label: "# of Votes", data: [12, 19, 33, 5, 2, 3], backgroundColor: [ "rgba(255, 99, 132, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(255, 206, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(255, 159, 64, 0.2)", ], borderColor: [ "rgba(255, 99, 132, 1)", "rgba(54, 162, 235, 1)", "rgba(255, 206, 86, 1)", "rgba(75, 192, 192, 1)", "rgba(153, 102, 255, 1)", "rgba(255, 159, 64, 1)", ], borderWidth: 1, }, ]; const options = { scales: { y: { beginAtZero: true, }, }, }; return { labels, datasets, options, }; }; 보여지는 화면 api 호출(mock서버에서)데이터는 아래와 같이 등록되어 있습니다.https://0604916b-347f-4b44-bb75-60dd4b41d9cb.mock.pstmn.io/test/yeardata[ { "labels": "Red", "vote": 12 }, { "labels": "Blue", "vote": 19 }, { "labels": "Yellow", "vote": 33 }, { "labels": "Green", "vote": 5 }, { "labels": "Purple", "vote": 2 }, { "labels": "Orange", "vote": 3 } ] CallApiView.vue<script setup> import BarChart from "@/components/Charts/BarChart.vue"; </script> <script> import axios from "axios"; import { Chart, registerables } from "chart.js"; Chart.register(...registerables); export default { setup() {}, data() { return { chartList: {}, }; }, mounted() { this.getChartList(); }, methods: { async getChartList() { try { //mock서버에서 호출 const res = await axios.get( "https://0604916b-347f-4b44-bb75-60dd4b41d9cb.mock.pstmn.io/test/yeardata" ); console.log("res ===> ", res.data); const labels = res.data.map((row) => row.labels); const datas = res.data.map((row) => row.vote); console.log("new labels ===> ", labels); console.log("new datas ===> ", datas); //여기에서 자료가공을 하려고 했으나 안됨.. this.chartList = { data: { labels: this.labels, datasets: [ { label: "# of Votes test", data: this.datas, }, ], }, }; console.log("new chartList ===>", this.chartlist.data); } catch (e) { console.error("chart error===>", e); } }, }, }; </script> <template> <div style="width: 800px"> new 여기는 대시보드 bar chart <bar-chart :data="chartList" class="h-96" /> </div> </template>
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
섹션1. layouts > TheHeader.vue, TheView.vue 에러
layout > .vue 파일들을 만든 후,강사님과 똑같이 복붙했지만 어떤 이유에서 빨간색물결과 에러가 확인됬습니다. 이것은 eslint에서 잘못 설정한 문제가 있을까요??
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
pip install 한 돔 객체 접근
dom 객체 접근 하여 컨트롤 하려고 합니다.https://videojs.com/guides/vue여기 정보를 가지고 작성 했씁니다.영상 재생은 잘 되는데 dom 객체에 접근하여 pause 를 하려는데방법을 모르겠습니다.<script setup> 에서 ref 객체로 dom 객체에 접근 하려는데 안되네요..const videoRef = ref(null);console.log(videoRef.value). // Null 이 찍히네요<video-player ref="videoRef" :options="videoOptions" />
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
페이지 컴포넌트에 props 전달하는 부분 관련
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요,함수로 props를 전달하는 부분 (강좌 12:00 ~)에서,기존에는 받은 값을 int로 바꾸는 작업을 했었는데함수로 전달하면서 애초에 int값을 주는 것으로 변경했습니다. 이 변화로 인해 기존 코드에서 parseInt 관련 부분을 삭제/수정했습니다. 그런데.. 12:57 부근에서<PostDetailView id="1"> 을<PostDetailView :id="1"> 로 변경했습니다. 이 작업이 어떤 의미를 갖나요?v-bind를 추가한 것이 "1"을 string에서 int로 인식하게 하는게 이해가 되지 않습니다. 미리 감사합니다!
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
nuxt 3 강의 보고싶습니다
2월말에 질답에서, 계획이 있으나 우선순위가 낮다고 하셨는데, 혹시 nuxt 3 강의 언제 쯤 나오나요? vue강의 만족스럽게 들어서 이어서 듣고싶네요
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
pinia 상태 유지 플러그인
안녕하세요 혹시 pinia store의 로그인 및 유저정보를 새로고침이나 href로 타 사이트 이동후에도 유지하려고 하는데 pinia-plugin-persistedstate를 사용하면 될까요? 아니면 추천해주실 더 좋은 방법이 있을까요
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
<script setup>~ </script> 안에서 computed 값을 출력하는 방법이 있을까요?
선생님 안녕하세요~학습 중에 아래와 같은 상황이 생겨서 질문드립니다.vuex store에 있는 itemList Object를 computed로 가져오는 반응성이 있는 변수 solvedIndex가 있습니다.이 변수의 값을 <template> ~ </template> 안에서는 2가 잘 출력 되는데,<script setup> ~ </script> 안에서 접근하려면, "ComputedRefImpl" 이 출력이 됩니다.어떻게 하면, solvedIndex의 값을 출력할 수 있을까요?solvedIndex는 isSolved === true 인 인덱스를 뒤에서 부터 찾는 코드입니다.state: () => { return { itemList: [ { "id": 101, "isSolved": true, }, { "id": 102, "isSolved": true, }, { "id": 103, "isSolved": true, }, { "id": 104, "isSolved": false }, { "id": 105, "isSolved": false } ] }; } <script setup> const itemList= computed(() => store.state.itemList)); const solvedIndex = computed(() => store.state.itemList.findLastIndex((item) => item.isSolved === true)); // index와 slovedIndex.value가 같은 경우, 분기 처리 const alertFunction = (index) => { if(index === solveIndex.value) { console.log('idx === solveIndex : ', idx === solveIndex.value); } else { console.log('idx === solveIndex : ', idx === solveIndex.value); } } </script> <template> <button v-for="(item, index) in itemList" :key="index" :class="{ disabled: index !== solvedIndex }" @click="alertFunction(index)" >{{ solvedIndex }}</button> </template> <script setup> ~ </script> 안에서 접근하려면, 아래와 같이 출력이 됩니다.방법: 1console.log('findLastIndex: ', solvedIndex );방법: 2console.error('findLastIndex: ', solvedIndex.value);
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
toRef 예시와 관련하여
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 짐코딩님,제가 어디서부터 어떻게 이해를 잘 못하고 있는건지 모르겠으나,어느 순간부터 머리가 꼬여 정리가 되지 않아 질문 남깁니다 ㅠㅠ ,, 현재 코드를 보면 설명해주신 듯이 PostDetailView에서 const idRef = toRef(props, 'id');const { isOdd } = useNumber(idRef );를 통해 반응형으로 넘겨주는데요, 반응형으로 넘겨주는 이유를 모르겠습니다.어차피 composable 함수인 number 내에서 unref로 까서 사용하고,compute로 다시 반응형을 return해준다고 생각되는데요 ,, 왜 반응형을 넘겨주지 않으면 정상적으로 동작하지 않는 건가요 ..!?
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
브라우저에 글자가 화면 가운데로 위치하는 이유
안녕하세요 강사님. 재미있고 유익한 강의 덕분에 재미있게 공부하고 있습니다 :) 다름이 아니라 bootstrap navbar 적용하고 h2 태그로 hello vue3를 작성하였는데요. 강사님과는 다르게 아래 사진과 같이 글자가 위치하게 됩니다. 이때 navbar 도 가운데에 위치했는데 nav 태그의 class 에 fixed-top설정을 붙여서 강제로 top 으로 올렸습니다. 왜 강사님과는 다르게 글자가 가운데에 위치하는지 질문 드립니다.환경 정보는 다음과 같습니다. root@0b9640433f40:/vue3/vue3-posts# npm list vue3-posts@0.0.0 /vue3/vue3-posts +-- @rushstack/eslint-patch@1.3.0 +-- @vitejs/plugin-vue@2.3.4 +-- @vue/eslint-config-prettier@7.1.0 +-- bootstrap-icons@1.8.1 +-- bootstrap@5.1.3 +-- eslint-plugin-vue@8.7.1 +-- eslint@8.41.0 +-- prettier@2.8.8 +-- vite@2.9.16 +-- vue@3.2.33 root@0b9640433f40:/vue3/vue3-posts# npm -v 9.5.1 root@0b9640433f40:/vue3/vue3-posts# node -v v18.16.0- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
Pinia 다른페이지로 이동시 데이터 초기화
안녕하세요. 원래 pinia 사용시 다른 페이지로 이동하면 데이터가 초기화되나요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
post와 put에서 async와 await를 사용해야 하는가,
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 짐코딩님,비슷한 내용의 질문이 있어 답글로 질문드렸으나 답글은 알림이 안 가는 것 같아, 게시물로 다시 질문 드립니다. 원질문자님의 질문처럼 짐코딩님의 코드를 보면 PostCreateView 내 save 함수에는 async await을 활용하지 않으셨고, PostEditView 내 edit 함수에는 async await을 활용하셨습니다. save에서 async await을 활용하지 않으신 건 post로 return 받을 게 없으니 필요 없어 그러셨다고 파악했는데, edit에서 put 역시 return 받는 게 없는데 async와 awiat을 활용하신 이유가 궁금하였습니다. 하지만 현재 짐코딩님의 답글을 보니, save에서 async await을 활용하지 않으신 건 실수라 생각되고, 원래는 모두 붙이는 걸 선호하시는 거 같은데(의도치 않은 라우터 동작 등을 피하기 위해) 제가 파악한 게 맞을까요 ?짐코딩님 깃 속 코드는 다음과 같습니다. 감사합니다.
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
redirect 에러
Response to prelifght request doesn't pass access control check: Redirect is not allowed for a preflight request. 라는 에러가 떠서 axios 호출 url 뒤에 슬래쉬를 추가했는데도 똑같이 뜹니다
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
axios OPTIONS 호출 문제(CORS)
axios로 GET 이외의 요청시 OPTIONS 메소드 요청을 먼저 하게되는데, 백엔드를 스프링부트로 설정하고 세션 인증을 하려니 preflight 에러가 계속 뜹니다.혹시 해당 에러를 무시하거나 해결할 수 있는 방법을 아시나요?allowCredentials를 전역으로 선언하고 있습니다
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
라우터링크 태그 내 버튼 태그 생성과 관련하여 질문있습니다.
안녕하세요, 404 Not Found 부분 강의를 듣다 의문이 생겨 질문드립니다.초보적인 질문이라 죄송합니다. 현재 NotFoundView.vue 에서 Home 버튼을 생성하며<RouterLink to="/"> <button class="btn btn-primary">HOME</button></RouterLink>이런 식으로 구현을 하셨는데요, 지난 번 네비바를 구현할 때는,<button class="btn btn-outline-light" type="button" @click="goPage"> 글쓰기</button>이렇게 버튼에 클릭 이벤트 발생시 함수가 실행되도록 코드를 작성했어서요. 저는 함수를 별도로 생성하지 않아도 되는 NotFoundView의 방식(라우터 링크 내부에 버튼 생성)이 더 마음에 드는데, 실제 구현에서 어떤 차이를 가져오는지, 어떤 방식이 더 자주 사용되는지 궁금하여 질문드립니다.성능면에서 차이가 있는지도 궁금합니다.
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
글등록이 안될때 어찌 해야 할까요
섹션3에json-server & axios : CRUD 구현 부분의 강의를 따라해보고 있는 중입니다.글 등록하는 부분에서 막혀서...몇번을 다시 해봤는데요, 글을 쓰고 저장을 누르면 목록으로 넘어가면서 데이타가 나와야 하는데 아무것도 되지 않으면 뭘 확인해봐야 할까요?강의 보면서 여러번 제대로 했나 확인하긴 했는데,,,