기술면접 준비하기 & Deep DIVE

Imnottired·2023년 3월 1일
0
post-thumbnail

이번에 기술 면접 준비하면서 디테일한 정보들이 부족하다고 느꼈다.
그래서 DeepDive라는 책을 구매했는데 궁금했던 내용들을 검색과 책을 통해 함께 찾아보겠다.




Promise와 callback의 차이를 말해주세요

1 검색

callback을 사용하면 비동기 로직의 결과값을 처리하기 위해서는 callback안에서만 처리를 해야하고, 콜백 밖에서는 비동기에서 온 값을 알 수가 없습니다. 하지만 promise를 사용하면 비동기에에서 온 값이 promise 객체에 저장되기 때문에 코드 작성이 용이해집니다.

프로미스를 사용하게 되면 프로미스 객체에 비동기가 처리된 결과값이 저장됩니다. 콜백의 경우 매번 비동기를 실행해야지 그 값을 사용할 수 있지만 프로미스는 .then 메소드를 통해서 저장되어 있는 값을 원하는 때에 사용할 수 있습니다.
https://jcon.tistory.com/189

2 DEEP DIVE

(Deep Dive 842P)

callback
비동기 처리를 위한 하나의 패턴
콜백 헬로 가독성이 떨어지고, 여러 에러 처리가 힘들다
여러 개 비동개 처리를 하는데 한계가 있다.

promise
ES6에서 비동기 처리를 위해 도입한 패턴이다.
콜백의 단점을 보완하여 비동기 시점을 명확히 표현 할 수 있다.

promise 생성자 함수는 콜백함수를 인수로 전달 받는다.
여기서 resolve와 reject를 인수로 받는다.

promise 생성자 함수가 인수로 전달 받은 콜백함수 내부에서 비동기 처리를 수행한다.
그 결과 값이 Promise 객체에 저장된다.
promise는 비동기 처리 상태와 결과를 관리하는 객체이다.

  • 비동기
    비동기 함수는 호출하면 그 즉시 종료 된 후 결과를 도출한다.
    여기서 비동기 처리에 대한 후속 처리를 콜백함수로 처리하는 것이 일반적이다.



callhell에서 벗어나는 방법

promise나 async&await를 사용한다.

반복적인 로직을 제거하고, 효율적으로 작성한다.

https://www.youtube.com/watch?v=CA5EDD4Hjz4
https://hanamon.kr/javascript-%EC%BD%9C%EB%B0%B1-%EC%A7%80%EC%98%A5-%ED%83%88%EC%B6%9C%ED%95%98%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC-%EB%B0%A9%EB%B2%95/




async/await 사용하는 방법

  1. 검색 x

2 DEEP DIVE

이전에는 제너레이터를 사용해서 비동기처리를 동기처럼 사용하였다.
여러 문제로 코드는 장황해지고 가독성이 떨어졌다.
그 결과 ES8부터 효율적으로 사용하기 위해 async/await가 도입되었다.

async/await는 프로미스를 기반으로 동작한다. then/catch/finally 후속처리 메서드에 콜백함수를 전달할 필요 없이 동기처럼 프로미스를 사용 할 수 있다.

사용법

await 키워드는 반드시 async 함수 내부에서 사용해야한다.
async 함수는 async 키워들 사용해 정의하며 언제나 프로미스를 반환한다.
(constructor 메서드에는 인스턴스를 반환해야해서 사용할 수 없다.)

await 키워드는 프로미스가 settled 상태(비동기 처리가 수행된 상태)가 될 때가지 대기했다가 settled 상태가 되면 프로미스가 resolve한 처리결과를 반환한다.
반드시 promise 앞에 써야한다.

promise.all 을 통해 효율적으로 사용가능하다.


async function foo(){
const a = await new Promise(resolve => setTimeout(()=> resolve(1),3000));
const b = await new Promise(resolve => setTimeout(()=> resolve(1),2000));
const c = await new Promise(resolve => setTimeout(()=> resolve(1),1000));
}

걸린시간 6초


async function foo(){
const res = await promise.all([new Promise(resolve => setTimeout(()=> resolve(1),3000));
const b = await new Promise(resolve => setTimeout(()=> resolve(1),2000));
const c = await new Promise(resolve => setTimeout(()=> resolve(1),1000));
]);}

걸린 시간 3초




promise 사용한 통신과 async/await 통신의 차이점에 대해 얘기해주세요

1. 검색

  • 에러 핸들링
    Promise 를 활용할 시에는 .catch() 문을 통해 에러 핸들링이 가능하지만, async/await 은 에러 핸들링 할 수 있는 기능이 없어 try-catch() 문을 활용해야 한다

  • 코드 가독성
    Promise의 .then() 지옥의 가능성
    코드가 길어지면 길어질수록, async/await 를 활용한 코드가 가독성이 좋다.
    async/await 은 비동기 코드가 동기 코드처럼 읽히게 해준다. 코드 흐름을 이해 하기 쉽다.

https://velog.io/@pilyeooong/Promise%EC%99%80-asyncawait-%EC%B0%A8%EC%9D%B4%EC%A0%90

  1. DEEP Dive
    async/await는 프로미스를 기반으로 동작한다. then/catch/finally 후속처리 메서드에 콜백함수를 전달할 필요 없이 동기처럼 프로미스를 사용 할 수 있다.



var let const 차이를 알려주세요

(Deep Dive 208p)

1 검색 x

2 Deep Dive

var

ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었다.

1) 변수 중복 선언 허용
(의도치 않은 부작용 유발)

2) 함수 레벨 스코프
함수 외부에서 var 키워드로 선언하면
코드 블록내에서 선언해도 전역 변수가 된다

3) 호이스팅
선언, 초기화(undefined)가 동시에 일어남

let

ES6에서는 새로운 변수 선언 키워드인 let과 const 도입하였다.

1) 변수 중복 선언 금지
중복 선언시 문법 에러 SyntaxError

2) 블록 레벨 스코프
모든 코드 블록(if문,for문 등등)을 지역 스코프로 인정해준다.

let foo =1;
if(foo){
let foo = 2;
let bar = 3;
}

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

if문은 블록으로 쌓여있어서 foo,bar는 지역변수가 된다.

스코프 개념 정리

// 밖에서는 전역 스코프다.
let i = 10;
function foo(){ //함수 내에서는 함수레벨 스코프
	let i = 100;
    for (let i =1; i<3; i++){// 블록안에서 블록 레벨 스코프
    console.log(i);
    }
}

3) 호이스팅
선언만 일어남 (ReferenceError : x is not defined, 초기화가 되지않음)

console.log(foo);//ReferenceError : x is not defined, 선언
let foo;// 변수 선언문
console.log(foo);//undefined 
foo=1;
console.log(foo);//1

let 키워드가 스코프의 시작 지점부터, 초기화 시작지점(변수 선언문)까지 변수를 참조할 수 없는 구간 일시적 사각지대(Temporal Dead Zone: TDZ)이라 부른다.


let foo =1;// 변수 선언문, 전역변수
{
console.log(foo);//ReferenceError : foo is not defined
let foo=12; // 지역 변수
console.log(foo);//1
}

지역 변수도 호이스팅이 발생한다.

const

let 키워드와 유사하다.

1,2,3) 변수 중복선언금지, 블록레벨 스코프, 호이스팅 동일
let과 다른점은 let 초기화와 할당은 동시에 하지않는다.
const 키워드로 선언한 변수는 초기화와 동시에 할당 한다.

const foo; // SyntaxError: Missing initializer in const declaration

4) 재할당 금지
5) 상수 표현식으로 많이씀
재할당이 금지되어서 특정값을 두고 사용할 수 있다.
단 const에 객체를 할당한 경우 값을 변경할 수 있다.
(참조값은 변하지 않는다)




함수 선언형과 표현식의 차이를 알려주세요

(Deep Dive 158p)

1 검색 X

2 Deep Dive

함수
동일한 작업을 여러번 수행해야한다면 같은 코드를 여러번 중복해서 작성하는 것이 아니라
미리 정의된 함수를 재사용하는 것이 효율적이다.
(코드의 재사용)
유지보수의 편의성, 코드의 신뢰성이 높아진다.

함수는 객체 타입의 값이다. 이름을 갖을 수 있는데 이해도를 높이기 위해 이름이 중요하며, 가독성을 높여한다.

함수 종류는

함수 선언문: function add(x,y){ return x+y; }
함수 표현식: var add = function (x,y){return x+y};
Function 생성자 함수: var add = new Function('x', 'y', 'return x+y');
화살표 함수(ES6): var add = (x,y) => x+y;

  • 함수 리터럴 : 함수이름, 매개변수 목록, 함수 몸체
    (리터럴은 사람이 이해할 수 있는 문자나 약속된 기호를 이용해 생성하는 표기방식을 말한다)

함수는 기존 객체와 다른 점은 호출할 수 있고 고유의 프로퍼티를 갖는다.

function foo(){console.log('foo')};
foo(); //foo

(function bar(){console.log('bar')};)
bar(); //ReferenceError is not defined

선언문(foo)은 함수 선언문으로 해석된다.
하지만 그룹연산자 내에 있는 함수 리터럴(bar)은 표현식으로 해석되었다.
표현식은 참조할 수 있는 함수이름이 없으므로 호출할 수 없다.

함수 선언문은 함수 몸체 내부에서만 유효한 함수이름이다. 그렇지만
자바스크립트 엔진은 함수를 호출하기 위해 함수이름과 동일한 이름의 식별자를 암묵적으로 생성하고 거기에 함수 객체를 할당한다.

즉 함수 선언문은 함수 이름이 아니라 함수 객체를 가리키는 식별자로 호출한다.

함수 이름을 생략하는 것을 익명함수라고 한다.
함수 표현식은 익명함수가 일반적이다.

함수 생성 시점과 함수 호이스팅

console.dir(add); // f add(x,y)
console.dir(add); // undefined;

console.log(add(2,5)); //7
console.log(sub(2,5)); //TypeError: sub is not a function

//함수 선언문
function add(x,y){
return x+y;
}

//함수 표현식
var sub = function(x,y){ return x-y };

함수 선언문은 이전에 호출할 수 있다.
함수 표현식은 불가능하다.

이유는 생성시점이 다르다.

함수 선언문은 한줄씩 순차적으로 실행되는 런타임 이전에 자바스크립트 엔진에 의해 식별자와 함께 객체가 할당되어 먼저 만들어진다.
이처럼 함수 선언문이 코드의 선두에 오는 것처럼 동작하는 자바스크립트 고유의 특징을 함수 호이스팅이라한다.

함수 표현식은 변수에 할당되는 값이다. 변수 할당문의 값은 할당문이 실행되는 시점, 즉 런타임에 평가 되므로 할당문이 실행될 때 함수 객체가 된다.
따라서 함수 호이스팅이라기보다는 변수 호이스팅이라고 하는 것이 적합하다.
함수 표현식 이후에 호출 또는 참조해야한다.

이런 함수 선언문의 특징때문에 표현식을 더 권장한다.

객체의 데이터를 보고 싶을 때, console.dir(객체)

마무리

검색을 해보면 대부분들이 간단하고 요약된 자료만 봐서 이해하기 어려웠다.
책을 산이유는 한번 볼 때 깊게 이해해서 보는 횟수를 줄이고자 샀는데, 모르던 내용들을 많이 알려줘서 재미있었다.

profile
새로운 것을 배우는 것보다 정리하는 것이 중요하다.

0개의 댓글