우영's devlog

Vue Router Server-side Routing(MPA) VS Client-side Routing(SPA) MPA SPA 이미지 출처 : Vue Mastery-facebook Server-side Routing(MPA) client 가 URL을 변경 요청할 때마다 서버로 요청이 가고 서버로부터 페이지를 Return 받는 방식 Client-side Routing(SPA) SPA에서 컨텐츠를 탐색하기 위한 방식 (SPA는 하나의 페이지에서 모든 리소스들을 로드한 후 다이나믹하게 화면을 업데이트 함) 이번 강의에서는 Client-side Routing에 대해 학습할 예정이고 추후 SSR(Server Side Rendering)에 대해 다룰 예정임 (SSR에 대한 내용이 궁금하시다면 velog - SPA..

Vue CLI Vue.js 개발 환경을 빠르고 쉽게 제공 공식 지원되는 도구 project scffoding 제공 (👉 프로젝트 폴더 구조 및 라이브러리 설정) Vue CLI를 쓰지 않고 직접 설정도 가능하지만 추천 ❌ 현재 v4.0.0-rc.7 까지 Pre-release 된 상태이지만 3.x version을 사용할 예정입니다. 게으른 탓인지 글을 쓰는 중에 4.x version이 공식 릴리즈 되었습니다 😅 4.x version 을 사용해야 할 것 같습니다 ㅎ Vue CLI 구성요소 CLI vue 명령어 제공 command desc create [options] 프로젝트 생성 add [options] [pluginOptions] npm install + 이미 생성된 프로젝트에 plugin 추가 invok..

Components 컴포넌트란? 재사용 가능한 코드 블럭 모듈화 및 관리가 용이한 코드베이스를 만드는데 도움이 됨 컴포넌트들을 조합하여 어플리케이션 개발 컴포넌트들은 부모 자식 관계로 트리 구조 형성 이미지 출처 : Cracking Vue.js 컴포넌트는 SPA(Single Page Application) 개발 시 가장 기본적이고 중요한 요소임 전역 컴포넌트 Vue.component("product", {}); 첫번째 인자값은 컴포넌트 명 두번째 인자는 컴포넌트의 option들을 설정 (type은 object) ⭐ Component 작성시 data 속성은 함수 형태로 선언 Vue.component("product", { template: ``, data() { return {}; }, methods: {..

🚀사전 준비 쇼핑몰 예제 코드 작성 (Step_0) 예제 소스 내려받기 $> git clone https://github.com/wooyoung85/vuejs-study.git $> cd vuejs-study/example ## Visual Studio Code 실행 $> code . 템플릿, 보간법, Mustache 구문, Interpolation ({{}}) I have a {{ product }} {{ product + 's' }} {{ onSale ? 'YES' : 'NO' }} {{ product.getSalePrice() }} Mustache 구문 안에 있는 값은 해당 data 속성 값으로 대체됨 data 속성 값이 변경될 때 마다 화면이 갱신됨 (아래 예제에서는 product나 onSale ..

Vue.js 란? progressive framework for building user interfaces 2014 년 11월 9일에 Vue.js v0.11 Release 후 현재 v2.6.10 까지 Release 됨 vue - Roadmap | github Google Creative Lab에서 일하던 EVAN YOU 가 개발 현재 가장 주목받고 있는 Frontend Framework 중 하나 이미지 출처 : risingstars.js.org npm-stat 확인 npm-stat.com 사용량으로 보면 React가 월등히 앞서고 있음 🙄 but, 2~3년 전과 비교해 본다면 그 격차가 매우 줄었음 Developer Survey Results 2019 React.js and Vue.js are both..

Mssql에 쌓이는 로그들을 분석하기 위한 시스템 구축 구성요소 설치 대상 서버 : Windows Server 2012 R2 Version Role Logstash 7.11 로그 수집, Parsing, Indexing Elasticsearch 7.11 데이터 저장, 분석, 검색 엔진 Kibana 7.11 시각화 도구 MSSQL JDBC Driver 7.2 Java프로그램에서 MSSQL 접근을 위한 프로그램 ELK 7 Version 사용 이유 ELK 7 Version은 OpenJDK가 Bundle로 구성되어 사용가능함 Oracle JAVA 사용할 필요가 없음!! 무료버전에서 핵심 보안 기능 제공 암호화된 통신 역할 기반 액세스 제어 자세한 내용은 Elastic Stack 구독 페이지 참고 Alert 기능의..

프로젝트 생성 VM 인스턴스를 생성하려면 프로젝트가 있어야 함 cloud shell 활성화 cloud shell 활성화한 후 프로젝트가 잘 설정되었는지 꼭 확인해야 함 gcloud config set project [PROJECT_ID] 로 설정 가능 starup-script 준비 VM 인스턴스를 생성하면 기본적으로 password를 통한 ssh 접속을 막아두고 있기 때문에 아래와 같이 설정하여 root 계정으로 ssh 접속을 하려고 함 cloudshell에 install.sh 파일 생성 후 아래 내용 복사 붙여넣기 (CentOS6 용) #!/bin/bash sudo yum -y install expect expect -c "set timeout 10 spawn sudo passwd expect \"Ne..

IP만 달려있는 Linux 서버(CentOS 6.7)들이 있을 때, Cloudera 설치를 쉽게 할 수 있는 스크립트를 만들어 보았습니다 ^^ IP만 있는 CentOS 서버 만들기 VirtualBox와 Vagrant 조합으로 4대의 가상머신을 생성 (메모리 여유가 된다면 가상머신을 더 만들어도 됨) node1 에 cloudera-manager-server와 cloudera manager용 db(mysql)가 설치될 예정Vagrant.configure("2") do |config| # Define base image config.vm.box = "bento/centos-6.7" # Manage /etc/hosts on host and VMs config.hostmanager.enabled = false c..