== 개요 ==
[[JavaScript|자바스크립트]]로 개발된 컴포넌트 구조 기반 [[프론트엔드]] 프레임워크. 보통 '''뷰''' 라고 부른다. (view) 최신 버전은 2.6.11이며, 2020년 공개를 목표로 3.0 버전이 개발 중이다.[* 사실 원래는 2019년 내로 공개할 예정이었는데, 개발이 지연되더니 어느 순간 로드맵이 변경되었다.]
=== Vue Router ===
Vue 기반 애플리케이션은 흔히 SPA(Single Page Application, 한 화면으로 구성된 애플리케이션을 말한다)로 구성되는데, 이때 한 페이지 내에서도 다른 페이지로 이동할 필요 없이 마치 여러 개의 페이지가 있는 듯한 방식으로 작동하게 해 주는 것이 바로 Vue Router이다. 이는 보통 사이트의 큰 틀 안에 {{{<router-view>}}} 태그를 삽입하고, 라우터가 보여 줄 컴포넌트를 이 태그 안에 렌더링한다. 라우터가 보여 줄 컴포넌트는 {{{<router-link>}}}의 클릭이나 JS 함수 호출 등으로 변경할 수 있다. 간단한 예를 들어보자면 블로그를 만들 때 {{{MainPage}}} 컴포넌트와 {{{Profile}}} 컴포넌트, {{{Posts}}} 컴포넌트를 만든 후, 각각 컴포넌트로의 링크를 담은 {{{<router-link>}}}를 내비게이션 바에 넣어 놓고, 그 아래에 {{{<router-view>}}}를 놓으면 내비게이션 바에서 링크를 누르는 대로 보여지는 컴포넌트가 바뀌면서 마치 일반적인 여러 페이지로 구성된 블로그와 같이 작동하게 된다. 하지만 실제로는 페이지를 이동하지 않기 때문에 로딩 시간도 훨씬 적고,[* 이러면 초기 로딩이 오래 걸리는 것 아니냐고 할 수도 있는데, Vue Router는 Lazy Load를 지원해서 최초 로딩 시에 로딩하지 않고 컴포넌트가 필요하게 된 시점에 해당 컴포넌트를 로딩해오는 것이 가능하다] 화면이 사라졌다 다시 나타나는 지저분한 효과 없이 즉시 화면이 전환된다. 원한다면 애니메이션을 넣는 것도 가능하다!
'STUDY > 프로그래밍언어' 카테고리의 다른 글
AXI 란? (0) | 2020.08.18 |
---|---|
openMP(병렬프로그래밍) 란? (0) | 2020.08.18 |
앵귤러(ANGULAR ) 란? (0) | 2020.08.18 |
리액트(React 라이브러리)란 ? (0) | 2020.08.18 |
SQL_ 구분자(쉼표 ',') 단위로 Row를 생성하여 ROWNUM 조회하기. (0) | 2020.08.18 |