안녕하세요 구글 로그인 구현 중 질문있어서 질문드립니다! googleUrl, googleClientId, googleRedirectUrl, googleScope, googleResponseType 을 const auth_url = `${this.googleUrl}?client_id=${this.googleClientId}&redirect_url=${this.googleRedirectUrl}&response_type=code&scope=${this.googlescope}`; window.location.href = auth_url; 구글로그인 화면을 누르면 리다이렉트 url에 오류가 있다고 하는데 동일한 리다이렉트 url로 해도 잘 안됩니다 이럴 경우 또 어떤 것을 확인해보는게 좋을까요??

해당 강의 덕분에 vue에 대해 알아가고 있는 중입니다.vue composition api는 어느 강좌에서 확인이 가능할까요~?

.vscode 디렉토리까지 생성이 돼서 안에 settings.json 파일에 { "eslint.enable": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }, "editor.tabSize": 2, }이렇게 내용 들어가 있는데 저장을 해도 탭 사이즈 조절이 안됩니다..  강의 내용에서처럼 no-console을 주석한 뒤 lint 돌렸을때 warning 경고가 뜨는 걸 봐서는 설정은 잘 먹고 있는거 같긴한데 뭘 봐야할까요

<AppModal v-model="show" :show="show" title="게시글">v-model 만 사용하면 되지 않나요?:show="show"는 지워도 되는거 아닌가요?부모에서<PostModal v-model="show"이런식으로 넘겨줬으면 되는거 아닌가요?그리고, AppModal에서 v-model="modelValue"로 받지 않아도 되는거죠?

createWebHashHistory 와 createWebHistory 가 있다고 학습을 하였는데, createWebHistory 가 아닌 createWebHashHistory 를 굳이 써야만 이득이 되는 케이스가 따로 있나요? 뭔가 해당 기능의 쓸모에 대해서 설득이나 이해가 되지 않아서요.

eslint.config.js 라는 파일만 생성이 되어있는데., 버전이 문제일까요..?

안녕하세요 강사님!현재 파이어베이스에서 storage 사용하려면 요금제를 써야만 하는 건가요??기간이 좀 지나서 그런지 강의 화면하고 좀 다르게 시작하기는 없고 프로젝트 업그레이드만 있어서 진행하니까 카드번호 입력하고 결제를 해야하는 거 같아서요ㅠㅠ  

volar 가 마켓플레이스에 검색되지 않아 vue(official)을 설치했는데vue 파일 편집시 무조건 첫번째 라인에 오류 표시가 뜹니다. 방법이 있을까요?

Oops! Something went wrong! :(ESLint: 8.57.1ESLint couldn't find the config "plugin:vue/vue3-recommended" to extend from. Please check that the name of the config is correct.The config "plugin:vue/vue3-recommended" was referenced from the config file in "C:\study\Vue.js\learn-nuxt-3\.eslintrc.cjs".If you still have problems, please stop by https://eslint.org/chat/help to chat with the team.강사님과 같이 eslint 설정 후에 npm run lint를 실행하면 해당 에러가 발생합니다여러 방법으로 시도를 해보았는데도 동일하게 계속 에러가 발생해서 어떤 부분이 문제일지 질문 드립니다..

Quasar UI Framework 설치 에서 4:41초 지점에 강사님처럼 코드 복붙했는데 제목과 같이 이름을 찾을 수 없습니다 라고 에러가 발생합니다.화면상에는 스타일은 잘 적용 되고 있는데 코드상에서만 에러가 발생해서 이것저것 시도를 해봤는데 뭐가 문제인지 계속 저런 문구가 발생해서요 이런 상황 겪어보신적 있으신가요;;  

소스코드 올라온 github 주소 어디서 확인이 가능할까요? 

잘 따라서 했는데제대로 했는데, type오류가 나옵니다.그건 그렇다 치고 밑에 오류때문에 더이상 진행이 안됩니다.CityView가 작동안하는 이유인데 prop 문제인듯합니다.

혹시 다음 강의도 준비 중이신가요 ? 준비 중이시라면 어떤 강의 인지 알 수 있을까요

안녕하세요.application.yml에 동일 OAuth2 제공업체의 redirect-uri를 여러 개 등록할 수 있을지 궁금합니다. 현재 OAuth 제공업체에 개발 및 테스트용과 배포용으로 redirect-uri를 여러 개 등록하였습니다.해당 redirect-uri를 application.yml에 복수로 등록하여 사용할 수 있을까에 대한 의견이 궁금합니다.

<div v-intersectionObserver="handleIntersectionObserver" class="bg-primary"></div>여기 div에 height 100px 했을때는 스크롤해서 하단에 닿이면 6개씩 잘보였는데 style 부분을 지우니까 스크롤 해서 하단에 닿였을때 나머지 게시물이 6개씩 보이는게 아니라 loadMore() 이 연속적으로 실행되어 전체가 다 보이게 됩니다 height가 0이 되면서 계속 노출이 돼서 그렇게 되는건가요?

<template> <div> <h2>게시글 등록</h2> <hr class="my-4" /> <PostForm v-model.title="form.title" v-model.content="form.content" @submit.prevent="savePost" > <template #actions> <div class="pt-4"> <button type="button" class="btn btn-outline-dark me-2" @click="goPostListPage" > 목록 </button> <button class="btn btn-primary">저장</button> </div> </template> </PostForm> <!-- <form> <div class="mb-3"> <label for="title" class="form-label">제목</label> <input v-model="form.title" type="text" class="form-control" id="title" /> </div> <div class="mb-3"> <label for="content" class="form-label">내용</label> <textarea v-model="form.content" class="form-control" id="content" rows="3" ></textarea> </div> --> <!-- <div class="pt-4"> <button type="button" class="btn btn-outline-dark me-2" @click="goPostListPage" > 목록 </button> <button type="button" class="btn btn-primary" @click="goPostListPage"> 저장 </button> </div> </form>--> </div> </template> <script setup> import { useRouter } from "vue-router"; import { createPost } from "@/api/posts"; import { ref } from "vue"; import PostForm from "@/components/posts/PostForm.vue"; const router = useRouter(); const form = ref({ id: 0, title: "", content: "", createAt: Date.now(), }); const savePost = () => { try { // const data = { ...form.value, createAt: Date.now() }; createPost({ ...form.value }); goPostListPage(); // console.log("savePost data", data); } catch (err) { console.log("err", err); } }; // 목록이동 const goPostListPage = () => { router.push({ name: "PostList", }); }; </script> <style lang="scss" scoped></style> <template> <form> <div class="mb-3"> <label for="title" class="form-label">제목</label> <!-- v-model을 사용하지 않고, v-bind와 @input 이벤트를 사용하여 양방향 데이터 바인딩 --> <input :value="title" @input="$emit('update:title', $event.target.value)" type="text" class="form-control" id="title" /> </div> <div class="mb-3"> <label for="content" class="form-label">내용</label> <textarea :value="content" @input="$emit('update:content', $event.target.value)" class="form-control" id="content" rows="3" ></textarea> </div> <!-- <div class="pt-4"> <button type="button" class="btn btn-outline-dark me-2" @click="goPostListPage" > 목록 </button> <button type="button" class="btn btn-primary" @click="goPostListPage"> 저장 </button> </div> --> <slot name="actions"></slot> </form> </template> <script setup> defineProps({ title: String, content: String, }); // update:props데이터명 // 양방향 데이터 바인딩을 위해 사용 : 부모에게 내려받은 props를 업데이트 // update 접두사는 v-model과 함께 사용되는 이벤트 이름 defineEmits(["update:title", "update:content"]); </script> <style lang="scss" scoped></style>{ "posts": [ { "id": 2, "title": "제목2", "content": "내용2", "createAt": "2021-01-02" }, { "id": 3, "title": "제목3", "content": "내용3", "createAt": "2021-01-03" }, { "id": 4, "title": "제목4", "content": "내용4", "createAt": "2021-01-04" }, { "title": "제목8", "content": "내용83333333", "createAt": "2021-01-08", "id": 8 }, { "id": 9, "title": "", "content": "", "createAt": 1750817841654 }, { "id": 10, "title": "", "content": "", "createAt": 1750828553704 } ] }title,content값이 비어서 저장되는데 제가 혹시 어떤 부분을 잘못 작성했는지 ㅜㅜ 알고싶습니다.

 강의에서는 emit-value 옵션을 사용하여 Text, Value로 넣은 값을 표시해주는 부분에서 Combo Box에서 선택했을떄 보여지는 값이 Value로 표시되던데 이때 선택한 값 보여주는건 Text로 보여주고 선택한 데이터를 뽑아올때 Value로 값을 가져오는 옵션이 따로 있나요?

안녕하세요 먼저 좋은 강의 정말 감사드립니다.섹션2 인가코드(프론트에서 발급) 강의와 강의 자료에서 get 요청을 통해 인가코드 전달을 한다고 설명하셨는데, 프론트엔드 코드에서는 post로 요청하고 있고, http body로 jwt 토큰을 받으려면 post로 요청해야하는게 맞는 것 같은데, 제가 잘못 이해하고 있는건지 잘못 설명하신건지 헷갈려서 질문글 남깁니다. const response = await axios.post("http://localhost:8080/member/google/doLogin", {code});

안녕하세요 레디스 강의에 이어 잘 수강하고 있습니다!filterchain 구성에서 포스트맨으로 테스트 시에 raw password가 그대로 컨트롤러에 전달되는데, 실무에서는 (Q.1) 이렇게 하는 방식이 허용되는지 궁금합니다. (Q.2) 안된다면 어떤식으로 해결하는지 궁금하네요!

<template> <div> <h2>게시글 목록</h2> <hr class="my-4" /> <form @submit.prevent> <div class="row g-3"> <div class="col"> <input v-model="params._title_like" type="text" class="form-control" /> </div> </div> </form> <hr class="my-4" /> <!-- list : row 가로 정렬 --> <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> <!-- list --> <!-- 페이지네이션 --> <nav class="mt-4 d-flex justify-content-center" aria-label="Page navigation example" > <ul class="pagination"> <li class="page-item" :class="{ disabled: params._page <= 1 }"> <a class="page-link" href="#" aria-label="Previous" @click.prevent="--params._page" > <span aria-hidden="true">&laquo;</span> </a> </li> <li v-for="pageNum in pageCount" :key="pageNum" class="page-item"> <a class="page-link" href="#" @click.prevent="params._page = pageNum"> {{ pageNum }}</a > </li> <li class="page-item" :class="{ disabled: params._page >= pageCount }"> <a class="page-link" href="#" aria-label="Next" @click.prevent="++params._page" > <span aria-hidden="true">&raquo;</span> </a> </li> </ul> </nav> <hr class="my-4" /> <AppCard v-if="posts.length > 0"> <PostDetailView :id="posts[0].id" /> </AppCard> <!-- <router-view></router-view> --> <!-- <PostDetailView></PostDetailView> --> </div> </template> <script setup> import PostItem from "@/components/posts/PostItem.vue"; import PostDetailView from "./PostDetailView.vue"; import AppCard from "@/components/AppCard.vue"; import { computed, ref, watchEffect } from "vue"; import { getPosts } from "@/api/posts"; import { useRouter } from "vue-router"; const router = useRouter(); const posts = ref([]); const params = ref({ _sort: "createAt", _order: "desc", _page: 1, _limit: 3, _title_like: "", }); // 페이지네이션 데이터 const totalCount = ref(0); const pageCount = computed(() => Math.ceil(totalCount.value / params.value._limit), ); const fetchPosts = async () => { try { const { data, headers } = await getPosts(params.value); console.log("params.value", params.value); console.log("결과:", data); posts.value = data; // console.log("posts.value", posts.value); totalCount.value = headers["x-total-count"]; } catch (err) { console.log("err", err); } // getPosts() // .then(res => { // console.log("res", res); // }) // .catch(err => { // console.log("err", err); // }); }; watchEffect(fetchPosts); // fetchPosts(); const goPage = id => { // router.push(`posts/${id}`); router.push({ name: "PostDetail", params: { id, }, }); }; </script> <style lang="scss" scoped></style>기본값을 "" 을 주니 안나오는데 코드에 문제가 있을까요 ㅜㅜ?