[면접 예상 질문] 프론트엔드(2/3)

11. Vue와 React 비교

1. 둘 다 Virtual DOM으로 인한 빠른 렌더링이 가능하다.
2. 둘 다 컴포넌트 기반 개발이 가능하다.
3. 뷰는 마크업, 스타일, 스크립트로 나누어 작성하는 반면, 리액트는 모든 것을 JS로 작성한다.
4. 뷰는 mutable, 리액트는 immutable의 특징을 갖는다.
5. 뷰는 vuex, 리액트는 redux라는 flux 기반 상태 관리 라이브러리가 있다.
6. 뷰는 리액트보다 렌더링 속도가 빠르다.
7. 리액트는 Web과 Native 앱 개발 모두에 사용 가능하다.

12. undefined와 null 차이

• undefined 는 변수를 선언하고 값을 할당하지 않은 상태다.
• null 은 변수를 선언하고 빈 값을 할당(빈 객체)한 상태다.

13. 호이스팅과 클로저

호이스팅

• 변수 및 함수의 선언부를 코드 상단으로 끌어 올리는 것을 의미한다.
• 함수 내에서 선언한 함수 범위의 변수는 해당 함수의 최상위로, 함수 밖에서 선언한 전역 범위의 전역 변수는 스크립트 단위의 최상위로 끌어 올려진다. 이는, 변수의 사용 및 함수의 실행 코드가 선언보다 먼저 일어나도 정상 진행이 되도록 해준다.
• 함수의 경우, 함수 선언식만 호이스팅된다. 함수 표현식은 호이스팅되지 않는다.

클로저

• 클로저는 외부 함수의 실행이 끝나, 외부 함수가 소멸된 이후에도 내부 함수가 외부 함수의 변수에 접근할 수 있는 매커니즘을 말한다.
• 내부함수가 외부함수의 지역 변수에 접근할 수 있고, 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않는 특성을 지닌다.
• 다음의 이유로 사용한다.
  1. 현재 상태를 기억하고 변경된 최신 상태를 유지하기 위해
  2. 전역 변수의 사용을 억제하기 위해
  3. 정보를 은닉하기 위해

14. get과 post, put과 patch

• get은 서버의 특정 자원으로부터 데이터를 얻을 때 사용한다.
• post는 서버에 데이터를 보내 자원을 생성하거나 갱신할 때 사용한다.
• put 은 자원 전체를 갱신하는 의미, patch 는 자원의 일부를 갱신하는 의미로 사용된다.

15. 객체지향 프로그래밍의 특징

• 장점
  • 코드의 재사용성이 높아진다.
  • 유지보수가 쉽다.
  • 코드가 간결해진다.
• 특징
  1. 상속 : 자식 클래스가 부모 클래스의 특성과 기능을 물려받는 것을 말함.
  2. 다형성 : 하나의 객체가 여러 가지 타입을 가질 수 있는 것을 의미함. 같은 모양의 코드가 다른 행위를 하는 것.
     • 오버로딩 : 한 클래스 내부에서 메소드 이름은 같지만, 파라미터가 다른 것.
     • 오버라이딩 : 부모 클래스의 메소드를 자식 클래스의 용도에 맞게 재정의하는 것.
  3. 캡슐화 : 실제 구현 부분을 외부에 드러나지 않도록 하는 것을 말함.
  4. 추상화 : 공통적인 특성을 묶어 하나의 개념으로 표현하는 것을 말함.

16. 함수형 프로그래밍

• 함수형 프로그래밍은 순수 함수와 보조 함수의 조합으로 상태 변화와 가변 데이터를 피해 프로그램의 안정성을 높이는 프로그래밍 패러다임이다.
• 함수형 프로그래밍에선 모든 것이 객체다. 함수 또한 객체이기에, 함수를 값으로 할당하거나 파라미터로 전달할 수 있으며, 반환할 수 있다.
• 순수 함수 : map, filter, reduce와 같이 파라미터를 제외한 다른 변수를 사용하지 않아 side-effect 없이 아웃풋을 내는 함수.
• 장점
  • 입력 값에 대한 결과를 예상할 수 있어 테스트하기가 쉽다.
  • 코드의 재사용성이 높아진다.

17. 프로토타입

• 자바스크립트에선 함수도 객체다.
• 모든 객체는 __proto__ 라는 프로토타입 링크를 갖고, 모든 함수는 prototype 이라는 프로토타입 객체를 갖는다. 고로, 함수 객체는 프로토타입 객체와 프로토타입 링크를 둘 다 갖게 된다다.
• 프로토타입 활용시 장점
  1. 메모리 낭비를 줄일 수 있다.
  2. 상속을 흉내낼 수 있다.
     • 자바의 경우, 상속된 클래스로 객체를 생성할 경우, 모든 객체가에 부모 영역이 메모리 공간에 잡히는 반면, 자바스크립트의 프로토타입을 통해 상속을 구현하면 하나의 부모의 공간을 참조링크를 통해 접근한다.

18. 자바스크립트에서의 싱글 스레드

• 자바스크립트는 싱글 스레드 언어이다. 하나의 call stack 을 갖고 있으며, 이로 인해 한 번에 단 하나의 함수만을 처리할 수 있다.
• 스레드를 하나만 사용하지만, 자바스크립트의 비동기적 특성으로 한 번에 여러 요청을 처리할 수 있다.
• Web worker 를 통해 백그라운드에서 스크립트를 실행함으로써 멀티 스레드를 구현할 수 있다.

19. this

• this는 함수 호출시 암묵적으로 전달 받으며, 함수의 현재 실행 문맥을 의미한다. 즉, this는 호출 에 따라 달라지며, 바인딩된다.
• 바인딩 예시
  • 함수(전역 함수) 내부에 작성된 this 는 window 객체로 바인딩된다.
  • 메서드(객체에 종속된 함수) 내부에 작성된 this는 해당 메서드가 정의된 객체로 바인딩된다.
  • 이벤트 핸들러 내부에 작성된 this는 이벤트를 받는 HTML 요소로 바인딩된다.
  • 생성자 내부에 작성된 this는 생성될 객체로 바인딩된다.
• 명시적 바인딩
  • call, bind, apply 메소드를 통해 파라미터로 전달된 객체로 명시적 바인딩을 할 수 있다.
• 화살표 함수
  • 화살표 함수는 전역 컨텍스트에서 실행되더라도, this를 새로 정의하지 않고 바로 바깥 함수나 클래스의 this를 사용한다. 따라서, this가 전역 객체 window가 되는 상황을 막을 수 있다.

20. 이벤트

• 이벤트 리스너는 HTML 요소에 어떤 이벤트가 발생했음을 감지하는 역할을 한다.
• 이벤트 객체에는 이벤트에 대한 정보와 더불어, preventDefault, stopPropagation, stopImmediatePropagation 등의 이벤트 조작 메소드가 내장되어 있다.
  • preventDefault 는 태그의 기본 동작을 하지 않게 막는다.
  • stopPropagation 은 이벤트 버블링과 캡쳐링이 되지 않도록 한다.
  • stopImmediatePropagation 은 같은 이벤트에서 다른 리스너들이 불려지는 것을 막는다. 이벤트를 리스너에 추가한 순서대로 불리게 될 것인데, 이 메소드를 호출하면 남아있는 리스너들이 불릴 일은 없다.
• 이벤트 버블링은 자식 이벤트가 부모에게도 전파되는 것을, 이벤트 캡쳐링은 부모 이벤트가 자식에게도 전파되는 것을 의미한다.
• 이벤트 위임은 이벤트 리스너가 실행할 작업을 부모 요소에게 위임하는 것을 말한다. 이벤트 위임을 사용하면, 요소마다 핸들러를 작성할 필요 없이 공통 조상에 단 하나만을 할당하여 여럿을 한꺼번에 다룰 수 있다.