[FE면접] 질문 모음 03

Q. 프로토타입이 뭔가요? 그리고 프로토타입 상속은 어떻게 작동하나요?

• 프로토타입: 부모의 유전자가 자식에게 유전되는 것처럼부모 객체의 정보가 프로토타입이라는 유전자에 저장되고 자식 객체는 그 프로토타입을 참조한다.extends와 super를 써서 상속받을 수 있다.

---

Q. Ajax에 대해 가능한 자세히 설명하세요.

 

AJAX 탄생배경

• Ajax는 HTTP의 TP(Transfer Protocol)의 대전제인 "사용자가 URL을 요청할 때에만 서버에서 해당 페이지를 꺼내준다"의 한계때문에 탄생했습니다. 즉 , 브라우저가 웹 서버에 무엇인가 요청하려면, 페이지를 이동해야만 하는데 그런 식으로 웹페이지를 이동하는 방식으로 만들어버리면 유저 사용성이 많이 떨어지는 한계가 있었습니다. 그렇기 때문에 구글은 HTTP규약을 뛰어넘는 방안을 제시했고 그것이 바로 Ajax입니다. Ajax는 HTTP를 효과적으로 이용하는 기술입니다. 

AJAX란? 

• AJAX(Asynchronous JavaScript And XML)란 비동기 자바스크립트와 XML을 말합니다. 서버와 통신하기 위해XMLHttpRequest 객체를 사용하는 것
•  AJAX는 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 데이터를 주고받는 기술입니다. (Ajax는 JS에서 비동기 HTTP통신*이 가능하도록 해줍니다.) -> Ajax를 쓰면, 유저는 새로운 HTML을 서버로부터 받아 새로운 페이지로 이동하는 것이 아니라 동일한 웹 페이지 내에서 DOM을 변경하게 됩니다. 
• easy ver) Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹페이지의 일부분만을 갱신할 수 있게 해줍니다. 
• JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있습니다.

*비동기 HTTP통신이란? response와 request를 비동기 식으로 다룰 수 있다는 것을 의미

---

Q. Ajax를 사용하는 것의 장단점은 무엇인가요?

• 장점: 웹 페이지 전체를 다시 로딩하지 않고도, 일부분만 갱신할 수 있습니다. 또한, 웹 페이지가 로드된 후에 서버로 데이터 요청을 보내고 서버로부터 데이터를 받을 수 있습니다. 웹 브라우저는 서버에 요청을 보내고 나서, 서버의 응답을 기다릴 필요 없이 다른 작업을 처리할 수 있습니다. 
• 한계: 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식(사용자가 직접 요청)을 사용하므로, 서버 푸시 방식(푸쉬 알람 같은)의 실시간 서비스는 만들 수 없습니다. 또한, 바이너리(이진) 데이터를 보내거나 받을 수 없고 Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수 없습니다. 

---

Q. throttle과 debounce가 무엇이고 그 차이에 대해서 설명해보세요

 

스로틀(throttle)과 디바운스(Debounce) 두 방법 모두 DOM이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 JS의 양적인 측면, 즉 이벤트(event)를 제어(제한)하는 방법입니다. 

• 쓰로틀링: 일정 시간 동안 요청이 한 번만 수행되도록 한다.
• 언어적 측면 해석 "목을 조르다" -> 요청이 지나가는 통로를 목을 조르듯 조여서 요청의 개수를 조절한다."
• 디바운싱: 요청이 들어오고 일정 시간을 기다린 후 요청을 수행한다. 만약 일정 시간 안에 같은 요청이 추가로 들어오면 이전 요청은 취소된다.

차이점: 쓰로틀은 적어도 일정 시간(n밀리초) 마다 정기적으로 기능 실행을 보장한다. 반면, 디바운스는 쓰로틀링과 다르게 이벤트리스너가 한 번만 실행되고(아무리 많은 이벤트가 발생해도 모두 무시) 일정 시간 동안 요청이 추가로 들어오지 않는 경우에만 딱 한 번 마지막 이벤트를 발생시키는 기법이다. 

 

실제적용 사례: 디바운싱은 주로 ajax 검색에 자주 쓰이고 쓰로틀링은 스크롤을 올리거나 내릴 때 보통 사용합니다.

 

디바운싱 사례 설명:

서비스 중에 검색어를 치자마자 엔터없이도 결과가 바로 나오는 것 -> 결과를 즉시 보여주려면 항상 input 이벤트에 대기하고 있어야 하는데 문제는 한 글자를 칠 때마다 ajax요청이 실행되는데 이는 유료 API를 사용했을 때 낭비로 이어집니다. 디바운싱은 비용적인 문제와도 연관이 있고 마지막 검색어가 완성됐을 때만 서버에 요청을 보내고 싶을 때 사용합니다. 작동원리는 검색기능에 경우 200ms동안 입력이 없으면 입력이 끝난것으로 간주하고 200ms 이전에 타자 입력이 발생하면 이전 타이머는 취소하고 새로운 타이머를 다시 설정하는 것입니다(이제 여러번 호출되지 않겠죠). 

*주의: 한글 특성상 마지막에 두 번 호출되는 경우도 있습니다.  

 

underscore나 lodash 라는 자바스크립트 라이브러리에서 해당 기능을 제공합니다. (활용도: underscore < lodash )

* 두 라이브러리 모두 자바스크립트를 확장하여 편리하게 코드를 작성하거나 웹표준, 크로스 브라우징에 많이 사용 

---

Q. lazy loading이 뭔가요?

• 페이지를 불러오는 시점에 당장 필요하지 않은 리소스들을 추후에 로딩하게 하는 기술을 말합니다. 즉, 사용자가 보지 않는 것들을 당장 로딩하지 않고 나중에 사용자가 필요로 하는 시점에 로딩하는 것입니다. 

예시: 무한 스크롤 & placeholder 

*placeholder를 이용하는 lazyloading 중 가장 흔한 방식은 <img> 태그의 속성을 이용하는 것입니다. 

참고자료: 이미지태그 lazy loading

---

Q. lazy loading을 구현하려면 어떻게 해야하나요?

---

Q. 새 화살표 => 함수 문법에 대한 사용 예시를 들 수 있나요? 이 새로운 문법은 다른 함수와 어떻게 다른가요?

---

Q. 고차 함수(higher-order function) 정의는 무엇인가요?

---

Q. 객체나 배열에 대한 디스트럭쳐링 예시를 들 수 있나요?

const a = ['바나나', '사과', '키위'];
const [arg1, arg2, arg3] = a;
console.log(arg1, arg2, arg3); // "바나나" "사과" "키위"

const obj1 = {
  name1: 'wonhee',
  gender: 'female',
  age: 27,
  dosomething: function (name) {
    console.log(name);
  },
};
const { name1, gender, age, dosomething: doFunc } = obj1;
console.log(name1, gender, age, doFunc); 
doFunc('감자');
//주의사항: 객체의 경우는 key값을 destructing할 때 변수명을 같게 뽑아줘야 하고 변경하고 싶으면 dosomthing: doFunc로
//왼쪽의 함수 명을 오른쪽으로 변경할 수 있다. 배열은 디스트럭쳐링할 때 변수명을 아무렇게나 지정해서 뽑아줄 수 있다.

---

Q. spread 문법을 사용할 때의 이점은 무엇이며 rest 문법과 다른 점은 무엇인가요?

 

• 둘의 syntax는 같습니다. (보여지는 문법) spread와 rest는 사용 용도에 따라 다릅니다. 또한, Spread 가 기존의 배열을 펼쳐서 표현한다면, Rest 는 배열이 아닌 개별 요소들을 하나의 배열로 만들어 줍니다.
• spread 문법은 객체나 배열의 요소를 펼칠 때(뽑아 낼 때) 사용합니다.  spread문법을 사용하면 원본을 유지하면서 새로운 객체를 만들 수 있는 장점이 있습니다. rest 문법은 객체, 배열 함수의 파라미터에서 사용이 가능합니다. 파라미터를 배열의 형태로 받아서 사용할 수 있으며 객체와 배열에서 사용될 때에는 구조 분해 할당과 함께 사용됩니다.  함수의 파라미터가 몇개가 될 지 모르는 상황에서 rest 파라미터를 사용하면 매우 유용합니다.

 

rest 문법

• 파라미터를 배열의 형태로 받아서 사용할 수 있다.
• 즉, 함수를 호출할 때 함수의 파라미터(매개변수)를 spread operator(...) 로 작성한 형태다.
• Rest 파라미터를 사용하면 함수의 파라미터로 오는 값들을 모아서 하나의 "배열"로 만들어준다.
• Spread 가 기존의 배열을 펼쳐서 표현한다면, Rest 는 배열이 아닌 개별 요소들을 하나의 배열로 만들어 준다.

 

---

Q. 파일 간에 코드를 공유하려면 어떻게 해야 하나요?

 

버전 관리 프로그램인 Git을 활용합니다 . git을 활용하면 로컬에서 프로젝트의 기록을 스스로 관리할 수 있습니다. 다른 개발자와 작업을 공유해야 한다면 Github이라는 원격 저장소를 사용하면 코드를 쉽게 공유할 수 있습니다. 가시적으로 브랜치를 확인하려면 Git CUI(Graphic User Interface)툴인 SourceTree를 활용합니다.