전체 글
-
07. 뷰 템플릿(Template)FrontEnd/Vue.js 2021. 9. 11. 15:05
뷰의 템플릿(Template)은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성입니다. 1. 데이터 바인딩(Data Binding) 데이터 바인딩(Data Binding)은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미합니다. 주요 문법으로는 {{}} 문법과 v-bind 속성이 있습니다. 1) {{}} - 콧수염 괄호 {{ message }} > data 속성의 message 값이 바뀌면 뷰 반응성에 의해 화면이 자동으로 갱신됩니다. 2) v-bind v-bind는 아이디, 클래스, 스타일 등의 HTML 속성 값에 뷰 데이터 값을 연결할 때 사용하는 데이터 연결 방식입니다. v..
-
06. 액시오스(Axios)FrontEnd/Vue.js 2021. 9. 11. 13:50
1. 액시오스(Axios) 뷰 커뮤니티에서 가장 많이 사용되는 HTTP 통신 라이브러리입니다. Promise 기반의 API 형식이 다양하게 제공되어 별도의 로직 구현 필요 없이 주어진 API만으로도 간편하게 원하는 로직을 구현할 수 있습니다. tip) Promise 기반의 API 형식 : Promise란 서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 객체입니다. 자바스크립트는 단일 스레드(thread)로 코드를 처리하기에 특정 로직의 처리가 끝날 때 까지 기다려주지 않습니다. 따라서 데이터를 요청하고 받아올 때까지 기다렸다가 화면에 나타내는 로직을 실행해야 할 때 주로 Promise를 활용합니다. [액시오스 공식 깃허브 리포지토리] 2. 액시오스 설치 1) CDN ..
-
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) 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치..