1. Vue.js 란 무엇인가?
▶ 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크 입니다.
※ 프레임워크란?
- 소프트웨어 개발의 생산성과 품질을 높이는 역할이자 개발자들에게 도움을 주는 틀이다.
▶ MVVM 패턴의 뷰 모델 레이어에 해당하는 라이브러리 입니다.
※ MVVM 패턴이란?
- 마크업언어나 GUI코드를 백엔드 로직과 분리하여 개발하는 패턴이다.
- 백엔드 로직과 클라이언트의 마크업 & 데이터 표현단을 분리하기 위한 구조로 전통적인 MVC 패턴 방식에 기인했다.
2. Vue.js 의 특징
▶ 가상 DOM(Virtual DOM)
- VueJS에서는 ReactJs, Ember 프레임워크와 유사하게 가상 DOM을 사용합니다. 가상 DOM은 원본 HTML DOM 을 표현하는 메모리 상의 가벼운 DOM 트리로, 원본 DOM에 영향을 미치지 않고 업데이트를 할 수 있습니다.
▶ 컴포넌트 (Component)
- VueJS 어플리케이션에서 재사용할 수 있는 엘리먼트(Element)들을 만들 수 있습니다.
▶ 템플릿(Templates)
- VueJS는 Vue 인스턴스 데이터와 DOM에 접근할 수 있는 HTML 기반의 템플릿을 제공합니다.
▶ 라우팅(Routing)
- 페이지의 전환은 vue-router를 이용합니다.
▶ 저용량(Light weight)
- VueJS는 다른 프레임워크와 비교했을때 저용량입니다.
3. Vue.js 의 장·단점
▶ 컴포넌트(Component) 기반 프레임워크이다.
- 컴포넌트란 재사용이 가능하면서 이름이 명명된 Vue 인스턴스이며, 유지보수 및 재사용이 가능하다.
▶ MVVM 패턴이다.
- 뷰(View) → 돔(DOM)
- 뷰 모델(View Model) → Vue.js
- 모델(Model) → 자바스크립트 객체
▶ Vue Router를 사용한다.
- 웹페이지간의 이동방법을 말하며, 페이지를 이동할 때 서버에 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지를 받아 놓고 페이지 이동 시 클라이언트의 라우팅을 이용하여 화면을 갱신합니다. 이런 방식을 SPA(Single Page Application) 이라고도 합니다.
- 중첩 라우팅
- 리다이렉션과 엘리어싱
- HTML5 History API와 URL 해시를 이용한 히스토리 관리
- 자동으로 CSS 클래스가 활성화되는 링크 기능
- VueJS 트랜지션 기능을 이용한 페이지 이동 트랜지션
4. Vue.JS 관련 면접 질문 정리
▶ VueJS의 Lift-Cycle에 대해 설명하시오.
- Creation, Mounting, Updating, Destruction 이다.
1. Creation은 가장 먼저 실행되는 단계이다.
- Creation은 라이프사이클 중 가장 먼저 실행되는 단계이다. 이 단계의 훅에서는 DOM트리에 해당 컴포넌트가 반영이 안되므로 태그의 id나 class에 접근할 수 없다.
2. Mounting은 DOM 삽입 단계로 렌더링 되기 직전의 컴포넌트에 접근할 수 있다.
- 훅으로는 beforeMount, mounted가 있는데 beforeMount훅은 템플릿과 렌더 함수들이 컴파일이 되고 렌더링이되기 직전 단계에 호출이 된다.
- 아직까지 DOM element에 직접적으로 접근할 수가 없다.
- mounted 훅에서, 컴포넌트가 렌더링이 된 상태일 때 호출된다. DOM에 접근할 수 있지만 주의해야할 점은 자식 컴포넌트에서 마운트된 상태임을 보장할 수 없다는 점이다.
3. Updating은 웹페이지의 내용이나 무언가 바껴서 재렌더링을 해야할 때 실행된다.
- 훅으로는 beforeUpdate와 updated가 있고 beforeUpdate 훅은 DOM변경이 완료가 되고 패치가 되기 직전에 호출이된다.
- updated 훅은 재 렌더링이 완료된 이후에 호출이 된다.
- updated는 패치 이후에 호출되는 훅이라 변화가 끝난 DOM에 접근이 가능하다.
4. Destruction은 컴포넌트가 해제(파괴)될 때 실행된다.
- 훅으로는 beforeDestroy, destroyed 단계로 beforeDestroy는 해체 직전에 호출되며 모든 DOM과 이벤트들이 남아있다.
- destroyed는 해체가 완전히 된 후에 호출이되는 훅이다.
▶ 단방향 바인딩과 양방향 바인딩에 대한 차이점을 설명하시오.
- 단방향 바인딩 : 데이터 흐름이 한쪽인 경우를 의미한다. 대표적인 지시어는 v-on, v-bind, {{}} 머스태시 태그가있다.
v-on(@) 은 UI에서 데이터 모델(viewModel)을 업데이트 하거나 출력할때 사용한다.
v-bind(:) 는 데이터 모델(viewModel) 에서 업데이트 된 상태를 UI에 반영한다.
- 양방향 바인딩 : 데이터 흐름이 양방향인 경우를 의미한다. 대표적인 지시어는 v-model이 있다.
데이터모델(viewModel)이 변경되면, 자동으로 UI도 변경이 된다.
▶ 가상DOM을 설명하시오.
- 가상돔은 추상화한 돔이다. 만약 가상돔을 사용하지 않고 div 태그 1000개에 css 효과가 추가된다고 가정을 한다면 이 천개의 돔노드들을 일일이 검색하고 업데이트를 해줘야한다. 이러한 탐색비용과 업데이트 비용을 좀 더 줄이고자 추상화한 돔에서 탐색과 업데이트를 한 후 변경사항을 실제 돔에 반영한다. 가상돔은 어떻게 돔을 추상화할 것인지, 언제 돔에 변경사항을 적용시킬지에 대한 알고리즘이 핵심이다.
▶ Vue 앱 구조에 대한 기본 개념 설명하시오.
- vue 는 루트 컴포넌트(root instance)를 생성하고 루트 컴포넌트가 최상위를 기준으로 자식컴포넌트들이 tree 구조로 구성됩니다.
root component
ㄴ header component
ㄴ body component
ㄴ main component
ㄴ footer component
▶ Vuex란 무엇인지 설명하시오.
- vue 앱에 상태관리를 위한 라이브러리
- 모든 컴포넌트에 대한 상태를 중앙집중식으로 관리하는 저장소 역할을 한다.
▶ Vue.js의 computed와 method의 차이를 설명하시오.
- 결과는 같지만 동작방식이 다르다.
- Computed : 계산된 값을 캐시에 저장해뒀다가 값이 변경되면서 다시 캐시된 값을 가지고 다시 계산을 한다. 같은 페이지 내의 같은 연산을 수행할 때 효율적이다.
- Method : 호출될 때 마다 함수를 다시 계산한다.
▶ 컴포넌트 props를 설명하시오.
- props는 상위컴포넌트에서 하위컴포넌트에게 데이터를 전달할 때 사용하는 옵션이다.
- VueJS에 데이터 흐름은 위에서 아래로 흐르기때문에 하위 컴포넌트가 상위 컴포넌트 상태를 직접 참조할 수 없다.
- props 로 상태가 전달이 되면 해당 컴포넌트에 속성이 된다.
댓글