목록IT 기술/[Vue] 기본 (14)

Miracle Morning, LHWN

3. 상용 웹 앱을 개발하기 위한 필수 기술들, 라우터 & HTTP 통신

라우팅 # 라우팅 : 웹 페이지 간의 이동 방법을 말한다. SPA (Single Page Application)에서 주로 사용하고 있다. → 화면 간의 전환이 매끄럽다. → 어플리케이션 사용자 경험을 향상시킬 수 있다. → Vue 뿐만 아니라 React, Angular 에서도 모두 라우팅을 이용하여 화면을 전환하고 있다. ​ ※ SPA (Single Page Application) : 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라, 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 어플리케이션 뷰 라우터 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리이다. 태그 설명 페이지 이동 태그이다. 화면에..
IT 기술/[Vue] 기본 2021. 6. 1. 14:52
2. 뷰 컴포넌트 통신

컴포넌트 간 통신과 유효범위 뷰는 여러 컴포넌트로 화면을 구성하는데, 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다. 따라서 뷰 프레임워크 자체에서 정의한 데이터 전달 방법인 '상위(부모) - 하위(자식) 컴포넌트 간의 데이터 전달 방법'을 따라야 한다. 지역 혹은 전역 컴포넌트를 등록하면, 등록된 컴포넌트는 하위 컴포넌트가 되고 하위 컴포넌트를 등록한 인스턴스는 상위 컴포넌트가 된다. 상위 → 하위 : props 라는 속성을 전달 하위 → 상위 : 이벤트만 전달 가능 상위에서 하위 컴포넌트로 데이터 전달하기 // 상위 컴포넌트 ... // 하위 컴포넌트 // Vue.component() 이용하여 하위 컴포넌트인 child-cmoponent 를 등록 Vue...
IT 기술/[Vue] 기본 2021. 6. 1. 14:50
1. 화면을 개발하기 위한 필수단위, 인스턴스와 컴포넌트

Vue 인스턴스 # Vue 인스턴스 : Vue로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위 new Vue({ ... }) 이 인스턴스를 활용해보자 // 인스턴스 new Vue({ el: '#app', // el 속성 data: { // data 속성 message: 'Hello Vue.js' } }) 일단 화면을 개발하기 위해 new Vue를 이용하여 인스턴스를 생성하였다. 그리고 el 속성으로 Vue 인스턴스가 그려질 지점을 지정하고, data 속성에는 message 값을 정의하여 화면에 출력​​해줄 것이다. ​ # Vue 인스턴스 생성자 new Vue() 로 인스턴스를 생성할 때 Vue를 생성자라고 한다. (이때 Vue 생성자는 Vue 라이브러리를 로딩해야 접근할 수 있다.) 생성자를 ..
IT 기술/[Vue] 기본 2021. 6. 1. 14:44
0. Vue.js란 무엇인가?

# Vue.js는 웹 페이지 화면을 개발하기 위한 프런트엔트 Framework이다. 즉, 화면단의 라이브러리 이자 프레임워크이다. ​ ※ 프레임워크 : 개발자들의 생산성을 높이기 위해 일정한 규칙에 따라 개발하도록 미리 구조를 정의해놓은 도구 > 틀! ※ 라이브러리 : 자주 사용되는 기능들을 모아 재활용할 수 있도록 정리한 기술 모음집 > 재활용템! ※ DOM : HTML 문서에 들어가는 요소의 정보를 담고있는 데이터 트리 ​ ※ 타입스크립트 (TypeScript) : 기존 자바스크립트에 엄격한 타입 체크를 도입한 언어. 앵귤러2의 표준 ※ ES6 : 자바스크립트의 최신 스펙 (=ECMAScript 2015) ※ 웹팩 (Webpack) : 웹 모듈 번들러 (Web Module Bundler). 최신 프런..
IT 기술/[Vue] 기본 2021. 6. 1. 14:41
Prev 1 2 Next