[FE면접] 질문 모음 02

🔥🔥 표시: 개인적으로 어렵게 느낀 질문 체크

 

Q. React는 Framework인가요, Library 인가요? 이 둘의 차이는 무엇인가요?

• React는 라이브러리입니다. 라이브러리와 프레임워크의 차이는 제어 권한을 누가 가지고 있으냐 입니다. 라이프러리는 사용자(개발자)가 권한을 가지고 있으며 프레임워크는 반대로 프레임워크가 권한을 가지고 있습니다. 리액트로 만든 어플리케이션의 제어를 사용자가 API를 호출함으로써 제어할 수 있기 때문에 React는 라이브러리라고 볼 수 있습니다.

---

Q. React가 무엇인지 간단히 설명할 수 있나요?

• React는 SPA(Single Page Application)을 위한 사용자 인터페이스(UI)를 구축하는데 사용되는 오픈 소스 JavaScript 라이브러리입니다. React를 사용하면 재사용 가능한 UI 구성요소(컴포넌트)를 만들 수 있습니다. Facebook에서 일하는 소프트웨어 엔지니어 jordan walke가 처음 만들었습니다. 

---

Q. SPA가 무엇인가요?

•  SPA (Single Page Application)란 서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말합니다. 즉, 현재의 HTML을 고정하고 변경되는 부분에 대해서만 서버에서 불러와 클라이언트 사이드에서 렌더링하는 방식인 것입니다.

---

Q. 웹표준과 웹접근성에 대해 설명해보세요!

• 어떤 운영체제나 브라우저를 사용하더라도 웹 페이지가 동일하게 보이고 정상 작동해야 함을 의미하는 것이 웹 표준이며 표준화 단체인 W3C가 권고한 표준안에 따라 웹 사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 에 대한 규정이 담겨있습니다. 
• 웹 접근성은 모든 사용자가 신체적, 환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것을 의미하며 어떠한 사용자가 어떤 환경(브라우저, 운영체제, 디바이스의 환경이나 사양 등)에서도 어려움 없이 접근, 이용할 수 있도록 하는 것을 접근성이라고 합니다.  [참고자료]

---

🔥🔥Q. http가 무엇인가요? https와 어떤점이 다른가요?

• http는 서버-클라이언트 모델을 따라 데이터를 주고 받기 위한 프로토콜이다. https는 http에 데이터 암호화가 추가된 프로토콜이다. 공개키/개인키 암호화 방식을 이용해 데이터를 암호화한다. http는 암호화가 추가되지 않았기 때문에 보안에 취약하고 https는 안전하게 데이터를 주고 받을 수 있다. 하지만 https를 이용하면 암호화/복호화 과정이 필요하기 때문에 http보다 속도가 느리다. https는 인증서를 발급하고 유지하는데 추가비용이 발생한다. 개인정보와 같은 민감한 데이터를 주고 받는다면 https를 이용하고 UI나 일반 컨텐츠 관련 데이터들은 http로 처리한다.

---

Q. null, undefined, undeclared의 차이점은 무엇인가요? 어떻게 이 상태들에 대한 확인을 할 것인가요?

• null 변수를 선언하고 'null'이라는 빈 값을 할당한 경우 (선언 o, 할당o) 
• undefined (미정의 변수) 접근 가능한 스코프에 변수가 선언되었으나 현재 아무런 값도 할당되지 않은 상태를 말합니다. (선언 o 할당x) 
• undeclared (미선언 변수) 접근 가능한 스코프에 변수 선언조차 되어있지 않은 상태를 말합니다. (선언x 할당x)
• 콘솔과 문자열 반환이 보장되는 typeof 연산자를 통해 변수상태를 알 수 있습니다. 다만 , typeof 연산자를 쓰면 자바스크립트가 undefined와 undeclared를 모두 섞어버려 에러 메세지를 통일시켜버리기 때문에 콘솔에 그냥 해당 변수를 찍어서 에러메세지를 통해 확인하면 됩니다. 레퍼런스에러는 undeclared, syntaxError: missing intializer 는 할당이 안된 것을 의미하므로 undefined라는 것을 알 수 있습니다.

---

Q. 코드에서 map을 많이 사용했는데, .forEach 루프와 .map() 루프 사이의 주요 차이점을 설명할 수 있나요?

• forEach는 콜백함수를 통해 각각의 요소에 대한 작업만 처리하고 반환값이 없습니다. map은 각각의 요소에 대한 작업 처리를 한 결과값들을 새로운 배열에 담아 반환합니다. 

---

Q. JavaScript 코드를 디버깅하기 위해 어떤 도구와 기술을 사용하나요?

• 크롬(브라우저) 개발자 툴과 visual studio code의 디버거를 이용했으나 vscode의 디버거는 하나의 파일만 실행시킬 수 있어서 주로 개발자 툴의 source탭을 이용하였습니다. 

---

Q. var 와 let, const의 가장 큰 차이점은 무엇인가요 (function scope와 block scope의 개념에서)

• var은 함수 레벨 스코프에 해당하고 let과 const는 블록 레벨 스코프에 해당합니다. 함수 레벨 스코프란 함수 내부에 선언된 변수만 지역변수로 한정하고 나머지는 전역변수로 취급되기 때문에 중복 선언 위험이 큽니다. 이를 보안하기 위해 es6에 도입된 것이 블록 레벨 스코프의 let, const입니다.

---

Q. 동기와 비동기의 차이가 무엇인가요?

• 동기는 순차적, 직렬적으로 테스크를 수행하고, 비동기는 병렬적으로 테스크를 수행합니다. 동기는 이전 작업이 마무리되지 않으면 다음 작업을 수행할 수 없습니다. 

---

Q. 자바스크립트 비동기 처리에 대한 예시를 들어보세요

• 콜백함수(요새는 잘 사용하지 않는 비동기 함수), Promise(주로 서버에서 받아온 데이터를 화면에 표시할 때 사용), async & await, 대표적으로 setTimeout()이 있습니다.

---

🔥Q. 이벤트 위임/이벤트 버블링이 무엇인가요?

• 이벤트 버블링은 이벤트 전파 중 한가지로, DOM트리 내에 있는 타겟 요소에서 발생한 이벤트가 상위 요소로 전파되는 것을 뜻한다.  -> 그럼 이벤트 전파는? (이벤트 전파 = 버블링 + 캡처링 포함한 개념)
• 이벤트 버블링: 특정 엘리먼트에 이벤트가 발생하면 해당 이벤트가 그 엘리먼트의 조상들에게 까지 전달되는 현상(자식 -> 조상)
• 이벤트 캡처링:  특정 엘리먼트에 이벤티가 발생할 경우 이벤트가 최상단의 부모엘리먼트로부터 전달되어 내려오는 현상이다. (조상 -> 자식)

이벤트 전파

DOM트리 내에 존재하는 DOM요소에서 발생한 이벤트는 DOM 트리를 통해 전파되는데, 이를 이벤트 전파 (event propagation)이라고 하고 3단계로 나눌 수 있다: 1) 캡쳐링 단계, 2) 타깃 단계, 3) 버블링 단계이다. 이 때 버블링이란 하위 요소에서 상위 요소로 전파시키는 방식이다. 캡쳐링 단계를 그 반대방향(상위에서 하위로)으로 전파되는 것을 뜻한다.

 

이벤트 위임(Event Delegation)

✅easy ver) 

이벤트 위임은 캡처링과 버블링을 이용한 것으로, 여러 엘리먼트마다 각각 이벤트 핸들러를 할당하지 않고, 공통되는 부모에 이벤트 핸들러를 할당하여 이벤트를 관리하는 방식이다. 

✅hard ver)

이벤트 위임은 DOM 이벤트에 적용할 수 있는 유용한 패턴이다. 유사한 요소에 동일한 핸들러를 적용할 때 주로 사용한다. 

※주의사항 - 이벤트 위임을 사용하려면 이벤트가 반드시 버블링되어야 한다.(하지만 몇몇 이벤트는 버블링되지 않는다.)

참고자료: 모던 자바스크립트

---

 

🔥🔥Q. 클로저는 무엇이며, 어떻게/왜 사용하나요?

• 스코프 - 변수 이름, 함수 이름, 클래스 이름과 같은 식별자가 본인이 선언된 위치에 따라 다른 코드에서 자신이 참조될 수 있을지 없을지 결정되는 것
• WHAT ? 클로저는 함수와 함수가 선언된 어휘적 환경(lexical 스코프)의 조합입니다.
• HOW ? 주로 중첩함수의 형태로 쓰이거나 변수에 해당 함수를 할당하는 식으로 사용할 수 있습니다.
• WHY ? 스코프를 이용해서, 변수의 접근 범위를 닫는 것이 클로저의 핵심입니다. 그렇기 때문에 특정 state(데이터)를 안전하게 은닉하고, 특정 함수에게만 state변경을 허용하기 위해 사용됩니다.

---

Q. "use strict"; 이 무엇인가요? 사용 시 장단점이 무엇인가요?

• ES5에서 새롭게 추가된 strict mode 를 활성화시켜주는 지시자입니다. 스크립트 최상단에 적어주면 strict mode가 활성화됩니다.
• strict 모드란 JS의 다양한 스크립트를 제한하는 방법입니다. 동적언어인 자바스크립트의 더 나은 오류 검사를 도와주는 역할을 한다. 엄격 컨텍스트를 통해 특정 액션 또는 많은 예외를 예방할 수 있습니다.  단점은 일부 개발자는 익숙하지 않은 기능이 많고 fuction.caller와 function.arguments에 더이상 접근할 수 없습니다. 또한 서로 다른 엄격한 모드로 작성된 스크립트를 병합하면 문제가 발생할 수 있습니다.

---

Q. 호이스팅이란?

• ES6 이후에 함수나 변수선언이 해당 유효범위(스코프) 최상단으로 끌어올려지는 것처럼 보이는 현상을 말한다. 실제로는 컴파일할때 변수와 함수선언이 메모리에 들어가되 할당은 코드를 작성한 위치에서 진행된다. 호이스팅은 변수와 함수선언에만 적용되는데 초기화만 할 경우 호이스팅이 일어나지 않으며 var로 변수선언한 경우 호이스팅이 발생한다.

---

Q. fetch보다 axios가 선호되는 이유? 

• 비동기 통신을 위해 사용할 수 있으며 그 외에 fetch 도 있습니다. axios는 return으로 promise를 반환해주는데 response 데이터를 다루기 쉽게 도와줍니다. 장점은 response timeout 처리 방법 존재, Promise 객체를 반환하기 때문에 데이터를 다루기가 편리하고 자동 데이터 JSON 변환 지원, 브라우저 호환성( IE11까지도 사용 가능 )이 뛰어나다는 장점이 있습니다. 이로 인해 axios를 사용하게 됩니다.

Axios	Fetch
써드파티 패키지로 설치 쉬움	Built-in APIs 로 별도의 설치 필요 없이, 모던 브라우저에서 사용 가능.
wide browser 지원	오직 크롬 42+, firefox 39+, edge 14+, safari 10.1+ 지원.polyfill 이용해서 하위 호환성 지원 가능
XSRF Protection 보안 기능 제공	없음.
자동 JSOM 데이터 변환 지원	JSON 데이터 핸들링 위해 추가 절차 필요. Fetch interface 의 json() 이용하는 로직 추가하여 가능
Request 취소 와 Request Timeout 설정 가능	없음. AbortController 이용하여 구현 가능
HTTP Requests 의 Intercept 가능	Intercept Requests 기본적으로 제공되지 않음. Global Fetch Method를 Overwrite 하여 나의 인터셉터 정의 가능
Download Progress 지원	Upload Progress 지원안함.  Response Object의 Body Property 통해 제공되는 ReadableStream 인스턴스 이용 가능

**표 출처: https://basemenks.tistory.com/256

---

 

🔥Q. Promise는 무엇인가요?

Promise란 - Javascript 비동기 처리( 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 실행 ) 의 결과를 나타내는 객체( pending, fullfill, reject )입니다.

---

🔥🔥Q. this가 JavaScript에서 어떻게 작동하나요?

대부분의 경우 this의 값은 함수를 호출한 방법이 결정합니다. 실행하는 중 할당으로 설정할 수 없고 함수를 호출할 때마다 다를 수 있습니다. (어디에서 어떻게 호출하느냐에 따라 변한다.)

this를 전역 범위에서 호출한다면 , 브라우저라는 자바스크립트 런타임의 경우에 this는 항상 Window라는 전역객체를 참조합니다.

함수 범위에서 호출한다면 현재 실행되고 있는 코드의 문맥에 따라 this가 달라집니다. 단순 함수 내부에서는 this는 Window를 가리킵니다. 하지만 함수를 어떤 객체의 메소드로 호출하면 this의 값은 그 객체를 사용합니다. 콜백함수에서 this는 Window를 가리킵니다(객체 안에 메소드로 선언되어 있더라도) 

 

ES2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했습니다(이는 렉시컬 컨텍스트안의 this값을 유지합니다)중요한 점은 화살표함수에서 this를 외부 스코프에서 정적으로 바인딩된 문맥(정적 컨텍스트, lexical context)을 가진다는 특징이있습니다.  즉, 정적 컨텍스트는 함수가 실행된 위치가 아닌, 정의된 위치에서의 컨텍스트를 참조한다는 의미입니다. 화살표함수는 this가 없기 때문에, 부모 스코프의 this를 바인딩하는데 따라서 화살표 함수를 쓰면, this를 이용한 부모 객체에 접근할 수 없습니다(화살표 함수의 특징으로 메소드나 생성자 함수로 사용할 수 없음이 있다) 

참고 자료: 화살표함수의 this

[JavaScript] 화살표 함수와 this 바인딩