TIL: 프론트엔드 질문 자문자답하기!

Posted on | In , | 0 comments

요새 회사 일이 계속 생기면서 자기 공부를 게을리하고 있다고 생각하고 있었다… 생각만 하다가 이번에 기회가 생겨 겸사겸사 프론트엔드 면접 질문을 스스로 정리해보면서 그동안 잊고 있었던 것들을 되짚어보는 공부를 살짝 해보았다.

앞으로 다시 정신차려서 다시 계획짜고 공부를 해나가야겠다…ㅠㅡㅠ 난 우주의 먼지..

프론트엔드 면접 질문 자문자답하기!

가볍게 물어볼 것 같은 것 (나랑 코드 스타일이 맞을지? 회사에 입사하면 얼마나 빨리 적응할지 등을 알아보는 질문이 될 듯 하다.)

  • 본인이 구현한 프로젝트 들고오게하기 이걸로 질문 (코드 스타일, 프로젝트 구조 이해 정도를 물어보기)
  • 타입스크립트 사용 경험이 있는지?
  • 프론트엔드 개발하면서 겪었던 어려움, 이슈, 상황 등을 어떻게 해결했는지
  • 상태관리 라이브러리 사용 경험에 대한 생각 물어보기 (vuex, redux, mobx 등)

Promise가 콜백과 비교해서 생기는 장단점

  • 코드의 가독성이 높아진다.(콜백지옥의 해결)
  • 성공과 실패 처리를 확실하게 할 수 있다.
  • 확실한 결과값이 나오고 나서 처리할 수 있다.
  • 여러개의 비동기로직을 실행할 수 있다.

Async를 사용해쓸 때 Promise와 다른점

  • 동기성 코드와 융합?하여 사용할 수 있다.
  • 그래서 가독성이 더 높아진다.
  • 결과값에 대한 에러처리를 따로 해주어야한다.

일반 함수와 화살표 함수의 차이

  • 일반 함수는 this가 호출시의 스코프에 따라 결정되는 것에 반해 화살표 함수는 선언된 위치 바로 위의 스코프를 this로 바라보고 있다.
  • 일반 함수는 arguments라는 this와 마찬가지로 호출시에 결정되는 아이가 있는데, 화살표 함수에는 arguments가 없다.(arguments 객체는 함수 호출시에 전달되는 인수들의 배열을 의미하는 객체이다.)
  • 화살표 함수는 new로 호출이 불가하다. (es6부터는 callable, constructable한 것이 있는데, 일반함수의 경우 둘 다 해당되고, 화살표 함수는 callable하며, class는 constructable하다.)

immutable에 관하여

  • 한번 생성된 이후 변경할 수 없다는 것을 뜻한다.
  • 원시타입은 변경 불가능한 타입이지만, 객체 타입은 변경 가능한 타입이다.
  • 원시타입은 값 자체를 가지고 있는 것에 반해, 객체 타입은 값이 들은 주소 값을 가지고 있기 때문이다.
  • Object.assign(), Object.freeze(), spread 연산자를 사용하여 변경 가능한 객체타입을 막을 수 있다. 하지만 객체 내부의 경우 변경 불가능하도록 막을 수 없다.

let, var, const 차이점

  • var는 함수 레벨 스코프를 따름에 반해, let, const는 블록 레벨 스코프를 따른다.
  • var는 키워드를 생략하고 사용해도 암묵적 선언이 이루어진다.
  • var는 변수 중복 선언을 허용한다.
  • 변수 호이스팅이 돼서 변수를 선언하기 이전에 참조할 수 있다. 하지만 let은 변수를 선언하고 할당하기 전에 일시적 사각지대인 (TDZ)가 생겨서 할당 이전에 참조하면 에러가 발생한다.
  • const는 선언과 할당을 동시에 해야한다.

추가 질문!

  • const, let를 사용할 때 어떤 키워드를 주로 사용하는지? 이유는?

-> const를 항상 사용하고, 할당을 다시 해야할 때만 let을 사용한다.

클로저란?

  • 외부 스코프에 있는 변수를 사용할 수 있는 함수를 뜻한다.
  • 클로저를 활용하여 현재 상태를 기억하고, 변경된 최신 상태를 유지할 수 있따.
  • 전역 변수 사용을 억제할 수 있다.(지역 변수와 클로저를 사용하여 현재 상태를 기억할 수 있기 때문)
  • 정보를 은닉하는 데에 사용할 수 있다.(바깥에서 직접적인 접근은 막고, 클로저를 통해서 해당 변수에 접근할 수 있도록 한다.)

이벤트 루프

  • 자바스크립트 코드가 실행 될 때, 브라우저 기반의 이벤트 루프를 통해서 실행이 된다.
  • 자바스크립트 코드가 브라우저에서 동작할 때, 단일 스레드 방식으로 돌아간다. 이는 즉 한 가지 일만을 처리할 수 있다는 의미이다.
  • 한가지 일만을 처리하고 있지만, 그렇게 보이지않게 해주는 것이 자바스크립트의 동시성인데, 이것을 지원해주는 것이 이벤트 루프이다.
  • 자바스크립트 엔진은 호출 스택과 힙으로 나눠져 있다. 자바스크립트 엔진은 단순히 호출 스택에 쌓여있는 코드들을 순차적으로 실행 시키는 작업만 한다.
  • 그리고 이벤트 큐와 이벤트 루프가 있는데, 이벤트 큐에는 주로 비동기적인 요청들이 내부적인 동작을 수행 후 들어와서 순차적으로 자바스크립트 호출 스택에서 넘어가 실행된다.
  • 이벤트 루프는 콜 스택 내에 태스크가 있는지 반복적으로 돌면서 확인한다. 비어있다면 이벤트 큐에서 자바스크립트 엔진 호출 스택으로 넘겨준다.

Q. 아래 콘솔이 찍히는 순서는?

function func1() {
  console.log('func1');
  func2();
}

function func2() {
  setTimeout(function () {
    console.log('func2');
  }, 0);

  func3();
}

function func3() {
  console.log('func3');
}

func1();

이벤트 객체

  • 동적으로 이벤트가 생성됨에 따라 처리할 수 있는 이벤트들이 들은 객체를 이벤트 핸들러에 인자로 전달해주게 되는데, 이 객체를 이벤트 객체라고 한다.
  • event.target vs event.currentTarget (이벤트를 발생시킨 요소 vs 이벤트에 바인딩된 DOM 요소(addEventListener 앞에 기술된 객체, 이벤트핸들러의 this와 항상 일치)
  • event.stopPropagation() (해당 요소의 부모 요소로 이벤트를 처리하는 함수가 전달되는 것을 막는 아이이다.)
  • event.preventDefault() (기본 요소의 디폴트 동작을 막는 메소드이다.)