Javascript 기술 정리 ( 면접을 되돌아보며… )(1)

이번 이직 준비를 통해 운이 좋게도 면접을 몇군데 다녀볼 기회가 생겼다.

아직 면접 관련 준비가 다소 부족한 상황에서 다녀올 면접에 대한 두려움은 많아지고 자신감은 작아지는 상태에서 그래도 일단 부딫혀 보고 나의 현재 위치와 더 보강해야할것은 무엇인지 한번 직접 경험해 보기 위해 자신없음에도 불구하고 당당한척 면접을 다녀왔다.

나에대한 스토리 텔링이나 현재 내가 처해있는 상황에 대한 대응/대처 같은 부분은 나름대로 내가 설계한 대로 잘 이끌어내어 면접에 응할 수 있었지만… 역시나 기술적인 부분에서는 심도있게 물어보거나 대답에 대한 꼬리물기 식의 심층질문에 들어가는 순간 당황함을 감출 수 없었고 나의 부족함을 뼈저리게 느낄 수 있었다….

따라서 현재 느낀점과, 내가 부족한 부분들을 피드백하고 리마인드 하기위해 일단 포스팅을 진행하려한다.

1. 면접 피드백 및 보강 공부

React는 virtual DOM을 사용한다고 말씀해 주셨는데, 왜 굳이 리액트는 virtual DOM을 만들어서 사용하는걸까?

첫번째, 브라우저의 렌더링 연산 비용을 최소화 하기위함이다. 실제 DOM을 조작하는 것은 레이아웃을 다시 계산하고 페인팅 하는 과정을 동반하는데 이는 비용이 매우 큰데 이때 virtualDOM을 사용하면 리액트가 메모리상에서 상태 변화에 따라 DOM의 변화를 계산하여 바뀐 부분만 실제 DOM에 딱 한번 적용하기 때문에 불필요한 연산을 줄여준다.

두번째, 개발 생산성이다. 리액트는 상태(State)를 기반으로 화면을 다시 그리게 되는데 virtual DOM이 없다면 실제DOM에 어떤 요소를 어떻게 수정할지 일일히 명령형 코드를 짜야하지만 리액트는 virtual DOM 기반으로 상태(State)가 변하면 화면은 이렇게 변한다 의 선언만 하면 리액트가 이에따라 알아처 처리해주기 때문에 개발자는 비즈니스 로직에만 집중할 수 있게된다.

실제로 가상DOM을 사용하는것은 속도적인 관점으로만 봤을때는 그다지 좋진 않지만 위의 두가지를 고려했을때는 충분히 만족할만한 생산성을 가지고 있다.

비동기 꼬리물기식 질문

자바스크립트에서 비동기는 어떻게 동작할까요?
- 먼저 자바스크립트는 모든 호출들을 싱글스레드 기반의 콜스택에 쌓는다. 그렇게 쭉쭉쭉 쌓이면서 실행되다가 비동기 함수를 만나면 브라우저의 WEB API 를 통해 비동기 함수가 따로 실행이 되고 그 결과의 콜백함수를 태스크 큐로 옮긴다. 이때 콜스택과 태스크 큐 사이에 이벤트 루프가 존재해서 콜스택이 비워져있는경우에 태스크큐의 콜백함수들을 다시 콜스택에 옮겨 실행시켜준다.
자바스크립트는 싱글 스레드라고 말했는데 왜 자바스크립트는 굳이 싱글스레드일까?
- 첫번째, DOM 조작의 일관성, 자바스크립트를 실행시키는 브라우저는 아무래도 직접적으로 유저가 바라보는 화면과 맞닿아 있기 때문에 멀티스레드로 되어 동시에 여러 작업을 수행하게 된다면 이때 DOM요소를 수정하려고 할때 경쟁상태가 발생되어서 처리가 어려울 수 있기에 UI적인 일관성을 고려하여 싱글 스레드로 동작한다.
- 두번째, 비동기 모델의 효율성, 자바스크립트는 무거운 작업을 외부 API에 맡기고 자신은 계속 동작할수 있는 비동기 논블로킹 방식으로 동작하기때문에 싱글스레드인 웹 환경에서도 최적화로 동작할 수 있다.
비동기함수는 실행순서대로 완료된다는 보장이 안된다고 했는데, 그럼 완료되어 리턴된 무언가가 어떤 함수에서 전달되어 왔는지 알수 있나?
- 자바스크립트는 클로저(Closure)와 프로미스(Promise) 객체를 통해 각 결과가 어떤 함수에서 호출되었는지 정확히 식별할 수 있음, 비동기 함수는 호출될 때마다 독립적인 실행 컨텍스트가 생성되고, 그 내부의 콜백함수는 클로저를 통해 자신이 생성된 환경을 그대로 기억한다. 따라서 이 콜백은ㅇ 어떤 스코프에 속해 있었는지 정확하게 알고 있고, 해당 데이터를 의도했던 대로 전달할 수 있음.