묻고 답해요
144만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
VSCode처럼 멀티 Title & Menu Bar로 개발할려면?
매번 질문만 드려서 죄송합니다.질문VSCode에서 사이드 바의 파일들을 클릭하면 Title & Menu Bar가 멀티로 표시되는데 이렇게 구현할려면 QDrawer와 QToolbar로 처리가 가능한지 궁금합니다.
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
헤더에 x-total-count의 값이 없습니다,,
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.desc 정렬부터 안되다가,, header 값이 없어서json-server 0.0.0 버전에서 0.17.0버전으로 바꾸었는데요,프로젝트 재 시작 후에도 정렬과 header 값이 보이지않습니다혹시 브라우저 개발자도구의 설정같은걸 바꿔야하는 경우도 있을까요 ?? 도와주세요 !!
-
미해결호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)
로그인 하고 나서 GET요청으로 메인페이지 요청
### 로그인 POST http://localhost:8080/auth/login Content-Type: application/x-www-form-urlencoded username=blog&password=1111&remember=1 ### 메인 페이지 GET http://localhost:8080분명 로그인을 하고나면 메인페이지로 잘 넘어가지만localhost / SESSION ZmU5OGQ2ZDEtZjBjZS00NzhiLWI3NDktM2NiNjAxNTYwM2U1 -1 localhost / remember-me YmxvZzoxNzMwMjE1NjY2NzQ5OlNIQTI1Njo2MzBiMmU5ZmMyNzZiYTcxYTY5ZjI4NzYyMjdlODg3NzEyMWNhMmFlZTdlZmM4YTFmNjMxYmFlYjM1YzhhMTll Sun, 29-Sep-2024 16:10:58잘 발급이 된상태에서 GET을 하게되면 자꾸 메인 페이지로 안넘어가고로그인페이지로 넘어가는데 아무리 찾아봐도 잘모르겠습니다...ㅠㅠ 몇시간을 사용했는지 모르겠네요 이거땜시https://github.com/CryingPerson/blog.git깃허브 주소입니다. 도와주세요 호돌맨님 !!! ㅠㅠ
-
미해결호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)
GitHub Collaborator 초대 관련
안녕하세요.강의 잘 보고 있습니다.깃허브 Collaborator 초대 부탁드립니다.GitHub Email: pdohyung@gmail.com
-
미해결Vue.js 시작하기 - Age of Vue.js
코드를 수정하고 브라우저의 Vue로 넘어가면 다운이 됩니다.
코드 반영 후에 Vue.devtool을 사용하기 위해 개발자 도구창을 키면 devtool의 기능들을 클릭할 수 없습니다. (프로그램 다운 느낌입니다)그래서 창을 닫고 새로고침으로 다시 진행해야 정상적으로 되는데 이 문제 해결방법이 없을까요?
-
미해결Vue.js 시작하기 - Age of Vue.js
버튼을 클릭해도 event가 발생하지 않습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <app-header></app-header> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var appHeader = { // template: '<button>click me</button>' template: '<button v-on:click="passEvent">click me</button>', methods: { passEvent: function() { this.$emit('pass'); } } } new Vue({ el: '#app', components: { 'app-header': appHeader } }); </script> </body> </html>
-
미해결Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"
프로젝트 세팅방법
프로젝트 생성할때 vite 로 생성해도 되나요??
-
미해결[최신] Vue 강의 끝판왕 : Nuxt 3 완벽 마스터
Course 데이터 가져오기에서 궁금한 점
만약에 백엔드가 스프링부트의 Restful API서버를 이용한다고 가정했을 때질문 1. axios 또는 fetch로 데이터를 가져오는 부분을 composables 폴더에 작성하나요? 질문 2.axios 또는 fetch를 이용할 때 파라미터 값과 리턴 받는 결과 값도 types 폴더 아래 모두 정의하나요?
-
미해결호돌맨의 요절복통 개발쇼 (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해야하나요?제가 얼마전 했던 프로젝트에서는 명시적으로 하나씩 입력을 하지 않았었는데... 지금은 프로젝트가 끝나서 소스를 볼수가 없네요... 혹시 제가 말씀드린 상황처럼 화면이 수백개씩 되는 경우에는 어떻게 처리를 하는지에 대해서 알고싶습니다.
