실무 질문 대비

임정민·2022년 6월 6일
0
post-thumbnail

✔✔✔✔✔

브라우저는 어떻게 동작하는가?

  1. 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분
  2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어
  3. 렌더링 엔진 - 요청한 콘텐츠를 표시. 예를들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시
    4.통신 - HTTP 요청과 같은 네트워크 호출에 이용
  4. UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스
  5. 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행
  6. 자료를 저장하는 계층

렌더링 엔진 동작과정

HTML 파싱 -> 렌더 트리 구축 -> 렌더 트리 배치 -> 렌더 트리 그리기

① 렌더링 엔진은 HTML 문서를 파싱하여 DOM 트리를 구성합니다.
② 그 다음 외부 CSS 파일과 함께 포함된 스타일 요소인 CSSOM을 파싱합니다.
③ DOM 트리와 ②의 결과물을 합쳐 렌더 트리를 구축합니다.
④ 렌더 트리 각 노드에 대해 화면 상에서 배치할 곳을 결정합니다.
⑤ UI 백엔드에서 렌더 트리의 각 노드를 그립니다.

그렇다면 JS는?

자바스크립트는 자바스크립트 엔진이 처리합니다. HTML 파서는 script 태그를 만나면 DOM 생성 프로세스를 중지하고 자바 스크립트 엔진으로 권한을 넘깁니다. 즉 동기적으로 처리합니다. (JavaScript 코드를 body 하단에 위치시키는 이유)

요약하면?

사용자가 브라우저에 검색하고자 하는 URL을 입력하면 브라우저가 DNS 서버에 도메인을 검색하여 IP주소를 전달해줍니다. IP주소를 통해 HTTP 요청 메세지를 해당 웹 서버에 요청하고 데이터를 전송받는데 그것을 렌더링 엔진에서 처리합니다. HTML 문서를 파싱하여 DOM 트리를 구성하고 CSS 파일을 통해 CSSOM을 파싱한 뒤 둘을 합쳐 렌더 트리를 구축합니다. 이후 렌더 트리를 배치할 곳을 정해주고 렌더 트리의 각 노드를 그립니다.

호이스팅에 대해서 설명해주세요.

호이스팅이란?

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말합니다.

호이스팅의 대상

var 변수 선언과 함수 선언문에서 호이스팅이 일어납니다. let과 const에서도 호이스팅은 발생하지만 TDZ의 제약을 통해 오류가 발생합니다.

호이스팅의 장점?

호이스팅은 장점때문에 사용되는 것이 아니고 호이스팅때문에 발생하는 에러를 피하기 위해 알아둬야한다에 가깝습니다. 이러한 개념을 모르고 var을 남발하고 값을 확인하면 원인을 알 수 없는 undefined나 원하지 않는 변수가 저장된 상황을 만날 수 있기 때문입니다. ES6가 적용된 이후에는 let과 const를 통해 이러한 에러를 조기에 차단할 수 있습니다.

JS의 Scope?

Scope는 유효범위라는 뜻으로 변수와 매개변수의 접근성과 생존기간을 뜻합니다.

전역 스코프와 지역 스코프로 나눌 수 있는데, JS는 다음과 같은 특징을 가집니다.

  • 유효범위가 함수 단위

JS는 유효범위 단위가 블록이 아닌 함수 단위로 if, for문과 같은 구문들이 사용되었을 때 중괄호 밖의 범위에서도 사용이 가능하다.

  • 변수 명 중복

JS는 다른 프로그래밍 언어와 달리 변수명이 중복되어도 에러나지 않고 가장 가까운 범위의 변수를 참조합니다. (var의 경우)

  • var 키워드 생략

JS는 var 변수를 생략할 경우 전역 변수로 자동 선언됩니다.

Closure 이란?

내부 함수가 정의될 때 외부 함수의 환경을 기억하고 있는 내부 함수를 말합니다. 외부 함수 안에서 선언된 내부 함수는 그 외부 함수의 지역 변수가 함수에 접근하여 사용할 수 있습니다.

사용 이유?

클로저는 다음과 같은 이유로 사용할 수 있습니다.

  1. 상태 유지 : 현재 상태를 기억하고 변경된 최신 상태를 유지할 수 있다.

  2. 전역 변수의 사용 억제 : 상태 변경이나 가변 데이터를 피하고 오류를 피하는 안정성을 증가시킬 수 있다.

  3. 정보의 은닉 : 클래스 기반 언어의 private 키워드를 흉내낼 수 있다.

CSS에서 margin과 padding에 대해서 설명해주세요.

margin은 Object의 외부여백을 말하고 padding은 Object의 내부여백을 의미합니다.

Position에 대해서 설명해주세요.

Position은 태그들의 위치를 결정하는 CSS입니다. static, relative, absolute, fixed

relative를 사용하고 top, left와 같은 것들을 사용하면 부모요소 기준으로 top, left로 움직일 수 있고

absolute는 부모요소가 아닌 특정 요소를 기준으로 한 위치를 정할 수 있다.

특정 기준은 position이 relative, fixed, absolue 선언된 곳

fixed는 스크롤과 같은 상황에도 항상 같은 위치를 유지하는 것

GET과 POST의 차이점에 대해서 알려주세요.

GET은 서버에서 어떤 데이터를 가져와서 보여주고 POST는 서버상의 데이터 값이나 상태를 바꾸기 위해 사용

✔✔✔✔

this의 용법 아는대로 설명해주세요.

JS의 this 키워드는 JAVA의 this의 개념과 달라 혼란을 줍니다. JAVA에서는 this가 객체 자신에 대한 참조 값을 가지고 있다는 뜻이지만 JS의 경우 해당 함수 호출 방식에 따라 this에 바인딩 되는 객체가 달라집니다.

함수 호출 방식과 this 바인딩

this의 4가지 동작 방식

  1. 기본 바인딩(전역 객체)

전역 스코프에서 정의한 변수들은 전역 객체에 등록됩니다. 즉 this를 하면 window가 된다.

  1. 암시적 바인딩

어떤 객체를 통해 함수가 호출된다면 그 객체가 바로 this의 context 객체가 된다.

function test() {
  console.log(this.a);
}

var obj = {
  a: 20,
  func1: test,
  func2: function() {
    console.log(this.a);
  }
};

obj.func1(); // 20
obj.func2(); // 20
  1. 명시적 바인딩

call, apply, bind 메소드를 가지고 있는데 첫번째 인자로 넘겨주는 것이 this context가 됩니다.

function test() {
  console.log(this);
}

var obj = { name: "yuddomack" };
test.call(obj); // { name: 'yuddomack' }
test.call("원시 네이티브 자료들은 wrapping 됩니다"); // [String: '원시 네이티브 자료들은 wrapping 됩니다']
  1. new 바인딩
function foo(a) {
  this.a = a;
  this.qwer = 20;
}

var bar1 = new foo(2);
console.log(bar1.a); // 2
console.log(bar1.qwer); // 20

// 1. 새 객체가 만들어짐
var obj = {};
// 2. 새로 생성된 객체의 Prototype 체인이 함수의 프로토타입과 연결됨
Object.setPrototypeOf(obj, foo.prototype); // 프로토타입을 연결합니다. 이 글에서는 무시해도 상관없습니다.
// 3. 1에서 생성된 객체를 context 객체로 사용(명시적으로)하여 함수가 실행됨
foo.call(obj, 2);
// 4. 이 함수가 객체를 반환하지 않는 한 1에서 생성된 객체가 반환됨
var bar2 = obj; // 여기서 foo는 반환(return)이 없으므로 인스턴스가 생성(된 것처럼 동작)

console.log(bar2.a); // 2
console.log(bar2.qwer); // 20

LocalStorage

저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능하다.

SessionStorage

브라우저가 종료되면 데이터도 같이 지워진다.

  1. 쿠키는 매번 서버로 전송된다.
  2. 쿠키는 개수와 용량에 있어서 제한이 있다. 하나의 사이트에 저장할 수 있는 최대의 쿠키는 최대 20개이다. 또한 하나의 사이트에서 저장할 수 있는 최대 쿠키는 4KB로 제한되어있다. 하지만 Web Storage는 제한이 없다.

Restful API에 대해서 아는대로 설명해주세요.

REST

HTTP URL을 통해 자원을 명시하고 HTTP Method를 통해 해당 자원에 대한 CRUD를 적용하는 것을 의미합니다

REST 구성 요소

  1. 자원 : HTTP URL
  2. 자원에 대한 행위 : HTTP Method
  3. 자원에 대한 행위의 내용 : HTTP Message Pay Load

장단점

HTTP 프로토콜의 표준을 최대한 활용하고 HTTP 표준 프로토콜에 따르는 모든 플랫폼에서 사용이 가능합니다.
하지만 사용할 수 있는 메소드가 4개로 제한적이고 구형 브라우저에서 호환이 되지 않는 경우가 있다.

JavaScript는 어떤 언어인가요? -> 싱글 스레드 언어

JavaScript는 실제 사용 시 멀티 스레드처럼 사용 하는데 어떤 원리로 가능한 건가요?

JavaScript 에서는 동시성을 지원하는 이벤트 루프가 있기 때문에 비동기적 설계를 할 수 있다.

실행되는 함수를 싱글 스레드 형식으로 처리하는 콜 스택이 있고 콜 스택이 비었을 때마다 '콜백 큐'에서 대기 중이 함수를 콜 스택으로 불러와 실행시킵니다.

*Event Loop에 대해서 알고 있으신가요?

이벤트 루프에서는 이벤트 발생 시 호출되는 콜백 함수들을 콜백 큐에 전달하고 콜백 큐에 담겨있는 콜백 함수들을 콜 스택으로 넘겨줍니다.

  1. 코드가 호출 스택에 쌓인 후, 실행되면 자바스크립트 엔진은 비동기 작업을 Web API에게 위임한다.
  2. Web API는 해당 비동기 작업을 수행하고, 콜백 함수를 이벤트 루프를 통해서 테스트 큐에 넘겨주게 된다.
  3. 이벤트 루프는 콜 스택에 쌓여있는 함수가 없을 때, 테스트 큐에서 대기하고 있던 콜백함수를 콜 스택으로 넘겨준다.
  4. 콜 스택에 쌓인 콜백함수가 실행되고, 콜 스택에서 제거된다.

이벤트 버블링에 대해서 말씀해주세요.

이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때, 해당 이벤트가 더 상위의 화면 요소들로 전달되어가는 특성을 의미합니다.
이벤트 버블링은 이벤트 위임의 동작 메커니즘이라고 볼 수 있습니다.

이벤트 버블링은 기본적으로 child => parent 인데 반대로 구현하는 방법은 무엇일까요?

반대로 구현하는 것을 이벤트 캡쳐라고 합니다.
addEventListener의 옵션 객체에 capture : true를 설정하면 됩니다.

이벤트 버블링을 막기위한 방법은 무엇일까요?

stopPropagation(); 웹 API를 사용하여 이벤트의 전파를 막을 수 있습니다.

이를 잘 활용하면 어떻게 사용할 수 있을까요?

이벤트가 발생한 요소는 상위의 요소들로 이벤트가 위임되는 특성을 활용해 TO-DO 리스트와 같이 체크박스가 일일히 추가되어야 하는 기능에서 체크박스의 상위 요소에 이벤트를 처리하게 함으로써 코드량을 줄이고 유지보수 및 공수를 크게 절약할 수 있습니다.

타입스크립트에 대해서 사용해 본적이 있나요?

타입스크립트는 기존의 자바스크립트에 정적 타입을 추가해 코드량이 많아지는 거대한 프로젝트에서 유지보수성을 크게 높일 수 있습니다.

실제 사용했을 때 느낄 수 있었던 가장 큰 장점은 타입이 지정되어 있기 때문에 기존 JS에 비해 IDE를 통한 함수 별 인수들을 한 눈에 확인할 수 있다는 점이 가장 큰 것 같습니다.

profile
임정민
이전 포스트

[면접대비 예상꼬리질문] 프론트엔드 개발자 취업 면접 질문 총정리 (장문, 꼬리에꼬리를 무는 질문 포함)

0개의 댓글