하루 하나씩 작성하는 TIL #61
9. 자바스크립트의 nullish 값은 무엇이 있을까요?
🟨 의도: nullish로 평가되는 데이터 타입과 값의 종류를 이해하고 있는지 확인
🟨 팁: nullish 병합 연산자를 언급하면 좋습니다.
🟨 모범 답안:
네 자바스크립트에서 nullish는 말 그대로 null과 같은 값을 뜻합니다.
이에 대한 예시로는 대표적으로 null과 undefined가 있습니다. 여기서 알고 넘어가면 좋은 게 있는데, 바로 nullish 병합 연산자입니다.
기존에는 || 를 이용해서 병합을 구현했는데요. 이렇게 되면 0이나 ''처럼 빈 문자열 등이 false로 평가되어 제대로 동작하지 않을 가능성이 생기곤 합니다. 그때 바로 물음표 2개를 붙인 ??로 대체해준다면 nullish한 값에 대해서만 병합을 실행하게 됩니다.
🟨 한 줄 요약 : 말 그대로 null과 같은 값. 대표적으로 null과 undefined가 있음.
10. == 과 ===의 차이점은 무엇일까요?
🟨 의도: 자바스크립트의 기본 문법을 확인하는 질문입니다.
🟨 팁: nullish와 연계하여 대답하면 좋습니다.
🟨 모범 답안:
비교할 때 판단이 다릅니다. 간단히 요약하자면 ==는 타입은 다르지만 값이 같을 때, 예를 들어 문자열 1과 숫자 1을 비교하면 같다고 뜰 겁니다. 그래서 숫자 0과 nullish 값을 이 연산자를 이용해 비교하면 true가 떠서 같다고 나올 겁니다.
그리고 ===는 좀 더 엄격하게 타입과 값을 모두 비교합니다. 그래서 문자열 1과 숫자 1을 비교하면 다르다고 뜰 것입니다. 저는 보통 엄격한 비교를 위해 ===를 더 선호해 사용하는 편입니다.
🟨 한 줄 요약 : ==는 타입은 다르지만 값이 같을 때 사용 . '==='는 엄격한 비교를 할 때 사용.
11. 자바스크립트에서 동기와 비동기의 차이에 대해 설명해주세요.
🟨 의도: 비동기 프로그래밍에 대해 이해하고 있는지 확인하는 질문.
🟨 팁: 추가로 둘을 비교한 예시를 들어도 좋습니다.
🟨모범 답안:
자바스크립트에서 동기는 작업을 순서대로 실행하며, 한 작업이 끝나야 다음 작업을 실행하는 것을 뜻합니다.
반면에 비동기 처리는 한 작업이 완료되기까지 기다리지 않고 바로 다음 작업을 실행할 수 있어 더 효율적으로 리소스를 활용할 수 있습니다.
비동기 프로그래밍은 주로 네트워크 요청, 파일 IO와 같이 시간이 얼마나 걸릴지 알 수 없는 작업을 처리할 때 필요합니다.
(+나만의 예시 추가: 식당에서 사장님이 그릇을 치우려고 손님이 음식을 다 먹을 때까지 옆에서 기다리기만 해서는 안 되겠죠?)
🟨 한 줄 요약 : 동기는 작업을 순서대로 실행. 비동기 처리는 한 작업이 완료되기까지 기다리지 않고 바로 다음 작업을 실행할 수 있어 더 효율적으로 리소스를 활용
12. 이벤트 루프와 실행 컨텍스트에 대해서 설명해주세요.
🟨 의도: 자바스크립트의 기본 원리와 함께 기술 면접 대표 질문에 대해 준비해왔는지 확인하는 질문.
🟨 팁: 그림으로 설명하는 게 더 좋은 내용이라 제스처를 넣어 설명해도 좋습니다. 스스로 대답할 때도 그림을 설명하듯이 상상해서 해주세요.
🟨 모범 답안:
우선 이벤트 루프는 그 이름답게 이벤트를 순서대로 돌아가며 처리하는 역할을 합니다. 마치 줄을 서있는 것처럼 이벤트 루프는 큐에 담긴 이벤트를 하나하나 호출 스택으로 옮깁니다. 물론 실행 중인 컨텍스트가 없어 호출 스택이 비어있을 때만 말입니다.
그리고 실행 컨텍스트는 이러한 이벤트가 실행되는 환경을 뜻합니다. 앞서 말한 호출 스택에 이러한 실행 컨텍스트를 쌓아두고 작업이 종료되면 스택에서 빠져나오게 됩니다.
이러한 이벤트 루프와 실행 컨텍스트는 싱글 스레드 환경인 자바스크립트에서 비동기 작업을 효과적으로 처리하기 위해 필수적인 메커니즘입니다.
🟨 한 줄 요약 : 이벤트 루프 이벤트를 순서대로 돌아가며 처리. 실행 컨텍스트는 이러한 이벤트가 실행되는 환경
13. 클로저에 대해 설명해주세요.
🟨 의도: 어려운 개념인 클로저에 대한 지식을 가지고 있는지 확인하는 질문.
🟨 팁: 굳이 어려운 단어로 설명하지 않아도 됩니다.
🟨 모범 답안:
자바스크립트에서는 작업이 종료되어 호출 스택에서 빠져나오게 되면 참조가 사라져 가비지 컬렉터에 의해 메모리에서 사라지게 됩니다.
그런데 호출 스택에서 빠져나왔지만 특정 행동에 의해서 참조가 사라지지 않았다면 어떻게 될까요? 이 객체는 아무도 접근할 수는 없지만 메모리에 존재는 하는, 일종의 유령이 되는 겁니다.
이러한 특징을 활용하여 데이터 은닉화 및 캡슐화를 구현할 수 있습니다. 다만 남용할 경우 메모리의 누수를 피할 수 없다는 단점도 있습니다.
🟨 한 줄 요약 : js에서는 작업이 종료되어 호출 스택에서 빠져나오면 참조가 사라져 메모리도 사라지게 되는데, 아무도 접근할 수 없지만 메모리에는 존재하게 됨. 이러한 특징을 활용하여 데이터 은닉화와 캡슐화를 구현 가능.
14. html에서 자바스크립트 코드를 로딩하는 script 태그는 보통 body 태그의 최하단에 위치하는데요. 그 이유가 무엇일까요?
🟨 의도: 브라우저의 로딩 방식과 DOM 트리 구축 등 렌더링 과정에 대한 지식이 있는지 확인하는 질문
🟨 팁: module과 defer 속성에 대해서도 언급하면 좋습니다.
🟨 모범 답안:
그 첫 번째 이유는 페이지의 로딩 속도 최적화 때문입니다. 브라우저는 html을 읽어내려가다 script 태그를 만나게 되면 해당 자바스크립트 코드를 읽고 실행하기 시작합니다. 만약 script 태그가 상단에 있다면 DOM 트리 구축 시기가 늦어져 페이지의 로딩이 느려질 수 있습니다.
여기에 이어 두 번째 이유는 DOM 접근시에 오류가 생길 수 있기 때문입니다. 앞서 자바스크립트가 먼저 읽히고 실행될 수도 있다고 말씀드렸죠? 그런데 만약 자바스크립트 코드에 document.querySelector처럼 html 태그를 가져오는 코드가 있다면 어떻게 될까요? 아직 DOM 트리가 구축되지 않았으므로 원하는 태그를 가져오지 못하고 undefined를 반환하게 됩니다. 이러한 이유로 script 태그를 body의 최하단에 넣곤 합니다.
물론 다른 방법도 있는데요. 바로 script 태그에 defer나 module을 작성하는 것입니다. 그러면 자동으로 script 태그를 지연 로딩할 수 있습니다.
🟨 한 줄 요약 : 페이지의 로딩 속도 최적화. 만약 script 태그가 상단에 있다면 DOM 트리 구축 시기가 늦어져 페이지의 로딩이 느려질 수 있음.
15. 여러 비동기 함수를 동시에 병렬로 호출하기 위해서는 어떻게 해야 할까요?
🟨 의도: Promise에 대한 이해도를 확인하는 질문
🟨 팁: Promise.all()을 언급하는 게 정답입니다.
🟨 모범 답안:
보통 async/await를 사용해 데이터를 불러오게 되면 순차적으로 데이터를 불러오기 마련입니다. 이때 Promise.all() 함수를 사용한다면 함수의 인자로 넘겨준 비동기 함수를 병렬로 실행할 수 있습니다. 예를 들어 3초의 실행 시간을 가진 비동기 함수 3개가 있다고 한다면, 기본적으로 순차적으로 호출할 시에 모든 함수가 끝나기까지 3 * 3 = 9초가 걸리게 됩니다. 하지만 이걸 병렬로 호출하게 된다면 3개의 요청을 동시에 보내게 되어 3초만 걸리게 됩니다.
🟨 한 줄 요약 : Promise.all() 함수를 사용한다면 함수의 인자로 넘겨준 비동기 함수를 병렬로 실행.
16. Promise를 사용해 함수의 타임아웃 기능을 구현하려면 어떤 메서드를 사용해야 할까요?
🟨 의도: Promise에 대한 이해도를 확인하는 질문
🟨 팁: Promise.race()를 언급하는 게 정답입니다.
🟨 모범 답안: Promise.race()
Promise.race()를 사용하면 됩니다. 이 함수의 기능은, 인자에 비동기 함수를 넣어주게 되면 넣어준 함수들 중 가장 빠르게 resolve되는 함수의 결과만을 가져오게 됩니다. 그러면 여기에 내가 사용할 비동기 함수와, setTimeout을 함께 넣어주게 된다면 비동기 함수와 setTimeout 둘 중 먼저 끝나는 쪽을 반환해주게 됩니다. 만약 setTimeout을 3초로 정해둔다면 3초 안에 비동기 함수가 resolve 되지 않을 시 타임 아웃 판단을 내리도록 구현할 수도 있습니다.
🟨 한 줄 요약 : Promise.race(). 인자에 비동기 함수를 넣어주게 되면 넣어준 함수들 중 가장 빠르게 resolve되는 함수의 결과만을 가져옴.
