본문 바로가기

SW LAB

Vue.js 시작하기 : (5) Single File Component & 최종 정리 싱글 파일 컴포넌트 & 최종정리 7. 싱글 파일 컴포넌트 빈 vue 파일을 생성 후 scf(scaffold)키워드로 자동완성으로 기본 템플릿 코드를 작성할 수 있습니다. 에는 하나의 만 선언이 가능합니다. components 폴더 하위에 컴포넌트를 생성하게 되는데, 보통 두 단어 이상으로 구성하길 권장합니다. html에 존재하는 기존 tag와 중복될 수 있기 때문입니다. App.vue appHeader.vue {{ propsdata }} send 8. 최종 프로젝트 다음 명령어를 수행하여 새로운 프로젝트를 생성하고 실행합니다. vue create vue-form cd vue-form npm run serve 간단하게 마크업 구조를 잡아보겠습니다. App.vue id: pw: login username과 .. 더보기
Vue.js 시작하기 : (4) Templete Syntax & Vue-cli 템플릿 문법 & Vue-CLI 7. 템플릿 뷰의 템플릿 문법이란 뷰로 화면을 조작하는 방법을 의미합니다. 템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나누어집니다. 데이터 바인딩 데이터 바인딩은 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법입니다. 가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag)입니다. {{ message}} new Vue({ message = 'hello world' }) 디렉티브 디렉티브는 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법입니다. 화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공하고 있습니다. 예를 들어 아래와 같이 특정 속성 값에 따라 화면의 영역을 표시하거나 표시하지 않을 수 있습니다. 속성 중 v- 로 .. 더보기
Ghost-Jekyll 적용하기 Github Page & Jekyll 적용 1. Github Page 생성 다음 주소로 접속 합니다. https://pages.github.com/ Github에 회원가입 후, 페이지 생성 절차를 진행합니다. 2. Jekyll 구축 저는 Windows 환경에서 구축을 진행하였습니다. 2-1. 루비 설치 다음 주소로 접속하여 루비를 다운로드 합니다. https://rubyinstaller.org/downloads/ 저는 Ruby+Devkit 2.5.5-1 (x64) 를 다운로드 하였습니다. 참고로 Jekyll은 Ruby 2.x 이상의 버전에서만 호환됩니다. 그리고 별도로 DevKit 를 설치할 필요 없는 통합 버전 입니다. 2-2. Jekyll 설치 설치 진행 중 참고 사항 ' Add Ruby ex.. 더보기
Vue.js 시작하기 : (3) Router & Axios 라우터 & Axios 5. 라우터 Vue 라우터는 Vue.js의 공식 라우터입니다. Vue.js를 사용한 싱글 페이지 앱을 쉽게 만들 수 있도록 Vue.js의 코어와 긴밀히 통합되어 있습니다. 아래의 기능을 포함합니다. 중첩된 라우트/뷰 매핑 모듈화된, 컴포넌트 기반의 라우터 설정 라우터 파라미터, 쿼리, 와일드카드 Vue.js의 트랜지션 시스템을 이용한 트랜지션 효과 세밀한 네비게이션 컨트롤 active CSS 클래스를 자동으로 추가해주는 링크 HTML5 히스토리 모드 또는 해시 모드(IE9에서 자동으로 폴백) 사용자 정의 가능한 스크롤 동작 5-1. 라우터 코드 정의 new VueRouter({}) 를 이용하여 라우터 인스턴스를 정의할 수 있습니다. 그리고 new Vue({}) 객체의 router 속.. 더보기
Vue.js 시작하기 : (2) Instance & Comoponent 인스턴스 & 컴포넌트 3. 인스턴스 인스턴스는 뷰로 개발할 때 필수로 생성해야하는 코드입니다. 3-1. 인스턴스 소개 아래 코드에서 Vue로 인스턴스를 생성하는 것을 보여줍니다. 3-2. 인스턴스와 생성자 함수 인스턴스와 생성자 함수를 사용하는 예는 다음과 같습니다. function Vue() { this.logText = function() { console.log('hello'); } } var vm = Vue(); vm.logText(); 출력 -> hello 3-3. 인스턴스 옵션 속성 new Vue({ el: , template: , data: , methods: , created: , watch: }) el : 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그) templa.. 더보기
Vue.js 시작하기 : (1) 소개 & Reactivity 개발환경 설정 & Vue 소개 1. 개발환결 설정 1-1. Vue.js 설치하기 Chrome Visual studio code Node.js Vue.js devtools 1-2. Plug-In 설치하기 Vetur Night Owl Material Icon Theme Live Server ESLint Prettier Auto Close Tag Atom Keymap 2. Vue 소개 2-1. Vue는 무엇인가? MVVM 패턴의 ViewModel Layer에 해당하는 View단 라이브러리 DOM Listeners View에서 DOM에 있는 Event를 수신하여 DOM Listeners를 통해 Model에 전달 Data Bindings Model 에서 Business Logic을 처리후 Data Bindings.. 더보기
Linux : FTP 접속 관련 Linux Centos7 - FTP 접속 관련 Centos7 를 설치할 때, FTP 를 옵션으로 선택하였음에도.. 접속이 안되는 경우가 있습니다. systemctl 명령어로 vsftpd를 시작/중지/상태확인합니다. systemctl status vsftpd.service 더보기
Linux : FTP 접속 오류 Linux Centos7 - FTP 접속 Centos7 를 설치할 때, FTP 를 옵션으로 선택하였음에도.. 접속이 안되는 경우가 있습니다. systemctl 명령어로 vsftpd를 시작/중지/상태확인합니다. systemctl status vsftpd.service 더보기