TypeError: relativeURL.replace is not a function at async fetchPost (PostDetailView.vue:58:20)PostDetailView에서 number를 string타입으로 변경 후 콘솔에러가 뜹니다. router 폴더도 강의와 같이 수정했고, api 폴더 안에 index.js랑 posts.js도 강의와 같이 수정했는데 왜 타입에러가 뜨는지 문의드립니다.return posts.get(id);이 부분을 return posts. gen (id + ' ') 로 변경해야 콘솔 에러가 없어져요.다른 부분은 강의와 똑같이 수정하였습니다.

6강 컴퍼넌트 이해하기 강의 중npm init -y를 실행하기 위해 보기 > 터미널 을 실행하였더니 선생님의 터미널은 vue3-getting-started로 떨어져 있는데저는 c:\lrarnVscode\ 로 떨어지고npm init -y를 치면  npm : 'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오.위치 줄:1 문자:1+ npm init -y+ ~~~ + CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException 이렇게 나옵니다.따로 설정해야 하는 부분이 있는 건가요?

안녕하세요 강사님 혹시 oauth2 를 이용한 로그인을 한 다음에 사용자 프로필을 받는 것이 서비스 플로우인데 이럴경우 웹이 아닌 앱을 사용할경우 (로직은 다른 거 알고 있습니다.) (PCKE 방식 사용 예정입니다.)oauth2 를 해서 사용자 db에 저장이 되고 이렇게 처음에 저장이 되고 그 다음에 프로필을 받으면 저 값이 수정이 되게 만들어 주는 게 맞을지 질문드립니다. 사용자엔티티에 Provider 나 socialId 로 값을 받습니다. (구글과 애플을 사용할 예정입니다.) @Entity @Table(name = "users") @Getter @NoArgsConstructor @Setter public class User { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) @Column(name = "user_id") private Long id; @Column(name = "name", nullable = false) private String name; @Enumerated(EnumType.STRING) @Column(name = "SEX", nullable = false) private Sex sex; @Column(name = "age", nullable = false) private Integer age; @Column(name = "nationality", nullable = false) private String nationality; @Column(name = "introduction", length = 40, nullable = false) private String introduction; @Column(name = "visit_purpose", length = 40, nullable = false) private String visitPurpose; @Column(name = "languages", nullable = false) private String languages; @Column(name = "hobby", nullable = false) private String hobby; @Column(name = "created_at", nullable = false) private Instant createdAt; @Column(name = "updated_at", nullable = false) private Instant updatedAt; @Column(name = "Provider", nullable = false) private String provider; @Column(name = "social_id", nullable = false) private String socialId; @Column(name = "email", nullable = false) private String email; @Builder public User(String name, Sex sex, Integer age, String nationality, String introduction, String visitPurpose, String languages, String hobby, String provider, String socialId, String email) { this.name = name; this.sex = sex; this.age = age; this.nationality = nationality; this.introduction = introduction; this.visitPurpose = visitPurpose; this.languages = languages; this.hobby = hobby; this.provider = provider; this.socialId = socialId; this.email = email; this.createdAt = Instant.now(); this.updatedAt = Instant.now(); } public void updateProfile(UserUpdateDTO dto) { if (dto.getName() != null && !dto.getName().trim().isEmpty()) { this.name = dto.getName().trim(); } if (dto.getSex() != null) { this.sex = dto.getSex(); } if (dto.getAge() != null) { this.age = dto.getAge(); } if (dto.getNationality() != null && !dto.getNationality().trim().isEmpty()) { this.nationality = dto.getNationality().trim(); } if (dto.getIntroduction() != null && !dto.getIntroduction().trim().isEmpty()) { this.introduction = dto.getIntroduction().trim(); } if (dto.getVisitPurpose() != null && !dto.getVisitPurpose().trim().isEmpty()) { this.visitPurpose = dto.getVisitPurpose().trim(); } if (dto.getLanguages() != null && !dto.getLanguages().trim().isEmpty()) { this.languages = dto.getLanguages().trim(); } if (dto.getHobby() != null && !dto.getHobby().trim().isEmpty()) { this.hobby = dto.getHobby().trim(); } this.updatedAt = Instant.now(); // 수정 시각 갱신 } }

카카오 인가 코드 요청 url이 변경 된 것 같습니다!

안녕하세요 구글 로그인 구현 중 질문있어서 질문드립니다! 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값이 비어서 저장되는데 제가 혹시 어떤 부분을 잘못 작성했는지 ㅜㅜ 알고싶습니다.