Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_1__.defineComponent) is not a function at Module../node_modules/@fortawesome/vue-fontawesome/index.es.js (app.js:9861) at __webpack_require__ (app.js:42680) at Module../resources/js/app.js (app.js:12207) at __webpack_require__ (app.js:42680) at app.js:42845 at Function.__webpack_require__.O (app.js:42717) at app.js:42847 at app.js:42849 또 에러 ..

FrontEnd/Vue.js 2021. 9. 28. 21:55

안녕하세요 상훈입니다. Laravel - vue 설치 중에 발생한 에러에 대한 해결방법을 포스팅하겠습니다. 총 2가지 방법으로 진행하도록 하겠습니다. 1. laravel mix 를 삭제하고 재설치. 2. node_modules 와 package_lock.json 을 삭제 후 재설치. 1번째 방법으로 해보시고, 안되시면 2번째 방법으로 진행하시길 바랍니다. 1. laravel mix 를 삭제하고 재설치. $ npm remove laravel-mix $ npm install laravel-mix --save-dev $ npm install cross_env --save-dev $ npm install && npm run dev 만약 안된다면, 2. node_modules와 package-lock.json 삭..

FrontEnd/Vue.js 2021. 9. 27. 16:00

안녕하세요 상훈입니다. 1 error and 0 warnings potentially fixable with the `--fix` option. - npm run serve - quasar dev 노드를 이용하여 프로젝트를 구동 하던 와중에 해당 에러가 발생하였다. --fix 옵션을 이용하여 뭘 어떻게 하라는건 알겠는데 node를 잘사용해보지 않은 입장에서는 당황스러울 수 있다. 에러 해결: ./node_modules/.bin/eslint src --fix 이렇게 하면 된다. 그리고 다시 프로젝트 구동! 수고용 저는 vue.js 를 공부중입니다. quasar 와 함께용.

FrontEnd/Vue.js 2021. 9. 23. 17:22

안녕하세요 상훈입니다. Vue.js를 설치하였으면 이제 프로젝트를 생성해야합니다. 이때 프로젝트를 간단하게 생성하는 방법을 포스팅하겠습니다. 1. 프로젝트 폴더가 위치하고픈 디렉터리 위치로 이동합니다. 2. vue가 설치되어있는지 확인 - 커맨드 창에 "vue" 라고만 작성해봅니다. (뷰 명령어를 사용할 수 있는지 확인) - 만약 설치가 안되어 해당 명령어는 존재하지 않는다 라는 에러문구가 뜬다면, 아래의 포스팅↓↓↓으로 이동해주세요. [ Vue.js ] 01. 뷰 설치하기 - vue cli 설치하는 방법 안녕하세요 상훈입니다. Vuejs를 설치하여 사용 할 수 있도록 vue js 설치하는 방법을 간단하게 명령어로 설명하도록 하겠습니다. $ npm install -g @vue/cli 이렇게 작성하시면 자..

FrontEnd/Vue.js 2021. 9. 19. 22:08

안녕하세요 상훈입니다. Vue.js에서 반복문을 사용하고, 그 속에서 data binding이 된 객체 데이터를 출력하는 방법을 포스팅하겠습니다. 1. data 2. template 1. data import products from './assets/listData.js' export default { name: 'App', data () { return { products: products, } } } 외부의 객체 배열을 products라는 변수로 import 하여 vue 내에서 products로 사용하겠다고 선언한 내용입니다. 아래는 export한 객체 배열 내용 예시입니다. 2. template 자, 이제 반복문과 그에 해당하는 문법을 작성해야겠죠? for의 기본 문법입니다. JavaScript ..

FrontEnd/Vue.js 2021. 9. 15. 00:56

안녕하세요 상훈입니다. Vue.js에서 Javascript의 onclick addEventListener와 같이 onclick 이벤트를 주는 방법을 설명하겠습니다. 뷰는 매우 간단하더군요. 0. 기본문법 v-on:click 이 기본, 그리고 @click이 축약 버전입니다. 입맛에 맞게 사용하시면 됩니다. 1. 익히 알고 있는 함수 호출하기 2. 간단한 연산 결과값 도출 1. 함수 호출하기 2. 연산 결과값 도출 [ v-if, v-on:click ] 예시) 모달창 팝업 버튼 클릭 시, 모달창이 뜨고 사라지게 하는 내용을 구현하겠습니다. 상세페이지 상세페이지 내용 닫기 모달레이아웃 div 부분입니다. modalStatus라는 변수가 1일 때만 해당 내용이 존재하게 하는 조건문[ v-if ] 으로 구현하였습니..

FrontEnd/Vue.js 2021. 9. 15. 00:29

안녕하세요 상훈입니다. Vuejs를 설치하여 사용 할 수 있도록 vue js 설치하는 방법을 간단하게 명령어로 설명하도록 하겠습니다. $ npm install -g @vue/cli 이렇게 작성하시면 자동으로 설치가 완료 됩니다. 그리고 vue 명령어를 사용하실 수 있게됩니다. 예시) vue 버전 확인하기 $ vue --version 기타 다른명령어가 무엇이 있는지 확인 $ vue Usage: vue [options] Options: -V, --version output the version number -h, --help output usage information Commands: create [options] create a new project powered by vue-cli-service add..

FrontEnd/Vue.js 2021. 9. 9. 23:38

안녕하세요 상훈입니다. 드림코딩 앨런님의 강의로 자바스크립트를 이용하여 짧고 간단한 쇼핑 웹앱을 구현하도록 해보겠습니다. index.html Blue Yellow Pink main.js // Fetch the items from the JSON file function loadItems() { return fetch('data/data.json') .then(response => response.json()) .then(json => json.items) } // update the list with the given items function displayItems(items) { const container = document.querySelector('.items') container.innerHT..

FrontEnd/JavaScript 2021. 9. 9. 16:44