묻고 답해요
130만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결쉽고 빠르게 배우는 Vue 3 기본 (Composition API)
inject SiteHeader @click 에러 해결법
강의에 나온대로 작성시 @click에 함수 두개를 넣을시 에러가 남. @click=" (e) => { updateName('List') updateCategory(item) } "이렇게 함수 표현식으로 작성 후 해결 완료이유는 잘몰루겠네요
-
해결됨프로젝트로 배우는 Vue.js 3
작동은 되긴 하는데 해당 메세지는 왜 뜨는걸까요?
(사진)
-
해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
update:value로도 커스텀 v-model 기능이 동작하네요 ;;
Vue 2의 호환성 문제로 놔둔 것일까요? 혹시나해서 바꿔봤더니 잘되네요 ;; 아무래도 Vue 3 권고 사항인 modelValue를 사용하는게 맞겠죠? <label> 이름 <input type="text" :value="value" @input="e => $emit('update:value', e.target.value)" /> {{ userName }} </label>
-
해결됨Vue로 Nodebird SNS 만들기
강의는 언제까지 업데이트 된 내용인가요?
오랜만에 다시 강의를 들어보려고 하는데 최근 Vue 업데이트가 많아서 최신버전에서도 문제 없이 작동할지 모르겠네요. Vue3 기반으로 작업해도 문제 없을까요?
-
미해결호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)
CommentService에서 Repository를 호출하지 않는데도
CommentService에서 Repository를 호출하지 않는데도 DB에 저장되는 이유가 뭔가요? @Transactional 어노테이션에 기능이 있는 것 같은데 이런 건 JPA를 좀 더 공부해야 알 수 있는 내용일까요?
-
미해결Vue 3 중급 - Composition API
composition api 재사용성에 대한 문의
안녕하세요. 강사님 말씀대로 todo app 에서는 composition API의 재사용성 장점을 느끼기가 어려운데요.중대형 사이즈의 프로젝트에서 options API 방식과 비즈니스 로직만 별도 .js 파일로 분리해 사용하는 것이 가독성과 재사용성 측면에서 더 나은 선택이지 않을까 생각이 됩니다.강사님께서 Composition API를 적용한 경험과 Options API와 비즈니스 로직을 .js 파일로 구성하는 방식에 대한 견해를 알고 싶습니다.감사합니다.
-
미해결Vue 3 시작하기
vue 개발자도구에서의 timeline
강사님꺼에선 refresh라는 로그가 보이는데 제꺼에선 안보이네요ㅠㅠ 4layers라는 검정색 동그라미 버튼 누르니까 log가 찍히는건 다른 레이어에서 확인했으나 mouse에서만 보이지 componet events에서는 나오지 않습니다ㅠㅠ 새로고침 이라고 뜨는 것 보면 잘은 나오는 것 같은데...이 부분 어떻게 해야 해당 refresh log를 볼 수 있을 지 궁금합니다! 코드는 강사님과 똑같히 했다고 생각하는데, 우선 첨부합니다!<div id = "app"> <!-- <app-contents v-on:이벤트이름 = "상위 컴포넌트의 메서드 이름"></app-contents> --> <app-contents v-on:refresh = "showAlert"></app-contents> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script> var appContents={ template:` <p> <button v-on:click = "sendEvent">갱신</button> </p> `, methods:{ sendEvent(){ this.$emit('refresh'); } } } //root 컴포넌트 Vue.createApp({ methods:{ showAlert(){ alert('새로고침'); } }, components:{ //'컴포넌트 이름' : 컴포넌트 내용 'app-contents':appContents } }).mount('#app'); </script>
-
미해결호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)
Editor....를 활용한 패턴에 질문있습니다.
당연히 구글링 해보셨져? 원하는 결과를 못찾으셨나요? 어떤 검색어를 입력했는지 알려주세문제가 발생한 코드(프로젝트)를 Github에 올리시고 링크를 알려주세요.Editor관련한 질문글들을 읽어보아도 제 머리로 이해가 안돼서 또 이렇게 Editor 질문 글을 하나 더 추가합니다... ㅠㅠ [해당 영상을 보지 않았더라면 짰을 코드]Post엔티티에 비즈니스 로직을 작성하고단순하게 PostEdit을 전부 넘겨 비즈니스 로직 change를 호출하여 더티체킹으로 마무리! 이렇게 했을 경우, 파라미터 순서에 무관하게 PostEdit이라는 수정을 위한 Dto 객체를 단 하나만 넘겨 수정을 할 수 있다고 판단했습니다. 물론 위 비즈니스 로직은 null값에 대처는 못하겠지만요! 하지만, 프론트 개발자와 상의하여 '수정 시, 모든 데이터를 넘겨준다는 전제' 에서는 가장 간단한 방법이라고 생각했습니다! [Editor를 작성해보며 느낀 의문점]Post의 toEdit을 통해 기존 가지고 있던 데이터를 PostEditor에게 넘김으로써 Builder에서 null값에 대응할 수 있다는 점 이외에는 또 다른 장점을 이해하지 못하고 있습니다. Request의 title혹은 content가 null일 경우 이를 해결하기 위한 방법을 제시해주는 것 말고는 되려 관리해야 할 것들만 늘어난 느낌이 해소가 되지 않습니다 ㅠㅠ 그래서 제가 이해한 것 까지의 내용들이 잘 이해한 것인지 그리고 추가적으로 제가 이해하지 못한 것들을 이해하고 싶습니다! findById로 수정하려는 엔티티를 가져옵니다.toEdit()을 통해 현재 수정하고자 하는 엔티티의 필드들을 PostEditor에게 넘겨 빌더를 만듭니다. 이는 수정하려는 엔티티가 현재 가지고 있는 필드들을 핸들링 할 수 있도록 해줍니다. (가령, title혹은 content의 null 처리)2번을 통해서 PostEditor가 현재 수정하려는 Post의 필드들을 주입 받았으면, Request로 받은 데이터를 통해 최종 build()를 해줍니다.변경사항을 모두 적용한 postEditor를 Post의 변경비즈니스 메서드 edit(postEditor)를 통해 더티체킹으로 변경해줍니다. [최종적으로 든 생각][Editor를 작성해보며 느낀 의문점] 에서 작성된 것들이 정확하다면,아예 첫 방법을 사용하되, 비즈니스 메서드에서 null 체크를 해주면 어떨까? 하는 생각이 들었습니다.이런 방식으로 진행한다면 문제가 있을까요? 긴 글에 시간 내어주셔서 감사합니다 !
-
해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
강의시 참조하는 노션 문서 질문 합니다.
안녕하세요.강의가 귀에 쏙쏙 들어오고 이해하기 쉽게 설명해주셔서 감사합니다. 다름이 아니고 강의에서 참조하는 노션 문서를 볼 수 있나요?볼 수 있으면 어디서 볼 수 있나요?감사합니다.
-
해결됨Vue 3 시작하기
target[prop] 질문
target[prop] = newValue; 를 하지 않고 render(newValue)를 해도 값이 바껴서 출력되는걸 확인할 수 있는데, target[prop]에 newValue 값을 넣어주는 이유가 있을까요?
-
해결됨Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
emit, prop 대신 defineModel()을 사용하여 구현 하는 것에 대한 질문 입니다.
최근 vue 문서를 보다가 "Vue 3.4부터는 defineModel() 매크로를 사용하는 것이 권장되는 접근 방식입니다:"라고 되어있었습니다. 그래서 vue 버전을 올리고 강의에 emit, prop 사용하는 곳을 defineModel()방식으로 변경하고 싶어서 강의 코드를 수정하면서 진행 하고 있습니다. 대표적으로 커리큘럼 email 회원가입&로그인 파트에 사용된 prop, emit 부분을 아래와 같이 수정 해 보았습니다. 기존 AuthDialog.vue변경 AuthDialog.vue기존 SignInForm.vue변경 SignInForm.vue테스트 하면서 동작을 되지만 구현 하면서 질문이 두 가지 셍걌습니다:defaule.vue - AuthDialog.vue - SignInForm.vue간에 viewMode와 closeDialog 값을 제가 구현한 방식 대로 하는 게 문제가 없는지 알고 싶습니다.AuthDialog.vue에서 아래서 변경된 closeDialog 값을 인식 하기 위해서 watch를 사용하였는데 제가 구현한 방식보다 괜찮은 방법이 있는지 알고 싶습니다.defineModel() 방식을 사용하면 강의 코드 상당 수가 간단해 질 것 같네요 좋은 강의 곱씹으면서 보고 또 보고 있습니다. 정말 감사합니다.
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
코드 자동으로 prettier 질문
프리티어 extensions이거 설치하지말라고했떤거같은데 이거 적용안하느거맞나요?강의 였나 교안에서 prettier설치하지말라고했던거같은데 충돌떄문에코드를 자동으로 formatter안해주니까 너무 불편한거같은데
-
해결됨Nuxt.js 시작하기
SSG -> SSR 배포 방식 전환
안녕하세요.SSG로 배포할 때 일반적으로 로컬에서 generate하고 dist 폴더만 서버에 올리나요?현재 운영중인 서비스는 젠킨스 서버에서 generate하고 dist 폴더만 별도 서버로 전달하는 방식으로 하고 있는데... 장/단이 있을까요?추가로 서비스가 SSG와 적합하지 않으면서... 배포시 10~17분씩 소요되어 SSR 방식으로 변경하고자 합니다.배포 프로세스를 변경하는데 nginx 서버 설정 자체도 변경이 필요한지 궁금합니다! 기존에는 ssl, proxy, dist 위치 정도만 되어 있습니다!
-
미해결Vue.js 시작하기 - Age of Vue.js
다음 단계 강의는...?
완전 초보입니다. vue3 레벨1을 들어야했는데..ㅠㅠ잘 모르고 현재 강의인 vue2 레벨1을 들었네요...업데이트 된 내용이 많아도...뭐 기본적으로 동작원리는 비슷할거라 생각해서 우선 들었는데요.문제는 이 강의를 듣고나서 레벨2는 어떤걸 들어야하나 해서요.vue3의 레벨2를 들어도 상관없을지..아니면 vue3의 레벨1을 다시 듣고 vue3 레벨2를 들어야할까요? 바뀐 부분의 내용을 모르고는 vue3레벨2 강의 따라가기가 많이 힘들까요..?
-
해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
axios 컴포저블2 에서 useAxios에서 전달받은 resp값이 null로 나옵니다
useAxios.js 내 axios 연결 .then에서const resp = ref(null); //생략 .then(result => { resp.value = result; data.value = result.data; })이렇게 전달을 주면 postList.vue에서const totalCount = computed(() => resp.value.headers['x-total-count']);이렇게 받아오면 cannot read properties of undefined 'x-total-count' 이렇게 콘솔창에 x-total-count를 읽을수가 없다고 나와 콘솔에 resp.value를 해보니 null 이 찍혔습니다. 하여 useAxios.js에서.then(result => { resp.value = result; resp.value = resp.value.headers['x-total-count']; data.value = result.data; })resp에 x-total-count를 넣고postList.vue에서const { data: posts, resp: totalCount } = useAxios('/posts', { method: 'get', params, });구조분해?할당으로 totalCount에 넣으니 동작이 되었는데 원인을 알 수 있을까요..
-
미해결Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
cookie 의 expire 를 설정 하려면
안녕하세요. 강의 잘듣고 있습니다.cookie 의 expire 를 설정 하려면 별도 라이브러리를 설치해서 해야 하나요? 아니면 locale: useCookie('locale',{maxAge: 60*60}).value || useDefaultLocale().value, 와 같이 하면 되는건가요?위와 같이 하니 적용 되지 않는 것 같아서 문의 드립니다.
-
미해결Nuxt.js 시작하기
갑자기 화면에 에러가 나오네요..
안녕하세요 강사님?제가 조회 기능 개발하다가 웹 화면을 npm run dev로 다시 실행했는데요 갑자기 화면과 같이 오류가 나오게 되었습니다구글링을 해서 살려보려고 했는데 1시간째 계속 저 상태이네요 ㅠㅠ 혹시 도움을 주실 수 있을까요
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
addTodo Helper 함수 적용
안녕하세요. 강의 중에는 TodoInput.vue addTodo()를 ...mapMutation로 변경하는 내용이 없습니다. git 에도 $store.commit이 적용된 소스만 있고요.addTodo()는 helper로 대체할 수 없는 건가요? 감사합니다.
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
vuex 헬퍼 전역 설정
안녕하세요. 강사님의 명쾌한 강의 덕분에 vuex에 대한 이해도가 높아졌습니다.실무에서는 Todo app 보다 더 복잡한 컴포넌트를 다루기 때문에 vuex 헬퍼를 왠만한 컴포넌트에 다 import할텐데요. 이렇게요. import {mapGetters, mapMutation 등등} from "vuex";이럴 경우에 한 번만 import해서 전역적으로 사용할 수 있는 방법이 궁금합니다. 감사합니다.
-
미해결Nuxt.js 시작하기
마지막 강의까지 작성된 코드
안녕하세요.강의 정말 잘 들었습니다.혹시 마지막 강의까지 작성이 완료된 코드가 있는 브랜치가 따로 있을까요?