JS

11. 자바스크립트에서 동기와 비동기의 차이에 대해 설명해주세요.

비동기 프로그래밍에 대해 이해하고 있는지 확인하는 질문.
추가로 둘을 비교한 예시

자바스크립트에서 동기는 작업을 순서대로 실행하며, 한 작업이 끝나야 다음 작업을 실행하는 것을 뜻합니다. 반면에 비동기 처리는 한 작업이 완료되기까지 기다리지 않고 바로 다음 작업을 실행할 수 있어 더 효율적으로 리소스를 활용할 수 있습니다. 비동기 프로그래밍은 주로 네트워크 요청, 파일 IO와 같이 시간이 얼마나 걸릴지 알 수 없는 작업을 처리할 때 필요합니다. (+나만의 예시 추가: 식당에서 사장님이 그릇을 치우려고 손님이 음식을 다 먹을 때까지 옆에서 기다리기만 해서는 안 되겠죠?)

12. 이벤트 루프와 실행 컨텍스트에 대해서 설명해주세요.

자바스크립트의 기본 원리와 함께 기술 면접 대표 질문에 대해 준비해왔는지 확인하는 질문.
그림으로 설명하는 게 더 좋은 내용이라 제스처를 넣어 설명해도 좋습니다. 스스로 대답할 때도 그림을 설명하듯이 상상해서 해주세요.

우선 이벤트 루프는 그 이름답게 이벤트를 순서대로 돌아가며 처리하는 역할을 합니다. 마치 줄을 서있는 것처럼 이벤트 루프는 큐에 담긴 이벤트를 하나하나 호출 스택으로 옮깁니다. 물론 실행 중인 컨텍스트가 없어 호출 스택이 비어있을 때만 말입니다.
그리고 실행 컨텍스트는 이러한 이벤트가 실행되는 환경을 뜻합니다. 앞서 말한 호출 스택에 이러한 실행 컨텍스트를 쌓아두고 작업이 종료되면 스택에서 빠져나오게 됩니다.
이러한 이벤트 루프와 실행 컨텍스트는 싱글 스레드 환경인 자바스크립트에서 비동기 작업을 효과적으로 처리하기 위해 필수적인 메커니즘입니다.

13. 클로저에 대해 설명해주세요.

어려운 개념인 클로저에 대한 지식을 가지고 있는지 확인하는 질문

자바스크립트에서는 작업이 종료되어 호출 스택에서 빠져나오게 되면 참조가 사라져 가비지 컬렉터에 의해 메모리에서 사라지게 됩니다. 그런데 호출 스택에서 빠져나왔지만 특정 행동에 의해서 참조가 사라지지 않았다면 어떻게 될까요? 이 객체는 아무도 접근할 수는 없지만 메모리에 존재는 하는, 일종의 유령이 되는 겁니다. 이러한 특징을 활용하여 데이터 은닉화 및 캡슐화를 구현할 수 있습니다. 다만 남용할 경우 메모리의 누수를 피할 수 없다는 단점도 있습니다.

14. html에서 자바스크립트 코드를 로딩하는 script 태그는 보통 body 태그의 최하단에 위치하는데요. 그 이유가 무엇일까요?

브라우저의 로딩 방식과 DOM 트리 구축 등 렌더링 과정에 대한 지식이 있는지 확인하는 질문
module과 defer 속성에 대해서도 언급

그 첫 번째 이유는 페이지의 로딩 속도 최적화 때문입니다. 브라우저는 html을 읽어내려가다 script 태그를 만나게 되면 해당 자바스크립트 코드를 읽고 실행하기 시작합니다. 만약 script 태그가 상단에 있다면 DOM 트리 구축 시기가 늦어져 페이지의 로딩이 느려질 수 있습니다.
여기에 이어 두 번째 이유는 DOM 접근시에 오류가 생길 수 있기 때문입니다. 앞서 자바스크립트가 먼저 읽히고 실행될 수도 있다고 말씀드렸죠? 그런데 만약 자바스크립트 코드에 document.querySelector처럼 html 태그를 가져오는 코드가 있다면 어떻게 될까요? 아직 DOM 트리가 구축되지 않았으므로 원하는 태그를 가져오지 못하고 undefined를 반환하게 됩니다. 이러한 이유로 script 태그를 body의 최하단에 넣곤 합니다.
물론 다른 방법도 있는데요. 바로 script 태그에 defer나 module을 작성하는 것입니다. 그러면 자동으로 script 태그를 지연 로딩할 수 있습니다.

15. 여러 비동기 함수를 동시에 병렬로 호출하기 위해서는 어떻게 해야 할까요?

Promise에 대한 이해도를 확인하는 질문
Promise.all()을 언급

보통 async/await를 사용해 데이터를 불러오게 되면 순차적으로 데이터를 불러오기 마련입니다. 이때 Promise.all() 함수를 사용한다면 함수의 인자로 넘겨준 비동기 함수를 병렬로 실행할 수 있습니다. 예를 들어 3초의 실행 시간을 가진 비동기 함수 3개가 있다고 한다면, 기본적으로 순차적으로 호출할 시에 모든 함수가 끝나기까지 3 * 3 = 9초가 걸리게 됩니다. 하지만 이걸 병렬로 호출하게 된다면 3개의 요청을 동시에 보내게 되어 3초만 걸리게 됩니다.

16. Promise를 사용해 함수의 타임아웃 기능을 구현하려면 어떤 메서드를 사용해야 할까요?

Promise에 대한 이해도를 확인하는 질문
Promise.race()를 언급

Promise.race()를 사용하면 됩니다. 이 함수의 기능은, 인자에 비동기 함수를 넣어주게 되면 넣어준 함수들 중 가장 빠르게 resolve되는 함수의 결과만을 가져오게 됩니다. 그러면 여기에 내가 사용할 비동기 함수와, setTimeout을 함께 넣어주게 된다면 비동기 함수와 setTimeout 둘 중 먼저 끝나는 쪽을 반환해주게 됩니다. 만약 setTimeout을 3초로 정해둔다면 3초 안에 비동기 함수가 resolve 되지 않을 시 타임 아웃 판단을 내리도록 구현할 수도 있습니다.

17. 자바스크립트의 기본 문법인 변수, 상수, 데이터 타입, 연산자, 함수 등을 이해하고 적용할 수 있습니다.

지원자가 자바스크립트의 기본적인 문법과 개념을 이해하고 있는지 확인하기 위함.
지원자가 변수 선언 및 할당, 데이터 타입 식별, 다양한 연산자 사용, 함수 작성 및 호출에 대해 얼마나 잘 알고 있는지 평가.

변수 선언 시 var, let, const의 차이를 명확히 설명하세요.
자바스크립트의 기본 데이터 타입(숫자, 문자열, 불리언, null, undefined, 객체)에 대해 언급하세요.
기본적인 산술, 논리, 비교, 삼항 연산자를 사용하는 예제를 준비하세요.
함수 선언 방식(함수 선언식, 함수 표현식, 화살표 함수)에 대해 설명하세요.

• 변수 선언: let과 const는 블록 스코프를 가지며, var는 함수 스코프를 가집니다. const는 재할당이 불가능합니다.
• 데이터 타입: 자바스크립트에는 숫자, 문자열, 불리언, null, undefined, 객체 타입이 있습니다.
• 산술, 논리, 비교, 삼항 연산자의 사용법을 잘 이해하고 있습니다.
• 함수 선언 방식으로는 함수 선언식, 함수 표현식, 화살표 함수가 있습니다.