CodeHoon

안녕하세요 상훈입니다.

매번 검색해서 복붙하기가 너무 귀찮아 포스팅합니다.

<script src="https://unpkg.com/vue@next"></script>

Vue.js 3

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

또 에러 나옴

멍미 이거

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

안녕하세요 상훈입니다.

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 삭제 후 재설치

$ rm -rf ./node_modules

$ rm -rf ./package-lock.json

$ npm install && npm run dev

저는 1번 방법으로 됐을 때도 있고, 2번 방법으로 됐을 때도 있었습니다.

아무래도 다른 프레임워크 2가지를 함께 적용시키려고하다보니 충돌하면서 에러가 발생하는 것 같습니다.

이상으로 LARAVEL - VUE 설치 및 연동의 포스팅을 마치겠습니다.

감사합니다.

안녕하세요 상훈입니다.

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 와 함께용.

안녕하세요 상훈입니다.

Vue.js를 설치하였으면 이제 프로젝트를 생성해야합니다. 이때 프로젝트를 간단하게 생성하는 방법을 포스팅하겠습니다.

1. 프로젝트 폴더가 위치하고픈 디렉터리 위치로 이동합니다.

2. vue가 설치되어있는지 확인

 - 커맨드 창에 "vue" 라고만 작성해봅니다. (뷰 명령어를 사용할 수 있는지 확인)

 - 만약 설치가 안되어 해당 명령어는 존재하지 않는다 라는 에러문구가 뜬다면,

   아래의 포스팅↓↓↓으로 이동해주세요.

3. vue 프로젝트 생성

$ vue create 프로젝트명

vue create 프로젝트명을 해주시면

이렇게 나열됩니다. 이중에 Vue3, babel, eslint를 선택해주세요. 

*본인의 버전에 맞게 사용하시면 됩니다. 

설치 결과

친절하게도 웹페이지를 띄울 수 있게 해줍니다.

생성한 프로젝트로 이동하시고, npm run serve를 하면 

웹페이지를 띄우고 localhost:8080 (**로컬호스트 8080포트) 로 접속이 가능하게됩니다.

이상입니다. 감사합니다.

안녕하세요 상훈입니다.

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의 기본 문법입니다.

<div v-for="item in items" :key="item"></div>
<div v-for="(item, index) in items" :key="item"></div>

JavaScript 혹은 React 같은 경우 많이 작성하는 방식입니다.

첫 번째는 1개의 인자만 사용할 경우이고, 두 번째는 index를 주고 싶을 경우입니다.

저는 이 중 첫 번째만 사용해보도록하겠습니다.

 <div v-for="product in products" :key="product">
    <img src="{{ product.image }}" alt="이미지">
    <h4>{{ product.title }}</h4>
    <p>{{ product.price }}원</p>
  </div>

작성 방법은 받아온 객체의 key값을 기준으로 작성하면 value가 출력되어져 나오는 방식입니다.

laravel의 blade 문법이 생각나는군요

결과입니다. css를 제대로 적용시켜주지 않고, 이미지 url이 올바르게 작성되어있지 않아 이미지가 깨졌지만, 나머지는 정상적으로 반복되어 출력되었습니다.

이상입니다.

안녕하세요 상훈입니다.

Vue.js에서 Javascript의 onclick addEventListener와 같이 onclick 이벤트를 주는 방법을 설명하겠습니다.

뷰는 매우 간단하더군요.

0. 기본문법

<button v-on:click=""></button>
<button @click=""></button>

v-on:click 이 기본, 

그리고 @click이 축약 버전입니다. 입맛에 맞게 사용하시면 됩니다.

1. 익히 알고 있는 함수 호출하기

2. 간단한 연산 결과값 도출

1. 함수 호출하기

<button @click="LetsGoVue"></button>

<script>
export default {
  name: 'App',
  data() {},
  methods: {
  	LetsGoVue() {
    	console.log('hello')
    }
  }

</script>

2. 연산 결과값 도출 [ v-if, v-on:click ] 

예시) 모달창 팝업

버튼 클릭 시, 모달창이 뜨고 사라지게 하는 내용을 구현하겠습니다.

<div class="black-bg" v-if="modalStatus">
    <div class="white-bg">
      <h4>상세페이지</h4>
      <p>상세페이지 내용</p>
      <button class="modal-close" @click="modalStatus = 0 ">닫기</button>
    </div>
</div>

모달레이아웃 div 부분입니다. 

modalStatus라는 변수가 1일 때만 해당 내용이 존재하게 하는 조건문[ v-if ] 으로 구현하였습니다.

button을 클릭시 modalStatus라는 변수에 0을 대입하는 것으로 구현하였습니다.

script 내 data 내에 modalStatus 변수의 기본값을 0으로 설정하여 처음 렌더링 되었을 때, 보이지 않게 설정하였습니다.

안녕하세요 상훈입니다.

Vuejs를 설치하여 사용 할 수 있도록 vue js 설치하는 방법을 간단하게 명령어로 설명하도록 하겠습니다.

$ npm install -g @vue/cli 

이렇게 작성하시면 자동으로 설치가 완료 됩니다.

그리고 vue 명령어를 사용하실 수 있게됩니다.

예시) vue 버전 확인하기

$ vue --version

기타 다른명령어가 무엇이 있는지 확인

$ vue 

Usage: vue <command> [options]

Options:
  -V, --version                              output the version number
  -h, --help                                 output usage information

Commands:
  create [options] <app-name>                create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created project
  inspect [options] [paths...]               inspect the webpack config in a project with vue-cli-service
  serve [options] [entry]                    serve a .js or .vue file in development mode with zero config
  build [options] [entry]                    build a .js or .vue file in production mode with zero config
  ui [options]                               start and open the vue-cli ui
  init [options] <template> <app-name>       generate a project from a remote template (legacy API, requires @vue/cli-init)
  config [options] [value]                   inspect and modify the config
  outdated [options]                         (experimental) check for outdated vue cli service / plugins
  upgrade [options] [plugin-name]            (experimental) upgrade vue cli service / plugins
  migrate [options] [plugin-name]            (experimental) run migrator for an already-installed cli plugin
  info                                       print debugging information about your environment

  Run vue <command> --help for detailed usage of given command.

이상입니다.

리액트했다가 뷰했다가 환장파티~!