묻고 답해요
167만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결카카오,구글 SNS 로그인(springboot3, vue3)
인가 코드 발급(프론트 vs 백)
카카오 데브톡 응답에 따르면 프론트/백엔드 분할 책임 방식이 지양한다고 합니다.오히려 백에서 로그인 구현을 일임하는 것을 권장합니다.https://devtalk.kakao.com/t/oauth/136448 해당 블로그에서도 책임을 프론트와 백엔드가 나누어 가지는 방식이 잘못되었다고 합니다.https://cafe.naver.com/xxxjjhhh/296 카카오 로그인 REST API에서도 백에서 인가 코드를 받습니다.https://developers.kakao.com/docs/ko/kakaologin/rest-api#before-you-begin-process 어떤 방식이 맞는지 헷갈립니다.
-
미해결최신 Vue 3 완벽 가이드: 프로젝트 설정 & 스펙 총정리
tailwind css 적용 잘 안되면 참고하세요.
강의 들으면서 따라가다 보니 영상에는 vue가 들어가 있는데요. content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],이부분에 vue가 들어가야 tailwind css가 적용되는것 같습니다.참고하세요.
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
질문드립니다.
1.PostDetailView에서 url을 computed를 사용해서 반응형으로 변경한뒤 useAxios(url)로 넘긴다. (이해)2.useAxios의 파라미터로 넘어갈때 url이 반응형으로 넘어가니, axios호출시 url은 unref(url)로 일반값으로 세팅(이해)3.if조건에 isRef(url)을 걸어서 반응형일 때만 watchEffect(execute)실행한다.여기서 질문!!!이 if문안에console.log를 찍어보니 최초에 한번 아이콘 클릭시에만 찍히고, 목록에서 아이콘 눌러도 안찍히는데요. 그럼 watchEffect가 실행이 안됐는데 왜 다른 목록 아이콘 클릭시엔 데이터가 나오는지 이해가 안갑니다. 그렇다고 else에 걸린 execute가 실행되는것도 아닌데요.제가 놓치고 있는 부분이 있을까요?혹시watchEffect에서 최초 한번 실행하게 되면 Vue자체에서 알아서 execute를 실행해서??인가.. 헷갈리네요.
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
unplugin-vue-components 질문드립니다.
현재는 vite.config.js, components.d.ts 설정을 따로 하지 않아도 어느정도 자동으로 되는거 같긴한데요. components.d.ts에 등록을 안해도 잘 동작하네요.main.js에서만 globalComponents만 잘 임포트 해주면 컴포넌트도 전부 정상적으로 인식이 되네요.(영상처럼 빨간색이 아닌 초록색) 질문1.unplugin-vue-components 이거를 현재 시점에서 사용할 필요가 있는지 궁금합니다.현 시점 실무에서 많이 쓸까요? 차라리 갠적인 생각으론 eslint만 잘 걸어놓고, 컴포넌트 내 import가 필요한걸 그 시점에 직접 넣는게 안전할거 같긴한데요.2.확장자가 .ts인데 혹시 typeScript를 사용할땐 components.d.ts가 필요한 설정인가요?요렇게 설정하니깐 파일내 인터페이스가 자동으로 생성은 되네요.Vue3도 가만히 보면 은근 방대한 양이네요. 강의 완주까지 얼마 안남은거 같네요. 좋은 강의 감사합니다.
-
해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
강의듣다가 헷갈려서 질문드립니다.
제가 이해하고 있는게 맞는지 궁금합니다.PostListView.vue일단 PostMadal에 걸려있는 v-model="show"는 양방향모달 버튼 클릭시 show.value = true로 세팅되고, props로 modelValue로 자식인 PostModal로 넘어감.PostModal에서위처럼 되어있는데요.1.get()은 부모에서 전달된 show값 가져오기2.set(value)는 자식에서 값 변경요청시 이벤트를 부모로 올려주고, 부모에서 값변경3.부모에서 값 변경이 되었으니, 다시 자식의 get()이 실행되어 변경된 값 표출여기까지 개념이해 된거 맞져?---PostModal과 AppModal의 관계=> PostModal=> AppModal부모인 PostModal에서 v-model="show"자식인 AppModal에서 props의 modelValue 값 가져옴.만약 이전에 modal 클릭을 해서 true가 넘어와있다고 가정한 상태라면, 모달내 close버튼 클릭시emit으로 PostModal쪽에 이벤트 올리고 false세팅 요청!자식에서 show라는 값을 바꾸려는 시도 때문에 PostModal내 set(value)쪽이 실행되고,emit으로 다시 상위 부모인 PostListView의 값 false세팅 요청. PostModal의 get()실행되어 props.modelValue값 가져옴.따라서 AppModal의 modelValue값은 false로 내려옴. 따라서 모달 안보임(v-if="modelValue"로 인해) 짐코딩님 제가 이해하고 있는게 맞을까여?생각보다 뎁스가 2개만 되도 엄청 헷갈리네요. ㄷㄷ
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
와 짐코딩님 강의 들으면서 느끼는게 많네요.
현재 공통컴포넌트 분리 강의 들으면서 느끼는게 많네요. 기본편을 다 들었음에도 순간순간 헷갈리는데 정리해놨던 것들 계속 보면서 보다보니 조금씩 익숙해지는거 같습니다.먼가 머릿속에 순간 한번에 아직은 안그려지는게 있네요.오히려 평소엔 기본편 정리해둔 내용을 계속 보는게 차라리 도움이 될 것 같습니다.*Props, EmitProps : 부모에서 자식으로 값 넘겨줄때 Props정의는 자식에서 객체로 type, requiredEmit: 자식에서 부모로 이벤트 넘겨줄때(자식에서 바로 수정안하고, 부모에 이벤트 넘겨서 수정) Emits정의는 배열로 이벤트 이름 선언*Slot부모에서 넘겨주는 태그를 자식쪽에 넣을때디폴트 slot사용하거나, Named Slot사용하거나자식 slot에서 부모로 바인딩된 값을 넘겨주면부모에선 v-slot="slotProps"로 받거나,아예 구조분해할당해서 받아서 부모에서 사용 짐코딩님이 강의 준비를 위해 얼마나 공부하셨을지 감히 상상이 안되네요. 암튼 잘듣고 있습니다. 메일로 클로드 알려주셔서 일단 결제해놨습니다. 추후 들을 예정입니다. ㅎㅎ
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
질문드립니다.
페이징, 필터 강의 듣고 질문드립니다.json-server의 db.json을 활용하여 구현하시는건 강의 잘 들었습니다.다만, 실제 백엔드 api를 호출하여 목록조회결과 json값을 받은 뒤 처리하는건 똑같죠?전체카운트도 백엔드API통해서 가져오는게 보통이져? 강의 들으면서 백엔드의 DB가 사용되었을땐 어떻게 될까를 계속 생각하게 되는데요. params 객체에 그냥 조회조건(where조건, order by 등)들이 들어가서 백엔드에서 DB 쿼리 조회조건으로만 들어가면 끝이겠죠? 목록이 대량이고, 서버페이징을 사용한다면?순간 헷갈리는건 DB를 계속 호출해서 화면을 가져오느냐? (대량건?)화면에 뿌려져 있는것만 사용하는냐?(소량건?) 먼가 한번에 감이 안오네요.
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
npm init vue@3.1.9
npm init vue@3.1.9설치 후 npm install을 했더니deprecated된게 많아서 vite관련 버전만 좀 올려서 강의 들어도 될까요?
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
크롭 웹스토어 vue devtools 설치 관련
맨 위에 있는게 작년에 설치했던 vue devtools인데요. v5버전을 설치해도 상관없나여? 아님 그대로 쓰면 되나여?
-
해결됨카카오,구글 SNS 로그인(springboot3, vue3)
카카오 클라이언트 시크릿
안녕하세요 강사님,다름이 아니라 강의 들으면서 카카오 oauth 설정 및 테스트 중인데카카오 REST API 키에도 클라이언트 시크릿이 생긴 것 같습니다.구글처럼 yaml에 kakao.client.secret 키 넣어주고 요청 바디에 같이 보내니까 그제서야 액세스 토큰 및 프로필 정보 응답이 왔습니다.강의 촬영 당시와 현재의 카카오 developers UI 및 메뉴 구성이 많이 바뀌어서 제가 모종의 설정을 놓친건지, 아니면 새롭게 카카오 클라이언트 시크릿이 추가되어서 이제는 구글처럼 시크릿 키를 요청 바디에 넣고 보내는 게 맞는 방법이 된 건지 말씀 여쭤보고자 질문 드립니다.양질의 강의 항상 감사드립니다.
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
snippets 작성하는 부분 설명이 있었나요?
11. Options API vs Composition API 강좌중에 snippets 사용하는 부분이 있고, 강사님이 이전 수업에서 설명하셨다고 하신거 같은데요. snippets 작성에 대해서 설명하는 부분을 못본거 같은데 설명하는 부분이 있었나요?
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
computed 의 set 함수를 통해 const 변수에 값을 담는 부분
안녕하세요?이번에 16강 Computed 강좌를 듣다가 궁금한 게 있어서 질문을 남깁니다.const fullName = computed({ get... set...});이렇게 할당을 하는데 const는 상수로 알고 있는데 저렇게 선언하고 fullName에 다른 값을 할당하는게 가능한가요?fullName = '새로운 값' 이렇게 하면 스크립트 에러가 나는데 fullName.value를 붙여서 할당해서 괜찮은 것 같긴 한데...좀 헤깔리네요...
-
미해결Vue.js 시작하기 - Age of Vue.js
개발자 툴에서 Vue가 표시되지 않는 현상.
안녕하세요. 강의를 듣다가 이하처럼vue개발자 툴을 표시하고 싶은데 잘 안되어서 문의를 드리게 되었습니다.이하 시도해 본 것.1.구글 최신버젼 확인2.구글 확장기능창에서 개발자모드 활성화Google Chrome확장기능에 vue.js devtools추가(버젼7.7.7) 4.파일URL에 접근을 허가 활성화5. Vue.js3사용인지 Vue.js2사용중인지 Copilot에게 확인해본결과 index.html의 script부분을 바꿔야 한다는 내용이 나옴.6. Vue버젼 확인해봤으나 버젼 확인 안됨. 현재까지 강의에서는 아직 터미널 상에서 Vue를 설치하라는 내용이 없었으나 설치를 시도해보는게 좋을까요?7.node.js다운로드 확인 - 다운로드 완료되어 있음. 그 외에도 시도해보면 좋은게 있으면 알려주시면 감사드립니다.
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
소스 공유 어디서 해야하는지 궁금합니다
강습 내용 소스를 공유해주신다고 했는데 어디에서 소스를 공유받아야 하는지 모르겠습니다 ㅠㅠ
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
component 등록과 사용
4분 53초쯤 app.component('BookComponent', BookComponent) 라고 등록을 하신건데 사용할 때는 왜 book-component 로 선언하시는건지 이해가 되지 않습니다.
-
미해결Vue.js 시작하기 - Age of Vue.js
chrome 확장 devtools 버전 문제
안녕하세요?이번에 강좌를 신청했는데 크롬 최신 버전을 깔았더니 view dev tools 에서 이렇게 메시지가 뜨고 콘솔 탭에 뜨지를 않네요...이건 어떻게 처리해야 될까요?
-
미해결Vue 3 시작하기
파일 생성 방법이 다른건가요?
안녕하세요 회사에서 vue를 사용해 퍼블을 해야돼서 인강을 구매했는데, 제가 생성한 파일이랑 형식이 달라서 어떻게 따라가야 할 지 문의드립니다. 제가 알고 있는 화면 구성은 아래 사진인데 Vue.create 이런건 어떻게 바꿔야 하는지 모르겠습니다ㅜ<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>vue-project</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body> </html>
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
강의교안
https://www.gymcoding.co/에 강의 교안 메뉴가 사라졌어요~ 어디서 강의교안 볼수 있나요?
-
해결됨[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
Nuxt 4 관련 강의 업데이트 계획이 있으실까요?
안녕하세요, 짐코딩님먼저 좋은 강의 만들어주셔서 감사드립니다. 덕분에 Nuxt 3를 이해하는 데 많은 도움이 되고 있습니다.다름이 아니라, Nuxt 4가 출시되면 해당 내용을 반영한 강의 업데이트나 별도 강의 제작 계획이 있으신지 여쭤봐도 될까요?
-
미해결웹 게임을 만들며 배우는 Vue
Lottball.vue에서 궁금한점이 있어 질문드립니다.
현재 방식에서는 볼의 색상을 표현할떄 computed:{ backGround(){ let background; if(this.number <=10){ background ='red'; } else if(this.number <=20){ background='orange'; } else if(this.number<=30){ background='yellow'; } else if(this.number <=40){ background ='blue'; } else{ background='green'; } return {background,}; } },이런식으로 computed에 넣으신뒤 바뀌는구조로 갔는데 mounted(){ if(this.number <=10){ this.color ='red'; } else if(this.number <=20){ this.color='orange'; } else if(this.number<=30){ this.color='yellow'; } else if(this.number <=40){ this.color ='blue'; } else{ this.color='green'; } },이런식으로 mounter()로해서 하게되는것과의 차이가 (현재 컴포넌트에서는 동일하게동작)실제 자식컴포넌트가 삭제가 안되고 재사용을 하게되는경우엔 computed로 사용하게된다면 실시간으로 반응성이되지만mouted로 하게되면 자식컴포넌트가 삭제가된것이 아니기때문에 반응을 안하기때문에 computed로 사용한것이다 2. 캐싱 때문도 있고 라고 이해해도 될까ㅓ요?