HEROJOON 블로그(히로블)

문제 vue-loader-v15 Not Found 오류가 출력되며 npm install, npm build 오류로 vue 프로젝트가 실행되지 않는 문제가 발생했습니다. 오류명 npm WARN old lockfile npm WARN old lockfile The package-lock.json file was created with an old version of npm, npm WARN old lockfile so supplemental metadata must be fetched from the registry. npm WARN old lockfile npm WARN old lockfile This is a one-time fix-up, please be patient... npm WARN old lo..

할 것 Vue3에서 port 변경해서 띄우기 환경 Vue3 Node v20.11.1 NPM v10.2.4 요약 1) 원하는 port로 애플리케이션 실행하는 명령어 만들기 2) 만든 명령어 실행해보기 해보기 1) 프로젝트/package.json에 원하는 port의 명령어 만들어 주기 2) Vue3는 package.json파일 "scripts" {} 란에 명령어를 직접 만들어 사용할 수 있습니다. "scripts": {} 안에 --port 5000이라는 원하는 포트의 명령어를 추가하여 새로운 명령어를 만들어줍니다. ex) "serve-port": "vue-cli-service serve --port 5000" 설명) port 5000으로 실행 시킬 수 있는 명령어를 serve-port라는 명령어 이름으로 만..

오류명 Component name "Button" should always be multi-word 오류 상황 // main.js import Button from 'primevue/button'; import Badge from 'primevue/badge'; const app = createApp(App) // component를 추가하려고 할 때 에러 발생 app.component('Button', Button) app.component('Badge', Badge) 환경 Vue3 Node v20.11.1 "devDependencies": { "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", "@vue/cli-plugin-babel": "..

오류 사항 Vue3 프로젝트를 실행 시켰는데 잠시 후 아래 오류가 발생했습니다. Uncaught runtime errors: ERROR Network Error AxiosError: Network Error at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:160:14) at Axios.request (webpack-internal:///./node_modules/axios/lib/core/Axios.js:54:41) 환경 Node v20.11.1 Vue3 Vue3에 axios lib 사용 중 Spring Boot 3 Java 17 원인 axios로 호출 한 Backend API에 CORS ..

목표 Vue 3 프로젝트에서 Router 설정하기 개발 환경 Node: v18.13.0 NPM: 8.19.3 Vue CLI: v5.0.8 - 예시에서는 npm 패키지 매니저를 사용했습니다. 할 거 요약 1. Router 연결 테스트를 위한 테스트용 Component 생성하기 2. Vue 3 프로젝트에 vue-router npm 패키지 추가하기 3. Router의 Path와 Component의 맵핑 정보 담을 router.js 생성하기 4. router.js 파일이 전역에 동작할 수 있도록 최상위에 import 하기 5. router.js에 맵핑한 Path와 Component대로 페이지가 그려질 수 있도록 최상위 페이지에 적용하기 6. Router 적용 테스트 해보기 1. Router 연결 테스트를 위한 ..

오류 [Vue warn]: Avoid using non-primitive value as key//, use string/number value instead. 오류 원인 v-bind:key 값에 object형이 들어가서 오류 발생. 위 경고 내용을 보면 string이나 number 값을 사용하라고 함. 해결 for문에 index값을 추가하고 v-bind:key에 index값을 지정해주어 해결.

목표 vue 프로젝트에서 API 호출을 위한 axios plugin을 설치하고, API를 호출해봅니다. axios는 Http Call을 위한 기능을 제공해주는 npm plugin 입니다. 해보기 1. axios plugin 설치 axios URL: https://www.npmjs.com/package/axios # vue프로젝트에서 아래 명령어로 axios를 설치해줍니다. npm i axios 2. vue 프로젝트에서 axios를 사용하기 위하여 main.js에 axios import하기 import axios from 'axios' Vue.use(axios) 3. axios를 전역으로 사용하기 위해 설정 Vue.prototype.$axios = axios 4. vue component에서 axios를 ..

// vue 프로젝트 포트 정보 파일 위치 vue 프로젝트 - config 폴더 - index.js 파일 아래 port 정보를 원하는 포트로 변경하시면 됩니다.