https://dev.mysql.com/downloads/installer/

 

MySQL :: Download MySQL Installer

Select Operating System: Select Operating System… Microsoft Windows Select OS Version: All Windows (x86, 32-bit) Windows (x86, 32-bit), MSI Installer 8.0.20 24.4M (mysql-installer-web-community-8.0.20.0.msi) MD5: 26ae47807122bf0052b99ebf893b0dac | Signat

dev.mysql.com

최소용량은 첫번 째 것을 다운로드를

기본 구성을 하고싶다면 두번 째 것을 다운로드 받으면 됩니다.

이런 화면이 나오는데 No thanks, just start my download 를 누르시면 다운이 됩니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

완료

 

저작자표시 비영리 동일조건

Vue 생태계에서 가장 활동적이며 다양한, 완벽한 기능을 갖춘 개발 프레임 워크이다. 쉽게 말해 vue에서 사용할 수 있는 용이한 UI toolkit이라고 할 수 있다.

 

Vue CLII로 설치하기

Vue CLI는 애플리케이션 구축의 복잡성을 추상화하기 위해 만들어진 차세대 cli 툴입니다. Vue CLI를 사용하여 앱을 시작하면 어려운 업그레이드 프로세스없이 공식 웹팩 업데이트 및 구성 변경은 물론 Vuetify의 업데이트를받을 수 있습니다.

 

Vue CLI를 사용하여 새 Vue.js 프로젝트를 아직 작성하지 않은 경우 다음 을 입력하여 작성할 수 있습니다.

 

$ vue create my-app
// navigate to new project directory
$ cd my-app

이제 인스턴스화 된 프로젝트가 있으므로 Vuetify Vue CLI 패키지를 추가 할 수 있습니다

$ vue add vuetify

Vue UI로 설치하기

Vuetify는 Vue CLI의 새로운 시각적 응용 프로그램 인 Vue UI를 사용하여 설치할 수도 있습니다 . 최신 버전의 Vue CLI가 설치되어 있는지 확인한 다음 터미널 유형에서 설치하십시오.

// ensure Vue CLI is >= 3.0
$ vue --version

// Then start the UI
$ vue ui

Vue 사용자 인터페이스가 시작되고 새 창이 열립니다브라우저에서. 화면 왼쪽에서 플러그인을 클릭합니다 . 탐색 한 후 입력 필드에서 Vuetify를 검색하십시오.

 

Vuetify 설치

Nuxt로 설치

Vuetify는 Nuxt Vuetify 모듈 을 이용해 Nuxt 프로젝트에 추가할 수 있습니다.

$ yarn add @nuxtjs/vuetify -D
# OR
$ npm install @nuxtjs/vuetify -D

설치 후, nuxt.config.js 파일의 'buildModules' 항목에 Vuetify 모듈을 아래와 같이 추가 해 주세요.

// nuxt.config.js
{
  buildModules: [
    // Simple usage
    '@nuxtjs/vuetify',

    // With options
    ['@nuxtjs/vuetify', { /* module options */ }]
  ]
}

Nuxt 를 이용한 설치에 관한 더욱 많은 정보를 원한다면 Nuxt 공식 문서 를 참고하세요.

 

Webpack 설치하기

Vuetify 를 Webpack 프로젝트에 추가하기 위해선 몇가지 의존성들을 추가해야 합니다.

$ yarn add vuetify
// OR
$ npm install vuetify
$ yarn add sass sass-loader fibers deepmerge -D
// OR
$ npm install sass sass-loader fibers deepmerge -D

설치 후, webpack.config.js 를 연 후 아래의 코드조각을 rules 배열에 추가시켜 주세요. 만약 sass 룰이 이미 존재한다면, 아래 변경 코드 조각의 일부 또는 전부를 적용해야 할 수 있습니다. 조금 더 간결함을 위해 vuetify-loader 와 같은 유틸을 사용하고 싶다면 4 버전 이상의 Webpack을 사용하세요. Webpack 을 이용한 더욱 많은 설정 방법에 대해 알고싶다면 A-la-carte page 를 참고하세요.

 

A-la-carte (treeshaking) — Vuetify.js

A La Carte provides automatic treeshaking via the vuetify-loader. Use only the features that you need and drastically reduce your package bundle size.

vuetifyjs.com

// webpack.config.js

module.exports = {
  rules: [
    {
      test: /\.s(c|a)ss$/,
      use: [
        'vue-style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          // Requires sass-loader@^7.0.0
          options: {
            implementation: require('sass'),
            fiber: require('fibers'),
            indentedSyntax: true // optional
          },
          // Requires sass-loader@^8.0.0
          options: {
            implementation: require('sass'),
            sassOptions: {
              fiber: require('fibers'),
              indentedSyntax: true // optional
            },
          },
        },
      ],
    },
  ],
}

Vuetify 플러그인 파일을 만들기 위해 아래의 코드조각을 src/plugins/vuetify.js 로 만드세요.

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

사용 vuetify-loader하는 경우 아래 내용 을 사용하십시오.

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

설정된 Main Entry Point(보통 src/main. js) 로 이동하여 Vuetify object를 Vue 인스턴스에 옵션으로 추가 하세요.

 

// src/main.js

import Vue from 'vue'
import vuetify from '@/plugins/vuetify' // path to vuetify export

new Vue({
  vuetify,
}).$mount('#app')

폰트 설치하기

Vuetify 는 Google's Roboto font와 소재 디자인 아이콘 를 사용합니다. 가장 쉬운 설치방법은 index.html (보통 public/index.html)에 폰트 CDN 들을 추가하는것 입니다.

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">

CDN 사용하기

Vue CLI 를 통한 설치 없이 직접 Vuetify.js 를 테스트 하고 싶다면, 아래의 코드 조각을 index.html 에 직접 추가 해 주세요. 이것으로 여러 컴포넌트들이 사용가능한 최신버전의 Vue와 Vuetify가 설치될 것입니다. 또한, Vuetify starter 를 이용해 Codepen 위에서 테스트 해볼 수 있습니다. 배포 환경에선 CDN 패키지를 추천하진 않습니다만 필요하다면 사용하는 에셋들의 버전을 명시해주는것이 유리합니다. 이것에 대하여 더 알고싶다면 jsdelivr 웹사이트를 참고하세요.

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-content>
        <v-container>Hello world</v-container>
      </v-content>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })
  </script>
</body>
</html>

Vuetify 공식 홈페이지 자료 한국어로 번역해보면서 공부를 해보았다.

다음에는 Vuetify로 홈페이지를 직접 만들어 볼 것 이다.

저작자표시 비영리 동일조건

'Vue' 카테고리의 다른 글

이벤트 전파와 버블링  (0) 2020.04.08
Vue 이벤트 수식어  (0) 2020.04.08
package-lock.json VS package.json ?  (0) 2020.04.07
Vue Router !  (0) 2020.04.06
Vue lifecycle 이란 ?  (0) 2020.04.02

HTML 문서의 이벤트 처리는 3단계를 거친다.

 

1단계는 문서 내의 요소에서 이벤트가 발생했을 때 HTML 문서의 밖에서부터 이벤트를 발생시킨 HTML 요소까지 포착해 들어가는 이벤트 포착 단계(CAPTURING_PHASE)이다.

 

2단계는 이벤트를 발생시킨 요소에 다다르면 요소의 이벤트에 연결된 함수를 직접 호출시키는 이벤트 발생(RAISING_PHASE: AT_TARGET) 단계이다.

 

마지막 3단계로는 이벤트가 발생한 요소로부터 상위 요소로 거슬러 올라가면서 동일한 이벤트를 호출시키는 버블링(BUBBLING_PHASE) 단계이다.

 

일반적으로는 2단계 RAISING, 3단계 BUBBLING_PHASE 에서 연결된 이벤트 함수가 호출된다. 이것을 그림으로 나타내면 아래와 같다.

이벤트 전파의 3단계

위 그림에서#outer 영역과#inner 영역의 요소에 각각 click 이벤트를 연결했을 때,#outer 영역을 클릭했을 때에는 해당 이벤트와 연결된 메소드가 실행되지만,#inner 부분에 해당하는 안쪽 영역을 클릭했을 때에는,#inner 영역의 클릭 시 연결된 이벤트가 발생될 것이라는 일반적인 기대와는 달리,#inner 와#outer 영역에 연결된 각각의 메소드가 모두 실행된다.

 

#inner 를 클릭(2 AT_TARGET)했을 때 상위 요소인 #outer 요소로 이벤트가 전파(3 BUBBLING)되기 때문이다. 이 때 이벤트 전파(Propagation)를 막기 위해서 이벤트 객체의 stopPropagation() 메서드를 호출해서 사용할 수 있다

저작자표시 비영리 동일조건

'Vue' 카테고리의 다른 글

Vuetify ?  (0) 2020.04.09
Vue 이벤트 수식어  (0) 2020.04.08
package-lock.json VS package.json ?  (0) 2020.04.07
Vue Router !  (0) 2020.04.06
Vue lifecycle 이란 ?  (0) 2020.04.02

Vue.js에서 이벤트를 다루는 방법에 대해서 간단히 정리하려고 합니다.
HTML에는 <a>나 <input> 처럼 당연히 알고 있는 기본 이벤트가 있습니다. 그리고 이미 javascript를 통해서 기본 이벤트와 어우러지게 사용하는 방법들이 있구요.
여기에서 Vue.js는 javascript로 조금 어렵게 구현했던 기능들을 v-on 디렉티브를 통해서 좀더 쉽게 구현할 수 있는 방법을 제공하고 있습니다.

이벤트 구현

Vue.js에서 이벤트를 구현하는 방법인 v-on 디렉티브를 이용합니다.
v-on은 줄여서 @로 대체할 수 있습니다.

예>

copy html<!-- 해당 태그를 클릭 했을 경우 goodgood() 메소드 실행. --> <button id="goodboy" v-on:click="goodgood">좋아요</button> <button id="goodboy" @click="goodgood">좋아요</button>

좋아요 버튼을 클릭하면 javascript로 작성된 goodgood() 메서드를 호출합니다.

활용 이벤트 명

아래의 이벤트명을 v-on 또는 @와 같이 사용하면 됩니다.

v-on:click="..."
@dblclick="..."
@mouseover=".."

이벤트명설명

click 마우스를 클릭했을 때 실행함
dblclick 마우스를 더블 클릭했을 때 실행함
mouseover 마우스의 포인트가 요소 위로 올라왔을 때 실행함
mouseout 마우스의 포인트가 요소 밖으로 벗어났을 때 실행함
mousemove 마우스의 포인트가 이동했을 때 실행함
mousedown 마우스의 버튼을 눌렀을 때 실행함
mouseup 마우스의 버튼을 놓았을 때 실행함
keydown 키보드의 키를 눌렀을 때 실행함
keyup 키보드의 키를 놓았을 때 실행함
keypress 키보드의 키를 눌렀다가 놓았을 때 실행함
change 요소가 변경될 때 실행함
submit <Form>이 제출될 때 실행함
reset <Form>이 재설정될 때 실행함
select <select>의 값이 선택되었을 때 실행함
focus 태그에 포커스가 있을 때 실행함
blur 태그에 포커스를 잃었을 때 실행함

이벤트 수식어

Vue.js에서는 복잡한 javascript구현을 간단히 처리하기 위해서 수식어를 제공하고 있습니다.
이 수식어는 이벤트명에 .으로 연결하여 사용합니다.

예>

copy html<!-- 해당 태그를 클릭 했을 경우 a태그 이벤트를 막고 goodgood() 메소드 실행. --> <a id="goodboy" v-on:click.prevent="goodgood">좋아요</a> <a id="goodboy" @click.stop="goodgood">좋아요</a>

좋아요 버튼을 클릭하면 javascript가 <a>태그가 기본 수행하는 href="..." 이벤트를 중지시키고 goodgood() 메서드만 호출합니다.

기본 수식어

수식어 명설명비고

.prevent 기본 이벤트의 자동 실행을 중단 시킴 preventDefault() 과 동일한 기능
.stop 이벤트가 전파되는 것을 중단 시킴 (Bubbling 중단) stopPropagation() 과 동일한 기능
.capture 포착 단계에서만 이벤트를 발생시킴 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리함
.self 발생 단계에서만 이벤트를 발생시킴 event.target이 엘리먼트 자체인 경우에만 트리거를 처리, 자식 엘리먼트에서는 실행안됨
.once 이벤트를 한번만 실행 시킴
.passive 기본 이벤트를 취소할 수 없게 함 있을지 모를 .preventDefault()를 실행 안되게 함.

copy html<!-- 스크롤의 기본 이벤트를 취소할 수 없습니다. --> <div v-on:scroll.passive="onScroll">...</div>키 수식어

키(Key)에 대한 수식어는 원래 숫자를 이용하는 것이였으나 사람이 숫자를 기억하기 힘들기 때문에 키값에 해당하는 수식어를 별도의 이름으로 지정하여 활용합니다.

copy html<!-- keyCode가 13일 때만 `vm.submit()`을 호출합니다 --> <input @:keyup.13="submit"> <!-- keyCode가 13 대신 .enter로 지정하여 활용합니다. 위의 코드와 동일하게 작동합니다. --> <input @keyup.enter="submit">

1개 키 사용법
<input @click.enter="...">
<input @keyup.tab="...">
<input @keyup.space="...">

여러 키 사용법
<input @click.ctrl.enter="...">
<input @keyup.alt.23="...">
<input @keyup.shift.13="...">

키 수식어 명고유 키 값비고

.enter 13
.tab 9
.delete 8 “Delete” 와 “Backspace” 키 모두 해당
.esc 27
.space 32
.up 33
.down 34
.left 37
.right 39
.ctrl 17
.alt 18
.shift 16
.meta 매킨토시에서 command 키, Windows에서는 windows 키

그 외의 키들은 개별로 커스텀하게 제작하여 사용할 수 있습니다.

마우스 버튼 수식어

키(Key) 수식어 처럼 마우스 버튼에 대한 수식어도 아래와 같습니다.

키 수식어 명설명

.left 마우스 왼쪽 버튼 클릭
.right 마우스 오른쪽 버튼 클릭
.middle 마우스 가운데 휠 버튼 클릭

예>

copy html<!-- 마우스 오버 후 오른쪽 버튼 클릭을 했을 경우 `goodgood()`을 호출합니다 --> <div id="goodboy" v-on:mouseover.left="goodgood"></div> <!-- 마우스 오버 후 왼쪽 버튼 클릭 했을 경우 `goodgood()`을 호출합니다 --> <div id="goodboy" @mouseover.right="goodgood"></div>

출처: https://ux.stories.pe.kr/119 [UX 공작소]

저작자표시 비영리 동일조건

'Vue' 카테고리의 다른 글

Vuetify ?  (0) 2020.04.09
이벤트 전파와 버블링  (0) 2020.04.08
package-lock.json VS package.json ?  (0) 2020.04.07
Vue Router !  (0) 2020.04.06
Vue lifecycle 이란 ?  (0) 2020.04.02

+ Recent posts

티스토리툴바