[기술 면접] 프론트엔드 개발자 기술 면접 질문 정리1

let, var, const의 차이점과 호이스팅 (Hoisting)

var는 변수의 재선언, 재할당 모두가 가능하다
es6 문법 도입 전까지는 var만 사용했음
-> 유연한 변수 선언에는 좋으나, 코드가 길어질수록 유지보수 어려움

var는 호이스팅과도 관련이 있다

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.
var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다.
반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.

즉 var로 선언한 변수는 선언 전에 호출해도 에러는 나지않고 undefined가 출력됨
let 과 const는 에러가 발생함

let의 경우 재선언은 불가능하지만, 재할당은 가능함
const의 경우 재선언, 재할당 모두 불가능

[요점 정리]

var : 변수의 재선언/재할당 모두 가능, Hoisting이 되어 변수를 선언하기 전에 참조할 수 있다.

let: 변수의 재선언은 불가능하나 재할당은 가능, 변수를 선언하기 전에 참조할 수 없으나, 
변수를 선언할 시 할당을 반드시 할 필요는 없다.

const: 변수의 재선언/재할당 모두 불가능, 변수를 선언하기 전에 참조할 수 없으며, 
변수를 선언할 시 할당을 반드시 해야 한다.

JavaScript와 Node.js가 어떻게 다른 것인지 설명

• JavaScript

자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 (유일한) 프로그래밍 언어이다.
자바스크립트는 명령형(imperative), 함수형(functional), 프로토타입 기반(prototype-based) 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어이다

(최근에 pyscript 라는 것이 출현하면서 유일한은 생략해도 될 것 같다)

• Node.js

브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있는 자바스크립트 실행 환경
브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있는 자바스크립트 실행 환경인
Node.js의 등장으로 자바스크립트는 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용되는 언어가 되었다.

자바스크립트(javascript)는 어떤 언어 인가?

싱글쓰레드 프로그래밍 언어이다.(한번에 하나의 작업만 할 수 있는 언어라는 뜻)
그러므로, 함수를 실행하면 함수 호출이 스택에 순차적으로 쌓이고 스택의 맨 위에서 부터 차례대로 한번에 하나의 함수만 처리할 수 있다.
그렇지만, 웹사이트에서 끊임없이 여러작업을 동시에 수행할 수 있는 것은 웹 api들을 통해(dom, ajax, setTimeout 같은) (비동기 콜백 queue)
비동기 작업을 가능하게 해주기 때문입니다.

함수를 동기 호출하면 콜 스택에 쌓여 순차적으로 실행되는데,
이때 ajax나 setTimeout 등을 사용하면 자바스크립트 엔진은 call stack에서 web api로 보내고,
정해진 시간이나 이벤트가 발생한 순간에 순차적으로 콜백 queue에 적재한다.
콜백 큐에 줄을 선 함수들은 콜 스택에 쌓여 있는 것들이 모두 제거되면, 차례대로 스택에 쌓여 실행되게 된다.

프로세스와 쓰레드의 차이?

프로세스: 컴퓨터에서 연속적으로 실행되고 있는 프로그램
기본적으로 프로세스 당 최소 1개의 쓰레드를 가지고 있다.

쓰레드: 프로세스 내에서 실행되는 여러 흐름의 단위, 프로세스가 할당받은 자원을 사용하는 실행의 단위
쓰레드의 경우 프로세스 내에서 stack 만 따로 할당 받고 나머지는 공유한다(heap, code, data)

context switching이란?

cpu에서 여러 프로세스를 돌아가면서 작업을 처리하는 과정
구체적으로 동작 중인 프로세스가 대기를 하면서 해당 프로세스의 상태(context)를 보관하고,
대기하고 있던 다음 프로세스가 동작하면서 이전의 보관했던 프로세스의 상태를 복구하는 작업을 말한다.

멀티 쓰레드의 경우 스레드 사이의 작업량이 작아서 context 스위칭이 빠르다(멀티 프로세스에 비교해서)
멀티 쓰레드가 자원의 효율성 측면에서 프로세스를 생성하며 자원을 할당하는 시스템 콜이 적어 자원을 효율적으로 관리할 수 있다.

이벤트 루프에 대해 설명하시오?

이벤트 루프란 구동하는 환경(브라우저, 노드)에서 가지고 있는 장치입니다.
콜 스택과 콜백 큐(태스크 큐)를 감시하며, 콜 스택이 비어 있는 경우 태스크 큐에서 태스크(=콜백 함수)를 가지고 와
콜 스택에 넣어 실행시키는 기능을 합니다.

태스크 큐와 마이크로태스크 큐에 대해서 설명해 보시오?

2개의 큐 모두 콜백함수가 태스크로 들어간다는 공통점이 있지만, 어떤 함수를 실행하느냐에 따라 어디로 들어가는지가 다르다.
대표적으로 setTimeout 의 콜백 함수가 태스크 큐에 들어가고, promise의 콜백 함수가 마이크로태스크 큐에 들어간다.
이벤트 루프는 마이크로태스크 큐의 태스크를 먼저 처리한 다음, 태스크 큐의 태스크 들을 처리한다.

마이크로태스크 큐가 우선순위가 높다는 뜻(promise의 콜백 함수가 먼저 처리 된다)

모든 자바스크립트 파일을 브라우저에서 한 번에 로딩 할 때의 문제점을 설명해주세요

자바스크립트 파일은 해당 파일을 가져올 때까지 HTML 문서의 구문 분석을 중단한다.
그만큼 html이 화면에 출력되는 것이 늦어진다.
스크립트 파일이 다 뜰때까지 흰 화면만 나오므로, 사용자는 페이지에 오류가 있다고 생각하여
페이지를 나갈 수 있음

[이에 대한 해결책]
보통 html 안에서 script 태그를 바디 하단에 넣어서 모든 요소를 읽은 다음 
자바스크립트를 로드하도록 하는 방법이 좋다

추가적인 방법?

조금 더 보완한 방법을 찾아보면, defer 를 이용한 방법 이 있다.
defer를 쓰면 html 파싱이 완료된 후 자바스크립트 코드를 실행하는데,
초반 html 파싱을 하다가, script 태그를 만나게 되면 일반적인 경우 파싱을 멈추고 script 파일을 로딩하지만,
defer 속성이 들어가게 되면, (script 태그의 defer 속성) 파싱을 멈추지 않고 script 파일을 로딩한다(비동기 방식)
그 다음에 html 파싱이 끝난 후 script 파일이 로딩된다.

promise(프로미스)의 개념에 대해서 설명하고, 콜백 함수 방식과 차이점을 설명해주세요.

프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다.
(비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미)

주로 서버에서 받아온 데이터를 처리할 때 사용함

콜백함수 vs Promise

콜백함수는 callback을 반복적으로 실행시키기 때문에 코드의 양이 길어지고 가독성이 떨어진다. (콜백 헬)

Promise는 .then(), .catch()등 프로미스 API를 사용할수 있어 코드의 양을 줄이고 가독성을 증가시킵니다

Node.js는 싱글스레드 인가요? Node.js 런타임이 동작하는 방식을 설명해주세요.

Node.js 의 기반이 되는 자바스크립트가 싱글 쓰레드 이기에 Node.js도 싱글 쓰레드라 칭한다.
하지만 libuv(내부) 라이브러리 의 이벤트 루프를 활용하여 여러 작업을 비동기적으로 처리하기에
멀티 쓰레드처럼 보이게 이벤트(혹은 작업)를 처리하는 것!