기술면접 2. Javascript

Ethereal·2021년 12월 27일

기술면접

목록 보기

2/5

Javascript

https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript

자바스크립트는 복잡한 무언가(주기적으로 내용이 갱신되는 기능이나 능동적인 지도, 변화하는 2D/3D 그래픽, 동영상 등)를 웹페이지에 적용할 수 있게 하는 스크립트 혹은 프로그래밍 언어입입니다. 자바스크립트는 표준 웹 기술이라는 레이어 케이크에서 세번째 층이라고 볼 수 있습니다.

HTML은 제공할 웹 컨텐츠의 구조와 의미를 문단, 제목, 표, 삽입 이미지, 동영상 등으로 정의하고 부여하는 마크업 언어입니다.
CSS는 배경색, 폰트 등의 레이아웃등을 지정하여 HTML 컨텐츠를 꾸며주는 스타일 규칙 언어입니다.
JavaScript는 동적으로 컨텐츠를 바꾸고, 멀티미디어를 다루고, 움직이는 이미지 그리고 꽤나 많은 다른 일(물론, 전부는 아니지만 몇 줄만의 자바스크립트 코드로 얻는 결과는 놀라울겁니다.)들을 할 수 있는 스크립트 언어입니다.

자바스크립트 특징:

JavaScript는 객체 기반의 언어입니다. 하지만 상속과 클래스라는 개념은 없습니다.
JavaScript는 인터프리터 (해석형) 언어로서 클라이언트의 웹 브라우저에 의해 해석되고 실행됩니다. 브라우저에서 동작하기 전에 다른 방식으로 코드를 변환할 필요가 없습니다.
JavaScript는 HTML문서 내에 기술되고 HTML 문서와 함께 수행됩니다.
JavaScript는 HTML에 연산 제어 등 프로그래밍적인 요소를 추가하고 클라이언트의 자원을 활용할 수 있게 합니다.

자바스크립트의 장단점

자바스크립트의 장점

자바스크립트는 컴파일 과정이 없기 때문에 다른 언어와 비교했을 때 빠른 시간 안에 스크립트 코드를 작성할 수 있게 도와줍니다.
기존 C나 자바 언어와 달리 굉장히 단순한 구조와 원칙을 가지고 있기 때문에 초보 개발자들이 쉽게 배우고 이해할 수 있습니다.
예를 들어 자바스크립트 코드 안에서는 변수, 클래스 및 메소드를 선언하지 않아도 되고, 메소드가 ‘public’, ‘private’ 또는 ‘protected’인지 구분하지 않아도 됩니다.
자바스크립트는 웹에 특화된 기술이기 때문에 운영체제나 플랫폼에 상관없이 잘 작동되고 확장성도 높습니다.

자바스크립트의 단점

단점은 성능이나 보안 측면입니다. 일단 내부에서 제공되는 기능이 제한적이고, 관련된 개발도구도 적은 편이고요. 또한 자바스크립트는 HTML 소스코드에 함께 작성되면서 소스코드가 외부로 공개되는데, 이 과정에서 보안 취약점이 발생할 수 있습니다.

https://coding-factory.tistory.com/193

♻ 자바스크립트 엔진

Memory Heap : 메모리 할당이 일어나는 곳
Call Stack : 코드 실행에 따라 호출 스택이 쌓이는 곳

call 스택에 우리 코드가 차례대로 쌓이고, 그 코드의 변수들은 memory heap에 저장된다.

자바스크립트는 기본적으로 싱글 쓰레드 기반 언어입니다. 호출 스택이 하나라는 소리죠. 따라서 한 번에 한 작업만 처리할 수 있습니다.

호출 스택의 각 단계를 스택 프레임(Stack Frame)이라고 합니다.

특정 시점에 함수 호출 횟수가 호출 스택(Call Stack)의 최대 허용치를 넘게 되면 브라우저가 아래와 같은 에러를 발생시킵니다.

싱글 스레드 기반 코딩은 멀티 스레드 환경에서 제기되는 복잡한 문제나 시나리오를 고민하지 않아도 되기 때문에 상당히 쉽습니다. 예를 들면, 데드락 같은 게 있겠죠.

https://joshua1988.github.io/web-development/translation/javascript/how-js-works-inside-engine/

♻ 비동기, 싱글스레드

비동기적(Asynchronous) 이란, 먼저 실행된 코드의 작업이 끝나기 전에 더 나중에 실행된 코드의 작업이 끝날 수 있음을 말한다. 즉, 동시성을 가지고 있는 코드들을 말한다. 자바 스크립트의 V8 엔진은 싱글 스레드를 가지고 있어서 stack을 하나 밖에 가지지 못한다. 그렇다면 자바스크립트는 싱글스레드를 가지고 있음에도 불구하고 어떻게 비동기적으로 실행되는 것일까?

싱글스레드란,

자바스크립트 자체는 싱글 쓰레드가 맞지만 자바스크립트 런타임은 싱글 쓰레드가 아니다. 왜냐하면 web api에 들어가는 요청들은 자바스크립트 엔진의 쓰레드가 아닌 다른 쓰레드에서 처리가 되기 때문.

비동기적 테크닉을 사용하는 경우

1.사용자 이벤트 처리

브라우저 화면에서 발생하는 사용자의 이벤트는 예측이 불가능하다.
따라서 이런 화면이벤트를 관리담당하는 녀석에게 우리는 특정이벤트가 발생할 때 호출을 원하는 내용을 callback 함수에 전달하게 된다.

2.네트워크 응답 처리

화면단에서 서버에게 요청을 보냈을 때, 그 응답이 언제 올지 알 수 없다.
따라서 이런 서버에 대한 응답처리 등도 비동기적으로 처리해야 한다.

3.파일을 읽고 쓰는 등의 파일 시스템 작업

4.의도적으로 시간 지연을 사용하는 기능(알람 등)

♻ 이벤트 루프와 Task Queue

자바스크립트는 이 Event Loop와 Queue들을 이용하여 비동기 작업을 수행한다.

Event Loop는
1. 계속 반복해서 call stack과 queue 사이의 작업들을 확인하고,
2. call stack이 비어있는 경우 queue에서 작업을 꺼내어 call stack에 넣는다.

직접적인 작업은 Web API에서 처리되고, 그 작업들이 완료되면 요청시 등록했던 callback이 queue에 등록된다.
Event Loop는 이 작업들을 Queue에서 꺼내어 처리한다.

큐 실행 순서
microtask queue -> animation frame -> (브라우저 랜더링) -> task queue

web API ex)Ajax 요청, setTimeout(), 이벤트 핸들러의 등록과 같이 웹 브라우저에서 제공하는 기능들을 말한다. 그런데 중요한 것은 이러한 요청들의 처리가 JavaScript 엔진의 쓰레드와는 다른 쓰레드들에서 이뤄진다

싱글 스레드라 순서대로 밖에 실행 못되어야하는데 왜 비동기처리가 가능할까?:
https://velog.io/@eamon3481/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8B%B1%EA%B8%80%EC%8A%A4%EB%A0%88%EB%93%9C%EC%9D%B8%EB%8D%B0-%EC%99%9C-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%A0%81-%EC%9D%BC%EA%B9%8C

JS 비동기 처리 원리:
https://sculove.github.io/post/javascriptflow/

♻ Hoisting , let과 var 차이

https://velog.io/@bathingape/JavaScript-var-let-const-%EC%B0%A8%EC%9D%B4%EC%A0%90

호이스팅(Hoisting)이란, var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다.

자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const, function, function*, class)을 호이스팅한다.

하지만, var 로 선언된 변수와는 달리 let 로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생한다.

console.log(foo); // undefined
var foo;

console.log(bar); // Error: Uncaught ReferenceError: bar is not defined
let bar;

이는 let 로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지기 때문이다.

변수는 선언 단계 > 초기화 단계 > 할당 단계 에 걸쳐 생성되는데

var 으로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다. 하지만,

var

// 스코프의 선두에서 선언 단계와 초기화 단계가 실행된다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 있다.

console.log(foo); // undefined

var foo;
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1
let 로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.

let

// 스코프의 선두에서 선언 단계가 실행된다.
// 아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았다.
// 따라서 변수 선언문 이전에 변수를 참조할 수 없다.

console.log(foo); // ReferenceError: foo is not defined

let foo; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(foo); // undefined

foo = 1; // 할당문에서 할당 단계가 실행된다.
console.log(foo); // 1