Vue.js & javascript 면접 질문 요약

Q. Angular를 처음 선택한 이유는 무엇인가?

A. 처음 Front-End 프레임워크를 선정하여 공부할 때 확실히 하고 싶었다. Angular가 자료도 방대했고 react나 Vue.js 보다 튜토리얼도 잘 지원하였고, typescript 때문에 진입장벽이 높다고들 하지만 오히러 JAVA나 C++과 비슷한 느낌이들어 크게 어렵지 않았다. 모든 프레임워크에서 겪을 만한 Component를 나누는 기준이나 MVC 기반 설계와 같은 부분이 더 어려웠다.

Q. 그렇다면 마이그레이션할 프레임워크를 Vue.js로 선택한 이유는 무엇인가?

A. 가장 큰 문제는 첫 페이지 렌더링 속도였다. Angular가 다른 프레임워크에 비해 무겁고 렌더링이 느리다. 빌드옵션을 JIT에서 AOT로 변경하고, 의존성 모듈을 최소화 시켜 일부 해결하긴 했지만 만족스럽지 못했다. 그러던 와중에 마이그레이션을 결심하게 되었고 React와 Vue.js 사이에 많은 고민을 했는데 React는 Angular와 컴포넌트의 구조가 조금 다르기도 했고 Redux 나 Flux 같은 라이브러리도 꽤 많이 공부해야겠다는 생각이 들었다. 리액트의 최대 강점인 가상DOM도 Vue.js 2.0에 도입이 되었고 Vue.js 소개페이지에 보면 렌더링 속도도 가장 빨랐기에 Vue.js를 선택하게 되었다. 마지막까지 고민되었던 점은 REACT 생태계?가 훨씬 더 크기 때문에 훨씬 모르는 부분을 찾기가 수월할 것이라는 점이였지만 Vue도 나름의 커뮤니티가 있었기에 최종적으로 Vue.js를 선택하였다. 마이그레이션 당시 Vue Forum에 몇가지 질문할게 있어 질문을 올리면 빠르면 2시간 늦어도 하루이틀내로 원하는 답을 들을 수 있어서 진행하는데 크게 문제되지는 않았다.

Q. AOT와 JIT에 대해 설명해주세요.

A. JIT는 Just In Time Compile의 약자로 브라우저에서 템프릿 컴파일을 진행하기 때문에 느리다. 또한 JIT 컴파일러를 포함해야하기 때문에 용량도 크다.

AOT는 Ahead Of Time Compile의 약자로 빌드 시 템플릿을 먼저 컴파일을 해둔다. 빌드에는 시간이 더 소요되지만 브라우저에서는 컴파일이 실행되지 않기 때문에 꽤나 빠르다.

그래서 개발 시에는 JIT 방식으로 빠르게 빌드해서 변경사항을 확인하고, 실제 서비스 배포시에는 AOT방식으로 빌드해서 전체 용량 감소 및 컴파일 시간을 없애야한다.

Q. Vue.js의 computed와 method의 차이를 설명해라

A. 결과는 같지만 동작방식이 다르다. computed는 계산된 값을 캐시에 저장해뒀다가 값이 변경되면 다시 캐시된 값을 가지고 다시 계산을 한다. 같은 페이지 내의 같은 연산을 수행할 때 효율적이다. 반면 method는 호출될 때 마다 함수를 다시 계산한다.

Q. computed를 사용해본적이 있나?

A. 댓글 수 제한을 둘 때 사용했다. 댓글 수를 변수로 두고 해당 변수의 사이즈가 3000자 이상이 넘어가면 3000자까지 문자를 splice를 이용하여 자르고 alert창을 띄우는데 사용했다.

Q. Vue.js의 라이프사이클을 설명해보아라

A. Creation, Mounting, Updating, Destruction

1. Creation은 라이프사이클 중 가장 먼저 실행되는 단계이다. 이 단계의 훅에서는 DOM트리에 해당 컴포넌트가 반영이 안되므로 태그의 id나 class에 접근할 수 없다.
   • 훅으로는 beforeCreated, created가 있는데 beforeCreated에서는 data나 event에 접근할 수 없다.
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는 해체가 완전히 된 후에 호출이되는 훅이다.

Q. 가상DOM을 설명해주세요.

A. 가상돔은 추상화한 돔이다. 만약 가상돔을 사용하지 않고 div 태그 1000개에 css 효과가 추가된다고 가정을 한다면 이 천개의 돔노드들을 일일이 검색하고 업데이트를 해줘야한다. 이러한 탐색비용과 업데이트 비용을 좀 더 줄이고자 추상화한 돔에서 탐색과 업데이트를 한 후 변경사항을 실제 돔에 반영한다. 가상돔은 어떻게 돔을 추상화할 것인지, 언제 돔에 변경사항을 적용시킬지에 대한 알고리즘이 핵심이다.

Q. var, let, const의 차이점

A. var 은 function-scoped이고 let, const는 block-scoped이다. 좀 더 자세히 설명하자면 var은 function안에서 유효하고, let, const는 block안에서 유효하다. A함수안에 var로 선언되있는 foo는 A함수 if문의 블럭안에서도 foo로 유효하지만 if문 블럭안에 let으로 foo가 선언되있다면 foo는 let으로 선언된 foo의 값을 가진다. 근데 만약 if문 블럭안에서 foo가 재정의되기 전에 foo에 접근하면 undefined 상태인 foo에 접근된다. 이 부분을 TDZ라는 임시적사각지대라 하며 runtime 중에 type을 체크하기 위해 있다고 알고있다.

Q. 클로져가 무엇인지? 왜 쓰는지?

A. 정의는 독립적인 변수를 가리키는 함수다. 함수내의 함수를 선언하고 내부함수의 리턴값을 바깥에서 사용하게 되는 경우를 의미한다. 쓰는 목적은 외부함수의 변수에 접근해야할일이 발생할 수 있는데 이 때 내부함수에서 접근하려는 외부함수의 변수를 리턴해주면 외부함수의 변수를 가져올 수 있다. 꼭 getter뿐만아니라 setter로도 사용이 가능하다. return type을 get, set으로 나눠서 리턴을 시키면 된다.

Q. 호이스팅이 무엇이고 어떻게 발생하는지?

A. 코드 실행시 변수 선언부가 스코프내의 가장 위로 올라가는 것이다. 함수 선언부 역시 호이스팅 되는데 변수랑 함수명이 같을 경우 변수에 값이 할당되있지 않다면 변수는 함수로 덮어씌어진다. 값이 할당되어있다면 함수가 변수로 할당되어진다.

Q. 실행컨텍스트는 무엇이냐?

Q. javascript primitive type은 무엇인가?

number, string, boolean, Symbol, null, undefined, object

Q. event bubbling, capturing에 대한 설명

Q. this 사용시 위치별 차이점

Q. script 태그의 위치

Q. DOCTYPE

A. html파일이 브라우져에 의해 렌더링될 때 어떤 방식으로 렌더링할지 정해주는 것을 의미한다. 대표적으로 html5, html4.1, XHTML이 있다.

Q. meta tag의 역할

A. 웹사이트가 검색될 때 사용되는 정보를 정의하는 태그이다. description이나 author등이 여기에 해당한다.

Q. RESTful API가 무엇이냐?

A. 음 URI와 HTTP 메소드를 이용해 객체화된 서비스에 접근하는것이라고 생각한다. URI에 유일한 정보에 대한 표현을 직관적이며 간결하게 해야하고, 서비스에 접근하려는 행위는 HTTP 메소드에 맞게 작성하는 것이다. 단점이라고 한다면 비상태기반 프로토콜인 HTTP를 이용하여 통신하기 때문에 상태를 저장할 수 없고 따로 쿠키나 세션을 이용해서 유지해야하며, 이렇다할 표준이 없기 때문에 개발하고 서로 공유하기에 약간 애매한 부분이 있다.

Q. URL과 URI의 차이는 무엇이냐?

A. URL은 단순히 locater에 위치하고 있는 리소스를 말하는 것이고 URI는 파일을 넘어서 여러가지를 포함하고 있는 구분자를 의미한다.

Q. Ajax 가 무엇이며 Ajax의 문제점과 그 해결책을 제시하라

A. 비동기적인 웹 어플리케이션을 XmlHttpRequest를 이용해서 서버와 비동기로 통신하는 방식이다. 새로운 정보요청을 위해 해당 페이지의 url을 변경해야해서 페이지의 새로고침이 일어났지만 ajax방식을 쓰면 url 변경없이 내부적으로 통신하여 해당 페이지의 내용을 변경할 수 있다.

문제점이라고 한다면, CORS 정책을 세워두어야하고, 클라이언트와 서버 사이의 통신이 풀링방식으로 이루어져서 웹 푸쉬같은 방법을 쓸 수 가없다.

내부서버를 사용한다면 CORS 정책을 잘세워 두면 되지만 외부 서버경우 CORS 정책을 변경할 수 가 없다. 그런경우에는 JSONP를 이용해야한다고 알고있따. 아직 사용해본적은 없지만 GET방식만 허용되며 스크립트 코드 실행 시점이 다르다 정도만 알고 있다.

Q. float 속성을 해제하지 않으면 안되는 이유