본문 바로가기

프로그래밍/vue 312

vuetify justify 속성 justify란? 브라우저내 배치 된 컴포넌트들이 공간에서 어떻게 배치 될지 결정하는 속성이다. 들어가는 값들은 아래와같이 있다 우선 view를 하나만들고 속성별로 살펴보자 justify 속성 컬럼 justify="start" 왼쪽부터 정렬이 된다. justify="center" 안봐도 뭐 알겠지 중앙정렬이겠구만 justify="end" 이건 오른쪽 정렬 justify="space-between" 왼쪽먼저 채우고 ,다음 오른쪽 채우고, 그다음에는 균등분배하는군 (머리로는 쉬운데 글로는 표현이 어렵구만) justify="space-around" 이건 가운데 부터 채워나가는구만.. justify="space-evenly" 음 이건 오른쪽부터 채워나가는데 start랑 비슷한데 이건 뭘까? Distribut.. 2022. 1. 16.
vuetify class 속성 ( with 3.0 alpha ) 텍스트 및 백그라운드 class 의 속성이 prefix에 {text|bg}-{color} 값이다. 샘플에서 안되서 계속보다보니 바껴 있구나. ( 아까운 내 시간...) Hello 수직정렬 align="{start|center|end}" 이다 안녕 안녕 align-self속성 align="center" class="bg-green" col col col 2022. 1. 16.
vue 3 router 사용하기 router 란 무엇인가? html에서 사용하는 의 기능이라고 보면 된다. 그리고 해당 링크에 있을경우 재 클릭을 방지하는 역활도 가지고 있다고 하네 https://router.vuejs.org/kr/api/#router-link 사용법은 vue-router 설치 ▶ router.js 만들기 ▶ router에서 사용할 페이지 미리만들기 (안 만들면 구동시 오류 남) ▶ main.js에서 가져오기 ▶ App.vue에서 사용하기 이런식으로 사용한다. 1) vue-router설치 npm i vue-router@next 2) router.js 만들기 import { createWebHistory, createRouter } from "vue-router"; // 라우터 라이버러리 import const rout.. 2022. 1. 15.
VSCode(Visual Studio Code) ESLint 설정 ESLint란 무엇인가? https://eslint.org/ 에서 설명되어 있는걸 보면 javascript 개발 시 빠르게 문제점을 찾고 자동으로 수정해준다고 한다. 지원하는 에티터 목록도 엄청 많구나.. ESLint for vue plug-in 설치 npm install --save-dev eslint eslint-plugin-vue VSCode ESLint extentsion, Prettier ESLint 설치하기 vscode 좌측 메뉴에서 extentsion 클릭 ( cmd + SHIFT + X ) 하고 검색창에 eslint 입력후 설치 VSCode 프로젝트 내 .eslintrc.js 추가 module.exports = { env: { node: true }, extends: [ // add mor.. 2022. 1. 15.