Vue.js 문답

 

Questions	Answer
Vue.js가 무엇인지 설명하시오	사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크. 표준 HTML, CSS 및 JavaScript를 기반으로 구축되며, 컴포넌트 기반 프로그래밍 모델을 제공한다.
Vue를 프론트엔드 스택으로 선정한 이유는 무엇입니까?	반응성이 좋고 코드도 직관적이며 리랜더링이 없어 유저에게 편리함을 준다. 공식문서가 잘 만들어져 있다. 다른 프론트엔드 프레임워크와 비교했을 때 상대적으로 가볍고 빠르다.
Vue에는 어떤 장점이 있습니까?	선언적 렌더링 : 표준 HTML을 템플릿 문법으로 확장하여 JavaScript 상태(State)를 기반으로 화면에 출력될 HTML을 선언적(declaratively)으로 작성할 수 있다. 반응성 : JavaScript 상태(State) 변경을 추적하고, 변경이 발생하면 DOM을 효율적으로 업데이트하는 것을 자동으로 수행한다. 뷰에서 제공하는 코드 작성 패턴과 라이프사이클, 상태 관리는 쉬우면서 강력해 빠른 개발에 유용하다. Angular의 템플릿과 바인딩, React의 props를 사용한다.
JavaScript 프레임워크의 종류는 어떠한 것이 있습니까?	- React : Facebook에서 개발된 컴포넌트 기반의 오픈 소스 프레임워크. JSX(JavaScript XML) 문법으로 UI를 작성한다. - Angular : Google에서 개발된 MVVM(Model-View-ViewModel) 방식의 오픈 소스 프레임워크. 라이브러리가 무겁다. - Next.js : React, Node.js 기반의 프레임워크 - Svelte : 컴파일러로써 런타임 성능을 최적화하는 자바스크립트 프레임워크. No virtual DOM.
Vue가 다른 자바스크립트 프레임워크와 비교되는 특징이 있다면 무엇입니까?	HTML 기반의 템플릿 문법을 사용하고 단순해 비교적 쉽고 빠르게 학습할 수 있다. 컴포넌트 기반의 아키텍처로 코드의 재사용성과 유지보수가 용이하다. HTML, JS, CSS 코드 영역을 분리하여 작성하는 패턴으로 코드 가시성과 생산성이 좋다. 프로그레시브 프레임워크로써, 처음부터 전체 앱에 Vue.js를 도입할 필요 없이, 필요한 부분만 선택적으로 도입하거나 점진적으로 확장해 나갈 수 있다. CDN으로 제공되어 빌드 과정 없이 정적 HTML에 적용할 수 있다. SPA(Single-Page Application)으로 새로고침하지 않고도 동적으로 콘텐츠를 변경하고, 라우팅 기능으로 다양한 페이지 간의 전환이 가능하다.
Vue의 라이프사이클 훅이란 무엇입니까?	Vue 인스턴스나 컴포넌트가 생성되고 소멸되기까지의 단계를 말하며 각 단계에서 실행되는 함수들을 라이프사이클 훅이라고 부른다. 컴포넌트의 상태 변화를 감지하고 특정 시점에서 로직을 실행하는 데 유용하게 사용된다. - beforCreate : 인스턴스가 초기화된 후 호출. - created : 인스턴스가 모든 상태 관련 옵션 처리를 완료한 후 호출. 초기화 작업에 사용. - beforeMount : 컴포넌트가 마운트되기 직전 호출. - mounted : 컴포넌트가 마운트된 후 호출. - beforeUpdate : 반응형 상태 변경에 의한 컴포넌트 DOM 트리 업데이트 직전 호출. - updated : 반응형 상태 변경에 의한 컴포넌트 DOM 트리 업데이트 후 호출.
Vue의 프로세스는 어떤 순서로 동작합니까?	vue-cli를 통해 프로젝트를 만들고, 페이지와 컴포넌트, 라우팅 등 이미 주어진 코드 프리셋에서 조금씩 수정하며 만들면 된다. 크게 4가지 단계를 거친다. - 생성(Creation) : Vue 인스턴스가 생성될 때 제일 먼저 실행되는 단계. 컴포넌트가 DOM에 바인딩 되기 전에 수행된다.(beforCreate, created) - 마운트(Mounting) : Vue 인스턴스가 DOM에 바인딩되는 단계.(beforeMount, mounted) - 업데이트(Updating) : DOM이 리렌더링되는 단계. Vue 인스턴스의 데이터 모델이 변경되거나 View가 리렌더링 될 때 훅이 실행된다.(beforeUpdate, updated) - 소멸(Destruction) : Vue 인스턴스가 DOM에서 해제되는 단계.(beforeDestroy, destroyed)
Computed vs Method vs Watch	- Computed : 대상으로 정한 데이터 속성 값이 변했을 때 이를 감지하고 자동으로 다시 연산해주며 결과 값은 저장한다. return 값이 반드시 존재한다. 호출시 괄호를 적지 않아도 된다. - Method : 특정 기능별로 묶을 수 있는 자바스크립트 함수를 의미한다. 라이프 사이클의 영향을 받아 함수를 모두 실행한다. - Watch : 특정 데이터의 변화를 감지해 자동으로 특정 로직을 수행하는 속성.
단방향 바인딩과 양방향 바인딩에 대한 차이점을 설명하시오.	- 단방향 바인딩 : 데이트의 흐름이 한쪽인 경우. 업데이트 된 상태를 반영하거나 출력할 때(v-on, v-bind, {{}}) - 양방향 바인딩 : 데이터의 흐름이 양쪽인 경우. 데이터모델(ViewModel)이 변경되면 자동으로 UI도 변경된다(v-model)
가상(Virtual) DOM을 설명하시오.	DOM은 웹 페이지의 구조를 트리 형태로 표현하는데, V-DOM은 이러한 DOM 구조를 메모리 상에 가상으로 구성하는 것을 말한다. 뷰와 모델 사이의 중간 단계로 작동한다. DOM 조작 횟수를 최소화하고 성능을 향상시키는데 도움이 된다.
vue-cli(Vue Command Line Interface)란 무엇입니까?	프로젝트를 자동으로 생성하기 위한 명령어 도구.(패키지 매니저 느낌)
Vuex란 무엇입니까?	Vue 앱에 대한 상태 관리 패턴 + 라이브러리. 모든 컴포넌트에 대한 상태를 store를 통해 중앙집중식으로 관리하는 저장소 역할. 가상 DOM을 관리하기 위한 매니저 역할. 상태 관리 패턴 :  - state : 앱을 작동하는 원본 소스로 데이터를 담고 있는 객체. 여러 컴포넌트에서 동일한 데이터를 공유해야 할 때 사용. getters를 통해 가공해 사용할 수 있다. - view : 사용자에게 보여지는 화면을 담당하는 부분. - actions : 비동기 로직을 포함하는 메서드들의 집합으로, mutations를 호출해 state를 변경한다.
컴포넌트 props를 설명하시오.	props는 상위컴포넌트에서 하위컴포넌트에게 데이터를 전달할 때 사용하는 옵션. 같은 레벨의 컴포넌트 간 통신은 불가능하다. 아래에서 위로는 이벤트를 올린다.(event emit)
Vue Routers란 무엇입니까?	Vue를 이용해 싱글 페이지 애플리케이션을 제작할 때 유용한 라우팅 라이브러리. 설치는 NPM과 CDN 방식 모두 가능하다. 웹 사이트에서 URL 경로에 따라 컴포넌트들을 보여준다.
믹스인(Mixins)이 무엇입니까?	여러 컴포넌트 간에 공통으로 사용하고 있는 로직, 기능들을 재사용하는 방법.(모듈화)
Vue에서 HTTP 통신을 어떻게 하나요?	fetch API를 사용하기도 하지만 주로 axios를 사용한다. Promis 기반이라 코드 작성을 간결하게 할 수 있다.
Vue 프로젝트를 어떻게 배포하나요?	'npm run build' 명령어로 정적인 웹 파일들이 생성되면, 그대로 웹 서버에 올려주면 된다.