Front

VUE CLI 공식 문서에 들어가면 Netlify 칸이 있다. Netlify 칸에서 _redirects 설정 안내를 확인할 수 있다. Single-page application 란? 특정 페이지의 정보를 서버에서 받아오는것이 아니라 미리 갖고있다가 필요시에 그 페이지로 (Javascript로) 전환 하는것 그랬을때 특정 주소(path)를 서버에서 알 길이 없다. 이 페이지에 대한 정보는 브라우저에 있기 때문에 클라이언트 정보를 알 수가 없어서 서버에 path를 알려줘야할 필요가 있다. (Netlify로 배포 시 웹사이트 처음 시작할때만 발생하는 에러 - 첫 화면부터 라우팅이 걸려있을때) 그걸 해결하기 위해 특정 도메인 뒤에 오는 URL들을 "_redirects" 라는 파일로 모든 접근에 대해서 index..

https://www.netlify.com/ Netlify: Develop & deploy the best web experiences in record time A powerful serverless platform with an intuitive git-based workflow. Automated deployments, shareable previews, and much more. Get started for free! www.netlify.com 1. 이 사이트 들어가서 회원가입 누르면 깃허브, 깃랩으로 회원가입 할 수 있음 2. 깃허브로 회원가입하고 리포지터리 연결하자 1. 깃허브의 리포지터리 연결 2. 리포지터리의 폴더 연결 3. npm run build 명령어 작성 4. 리포지터리 폴더 속 ..

배포명령어 : 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 {..