묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Vue.js 시작하기 - Age of Vue.js
개발자 도구에서 뷰탭이 안보여요....
하아 너무 답답하네요레거시나 베타버전 다 설치해봤고,충돌일까싶어서 한개씩만 설치도 해봤는데안됩니다...강의의 반만 따라가는 것 같아서 참 답답합니다...어떻게 해결방법이 없을까요?
-
미해결기획자님 이 정도 웹 개발은 배워보면 어떨까요? [이론+실습]
npm 명령어 실행 안됨(윈도우)
질문은 자세하게 적어주실 수록 좋습니다. 어느 부분을 수강중이신지 =>vue 설치 수강 내가 어떻게 했는데, 어떤 결과가 나오기를 기대했는데, 다른 결과가 나왔는지=> terminal에 npm~을 입력했는데 npm : 'npm' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오 라고 표기됨 작성하신 코드 및 오류 스크린샷 npm i -g @vue/cli 을 함께 첨부해주시면 좋아요!
-
미해결Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)
route.meta? 에서 물음표 개념
안녕하세요~ 웹 레이아웃 구성 default.vue 파일의 코드 일부분 입니다.route.meta? 에서 ?물음표개념이 어떻게 될까요?지워도 작동해서 질문 드립니다.답변 주시면 감사하겠습니다. const pageContainerStyles = computed(() => ({ maxWidth: route.meta?.width || '1080px', margin: '0 auto', }));
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
template 조건부의 차별점에 대한 질문
여러 개의 HTML 요소를 v-if로 조건부 렌더링을 하고 싶다면 template 태그로 감싸고 v-if를 사용하여 렌더링 하면 된다고 말씀해주셨는데, template 태그가 아닌 div, ul 등으로 감싸도 동일하게 작동하는 것을 확인했습니다. 기존 React를 사용하는 제 입장에서는 template 태그를 사용하지 않고 후자와 같은 방법으로 조건부 렌더링을 걸곤 했는데,혹시 여러 개의 요소를 하위 요소로 담고 있는 상위 일반 HTML 태그에 v-if를 사용하는 것과, template으로 묶어 사용하는 것에 차이가 있는지 질문드립니다!
-
미해결Vue.js 시작하기 - Age of Vue.js
프롭스 데이터 질문입니다.
크롬 확장 프로그램 vue devtools 이 안되서 강의 듣는데 좀 답답하네요 ㅠㅠ<app-content v-bind:propsnum="message"></app-content>이렇게 적으면 hi가 나오고<app-content v-bind:propsnum="num"></app-content>이렇게 적으면 10이 나오고근데 '<h1> {{propsnum}} {{propsdata}}</h1>',이렇게 두개는 안나오고...어렵습니당..직접 데이터 확인해보면 좋은데 왜 확장프로그램이 안될까요....ㅠㅠㅠ 레거시로 깔았는데도 개발자도구에서 vue탭이 안보여요,.. <app-content v-bind:propsnum="message"></app-content> </div> let appContent={ template : '<h1> {{propsnum}} {{propsdata}}</h1>', props:['propsnum','propsdata'] } new Vue({ el: '#app', components:{ 'app-header' : appHeader, 'app-content' : appContent }, data:{ message : 'hi', num:10 } })
-
미해결Vue.js 시작하기 - Age of Vue.js
component.html:11 Uncaught ReferenceError: Vue is not defined at component.html:11:20 (anonymous) @ component.html:11
component.html:11 Uncaught ReferenceError: Vue is not defined at component.html:11:20(anonymous)@component.html:11""콘솔 에러가 뜹니다..
-
미해결Vue.js 시작하기 - Age of Vue.js
화면이 안떠요,, 이전 이후 강의는 뜨는데..
강의 동영상화면이 안떠요,, 이전 이후 강의는 뜨는데..왜그런걸까요?
-
미해결[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
사진 오류
<img src="https://i.ibb.co/XbsPPmQ/image.png" />이 사진 주소 바뀐거같아요
-
해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
질문이 있습니다.
수업 시간에 보면서 따라하고 있는데,AppCard.vue 파일에서<slot :child-messag="childMessag" :hello-messag="helloMessag">#body</slot>위의 코드처럼 :hello-messag 로 하는 게 맞는 건가요?아니면 강의 화면처럼hello-messag로 하는 게 맞는 건가요?(16:43 강의 화면 참고) 처음에만 : 쓰고 그 이후 부터는 생략이 가능한 걸 까요??
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
카멜케이스x 대쉬케이스 또는 케밥케이스 입니다.
헷갈리시는분들 제목 참조용
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
Props와 Slots에서 동일한 name을 사용하는 경우,
안녕하세요. component에서 props와 slots에 동일한 name을 갖고 있을 때,slot 형태로 전달해도 무시되고 props만 인식됩니다.혹시 이럴 때 slot | string 받을 수 있는 방법이 있을까요? <slot name="prefix" /> props: { prefix: { type: String .... }}
-
해결됨호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)
다중 데이터를 삭제 할 때
안녕하세요.호돌맨님 인강 들으면서 어찌저찌 취업하게 된 신입 개발자입니다. 현재 postDelete 로 단일 데이터를 검증 후 삭제하고있는데,만약 List로 된 다중 PK 를 검증하고 삭제할 때는 어느 방법이 좋은건지 잘 모르겠습니다. public void postAllDelete(List<Long> postIds) { //1번 List<Post> posts = postRepository.findAllById(postIds); if(posts.isEmpty()) throw new IllegalArgumentException("삭제할 게시글이 존재하지 않습니다."); postRepository.deleteAll(posts); //2번 postIds.forEach(e-> { Post post = postRepository.findById(e) .orElseThrow(PostNotFound::new); postRepository.delete(post); }); } 1번 같은 경우는 조회 및 삭제 각 한번씩 DB 를 호출해서 성능적으로 좋다고 생각하는데,리스트에 담겨져있는 PK 가 유효한지 검증하려면 stream API 를 사용하여 map 으로 PK 추출 후 filter 로 검증을 하는게 좋은건지, 혹은 다른 방법이 있는지 궁금합니다 물론 현재는 데이터가 많이 없으니 어느 방법을 채택해도 상관없지만추후에 대량의 데이터를 접하게될 때를 생각하다보니,, 어떻게 보면 인강과 관련없는 질문이긴한데,,염치 불구하고 도움 주시면 감사하겠습니다.
-
미해결[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
@pinia/nuxt 버전이 0.9.0인 경우 @pinia-plugin-persistedstate/nuxt와 충돌
질문은 아닙니다.다른 분들을 위해 공유 차 남겨둡니다.@pinia/nuxt 버전이 0.9.0인 경우 @pinia-plugin-persistedstate/nuxt와 충돌이 발생합니다.@pinia/nuxt 버전이 0.9.0를 0.5.0으로 낮춰주시면 충돌 문제를 해결할 수 있습니다.
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
vue3 공부중에 있는데, eslint 및 prettier에서 문제가 있습니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. eslint 가 적용 되지 않습니다. 저장시에 더블 코트가 싱글 코트로 변경되어야 하는데, 되지 않네요.vue 코드들도 저장시에 자동정렬도 되지 않고 있습니다ㅠ아래는 차례대로 package.json, setting.json, .eslintrc.cjs, .prettierrc.json 입니다{ "name": "learn-vue3", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "bootstrap": "^5.3.3", "lint": "^0.8.19", "prettier": "^3.4.2", "vue": "^3.1.9" }, "devDependencies": { "@vitejs/plugin-vue": "^5.2.1", "eslint": "^9.17.0", "eslint-plugin-vue": "^9.32.0", "vite": "^6.0.3" } } { "eslint.validate": [ "javascript", "javascriptreact", "typescript", "typescriptreact", "html", "vue", "markdown" ], "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, } import js from '@eslint/js' import pluginVue from 'eslint-plugin-vue' import skipFormatting from '@vue/eslint-config-prettier/skip-formatting' export default [ { name: 'app/files-to-lint', files: ['**/*.{js,mjs,jsx,vue}'], }, { name: 'app/files-to-ignore', ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'], }, js.configs.recommended, ...pluginVue.configs['flat/essential'], skipFormatting, { rules: { 'no-console': 'warn', // console 메서드 사용시 경고(warn) 표시 }, }, ]{ "$schema": "https://json.schemastore.org/prettierrc", // Prettier 설정 스키마 "semi": false, // 세미콜론 생략 "singleQuote": true, // 작은따옴표 사용 "arrowParens": "avoid" // 매개변수 하나일 때 괄호 생략 }
-
미해결React와 Vue로 배우는 TypeScript 필수 개념 (feat. ChatGPT)
JSX.Element 컴포넌트 타입 정의 관련 재 질의
React와 Vue(2 기준) 두 뷰 라이브러리 | 프레임워크를 모두 사용해본 현직 실무 풀스택 (백엔드는 자바 스프링) 개발자 입니다.아직 실무에서 타입스크립트 도입을 하지 않았고, 타입스크립트에 대한 관심도가 매우 높아 기대하는 마음에 해당 강의를 신청하고 듣게 되었습니다.제가 질문하고싶은 JSX.Element 타입 관련해서 의문이 드는점은, 다른 사람들이 짜놓은 Typescript React 깃허브 프로젝트들을 찾아 보게되면 Props나 Children을 사용할때는 강의에서 알려주신 JSX.Element 타입 대신 React.FC 혹은 ReactNode, ReactElement 등 다른 타입을 제너릭과 함께 사용하여 작성하고 있는것을 본적이 있습니다.구글링을 조금 해 봤더니 무조건 적으로 JSX.Element 타입만을 선언하는것은 아니더라구요. 왜 이런 필수개념이 빠져있는지... 저는 그런것들에 대한 궁금증도 많았기에, 이 강의를 결제했는데.... 뭔가 강의를 잘못 선택했고, 리액트에서 사용하는 타입스크립트 타입에 잘못 접근하고 있는 기분이 듭니다..회사에서 비즈니스 계정 입력해서 지원금 받아서 강의를 신청했는데, 이거 보고 내용 정리해서 보고서와 함께 실무자들 앞에서 발표해야 합니다...........발표 할 때 그에 대한 리뷰 질문들이 들어오게 되면 출처 밝히고 해당 강의에서는 이런 식으로 가르쳐줬다. 라고 말하면 얼굴 공개하면서 까지 자부하시고 찍은 강사님 커리어와 프라이드에도 그렇게 좋은 영향은 가지 않을것이라 생각이 듭니다..분명 AI가 답변을 달텐데 강사님 다시한번 확인해주시고 답변 달아주시고 이 부분에 대해 부연 설명 대신 강의 영상 자체를 조금 더 디테일하게 수정해서 보안해주시길 바랍니다.매우 실망스러워요....
-
미해결React와 Vue로 배우는 TypeScript 필수 개념 (feat. ChatGPT)
JSX.Element 컴포넌트 타입 정의 관련 질의
.
-
미해결React와 Vue로 배우는 TypeScript 필수 개념 (feat. ChatGPT)
프로젝트 생성 관련 가이드 영상은 왜 없는건가요
리액트와 뷰 모두 포함해서 프로젝트를 생성하는 가이드영상이 아에 없는거같은데요.그동안 타입스크립트를 접목하지 않은 react와 vue만 사용했고 경험이 있는 상태에서typescript를 리액트와 뷰만의 생태계에서 어떻게 사용하는지 따라해보려고하는데, 백문이 불여일타 라고 프로젝트 초기 세팅 가이드 영상은 기본이라고 생각합니다...;;; 실망이 매우 크네요....혹시 pdf로라도 없는건가요????세팅조차 없이 그냥 바로 본론으로 들어가버리면...이건 좀 아닌거같아요.돈 날린 기분입니다... 이 부분에 대해서 추가 영상이나 교안 등 개선이 필요할거 같습니다.강사님 직접 확인하시고 답변주세요;;
-
해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
prettier에 대한 format on save가 적용되지 않아요.
esling.config.js/ .prettierrc.json가 있는 버전입니다.setting.json에서"editor.codeActionsOnSave": { "source.fixAll.eslint": 'explicit"},"editor.formatOnSave" : true 위와 같이 설정했고, extensions에서는 ESLint만 설치했습니다. 그런데, 파일 수정 후 저장을 해도 포맷팅이 자동으로 되지 않습니다.ㅜㅜ (더블쿼트 저장 후 싱글쿼트로 자동 수정 안됨.)ESLint 역시 제대로 적용된건지 어떻게 확인해야 할 지 모르겠습니다. 그런데, VSCODE에서 아래와 같이 오류가 발생 중입니다.formatting - Extension 'esbenp.prettier-vscode' is configured as formatter but not available
-
해결됨Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
이중 슬롯에서 props 처리
안녕하세요!UI 라이브러리를 이용해서 공통 컴포넌트를 개발하고 있습니다.UI 라이브러리 컴포넌트 중에 slot이 있는 경우에는,아래와 같이 이중 slot을 적용했습니다.제가 만든 컴포넌트가 commonComponent이고,그 안에서 라이브러리에서 제공하는 ui-component를 사용하는 경우입니다. *commonComponent.vue<ui-component> <template #uiSlot="v"> {{ v }} // Boolean <slot name="common" v-bind="v"> </slot> </template ></ui-component> 그럼 실제 화면 개발 시에는,아래와 같이 전달을 하게 되는데...v 값이 Boolean으로 들어와야 하는데 Object로 들어옵니다. <common-component> <template #common="v> {{ v }} // Object </template></common-component> 콘솔을 찍어보면 #uiSlot="v" -> 여기는 Boolean인데,#common="v -> 여기서는 Object로 변경됩니다. 이중 또는 중첩된 Slot에서 props를 전달할 때, 어떻게 해야 할 지 모르겠어서 질문 드립니다 ㅜㅜ
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
프로젝트 설정 강의 무료로 듣는법
안녕하세요.기본편 / 실전편 둘다 결제하였고현재 기본편 다 들은 상태인데,최신 Vue 3 완벽 가이드: 프로젝트 설정 & 스펙 총정리이 강의에 보면 기본편이나 실전편 들은 사람에게는 무료로 제공된다고 되어있는데...어떻게 해야지 무료로 볼 수 있는걸까요?