FrontEnd
-
05. 뷰 라우터(Router)FrontEnd/Vue.js 2021. 9. 11. 13:23
1. 뷰 라우터(Router) 뷰 라우터는 뷰에서 라우팅(웹 페이지 간 이동) 기능을 구현할 수 있도록 지원하는 공식 라이브러리입니다. 태그 설명 페이지 이동 태그. 화면에서는 로 표시되며 클릭하면 to에 지정한 URL로 이동합니다. 페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역입니다. 뷰 라우터 예제 Main 컴포넌트로 이동 Login 컴포넌트로 이동 tip) $mount() API : el속성과 동일하게 인스턴스를 화면에 붙이는 역할. (용어) 싱글 페이지 애플리케이션(SPA, Single Page Application) : 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동 시 클라이언트의 라우팅을 이..
-
04. 뷰 컴포넌트(Component)FrontEnd/Vue.js 2021. 9. 10. 16:00
1. 뷰 컴포넌트(Comonent) 컴포넌트(Component)란 조합하여 화면을 구성할 수 있는 블록을 의미합니다. 2. 컴포넌트 등록 /* 1) 전역 컴포넌트 : 여러 인스턴스에서 공통으로 사용 Vue.component('컴포넌트 이름', { // 컴포넌트 내용 : template, data, methods 등 인스턴스 옵션 속성 정의 }); */ 컴포넌트 등록 /* 2) 지역 컴포넌트 : 인스턴스에 components 속성 추가 new Vue({ components: { '컴포넌트 이름': 컴포넌트 내용 } }); */ 컴포넌트 등록 > 전역 컴포넌트는 한 번 등록하면 어느 인스턴스에서든 사용이 가능하나, 지역 컴포넌트는 새 인스턴스를 생성할 때마다 등록해줘야 합니다. 3. 뷰 컴포넌트 통신 뷰 프..
-
03. 뷰 인스턴스(Instance)FrontEnd/Vue.js 2021. 9. 7. 17:20
뷰 인스턴스(Instance)는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위입니다. 1. 뷰 인스턴스 라이프 사이클 [용어] 라이프 사이클 훅(hook) : 각 라이프 사이클 속성에서 실행되는 커스텀 로직 2. 뷰 인스턴스 생성 및 옵션 속성 // Vue 생성자 : 미리 정의된 속성과 메서드 재활용 new Vue({ el: '#app', // el 속성 : 뷰 인스턴스로 화면을 렌더링할 때 화면이 그려질 위치의 돔 요소 지정 data: { message: 'Hello Vue.js!' }, template: { // 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성. }, methods: { // 화면 로직 제어와 관계된 메서드를 정의하는 속성. (마우스 클릭 이벤트 처리..
-
02. 개발환경 설정FrontEnd/Vue.js 2021. 9. 7. 11:36
1. Chrome > 크롬 개발자 도구 2. Visual Studio Code 3. Node.js > 설치 시 LTS(Long Term Support) 버전 다운로드 > 설치 후 터미널에서 node -v, npm -v로 버전 확인 4. Vue.js Devtools 5. git 6. github [참고] github repository 1) https://github.com/joshua1988/doit-vuejs 2) https://github.com/joshua1988/learn-vue-js [Install Visual Studio plugins] > Vetur : Vue plugin > tslint : 엄격한 자바스크립트 > Material Icon Theme : 파일 아이콘 테마 (File > Pre..
-
01. Vue.jsFrontEnd/Vue.js 2021. 9. 7. 11:07
1. Vue.js Vue.js는 웹 페이지 화면을 개발하기 위한 화면단 라이브러리이자 프레임워크이다. 2. Vue.js 장점 1) 배우기가 쉽다. 2) 리액트(react.js)와 앵귤러(angular.js)에 비해 성능이 우수하고 빠르다. 3) 리액트의 가상 돔(Virtual DOM) 기반 렌더링 특징과 앵귤러의 데이터 바인딩 특성을 모두 가지고 있다. 3. Vue.js 특징 1) MVVM 패턴의 뷰 모델(ViewModel)에 해당하는 화면단 라이브러리 용어 설명 뷰(View) 사용자에게 보이는 화면 돔(DOM) HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리 돔 리스너(DOM Listener) 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치..
-
06. Spread OperatorFrontEnd/ES6 2021. 9. 7. 10:31
Spread Operator (...)는 배열표현식 또는 0개 이상의 인수(함수 호출의 경우) or 요소(배열 리터럴의 경우)가 기대되는 장소에서 확장된 문자열과 같은 반복을 허용한다. 스프레드 오퍼레이터, 스프레드 연산자, 전개 구문, 펼침 연산자라고도 불린다. [MDN] ES5 ES6 let name = { first name: 'gil-dong', last name: 'kim' }; let person = { nation: 'korea', first name: 'gil-dong', last name: 'kim' } let name = { first name: 'gil-dong', last name: 'kim' }; let person = { nation: 'korea', ...name }
-
05. 모듈화(Modules)FrontEnd/ES6 2021. 9. 4. 11:10
Modules는 JavaScript 모듈 로더(AMD, CommonJS)의 패턴을 코드화한 것으로 호출되기 전까지는 코드 실행과 동작을 하지 않는 특징이 있습니다. 재사용성이 뛰어난 기능들을 모듈화해서 사용이 가능하며 파일별로 Scope를 가져 변수의 Scope 충돌을 방지할 수 있습니다. libs/math.js main.js export function sum(x, y) { return x + y; } export var pi = 3.141593; import * as math from 'libs/math'; alert("2π = " + math.sum(math.pi, math.pi)); ----------------------------------------------------------------..
-
04. 향상된 객체 리터럴(Enhanced Object Literals)FrontEnd/ES6 2021. 9. 4. 10:50
1. 객체의 속성을 메서드로 사용할 때 function 예약어를 생략하고 생성이 가능합니다. var obj = { num: 100, // ES5 findNum: function() { console.log("find number"); }, // ES6 findNum() { console.log("find number"); } } 2. 객체의 속성명과 값 명이 동일할 때 축약이 가능합니다. var num = 10; var obj = { // num: num, num };