묻고 답해요
140만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)
Window에서 Vue.js 설정
당연히 구글링 해보셨져? 원하는 결과를 못찾으셨나요? 어떤 검색어를 입력했는지 알려주세문제가 발생한 코드(프로젝트)를 Github에 올리시고 링크를 알려주세요.안녕하세요 호돌맨님 .. 영상 잘보고 있습니다.저는 Window 에서 영상보면서 공부를 하고있습니다. 근데 Vue 부분 부터 영상대로 따라 만들어보려고 우분투 설치 등 GPT 한테도 물어보면서 하려고했지만도저히 못따라할거 같습니다 혹시 Window 로 하는 사람들은 어떤걸 참조하면서 하면 될까요?? 기존의 React 사용을 해봐서 Vue도 한번 따라해보고싶어서 따라 하는중입니다.
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
vuex + axios 질문 있습니다!
안녕하세요, 강의 다 듣고 혼자서 이것저것 보면서 만들다가 궁금증이 생겨서 문의 드려봅니다. vuex 에서 helper 기능을 사용 및 axios 통해서 데이터를 받아서 리스트를 뿌려보는 예제를 혼자 만들어 보았는데,원래 axios 기능을 사용하면 then,catch, 등으로 resp 및 에러체크를 하는데vuex actions 에서 동작시킬 때 async/await를 사용해서 코드작성할 때이렇게 작성해도 문제가 없을까요??mutations : { setUsers(state, data){ state.users.push(data); } }, actions : { async getUsers({commit}){ let resp = ''; try{ resp = await axios.get('https://jsonplaceholder.typicode.com/todos'); for(var i=0; i<resp.data.length; i++){ const data = resp.data[i]; this.state.users.push(data); } }catch(e){ console.log(e); } commit("setUsers", resp.data); } }
-
미해결기획자님 이 정도 웹 개발은 배워보면 어떨까요? [이론+실습]
vue cli 설치 강의 중 오류
질문은 자세하게 적어주실 수록 좋습니다. 2-6 Vue CLI 설치 강의 Node. js 파일까지 설치 완료 -> Vue 설치 진행 과정에서 아래와 같은 오류가 뜹니다. npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.npm warn deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.npm warn deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead. npm warn deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated npm warn deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supportednpm warn deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead. npm warn deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecatednpm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supportednpm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supportednpm warn deprecated apollo-datasource@3.3.2: The apollo-datasource package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.npm warn deprecated apollo-server-errors@3.3.1: The apollo-server-errors package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the @apollo/server package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.npm warn deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecatednpm warn deprecated apollo-server-types@3.8.0: The apollo-server-types package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the @apollo/server package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.npm warn deprecated apollo-server-plugin-base@3.7.2: The apollo-server-plugin-base package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the @apollo/server package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.npm warn deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecatednpm warn deprecated shortid@2.2.16: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. npm warn deprecated apollo-reporting-protobuf@3.4.0: The apollo-reporting-protobuf package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the @apollo/usage-reporting-protobuf package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details. npm warn deprecated apollo-server-env@4.2.1: The apollo-server-env package is part of Apollo Server v2 and v3, which are now deprecated (end-of-life October 22nd 2023 and October 22nd 2024, respectively). This package's functionality is now found in the @apollo/utils.fetcher package. See https://www.apollographql.com/docs/apollo-server/previous-versions/ for more details.npm warn deprecated subscriptions-transport-ws@0.11.0: The subscriptions-transport-ws package is no longer maintained. We recommend you use graphql-ws instead. For help migrating Apollo software to graphql-ws, see https://www.apollographql.com/docs/apollo-server/data/subscriptions/#switching-from-subscriptions-transport-ws For general help using graphql-ws, see https://github.com/enisdenjo/graphql-ws/blob/master/README.md npm warn deprecated vue@2.7.16: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.changed 852 packages in 1m 75 packages are looking for funding run npm fund for details 재설치도 해 봤는데, 안되네요..!도와주세요! 추가로 터미널에 작성할 때 폴더명 뒤에 % 이것도 넣어야 하나요?
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
깃 권한 요청드립니다!
인프런 아이디 : 박용석인프런 이메일 : sjdzn4540@naver.com깃헙 아이디 : sjdzn48625@gmail.com깃헙 Username : sjdzn48625
-
미해결[웹 개발 풀스택 코스] Vue.js 프로젝트 투입 일주일 전 - 기초에서 실무까지
카카오 로그인
똑같은 코드로 말고 참고해서 카카오 로그인을 구현해서 email만을 받아와서 로그인하고있는데 강의에서도 그렇고 제가 짠 코드에서도 카카오 로그인을 누르면 동의하기가 바로뜨고 수락하면 바로 로그인처리가 이뤄지는데 그전에 카카오 계정이메일과 비밀번호를 입력하는 창은 왜 안뜰까요 그게 먼저 뜨고 입력하고 정보동의가 떠야하는거 아닌가요?
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
강의 깃주소 문의
안녕하세요 강의를 듣다가 css를 복사하고싶은데 강의 첫장 레포짓토리 주소 들어가면 프로젝트가 없네요 어디서 확인할수있나요 ?
-
미해결기획자님 이 정도 웹 개발은 배워보면 어떨까요? [이론+실습]
데이터베이스 이해와 실습 관련 오류 질문
안녕하세요~데이터베이스 이해와 실습 CRUD 실습을 진행하다가 오류로 인하여 다음차시 진행이 불가하여 질문드립니다. PS C:\Users\폴더이름\Desktop\database> node db.jsError: querySrv ENOTFOUND _mongodb._tcp.cluster0.mongodb.net at QueryReqWrap.onresolve [as oncomplete] (node:internal/dns/promises:291:17) { errno: undefined, code: 'ENOTFOUND', syscall: 'querySrv', hostname: '_mongodb._tcp.cluster0.mongodb.net' 관련하여 챗GPT에 오류 내용을 검색해본 후 원인 및 해결방법에 대해 아래 내용을 얻을 수 있었는데요인터넷 연결 확인:인터넷 연결이 정상적으로 이루어지고 있는지 확인하세요. 특히, 네트워크에 제한이 있거나 프록시 서버를 사용하는 경우 문제가 발생할 수 있습니다.DNS 설정 문제:DNS 설정 문제로 인해 _mongodb._tcp.cluster0.mongodb.net 도메인이 해결되지 않을 수 있습니다. DNS 서버를 Google Public DNS(8.8.8.8, 8.8.4.4)로 변경하여 문제가 해결되는지 확인해보세요.Windows에서 DNS 설정 변경 방법:제어판 > 네트워크 및 인터넷 > 네트워크 및 공유 센터 > 어댑터 설정 변경으로 이동합니다.사용 중인 네트워크 연결을 마우스 오른쪽 버튼으로 클릭하고 속성을 선택합니다.인터넷 프로토콜 버전 4 (TCP/IPv4)를 선택한 후 속성을 클릭합니다.하단에 있는 다음 DNS 서버 주소 사용을 선택하고, 8.8.8.8과 8.8.4.4를 입력합니다.설정을 저장하고 다시 시도해보세요.MongoDB Atlas의 클러스터 주소 확인:cluster0.mongodb.net이 아니라 클러스터의 정확한 호스트명을 사용하고 있는지 확인하세요. MongoDB Atlas에서 클러스터의 연결 문자열을 다시 복사하여 확인하세요.Atlas UI에서 데이터베이스 > Connect > Connect Your Application을 선택하고, 제공된 연결 문자열을 확인하세요. 예를 들어:bash코드 복사mongodb+srv://<username>:<password>@cluster0.mongodb.net/test?retryWrites=true&w=majorityuseUnifiedTopology 옵션 사용:최신 버전의 MongoDB 드라이버를 사용하고 있는지 확인하고, useUnifiedTopology 옵션이 활성화되어 있는지 확인하세요.javascript코드 복사const client = new MongoClient(uri, { useNewUrlParser: true, useUnifiedTopology: true });방화벽 또는 네트워크 제한:회사 네트워크나 특정 ISP에서 DNS 쿼리 또는 MongoDB Atlas에 대한 연결을 제한할 수 있습니다. 이런 경우, 다른 네트워크(예: 휴대폰 핫스팟)에서 시도해보거나, 네트워크 관리자에게 문의하세요.SRV 레코드 대신 표준 연결 문자열 사용:SRV 레코드(mongodb+srv://) 대신 표준 MongoDB 연결 문자열(mongodb://)을 시도해보세요. SRV 레코드를 지원하지 않는 네트워크 환경에서 표준 연결이 문제를 해결할 수 있습니다.현재 회사에서 지급한 노트북으로 진행하여 보안상 문제가 있어 작업이 불가한건지.. 위 내용을 읽어봐도 명확하지 않아 질문드립니다.
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "기본편"
일반 객체, 배열에 ref 사용시 질문드립니다.
reactive({}), reactive([])가 아닌일반 객체와 배열에 ref 타입 속성을 사용하더라도reactive 객체에 담아서 사용할 때와 .value unwrapping 여부 외에는 동일하게 동작하는 것 같은데 맞게 이해한걸까요??ref를 쓸 떄 반드시 reactive와 함께 써야하는지 궁금합니다(코드 상 편의를 제외한 이유)export default { setup() { // ################일반 객체에 ref####################### // ref => {} const count2 = ref(0); const state2 = { count2, }; count2.value += 1; count2.value += 1; count2.value += 1; // console.log(count2); // console.log(state2.count2.value); // console.log(state2.count2); // ################Reactive 객체에 ref####################### // ref => Object const count = ref(0); const state = reactive({ count, }); count.value += 1; count.value += 1; count.value += 1; // console.log(count); // console.log(state.count.value); // undefined, 객체 안에 ref가 들어갈 경우 .value를 자동으로 까서 반환해준다. // console.log(state.count); // ################일반 배열에 ref#######################' // ref => array const message2 = ref('Hello'); const arr2 = [message2]; console.log(arr2[0]); console.log(arr2[0].value); // ################Reactive 배열에 ref#######################' // ref => array const message = ref('Hello'); const arr = reactive([message]); console.log(arr[0]); console.log(arr[0].value); const incrementCount = () => { count.value += 1; count2.value += 1; console.log(count, state.count.value); console.log(count2, state2.count2.value); }; const changeText = () => { message.value += '!'; message2.value += '!'; console.log(arr); console.log(arr2); }; return { incrementCount, changeText, state, state2, count, count2, }; }, };
-
해결됨[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
프로젝트 생성
npx nuxi@latest 를 통해서 생성시 package.json 에서"dependencies": { "nuxt": "^3.13.0", "vue": "latest", "vue-router": "latest" }생성이 됩니다.질문 1. 위 부분의 latest 라고 되어 있는 부분이 향후 문제가 될 소지가 있나요??? 버전을 명시에서 인스톨을 다시 해주는게 서비스 배포 및 운영에 안정적인지 궁금합니다. 버젼명시를 해줘야 한다면 nuxt 3.13 기준 vue, vue-router 버전을 몇으로 해야할까요?? 아니면 이런 부분을 어디서 확인하면 좋을까요?? 질문 2. 해당 명령어로 프로젝트 생성시 촬영당시 버젼인{ "name": "nuxt-app", "private": true, "type": "module", "scripts": { "build": "nuxi build", "dev": "nuxi dev", "generate": "nuxi generate", "preview": "nuxi preview", "postinstall": "nuxi prepare" }, "devDependencies": { "nuxt": "^3.9.0", "typescript": "^5.3.3", "vue": "^3.4.3", "vue-router": "^4.2.5", "vue-tsc": "^1.8.27" }}수정후 .node_modules , package-lock.json 삭제 후 다시 package install 을 해주었는데 이렇게 되면 프로젝트 구조가 바뀌어서 그런건지 빌드와 typecheck 부분이 에러가 발생합니다. 참고로 위 버젼으로 인스톨 하고 npm run dev 로 할 경우 터미널에서 표시되는 nuxt 버젼은 3.9가 아니라 3.13 버젼으로 표시되고 있습니다. 이 부분을 어떻게 진행을 해야할까요?? 확인 부탁드립니다.
-
미해결호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)
(솔루션 수정)'tsyringe' Error: TypeInfo not known for "클래스명"
진작에 질문을 남겼어야 했는데, 애러 해결이 어려워 너무 지체되네요. 첫 질문 남기게 되었습니다. 문제의 요지: 추측 하기로container.resolve 가 vue 와 라이프사이클 에 순서때문인지, 다른 이유가 있는지 DI 가 안됩니다. Menu.vue 디버깅강의내용에도 있듯 tsyringe 는@singleton 이 달려있는 클래스를 컨테이너에 등록 후, 클래스 자체를 DI 키로 사용할 수 있다고 알고있습니다. 디버깅 상황에서 보다시피container 내부 _registryMap 안에 AuthorityApi 클래스가 정상등록 된 것을 확인할 수 있었습니다. 하지만 Break-point 된 container.resolve 처리가 안되어 아래처럼 애러가 발생합니다. 아래는 다음줄로 가지않고, 이벨류에이터로 실행한 모습이구요, AuthorityApi를 찾아올 수 없다 합니다.Error: TypeInfo not known for "AuthorityApi" at http://localhost:4000/node_modules/.vite/deps/tsyringe.js?v=a355aabe:746:17 at InternalDependencyContainer2.construct (http://localhost:4000/node_modules/.vite/deps/tsyringe.js?v=a355aabe:751:6) at InternalDependencyContainer2.resolveRegistration (http://localhost:4000/node_modules/.vite/deps/tsyringe.js?v=a355aabe:573:90) at InternalDependencyContainer2.resolve (http://localhost:4000/node_modules/.vite/deps/tsyringe.js?v=a355aabe:500:25) at eval (eval at setup (http://localhost:4000/src/widgets/Menu.vue:28:26), <anonymous>:1:11) at setup (http://localhost:4000/src/widgets/Menu.vue:28:26) at callWithErrorHandling (http://localhost:4000/node_modules/.vite/deps/chunk-VJROVW5H.js?v=a355aabe:1884:19) at setupStatefulComponent (http://localhost:4000/node_modules/.vite/deps/chunk-VJROVW5H.js?v=a355aabe:8253:25) at setupComponent (http://localhost:4000/node_modules/.vite/deps/chunk-VJROVW5H.js?v=a355aabe:8214:36) at mountComponent (http://localhost:4000/node_modules/.vite/deps/chunk-VJROVW5H.js?v=a355aabe:5604:7) 해결방법을 tsyringe 공식 깃헙이슈, 구글링, 스택오버플로 몽창 뒤져봐도 힌트얻기가 참으로 힘드네요. AI 센세는 그저 스택오버플로 내용만 읊어줍니다.이것에 원인을 알 수 있을까요? 실마리만 얻어도 해결하기 수월할텐데, 몇일 째 어째야 되나 고민입니다. 도움을 얻을 수 있을까요? : Source-Codesrc-front 소스코드주의: 개인 npm lib 가 포함되어 node_modules 을 포함한 체 그대로 압축된 파일입니다. npm i 인스톨 없이 앱을 실행해야될거라 예상합니다. 도움을 구합니다. 감사드려요.
-
미해결Nuxt.js 시작하기
nuxt 최신버전 설치 후 layouts 없어서 직접 폴더 생성 후 문제
nuxt 최신버전 설치 후 layouts 없어서 직접 폴더 생성 후 문제인데요.error.vue 는 문제없이 실행되는데default.vue 생성시 pages에 있는 내용은 하나도 안나오고default.vue에 있는 내용만 똑같이 나오는 현상이 나옵니다.default.vue 내용만 나옴 default.vue 삭제시
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
라우터 객체 생성시 컴포넌트를 모두 import를 해야하나요?
안녕하세요const routes = [] 내부에 객체로 path와 컴포넌트를 명시적으로 작성하는데 만약 이런 객체가 수백개 단위가 되는 경우에도 일일이 하나씩 다 작성하고 import해야하나요?제가 얼마전 했던 프로젝트에서는 명시적으로 하나씩 입력을 하지 않았었는데... 지금은 프로젝트가 끝나서 소스를 볼수가 없네요... 혹시 제가 말씀드린 상황처럼 화면이 수백개씩 되는 경우에는 어떻게 처리를 하는지에 대해서 알고싶습니다.
-
미해결Vue.js - Django 연동 웹 프로그래밍
들여쓰기 단축키가 어떻게 되나요?
들여쓰기 단축키가 어떻게 되나요?
-
미해결[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
웹 서버, WAS 그리고 api 서버 관련
안녕하세요,이번 강의에서 렌더링 모드에 대해서 공부하면서 생긴 의문입니다. 1. server side rendering에서 server는 웹서버인가요?API server와 통신하는 것은 웹서버인가요?저는 웹서버를 구성한 적이 없습니다. 현재 강의에서도 웹서버를 구성하는 단계는 없었고요. 웹서버는 언제/어떻게 생성되는건가요?사실 최근까지 웹서버, WAS에 대한 개념이 없었습니다. 제가 만든 웹앱이 API 서버와 통신하여 데이터를 잘 가져오고, 잘 보여주고 있다! 이거구나! 싶었는데, 최근 개념의 혼란이 옵니다.. 관련하여 짐코딩님의 설명이 무척 궁금합니다.
-
미해결Nuxt.js 시작하기
vue나 nuxt 새로운 강의는 출시 예정이 없으실까요?
안녕하세요~혹시 새로운 강의는 출시 예정이 없으신지~궁금합니다!답변 주시면 감사하겠습니다~
-
미해결Vue.js 끝장내기 - 실무에 필요한 모든 것
vue3로 진행하시면서 router에서 '*' 적용이 안되시는 분들
{ path: '/:pathMatch(.*)*', component: () => import('@/views/NotFoundPage.vue'), },그냥 * 대신 이렇게 넣어주시면 정상적으로 동작합니다!!
-
미해결트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술
babel-core module 에러
fs를 못찾는다고 해서lecture-vue-trello 에서npm install --save-dev @babel/core @babel/cli @babel/node @babel/preset-env로 설치 해주었습니다 하지만 똑같은 오류가 뜹니다..아예 폴더를 삭제하고 깃에서 다시 클론하여 npm 설치 후 열어주었습니다그런데도 똑같은 오류가 뜹니다.webpack버전은 5를 쓰고 있습니다어떻게 해야 해결할 수 있을까용..vue cli 로 만든 프로젝트로 다시 해보았습니다퀵픽스에 install bable-core이 있어서 적용해보았는데 똑같습니다..
-
미해결[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
$route 관련 에러
안녕하세요, $route를 사용하려고 하니 아래와 같은 에러가 발생했습니다.강의 중에도 이를 위한 추가 작업은 없었는데, 저는 빨간줄이 생기네요..ㅎㅎ 관련하여 검색해봤는데 해결책을 찾지 못해 문의드립니다!
-
미해결[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
package.json 구성 관련 문의
안녕하세요,기본, 실전, firebase 활용에 이어서 nuxtjs까지 자연스럽게 수강중입니다..ㅎㅎ이번 강의도 여느 때처럼 꼼꼼하고 친절하시네요! 프로젝트 구성 강의를 보며 3가지 의문이 들어 문의드립니다!nuxt.config.ts 파일에서 typeCheck: true를 해두면 아래와 같은 에러가 발생합니다(이미지 참고). 프로젝트의 package.json, node 및 npm 버전은 짐코딩님과 동일한 상태입니다.typeCheck: false로 해두면 해당 에러가 사라지는데, 당연한 걸까요? 짐코딩님 github에서 nuxt.config.ts 파일을 보면 typeCheck: true로 되어있는 걸 보면, 1) 원래는 없었던 에러이거나 2) 제가 설정을 더/덜 해야하는 부분이 있어보이는데 잘 모르겠습니다.. 짐코딩님 package.json에 보면 vue-router가 설치되어 있습니다. nuxi로 프로젝트 생성하면 최초에는 없더라고요! 필요에 의해 설치를 한 것인지, 아니면 강의 촬영 당시에는 nuxi로 프로젝트 생성 시 vue-router가 default로 포함되어 있던건지 궁금합니다.3. devDependencies와 dependencies는 무엇으로 구분하나요? 제가 nuxi를 이용해서 프로젝트를 생성했더니, nuxt와 vue는 dependencies에 포함되어 있었습니다만, 짐코딩님 package.json을 보면 둘 다 devDependencies에 포함되어 있더라고요. 어떤 차이가 있을까요? nuxi로 프로젝트 생성 시 dependencies에 있떤 nuxt와 vue를 인위적으로 devDependencies로 옮기신걸까요? 그렇다면 이유가 무엇일까요?
-
미해결Vue 3 시작하기
vbc 단축키 질문
vbc + 탭을 하면 기본적인 템플릿 가이드가 나온다고 하는데 저는 나오지 않습니다.vue vscode snippet 플러그인을 다운받았는데도 그러는데 왜 그럴까요??