[VUE] VUE.JS 면접 질문

🌞 VUE.JS 면접 질문

이건 면접 질문이라기보다는 이 정도 기본 지식은 알고 VUE.JS를 해야하지 않을까 하는 마음에 작성해본다.

 

 

1. Vue.js란 무엇인가?

사용자 인터페이스를 구축하기 위한 JavaScirpt 프레임워크. 표준 HTML, CSS 및 JavaScript를 기반으로 구축되며, 단순한 것부터 복잡한 것까지 사용자 인터페이스를 효율적으로 개발 할 수 있는 컴포넌트 기반 프로그래밍 모델을 제공

 

2. 컴포넌트란? 컴포넌트 기반 방식으로 개발하는 이유?
컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다.

코드 재사용이 용이하다. 그리고 뷰의 경우, 컴포넌트를 HTML 코드에서 화면의 구조를 직관적으로 파악하므로 프레임워크 자체에서 컴포넌트 방식을 추구하면 모두가 정해진 방식대로 컴포넌트를 활용하므로 빠르게 구현할 수 있을 뿐 아니라 남이 작성한 코드를 볼 때에도 수월하다.

 

3. 바인딩(binding)이란?

바인딩(binding)이란 프로그램에 사용된 구성 요소의 실제 값 또는 프로퍼티를 결정짓는 행위를 의미

예를 들어, 함수를 호출하는 부분에서 실제 함수가 위치한 메모리를 연결하는 것도 바인딩

 

크게 다음과 같이 구분 가능

 

- 정적 바인딩(static binding) : 실행 시간 전에 일어나고, 실행 시간에는 변하지 않은 상태로 유지되는 바인딩

- 동적 바인딩(dynamic binding) : 실행 시간에 이루어지거나 실행 시간에 변경되는 바인딩.

                                                       이러한 동적 바인딩은 늦은 바인딩(late binding)이라고도 불림

 

4. computed vs watch?

보통의 경우에는 computed가 좋다.
하지만 최종 응답, 그러니깐 엔터가 쳐진 순간이라고 보면 이해가 될 것인데, 답을 적을 때까지 중간 상태를 설정할 수 있기 때문에 엔터가 쳐지기 전의 순간들을 필요하다면 watch가 좋다!

 

추가로 compputed는 캐싱되므로 동일한 계산을 여러 번 실행하지 않음. 이 전에 계산된 값을 사용함!

 

5. 뷰 인스턴스?

뷰 인스턴스(instance) 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위.

 

뷰 인스턴스 옵션 속성
data, el, template 등의 속성을 의미.
data라는 미리 정의되어 있는 속성을 사용. 이 안에 message라는 새로운 속성을 추가하고 Hello Vue.js! 라는 값을 주었을 뿐. el 미리 정의되어 있는 속성이며, 뷰로 만든 화면이 그려지는 시작점을 의미. 뷰 인스턴스로 화면을 렌더링 할 때 화면이 그려질 위치의 돔 요소를 지정해줘야함.

 

 

6. 뷰 라이프사이클?

 

😶‍🌫️뷰 라이프 사이클 다이어그램1

 

😶‍🌫️뷰 라이프 사이클 다이어그램2

 

beforeCreate
: 인스턴스 생성 이후 가장 처음으로 실행되는 라이프 사이클 단계. Vue 인스턴스가 초기화 된 직후에 발생한다.

  컴포넌트가 DOM에 추가되기도 전이어서 this.$el에 접근할 수 없다. 또한 data, event, watcher에도 접근하기 전이라

  data, methods에도 접근할 수 없음

created
: data속성과 methods 속성이 정의되었기 때문에 this.data 또는 this.fetchData()와 같은 로직을 이용하여 data와 methods에 정의된 값에 접근하여 로직 실행 가능. 다만, 아직 인스턴스가 화면요소에 부착되기 전이기 때문에(DOM에는 추가되지 않은 상태) template 속성에 정의된 DOM 요소로는 접근 불가.
** data와 methods에 접근 할 수 있는 가장 첫 라이프 사이클 단계이자 컴포넌트가 생성되고 나서 실행되는 단계이기 때문에 서버에 데이터를 받아오는 로직을 수행하기에 좋음.

💚data를 세팅해야 하거나 이벤트 리스너를 선언해야 한다면 이 단계에서 하는 것이 가장 적절

beforeMount ( DOM에 부착하기 직전에 호출되는 beforeMount 훅 ) 
: template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후 el 속성에 지정한 화면 요소(DOM)에 인스턴스를 부착하기 전에 호출되는 단계. render()가 호출되기 직전 로직 추가하기 좋음

※ render() : JavaScript로 화면의 DOM을 그리는 함수

mounted ( 가상 DOM의 내용이 실제 DOM에 부착되고 난 이후에 실행됨 )
: el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계로, template 속성에 정의한 화면 요소(DOM)에 접근 할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계.

beforeUpdate
: 컴포넌트에서 사용되는 data의 값이 변해서, DOM에도 그 변화를 적용시켜야 할 때가 있다. 이 때, 변화 직전에 호출되는 것이 바로 beforeUpdate훅이다.

관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계이기 때문에 변경 예정인 새 데이터에 접근 할 수가 있어 변경 예정 데이터값과 관련된 로직을 미리 넣을수도 있음.

updated ( 가상 DOM을 렌더링 하고 실제 DOM이 변경된 이후에 호출되는 updated 훅 )
: 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고나면 실행되는 단계. 데이터 변경으로 인한 화면 요소 변경까지 완료된 시점이므로, 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계.
💚 이 단계에서 데이터값을 변경하면 무한 루프에 빠질 수 있기 때문에 값을 변경하려면 computed, watch와 같은 속성을 사용해야 함.

 beforeDestroy ( 해당 인스턴스가 해체되기 직전에 beforeDestroy훅이 호출 )
: 뷰 인스턴스가 파괴되기 직전에 호출되는 단계. 아직 인스턴스에 접근 할 수 있기 때문에 데이터를 삭제하거나 이벤트 리스너를 해제하는 등 인스턴스가 사라지기 전에 해야할 일들을 처리하면 됨

 destroyed
: 뷰 인스턴스가 파괴(해제)되고 나서 호출되는 단계. 뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들 모두 삭제됨.

 

 

출처 및 도움 : 

https://wormwlrm.github.io/2018/12/29/Understanding-Vue-Lifecycle-hooks.html

https://itkjspo56.tistory.com/224#google_vignette