FrontEnd(Vue.js 외)
브라우저의 렌더링 과정에 대해서 상세히 설명해주세요.
* HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다. (Parsing)
HTML 파일을 해석해 DOM Tree를 구성한다. 만약 CSS 또한 포함되어 있다면 CSSOM(CSS Object Model) Tree 구성 작업도 함께 진행한다.
* 두 Tree를 결합하여 Rendering Tree를 만든다. (Style)
Parsing 단계에서 생성된 DOM Tree와 CSSOM Tree를 매칭시켜서 RenderTree를 구성한다.
Render Tree는 실제로 화면에 그려질 Tree이다. 그렇기 때문에 display : none 인 경우 Render Tree에서 제외된다고 한다.
* Rendering Tree에서 각 노드의 위치와 크기를 계산한다.(Layout)
Render Tree를 화면에 어떻게 배치해야 할지 루트부터 노드를 순회하면서 노드의 정확한 위치와 크기를 계산하고 반영한다. 만약 크기 값을 %로 지정하였다면, Layout 단계에서 %값을 계산해서 픽셀단위로 변환한다.
* 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고 레이어를 만든다.(Paint)
Layout 단계에서 계산된 값을 이용해 Render Tree의 각 노드를 화면상의 실제 픽셀로 변환한다. 이때 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러 개의 레이어로 관리된다.
스타일이 복잡할수록 Paint 시간도 늘어난다. 예를 들어, 단색 배경의 경우 시간과 작업이 적게 필요하지만, 그림자 효과는 시간과 작업이 더 많이 필요하다.
* 레이어를 합성하여 실제 화면에 나타낸다.(Composite)
Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타낸다.
면접관이 Vue.js 비사용자라고 생각하고, Vue.js에 대해 설명해주세요.
vuejs 는 웹페이지를 개발하기 위한 자바스크립트 프레임워크입니다.
바닐라 자바스크립트를 사용한 개발방식에 비해 재사용성이 우수하고, 정형화 된 방식으로 개발하기 때문에 유지보수 또한 비교적 쉽습니다.
또한 비슷한 프레임워크인 React 나 Angular 에 비해 문법이 간단하고 코드의 양이 적기 때문에 러닝커브가 비교적 낮은 편이지만 비슷한 성능을 보장하기 때문에 많은 사랑을 받고 있습니다.
MVVM 패턴을 사용하고 View에 해당하는 DOM과 Model에 해당하는 javascript 사이에서 Vue객체가 ViewModel 역할을 담당합니다.
Vue.js의 Life-cycle에 대해서 아는대로 말해주세요.
beforeCreate : Vue 인스턴스가 초기화 된 직후에 발생한다. 컴포넌트가 DOM에 추가되기 전이라 this.$el에 접근할 수 없다. data,methods에도 접근 할 수 없다.
(참고) $el : Vue 인스턴스가 관리하는 컴포넌트 인스턴스인 루트 DOM 요소이다.
created : data를 반응형으로 추적할 수 있게 되며 computed, methods, watch 등에 접근 가능하다. 아직 DOM에 추가되기 전이다.
beforeMount : 템플릿이 있는지 없는지 확인한 후 템플릿을 렌더링 한 상태이다. 가상 DOM이 생성되어 있으나 실제 DOM에 부착되지 않은 상태이다.
mounted : 가상 DOM의 내용이 실제 DOM에 부착되고 난 이후에 실행된다. 모든 요소에 접근이 가능해진다.
부모 컴포넌트의 mounted는 항상 자식 컴포넌트 mounted 이후에 발생한다.
하지만 부모의 mounted 가 항상 자식 컴포넌트의 마운트 된 상태를 보장하지는 않는데 이럴때 this.$nextTick을 사용한다면, 모든 화면이 렌더링 된 이후에 실행되므로 마운트 상태를 보장할 수 있다.
beforeUpdate : 컴포넌트에서 사용되는 data의 값이 변해서, DOM에도 그 변화를 적용시켜야 할 때가 있는데 그 변화 직전에 호출되는것.
updated : 가상 DOM을 렌더링 하고 실제 DOM이 변경된 이후에 호출된다. 변경된 data가 DOM에도 적용된 상태. 만약 updated에서 data를 변경한다면 무한 루프를 일으킬 수 있다.
beforeDestroy : 해당 인스턴스가 해체되기 직전에 호출된다. 아직 해체되기 전이므로 모든 속성에 접근 가능.
destroyed : 인스턴스가 해체되고 난 직후에 호출된다. 인스턴스의 속성에 접근할 수 없다.
ES6에서 추가된 기능에 대해 있는대로 말해주세요.
- const, let
- Arrow function
- Template Literal (백틱을 활용한 문자열)
- Default parameter (기본 매개변수)
- 배열, 객체 구조분해할당
- import, export
- Promise
- 나머지 매개 변수
- 클래스
출처 : 자주 사용하는 ES6 문법 정리
가상돔(Virtual DOM) 개념은 무엇인가요? DOM과의 차이점과 사용되게 된 배경을 설명해주세요.
가상 돔은 DOM을 추상화 시킨 자바스크립트 객체이다.
기존에는 화면의 변경사항을 돔을 직접 조작하여 반영했다.
이 방식은 돔 트리가 수정될 때마다 렌더 트리가 계속해서 변경된다는 것이다.
화면에서 N개의 수정사항이 발생하면 렌더트리가 N번 수정된다는 것이다.
이런 불필요한 렌더링 횟수를 줄이기 위해 React,Vue,Angular 와 같은 프론트 프레임워크에서는 실시간으로 돔 트리를 수정하지 않고, 모든 변경사항을 반영한 가상 돔을 만든다.
이후 가상 돔을 이용해 N번 해야했던 렌더트리 수정을 단 한번만 하게 만들 수 있다.
일종의 버퍼와 같은 역할을 한다고 생각할 수 있다.
객체지향프로그래밍과 함수형프로그래밍의 차이점이 무엇이라고 생각하나요?
Spring에서 Filter와 Intercepter의 차이가 무엇인가요?
필터는 Dispatcher Servlet에 요청이 전달되기 전/후에 url 패턴에 맞는 모든 요청에 대해 부가작업을 처리할 수 있는 기능을 제공한다. 필터는 스프링 범위 밖에서 처리가 된다.
인터셉터는 스프링이 제공하는 기술로, Dispatcher Servlet 이 컨트롤러를 호출하기 전과 후에 요청과 응답을 참조하거나 가공할 수 있는 기능을 제공한다.
-> 웹 컨테이너에서 동작하는 필터와 달리 인터셉터는 스프링 컨텍스트에서 동작한다.
(솔직히 잘 모르겠어서 나중에 참고할 링크를 몇개 적어놓으려고 한다.)
참고 1
[참고 2)(https://supawer0728.github.io/2018/04/04/spring-filter-interceptor/)
Binary Search Tree(BST)에 대해 아는대로 설명해주세요.
- 노드의 왼쪽 하위 트리에는 노드의 키보다 작은 키가 있는 노드만 있습니다.
- 노드의 오른쪽 하위 트리에는 노드의 키보다 큰 키가 있는 노드만 있습니다.
- 탐색 연산에 소요되는 시간복잡도는 트리의 높이를 h라고 할때 O(h) 입니다.
- 삽입 연산에 소요되는 시간복잡도는 삽입될 위치를 찾는 시간인 O(h) 입니다.
- 삭제 연산 역시 O(h) 입니다.
- 만약 트리의 좌우가 맞지 않는경우 계산복잡도가 O(n)이 될 수도 있습니다. 이를 보완하기 위해 AVL Tree가 제안되었습니다.
회사 기술 스택에 맞추어 단기간 내에 언어와 프레임워크를 학습 하여야 할 때, 어떻게 공부하고 해결할 것인가요?
해당 직무를 함께 수행하는 주변 선배 개발자분들에게 과거에 어떻게 공부를 하셨는지, 어떤점을 위주로 공부하면 좋은지, 추천하는 자료가 있는지 등을 여쭤보고 시작할 것 같다.
시간이 비교적 여유롭고, 깊은 이해가 필요하다면 그 분야에서 많이 사용되는 기본 강의나 책을 보며 공부하겠지만, 그런경우가 아니라면 일단 공식 기술문서를 통해 가장 중요한 문법부터 접근하여 공부할 것이다.
프로젝트를 진행하며 비인기 라이브러리를 사용한 경험이 있나요? 있다면 왜 사용했는지, 어디서 정보를 얻었는지 궁금합니다. → 없으시면 PASS하시고 질문 받았다고 상상해보시죠.
스타트업에서 인턴을 할 당시에 Nuxt.js에 jqeury ui 라이브러리를 활용한 코드를 사용한 경험이 있다. 식당의 테이블 위치를 표현하기 위해 canvas 위에 사용자가 테이블을 CRUD 할 수 있는 기능을 구현하는 것이었다. 회사의 전임자가 만들어 놓은 코드였기 때문에 그대로 사용할 수 밖에 없는 상황이었다.
가장 좋은 방법은 전임자에게 물어보거나 해당 코드에 관한 주석이나 문서를 보며 공부하는것이지만 그럴 수 없었기 때문에 jqueryUI 공식문서를 읽어보면서 코드를 해석하였고, 알게된 사실을 나중을 위해 최대한 자세히 주석을 달아놓고 팀 Notion에 가이드 문서를 간단하게 정리를 했었다.
