Front

배포명령어 : rpm run build CLI로 생성한 프로젝트를 서비스에 배포하려면 제일 먼저 위 명령어를 실행해야 합니다. 실행하고 나면 호스팅 할 수 있는 형태의 HTML, CSS, Javascript, 이미지 등의 파일이 생성됩니다. 이렇게 생성된 자원을 빌드된 자원 이라고 부릅니다. dist 폴더 및에 호스팅 할 수 있는 파일들이 생성됩니다.

render 함수 란? -render 함수의 역할 : render 함수는template와 마찬가지로 html 템플릿을 만들지만 일부 장면에서 template로 실현하면 코드가 지루하고 번거로우며 대량으로 중복되기 때문에 이때 render 함수를 사용한다. - render 방법의 실질은template 템플릿을 생성하는 것이다. - 하나의 방법을 호출하여 생성하고 이 방법은render 방법의 매개 변수를 통해 전달한다. - 이 방법은 세 가지 파라미터가 있는데 각각 라벨 이름, 라벨 관련 속성, 라벨 내부의 html 내용을 제공한다. - 이 세 가지 파라미터를 통해 완전한 템플릿을 생성할 수 있다 - vue는 가상 DOM이기 때문에template 템플릿을 받을 때도 VNode 함수로 번역하고 render 함..

컴포넌트 디자인 패턴 1. Common - 기본적인 컴포넌트 등록과 컴포넌트 통신 {{ title }} {{item}} renew items 2. Slot - 마크업 확장이 가능한 컴포넌트 slot은 데이터는 위에있음 아래 컴포넌트에서 데이터를 표현만 해줄뿐 slot을 왜 쓸까? - 요구사항이 바뀔때를 대비, 유연하게 화면의 영역을 확장 할 수 있다. {{ item }} 아이템 1 아이템 2 click me 아이템 3 아이템 4 3. Controlled - 결합력이 높은 컴포넌트 - 하위에서 관리해야 했던 데이터를 상위에서 관리하게 하는 방법 - 컴포넌트에 데이터 의존성 분리 4. Renderless - 데이터 처리 컴포넌트 {{ response }} loading... name : {{ response..

var divElement = document.getElementById('app'); var divElement = document.querySelector('app'); var divElement = $('#app'); vue에서 위 3개와 대등한 속성은 ref var divElement = this.$refs.app; hello

1. 차트 라이브러 NPM으로 설치 2. 설치된 라이브러리를 import로 App.vue에서 로딩 3. mounted() 라이프 사이클 훅에서 차트를 그림 4. 차트를 컴포넌트화 5. 컴포넌트의 플러그인화 6. 컴포넌트 통신을 이용한 차트 컴포넌트 기능 결합 chart.js

설치하는 방법 1. NPM 2. CDN 둘 중 하나 골라서 설치하면 된다. 1. NPM 설치 명령어로 설치 npm install chart.js로 설치햇더니 TypeError 나서 npm install chart.js@2로 설치했음 npm install chart.js@2 설치 중 모습 정상적으로 설치완료 되면 package.json에 chart.js가 생김

https://www.chartjs.org/docs/latest/ Chart.js | Chart.js Chart.js (opens new window) Installation You can get the latest version of Chart.js from npm (opens new window), the GitHub releases (opens new window), or use a Chart.js CDN (opens new window). Detailed installation instructions can be found on the instal www.chartjs.org https://apexcharts.com/vue-chart-demos/ Vue Chart Examples & Samples..

api 폴더 import axios from 'axios'; // 1. HTTP Requset & Response 와 관련된 기본 설정 const config = { baseUrl: 'https://api.hnpwa.com/v0/' }; // 2. 공통 API 함수들 정리 async function fetchNewsList(){ // return 바로 해준게 핵심 // return axios.get(config.baseUrl+'/news/1.json'); try { return await axios.get(`${config.baseUrl}news/1.json`); } catch (error) { console.log(error); } } async function fetchJobsList(){ try {..

Login List {{item}}

Async & Await - 어싱크 어웨이트는 자바스크립트 비동기 처리 패턴의 최신 문법. - Promise, collback 에서 주는 단점을 해결 - 자바스크립트의 비동기적 사고 방식에서 벗어나 동기적(절차적) 으로 코드 작성 가능 기본 문법 async function fetchData(){ await getUserList(); } async 함수는 함수의 앞에 async를 붙여주고 함수의 내부 로직중 비동기 처리 로직 앞에는 await를 붙여주면 된다. 좀 더 정확하게는 Promise 객체를 반환하는 API 호출 함수 앞에 await 붙이면 된다. 기본 예제 async function fetchData(){ var list = await getUserList(); console.log(list); ..