기술 면접 예상 질문 정리(1)

DOM(Document Object Model)이란

DOM은 HTML, XML 문서의 프로그래밍 interface이다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조 그리고 스타일을 읽고 조작할 수 있는 API를 제공한다.

• DOM의 생성 방식
  DOM은 원본 HTML문서의 객체 기반 표현 방식이며 DOM의 개체 구조는 노드 트리로 표현된다.
• DOM과 HTML의 차이점
  DOM은 HTML 문서로부터 생성이 되지만 항상 동일하지는 않다.
• HTML : 최초에 화면을 그릴 때 사용하는 설계도
• DOM: 설계도를 이용하여 실제로 화면에 나타내지는 인터페이스
  DOM과 HTML은 두가지 케이스에서 달라질 수 있다
• 작성된 HTML문서가 유효하지않을때 DOM트리에서는 교정되어서 나타난다
• Javascript에 의해 DOM이 수정될 때 DOM은 인터페이스이자 동시에 동적자원이 되어서 수정될 수 있다.

DOM Elements 제어

• document.createElement("name")
  - 지정된 네임의 HTML Element를 만들어 반환함
• element.classList.add("class")
  - 지정한 class값을 추가한다
• element.classList.remove("class")
  - 지정한 class값을 제거한다
• element.classList.toggle("class")
  - class가 있으면 제거 없으며 생성한다.
• element.setAttribute("attribute", "value")
  - attribute: 속성의 특정 이름을 설정한다, value: 속성에 값을 할당한다.
• node.remove()
  - node를 제거한다
• element.appendChild(child)
  - element의 자식요소로 child가 들어가게된다.
• target.addEventListener(type, listner);
  - type: 이벤트명(ex. "click"), listner: 이벤트핸들러로 실행될 함수가 들어갈 부분

가상 DOM (리액트)

실제 돔의 가벼운 사본같은 개념이다. 실제 돔에 접근하여 조작하는 대신에 이것을 추상화시킨 자바스크립트 객체를 이용해 사용한다.

동작 순서

1. 변화가 일어나게 되면 변화된 버전을 가상돔으로 갈아끼운다
   데이터가 업데이트 되면 전체 UI를 가상돔에 리렌더링한다
2. 가상돔끼리 비교
   변화 전의 가상돔과 변화된 가상돔을 비교한다.
3. 바뀐부분만 적용
   바뀐 부분만 실제 돔에 적용을 함으로서 레이아웃 계산은 한번만 이행된다.

결론으로는 가상돔은 실제 돔 문서를 추상화한 개념으로, 변화가 많은 뷰를 실제돔에서 계속 처리하는 방식이 아닌 가상돔과 메모리에서 미리 처리하고 저장한 후에 실제 DOM과 동기화하는 개념

브라우저의 렌더링 과정

DNS주소 입력 => DNS주소 서버를 찾아감 => DNS가 연결해 줄 곳을 찾음 => 서버의 기본설정된 파일(예시. index.html)을 클라이언트로 보냄 => 브라우저는 index.html파일 파싱
=> DOM트리 생성 => 중간에 link태그를 만나 css요청 발생 시 css파싱 => 다시 html파일 읽고 DOM트리 완성 => 완성된 DOM트리와 CSSOM 트리를 합쳐 Render트리를 만듬
** 중간에 javascript코드가 있으면 제어권한을 javascript엔진에 넘기고 파일을 로드에서 파싱하고 실행한다

웹 프로토콜

HTTP(Hyper Text Transfer Protocol) 통신

인터넷에서 데이터를 주고 받을 수 있는 통신 규약이며, 요청과 응답으로 이루어져있다. 1.1과 2.0의 가장 큰 차이는 속도이며, 2.0은 헤더를 압축해서 보내고 한번의 연결로 동시에 여러가지 메세지를 주고 받을 수도 있다

OOP(Object Oriented Programming

객체 지향 프로그래밍으로 VanillaJS를 구현할 때 객체지향으로 구현을 하는 것이 확장성이 뛰어나지만 React에서는 함수형을 더 지향하는거 같음
1. 상속: 상위 클래스에서 하위 클래스가 상위클래스의 메소드나 변수를 사용할 수 있는 것을 말함.
2. 다형성: 같은 함수가 있을때 함수가 매개변수에 따라 다른역할을 할 수도 있는 것
3. 캡슐화: 데이터 구조와 데이터를 다루는 방법들을 한 곳에 묶는 것
4. 추상화: 공통적인 속성이나 기능들을 묶어서 이름을 붙이는 것 (재활용성 측면에서 꼭 필요)

Function Programming

함수형 프로그래밍은 순수 함수와 보조 함수의 조합을 통해 로직 내에 존재하는 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임이다.
함수형 프로그래밍에서 순수함수의 개념은 같은입력 => 같은 출력을 반환해야 하며, side effect가 없어야 함. 즉, 예상 가능해야 한다. 대표적인 예로는 리덕스의 리듀서 함수가 있다.

OOP와의 가장 큰 차이

• 객체지향은 상태를 저장하고 이 상태를 가지고 상태변화를 설정하고 조정하기 위한 다양한 기능을 쓰지만
  함수형 프로그래밍은 순수함수를 통해 최대한 예상가능해야하고 side Effect를 억제하여 오류를 피하고 프로그래밍의 안정성을 높이는데에 초점을 더 맞춘다.

ajax란?

자바스크립트를 이용해 비동ㄱ적으로 서버와 브라우저가 데이터를 교환할 수 있는방식, 웹페이지가 반환되면 전체 갱신을 해야되지만 ajax를 사용하면 페이지 일부만을 갱신하고도 동일한 효과를 볼 수 있다

Promise & Callback

자바스크립트의 비동기를 처리할때 promise와 callback을 사용하는데 콜백의 경우 콜백지옥때문에 가독성이 떨어져서 많이 쓰지 않는다.

Callback

function async(callback) {
  setTimeout(() => {
    callback("1초 후 실행");
  }, 1000);
}

async(function (msg) {
  console.log(msg);
});

async함수는 첫번째 인자로 callback을 받고 callback이 실행 될 때 첫 번째 인자를 console에 출력합니다.

promise

function async() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("1초 후 실행");
    }, 1000);
  })
}

async().then(res => {
  console.log(res);
});

resolve는 성공했을 때 then의 첫번째인자 reject는 에러가 났을 때 첫 번째 인자로 값을 넘길 수 있습니다.

promise & callback 의 차이점

callback은 비동기 로직 결과값을 처리할려면 callback안에서만 처리를 해야되고 밖에서는 값을 알 수가 없다. 하지만 promise를 사용하면 비동기에서 온 값이 promis 객체에 저장되기 때문에 코드 작성이 용이해집니다.
결국 callback은 매번 비동기를 실행해야 값을 얻을 수 있지만
promise의 경우 function.then을 통해 저장되어 있는 값을 원하는 때에 사용할 수 있습니다.

Async & Await

자바스크립트의 비동기 처리패턴 중 가장 최근에 나온 문법이고 기존 비동기 처리방식인 promise와 callback의 단점을 보완하고 가독성 좋은 코드를 작성할 수 이게 도와줍니다.

async function logName() {
  var user = await fetchUser('domain.com/users/1');
  if (user.id === 1) {
    console.log(user.name);
  }
}

위와 같이 비동기 처리를 동기적인 로직으로 처리할 수 있다.
예외처리의 경우 함수 안에서 try,catch문을 이용해 error를 잡아낼 수 있습니다.

Javascript 타입

자바스크립트의 원시타입은 6종류로 boolean, string, number, undefined, null, symbol이 있고 undefinedsms 선언만 되어있고 값이 없는 상태이며 null은 자료형이 객체이고 빈값을 의미한다. 그리고 javacript에서는 number가 int,double이런 숫자타입을 구별하지 않고 모든 수 를 실수로 처리한다.

Execition Context

자바스크립트 코드들이 실행되기 위한 환경
전역 컨텍스트, 함수 컨텍스트 2가지가 존재하며 전역컨텍스트 하나 생성 후에 함수 호출할 때마다 함수 컨텍스트가 생성
컨텍스트 생성시에 변수객체, 스코프 체인, this가 생성된다. 그리고 함수가 실행되는데 사용되는 변수들은 변수 객체안에서 값을 찾고 없다면 스코프체인을 따라 올라가며 찾는다. 함수 실행이 마무리되면 해당 컨텍스트는 사라지고 페이지가 종료되면 전역 컨텍스트가 사라진다. 즉, 자바스크립트의 코드가 실행되기 위해서는 변수객체, 스코프체인, this 정보들을 잠고 있는 곳이 실행컨텍스트이다.

Javascript Hoisting

변수를 선언하고 초기화 했을때 선언 부분이 최상단으로 끌어올려지는 현상. 일반 함수선언문은 함수 호이스팅이 적용된다.

가비지컬렉터

메모리 할당을 추적하고 할당된 메모리 영역이 필요하지 않은 영역일 경우를 판단해서 회수하는 것. 자바스크립트에서 변수는 직접적으로 참조 값을 담고 있지않고, 해당 값이 메모리 상에 저장 된다. 그래서 참조 값을 생성하고나서 더이상 참조할 것이 없거나 비어있을 때 가비지 컬렉터가 동작해서 메모리를 반환한다.

이벤트 루프

Javascript는 싱글 스레드 기반 언어이다. 함수를 실행하면 함수 호출이 스택에 순차적으로 쌓이고 스택의 맨위에서부터 아래로 한번에 하나의 함수만 처리 할 수 있다. 하지만, 자바스크립트에서는 이벤트 루프라는것을 통해 동시성을 지원한다. 이벤트루프는 콜 스택에서 실행중인게 있는지 확인하고 이벤트 큐에 작업이 있는지 확인해서 콜스택이 비어있다면 이벤트큐 내의 작업이 콜스택으로 이동되어서 실행된다.5846

프로토타입

Javascript는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거한다. 생성자 함수가 생성할 모든 인스턴스가 공통적으로 사용할 프로퍼티나 메소드를 프로토타입에 미리 구현해 놔서 상위 객체의 자산을 공유하여 사용할 수 있다.

Babel

트랜스파일러이며, 한 언어로 작성된 소스코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것이다.(ES6 => ES5로 변환할때) 크롬을 제외한 다른 브라우저들의 경우에 ES6에 대한 스펙에 대한 지원이 완벽하지 않기 때문에 babel을 사용해서 브라우저가 이해할 수 있도록 ES6에서 ES5이하로 변환하여 사용한다.