전체 글 검색 결과
275 개의 검색 결과가 있습니다.
[DEV] App Dev ∕ Web Front/Framework ∕ Vue

[vue.js] 컴포넌트

# 컴포넌트 소개 - 컴포넌트 기반 - 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능 - 재사용성이 올라가고, 빠르게 화면 제작가능 - 컴포넌트간 관계가 생성 # 컴포넌트 등록 및 실습 # 전역 컴포넌트 등록법 # 지역 컴포넌트 등록법 // 3.컴포넌트 사용법 // 5.컴포넌트 사용법 // 2. 전역 컴포넌트 등록방법 (실제상황에서는 별로 안쓰임) // Vue.component('컴포넌트 이름', 컴포넌트 내용); Vue.component('app-header', { template: 'Header' }); // 1. 뷰 객체 생성 // 인스턴스를 생성하면 기본적으로 Root 컴포넌트가 된다. new Vue({ el: '#app', // 4. 지역 컴포넌트 등록 방식 // components 속성 c..

2020. 12. 2. 01:39
[DEV] App Dev ∕ Web Front/Framework ∕ Vue

[vue.js] 인스턴스

# 인스턴스 소개var vm = new Vue(); //vue 참조 // var options = var vm = new Vue({ //Vue 인스턴스를 생성 el: '#app', //Element를 매핑 data: { //Data 바인딩 message: 'hi' }, methods: { }, created: function() { } }); # 인스턴스와 생성자 함수생성자 함수의 약속 함수이되, 대문자로 시작하는 함수는 생성자이다.function Vue() {this.logText = function() { }}var vm = new Vue()를 사용하는 이유 이미 정의된 함수를 사용하기 위함 # 인스턴스 옵션 속성new Vue({ el: '#app', template:, data : { }, meth..

2020. 12. 2. 01:27
Development Stack/ELK

[ELK] 데이터 시각화

# Kibana로 검색해 온 데이터 시각화해서 보여주기 # 키바나 구성 : 단순히 내부 Group by와 Group 함수를 쉽게 사용할 수 있도록만 해놓은 것- Display Tab : 현재 사용가능한 index 모두 조회 가능> 필요한 필드만 toggle 해서 볼 수 있음- Visualize Tab : 현재 사용가능한 모든 graph 조회가능> 여러가지 형식의 그래프를 만들 수 있음> Matrix : 단순 카운트 or 최대값 or 평균 을 라벨과 함께 숫자로 보여준다총 데이터 카운트를 보여준다.날짜 필터링 기능이 기본적으로 있다.> Gauge : Matrix와 동일하지만, Option과 Style을 주어서 파이 차트처럼 보여줄 수있다.> Pie : 그룹별, 카운트를 쉽게 줄수 있다., 2 depth로 ..

2020. 12. 1. 21:13
Development Stack/ELK

[ELK] ElasticSearch 검색

# REST APIRepresentational State Transfer(REST) + Application Programming Interface(API)Rest Api 상의 CRUD 매핑 MethodCreate : PUTRead : Get, PostUpdate : PostDelete : Delete # cURL : 클라이언트 URL 방식(cURL) curl -XGET "localhost:9200" : localhost:9200 url로 GET 요청보낸 결과값을 보여달라.curl -XGET "localhost:9200/update_sample1/_search"curl -XGET "//_search" GET /_searchGET /_search{"query":{"match_all": {}}} # 검색 ..

2020. 12. 1. 15:42
[DEV] App Dev ∕ Web Front/Framework ∕ Vue

[vue.js] 소개

# MVVM 모델에서의 vue MVVM 패턴의 뷰모델(VM) 레이어에 해당하는 화면(V)단 라이브러리 - View DOM - ViewModel DOM Listener DATA Binding - Model Plain JS Object # 기존 웹 개발 방식(HTML, JS) Tip. VS Code (Auto Close Tag 플러그인 설치시?) - !누르고 엔터 누르면 자동으로 HTML 베이스 작성해줌 - div#app 치고 엔터를 누르면 자동으로 id가 app인 div 태그 생성 해줌 DOCTYPE html> Document // console.log(div); var div = document.querySelector('#app'); var str = 'hello world'; div.innerHTML..

2020. 12. 1. 13:00
Development Stack/ELK

[ELK] 개요

# ELK 스택이란?ElasticSearch + Logstash + Beats + Kibana의 조합일라스틱 서치로 데이터를 적재하고, 데이터를 시각화하는 스택메인은 엘라스틱 서치이고, 나머지 도구는 서포트하는 도구라고 생각하면 된다.- 키바나 : 데이터를 시각화하고, E의 모든 기능을 구성 및 관리할 수 있는 확장 가능한 UI 도구(elastic.com 에서 지원)적재 & 데이터 시각화 # Elasticsearch 기초1. 인덱스 구조(엑셀 쉬트에 비교)document가 합쳐진 것이 Indexdocument는 rowsfield는 colstype은 sheet# json 포멧{ K : V, ... },{ K : V, ... }, // row 수 만큼2. 클러스터 구성- 클러스터 안에는 여러개의 물리서버가 ..

2020. 12. 1. 09:53