월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
창 크기에 따라 Header와 View가 컬럼으로 분리되는 문제
창 크기에 따라 header와 view가 분리되어 보일때는 어떻게 해결해야 하나요?
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
ref 객체의 값을 쓰려고 할 때, v-model 에서 .value 를 안하는 이유가?
안녕하세요 강사님?json-server & axios : CRUD 구현 강의에서14:14 초에 <input> 안의 v-model 에서 ref 객체인 form 을 v-model="form.tiltle" 형식으로 값을 불러오셨는데v-model="form.value.tiltle" 가 아닌 이유는 v-model 자체가 :value 로 값까지 접근을 해서 인가요?먼가 아리송해서 여쭤봅니다.
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
무슨 에러인지...ㅡㅡ
안녕하세요. 강사님 열심히 따라해보고 있는데..여기서 막혀서 넘어가질 못하네요ㅜㅜVue Router 학습 : 게시판 UI 만들기 강의에서게시글 목록을 뿌려줄 때 우리가 어떤 데이터를 조회했다고 가정하고 v-for를 돌면서 뿌려줘본다고 하고 따라하고 있는데, 몇번을 봐도 오타는 없는거 같은데...ㅠㅠ그 전단계에서 목록이 5개 뜨는걸 확인한 후의 작업입니다. 뭐가 문제일까요???
- 해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
settings.json 안보이시는 분들...
여기다 만드시면 됩니다
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
라우터로 props 객체 전달에 대해서
router.push로 민감한 정보인 유저 정보를 객체로 전달하고 싶은데 방법을 모르겠습니다. 민감한 정보이니 params나 query문으로 넣지 않고 url에 표시되지 않고 보내고 싶습니다 react의 location.state에 데이터를 넣어서 보내는 것처럼 하는 방법을 알고 싶습니다
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
새로고침시 404 문제
https://www.inflearn.com/questions/640711/url%EB%A1%9C-%EC%A7%81%EC%A0%91-%EC%A0%91%EA%B7%BC%EC%8B%9C-404-return-%EB%AC%B8%EC%A0%9C위에 질문드린분과 완전 동일한 증상입니다. 다른점은 https://chanyoung-dev.github.io/ 는 이미 사용중이어서 https://chanyoung-dev.github.io/vuePost/ 도메인에 배포하기 위해 vite.config.js에서 base설정한 것(base: '/vuePost/')과 history: createWebHistory('/vuePost/') 있습니다. https://chanyoung-dev.github.io/vuePost/ 에 접속하여 /posts라우트 영역에 들어가면 정상적으로 되지만 해당 페이지에서 새로고침을 한다든가 주소창에 직접 https://chanyoung-dev.github.io/vuePost/posts 로 들어가면 github 404페이지가 나타납니다. 로컬에서는 주소창에 http://localhost:5173/vuePost/posts 치면 정상적으로 접속됩니다.github pages와 github action을 통해 배포해서 https://vitejs.dev/guide/static-deploy.html#github-pages 를 참고했는데도 안되네요 ㅜㅜ 아래는 제가 설정한 부분입니다vite.config.jsimport { fileURLToPath, URL } from 'node:url'; import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)), }, }, base: '/vuePost/', }); route 부분import { createRouter, createWebHistory } from 'vue-router'; import HomeView from '@/views/HomeView.vue'; import AboutView from '@/views/AboutView.vue'; import PostCreateView from '@/views/posts/PostCreateView.vue'; import PostDetailView from '@/views/posts/PostDetailView.vue'; import PostEditView from '@/views/posts/PostEditView.vue'; import PostListView from '@/views/posts/PostListView.vue'; const routes = [ { path: '/', component: HomeView, }, { path: '/about', component: AboutView, }, { path: '/posts', component: PostListView, name: 'PostList', }, { path: '/posts/create', component: PostCreateView, name: 'PostCreate', }, { path: '/posts/:id', component: PostDetailView, name: 'PostDetail', }, { path: '/posts/:id/edit', component: PostEditView, name: 'PostEdit', }, ]; const router = createRouter({ history: createWebHistory('/vuePost/'), routes: routes, }); export default router; git actionhttps://vitejs.dev/guide/static-deploy.html#github-pages 와 동일# Simple workflow for deploying static content to GitHub Pages name: Deploy static content to Pages on: # Runs on pushes targeting the default branch push: branches: ['master'] # Allows you to run this workflow manually from the Actions tab workflow_dispatch: # Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages permissions: contents: read pages: write id-token: write # Allow one concurrent deployment concurrency: group: 'pages' cancel-in-progress: true jobs: # Single deploy job since we're just deploying deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v3 - name: Set up Node uses: actions/setup-node@v3 with: node-version: 18 cache: 'npm' - name: Install dependencies run: npm install - name: Build run: npm run build - name: Setup Pages uses: actions/configure-pages@v3 - name: Upload artifact uses: actions/upload-pages-artifact@v1 with: # Upload dist repository path: './dist' - name: Deploy to GitHub Pages id: deployment uses: actions/deploy-pages@v1 git 주소: https://github.com/ChanYoung-dev/vuePost하루죙일 삽질 뒤에 질문 남깁니다 감사합니다
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
반응형의 사용에 관한 질문입니다(ref, reactive)
안녕하세요, 강의를 듣고 사이드 프로젝트를 하면서 의문이 생기어 질문남깁니다.제가 이제까지는 .vue 파일내부의 script 내부에서, 모든 변수를 반응형화 하였는데요, 이게 의미가 있는지에 대해 의문이 생기어 질문드립니다.예를 들어, 인풋에서 값을 받아 검색을 하는 상황에서, searchBookQuery라는 변수를 선언하여 반응형화 하였는데요, 그렇지 않고 그냥 let으로 선언해서 사용을해도 상관이 없으려나요? 모든 변수가 반응형객체로 생성된다는게 살짝 성능상에서도 좋지않을까 하는 고민이들어 질문 드립니다.코드예시// bookSearchResults는 렌더링 되는 부분과 연관이 있기에 // 반응형으로 생성해야한다라는 확신이 들지만 // 다른 변수는 어떨지 선생님의 의견이 궁금합니다 const bookSearchResults = ref([]); const searchBookQuery = ref(""); const queryTimeout = ref(0); const searchBook = (e: Event) => { searchBookQuery.value = (e.target as HTMLInputElement).value; queryTimeout = setTimeout(async () => { if (searchBookQuery.value !== "") { const result = await axios.get(...); bookSearchResults.value = result.data.item; } else { bookSearchResults.value = null; } }, 500); }; // --------위: 반응형선언, 아래: 일반 변수선언------------ let searchBookQuery = null; let queryTimeout = 0; const searchBook = (e: Event) => { searchBookQuery = (e.target as HTMLInputElement).value; queryTimeout = setTimeout(async () => { if (searchBookQuery !== "") { const result = await axios.get(...); bookSearchResults.value = result.data.item; } else { bookSearchResults.value = null; } }, 500); };
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
computed가 정확히 뭔지요?
computed를 빼고 하면 오류가 나더라구요. 그냥은 할당이 안되는건가요?const totalCount = response.value.headers['x-total-count'] const totalCount = computed(() => response.value.headers['x-total-count']); //전체개수
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
eslintrc.cjs 에 아래 내용추가하라고 교안수정부탁드립니다.
rules: { "prettier/prettier": ["error", { "endOfLine": "auto" }], },
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
router-link 랑 RouterLink 문법차이 인가요?
태그 자동완성하면 router-link 이렇게 나오는데,기능은 같은거 같아서요~문법차이면 자동완성 했을때 강의와 동일하게 나오게 하는 플러그인이나 설정이 있는지 확인 부탁드려요~!!
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
axios, vite 환경 변수 에러
이 부분이 에러가 나는데.envVITE_APP_API_URL=http://localhost:5001/.env.developmentVITE_APP_API_URL=http://localhost:5000/index.jsimport axios from 'axios'; function create(baseURL, options) { const instance = axios.create(Object.assign({ baseURL }, options)); return instance; } export const posts = create(`${import.meta.env.VITE_APP_API_URL}posts/`); // development : http://localhost:5000/posts/ // production : http://localhost:5001/posts/어느 부분에서 에러가 나는지 모르겠습니다,,
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
부트스트랩 세팅관련해서
강의교안에 있는 코드 넣어도 잘 안되고상단바가 가운데로 오고 이상하게 뜨는데 2시간동안 이거 안되서 내일하려고하는데 어떻게하죠 ㅠ
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
fetchPosts 함수 동작 순서 관련 질문입니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요.딜레이 되는 동안 AppLoading 컴포넌트가 보여지고, Error가 없다면 게시글 목록이 보이는 상태입니다. 에러가 발생하지 않았다면,로딩화면 보임-> 로딩화면 사라짐 -> 게시글 목록 데이터 표출으로 화면이 보여지는데요 제 의문은, 두 번째 이미지에 보이는 코드에서로딩화면 사라짐 -> 게시글 목록 데이터 표출은 정의된 적이 없는 것 같은데 이렇게 작동하는 것에 있습니다. try문에서 loading.value = true가 되어 로딩화면이 보이게 되고,그 상황에서 getPosts로 데이터를 뿌리게 됩니다.그리고나서 정상적으로 가져오고 나면finally문에서 loading.value = false가 되면서 로딩화면이 사라지게 되는거 아닌가요? 즉, fetchPosts 함수는로딩화면 보임 -> 로딩화면과 동시에 게시글 목록 데이터 표출 -> 로딩화면 사라짐을 명령하고 있는 상황 아닌가요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
브레이크 포인트에서 레이아웃 바뀜
선생님 1024의 중단점에서 flex처럼 나뉘어져요~ 제가 부트스트랩을 아직 잘 몰라서요..1024 이상에서도 위의 그림처럼 하고 싶을때어떻게 해야하나요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
header값이 들어오지 않습니다
_limit:3을 줬는데headers에 x-total값이 나오지 않습니다ㅜㅜ!PostListView.vue<template> <div> <h2>게시글 목록</h2> <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" :create-at="post.createAt" @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"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> <hr class="my-5" /> <AppCard> <PostDetailView :id="2"> <!-- index.js에서 PostDetailView안에 props가 true이면 화면에 나옴 --> </PostDetailView> </AppCard> </div> </template> <script setup> import PostItem from '@/components/posts/PostItem.vue'; import PostDetailView from '@/views/posts/PostDetailView.vue'; import AppCard from '@/components/AppCard.vue'; import { getPosts } from '@/api/post'; import { ref } from 'vue'; import { useRouter } from 'vue-router'; const router = useRouter(); const posts = ref([]); const params = ref({ _sort: 'createAt', _order: 'desc', _limit: 3, }); // pagination const fetchPosts = async () => { try { const { data } = await getPosts(params.value); posts.value = data; } catch (error) { console.error(error); } }; fetchPosts(); const goPage = id => { // router.push(`/posts/${id}`); router.push({ name: 'PostDetail', params: { id, }, }); }; </script>
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
페이지 컴포넌트에 props를 함수 모드로 전달할 때!
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요.router 설정 시 페이지 컴포넌트에 props를 전달할 수 있다는 부분을 학습했고, boolean 뿐만 아니라 함수 모드도 가능하다고 알려주셨습니다.{ path: '/posts/:id', name: 'PostDetail', component: PostDetailView, // props: true, props: route => ({ id: parseInt(route.params.id) }), },함수를 정의하는 부분에서, route를 인자로 두고 route.params.id를 값으로 하는 id를 return하는 것을 작성했습니다.이 때, route를 미리 정의하지 않아도 이런 식으로 쓸 수 있는건가요?router/index.js에도 route는 정의되어 있지 않습니다.이를 테면, const route = useRoute()로 선언이 되어 있어야 route.params.id와 같은 접근이 가능한거 아닌가.. 생각했습니다.혹은 이 props를 사용하는 PostDevailView.vue에는 route가 미리 정의되어 있어야 한다고 생각했는데, 그것도 아니네요. 어느 부분을 더 학습하면 올바른 이해를 할 수 있을까요?
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
RouterLink 사용 시 to와 :to
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요,강의 중 router.replace()를 설명하는 부분에서<RouterLink to=“/nested/one”> 를<RouterLink :to=“{ name: ‘NestedOne’, replace: true}”> 로 대체하면서 v-bind를 사용했습니다. 이 때 v-bind는 어떤 의미일까요? 단순 text와 객체의 차이가 v-bind 사용 유/무에 영향을 준 것일까요? 항상 충분한 설명이 담긴 답변 주셔서 감사합니다.
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
router 설치 오류
오류가 나는 이유를 모르겠습니다 ㅠㅠ..npm install vue-router 설치도 했는데왜 오류가 나는걸까요..?index.js오류내용
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
route.path관련 질문
<template> <div> <h2>About Vue</h2> <p>{{ $route.path }}</p> </div> </template> <script setup> import { useRoute } from 'vue-router'; const route = useRoute; console.log('route.path', route.path); </script> <style></style> 똑같이 따라해봤는데 console창에 undifined가 뜨네요 원인이 있을까요??
- 미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
composable: alert 창이 안떠요
선생님 composable/alert.js 만들기 전에는 alert창이 잘 뜨다가 아래처럼 했는데 안떠서요~다른 이유가 있을까요?