개발 기본 상식

출처 : https://github.com/junh0328/prepare_frontend_interview/

클로저

클로저에 대해 아시나요?

반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수

클로저를 사용하면 뭐가 좋죠? 🔥🔥

  • 현재 상태를 기억하고 변경된 최신 상태를 유지
  • 전역 변수의 사용 억제
  • 정보의 은닉

클로저를 어떻게 생성하나요? 🔥

  1. 내부(중첩) 함수가 익명 함수로 되어 외부 함수의 반환값으로 사용될 때
  2. 내부(중첩) 함수가 외부 함수의 스코프에서 실행될 때
  3. 내부 함수에서 사용되는 변수가 외부 함수의 변수 스코프에 포함되어 있을 때

클래스

자바스크립트에서 클래스와 상속은 생성자 함수와 프로토타입을 사용하여 구현할 수 있다. 하지만 프로토타입을 사용한 구현은 직관적이지 않고 번거로운 면이 있다. 이러한 문제를 해결하기 위해 ES2015에서 class키워드를 이용한 새로운 문법이 등장하였다. 이 문법은 문법적 설탕(Syntactic sugar)으로 좀 더 편하고 세련되게 클래스와 상속을 구현할 수 있게 해준다.

자바스크립트에서 클래스가 생기기 전에는 어떤 방식으로 객체지향 패턴을 구현했나요?

자바스크립트는 프로토타입 기반 객체지향 언어로서, 클래스가 필요 없는 객체지향 프로그래밍 언어이다. 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있었다. 자바스크립트에서는 프로토타입 기반의 객체지향 프로그래밍을 기반으로 설계되었지만, #이에 어려움을 느끼는 객체지향 프로그래밍에 익숙한 프로그래머들을 위해 ES6부터 클래스 개념을 도입하였다.

그럼 생성자 함수와 클래스는 어떤 차이가 있나요?

클래스는 new 키워드가 필수이지만 생성자함수는 그렇지않다 클래스는 상속 키워드를 제공한다 extends , super 클래스내 모든코드는 strict 모드 적용됨

스프레드 문법 🔥

spread 문법이 뭔가요?

이 문법을 사용하면, 객체 혹은 배열을 펼칠수있습니다. 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서 개별적인 값들의 목록으로 만드는 것. 값을 만드는게 아니기 때문에 변수에 할당할 수 없다. 따라서 단독으로 사용될 수 없다.

어떤 상황에서 사용할 수 있죠?

함수 호출문의 인수 목록 배열 리터럴의 요소 목록 객체 리터럴의 프로퍼티 목록 (최신 버전)

구조 분해 할당 🔥

구조 분해 할당이 뭔가요?

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

구조 분해 할당은 크게 어떤 종류가 있나요?


// 기본할당
var o = {p: 42, q: true};
var {p, q} = o;

// 선언 없는 할당
var a, b;
({a, b} = {a: 1, b: 2});

// 새로운 변수 이름으로 할당하기
var o = {p: 42, q: true};
var {p: foo, q: bar} = o;

브라우저 렌더링 과정 🔥

https://vanillaani.tistory.com/7

image

브라우저의 렌더링 과정에 대해 설명해보세요 🔥

  1. 브라우저 주소창에 특정 주소를 입력한다 (ex. “www.google.com”)
  2. 해당 주소의 서버를 찾아가고 DNS가 실제 서버가 있는 곳으로 연결을 해준다. 이 때 http, https 각 조건에 맞는 방식으로 통신한다.
  3. 서버의 기본 설정이 대부분 index.html로 되어있으므로 이 파일을 서버에서 클라이언트 쪽으로 보내준다.
  4. index.html을 받은 브라우저에서는 텍스트로 이루어진 이 파일을 파싱하면서 DOM 트리를 만들어 나간다.
  5. html을 읽다가 중간에 link tag를 만나서 css 요청이 발생하면 요청과 응답과정을 거쳐 css를 파싱한다.
  6. css 파싱이 종료 되면 잠시 중단 되었던 html 을 다시 읽고 DOM tree를 완성시킨다.
  7. 완성된 DOM tree와 CSSOM tree를 합쳐서 Render tree를 만들게 된다.
    ( Render tree를 통해 문서가 시각적 요소를 포함한 형태로 구성이 된 상태가 되는 것이다)
  8. html 파서는 파싱을 하다가 script tag를 만나면 JS 코드를 실행하기 위해서 파싱을 중단한다.
  9. 제어 권한을 JS engine에게 넘기고, JS 코드 또는 파일을 로드해서 파싱하고 실행한다.

브라우저의 렌더링 과정에 자바스크립트는 어떻게 동작하나요? 🔥

더링 엔진은 HTML 문서를 한 줄씩 순차적으로 파싱하다가 자바스크립트 파일을 로드하는 script 태그를 만나면 DOM 생성을 일시 중단한다.

script 태그의 src에 정의된 자바스크립트 파일을 서버에 요청하여 응답받으면 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에게 제어권을 넘긴다.

자바스크립트 파싱이 끝나면 렌더링 엔진으로 다시 제어권을 넘기고 DOM 생성을 이어나간다.

만약 생성되지 않은 DOM을 조작한다면 에러가 발생할 수 있다. 따라서 body 요소 아래에 자바스크립트를 위치 시키거나 DOM 생성이 완료된 시점에 자바스크립트가 실행되도록 한다.

자바스크립트 코드를 토크나이저가 어휘 분석하여 문법적 의미를 갖는 코드의 최소 단위인 토큰들로 분해하는데 이것을 토큰나이징이라 한다. 파서가 토큰들을 구문분석하여 AST(Abstract Syntax Tree : 추상 구문 트리)로 파싱한다. 바이트 코드 생성기가 AST를 바이트코드로 변환한다. 인터프리터에 의해 바이트코드를 실행한다.

<script></script> 태그를 <body></body> 태그 밑에 둬야하는 이유가 있을까요?

우 무거운 자바스크립트 코드들이 포함되어 있다면 어떨까?

그 코드들을 불러오고 실행하느라, 그 밑에 있는 html 코드들이 로딩되지 못하게 될 것이고,

이는 브라우저가 렌더링 되는 것에 방해가 될 수 있다.

그래서 사용자는 완성되지 않은 중간 화면을 오랫동안 쳐다보고 있어야 할지도 모른다.

DOM 🔥

DOM이 뭔가요?

` 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

웹 페이지는 일종의 문서(document)다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다. DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.

W3C DOM, WHATWG DOM 표준은 대부분의 브라우저에서 DOM 을 구현하는 기준이다. 많은 브라우저들이 표준 규약에서 제공하는 기능 외에도 추가적인 기능들을 제공하기 때문에 사용자가 작성한 문서들이 각기 다른 DOM 이 적용된 다양한 브라우저 환경에서 동작할 수 있다는 사실을 항상 인지하고 있어야 한다.

예를 들어, 표준 DOM 에서는 문서 안에서 모든 <P> elements 에 대한 list 를 리턴하는 getElementsByTagName method 를 정의하고 있다: `

DOM을 구성하는 건 뭐가 있나요?

1) 문서 노드 (Document Node)
트리의 최상위에 존재하며 이 문서 노드를 통해 각각의 요소 노드, 어트리뷰트 노드, 텍스트 노드에 접근할 수 있다. 2) 요소 노드 (Element Node)
모든 HTML 요소를 말한다. 이 요소 노드는 상하 관계를 가지며 이 상하 관계를 통해 정보를 구조화 한다. 어트리뷰트 노드와 텍스트 노드에 접근하려면 요소노드를 통해 접근할 수 있다. 3) 어트리뷰트 노드 (Attribute Node)
HTML 요소의 속성들을 표현한다. 이 어트리뷰트 노드는 지정된 요소의 자식이 아닌 해당 요소의 일부로 표현된다. 어트리뷰트를 추가하거나 수정하려면 해당 요소 노드를 찾아 접근하면 된다. 4) 텍스트 노드 (Text Node)
HTML 요소의 텍스트를 표현한다. 이 노드는 요소 노드의 자식이며 자신의 자식 노드를 가질 수 없다. 다시 말해서, 텍스트 노드는 DOM tree의 가장 끝부분에 해당하는 노드이다.

이벤트 🔥

마우스 이벤트 타입에는 뭐가 있나요? click 말고 클릭을 대체할 수 있는 이벤트가 있나요? 그 외에 알고 있는 대표적인 이벤트가 있나요?

  1. 마우스 이벤트의 종류
  2. click
  • 사용자해 해당 element를 클릭했을 때(버튼을 눌렀다가 떼었을 때) 발생 합니다.
  1. mousedown
  • 사용자가 해당 element에서 마우스 버튼을 눌렀을 때 발생합니다.
  1. mouseup
  • 사용자가 해당 element에서 눌렀던 마우스 버튼을 떼었을 때 발생합니다.
  1. dblclick
  • 사용자가 해당 element에서 마우스 버튼을 더블 클릭했을 때 발생합니다.
  1. mousemove
  • 사용자가 해당 element에서 마우스를 움직였을 때 발생합니다.
  1. mouseover
  • 사용자가 마우스를 해당 element 바깥에서 안으로 옮겼을 때 발생합니다.
  1. mouseout
  • 사용자가 마우스를 해당 element 안에서 바깥으로 옮겼을 때 발생합니다.
  1. mouseenter

  • 사용자가 마우스를 해당 element 바깥에서 안으로 옮겼을 때 발생합니다.

  • 버블링이 발생하지 않습니다.

  1. mouseleave

  • 사용자가 마우스를 해당 element 안에서 바깥으로 옮겼을 때 발생합니다.

  • 버블링이 발생하지 않습니다.

  1. contextmenu
  • 마우스 오른쪽 버튼을 눌렀을 때 발생합니다.

이벤트 핸들러를 등록하는 방식에는 어떤 것들이 있나요?

이벤트 연결 사용자가 실제 이벤트를 발생시켰을 때 그 이벤트에 대응하여 처리하는 것 => ‘이벤트 핸들러’ ‘이벤트 핸들러’는 앞에 ‘on’을 붙여 주고 이벤트에 대한 동작(함수)을 처리

이벤트 전파(propagation)에 대해서 알고 있나요?

이벤트 위임(delegation)에 대해서 알고있나요? 🔥

e.preventDefault 에 대해 알고 있나요?

e.stopPropagation

타이머 🔥

호출 스케쥴링이 무엇인가요? 타이머 함수에는 어떤 것들이 있나요? 이벤트가 과도하게 호출되어 성능에 문제를 일으킬 경우에 할 수 있는 어떤 일을 통해 해결할 수 있나요? 디바운스에 대해서 알고 있나요? 쓰로틀에 대해서 알고 있나요? 비동기 프로그래밍 🔥

동기와 비동기의 차이점에 대해서 설명해줄 수 있나요? 🔥🔥

한줄 요약 이벤트 루프와 태스크 큐에 대해서 알고 있나요? 🔥🔥🔥

마이크로태스크 큐에 대해서 알고 있나요? 🔥🔥

태스크 큐와 마이크로태스크 큐 중 어떤 것이 먼저 실행되나요? 🔥🔥

Ajax 🔥

Ajax가 뭔가요 어떤 것을 담당하고 있죠? Ajax를 사용하면 기존 방식과 어떤 차이가 있을까요? JSON 이 뭔가요? JSON이 제공하는 정적 프로토타입 메서드에 대해 몇가지 말해볼 수 있나요? Ajax로 HTTP 요청을 보내기 위해서는 어떤 방법을 사용할 수 있나요? XMLHttpRequest와 fetch 메서드의 차이는 무엇이라고 생각하시나요? 🔥 REST API 🔥

REST API가 뭔가요? REST API의 구성은 어떤 것이 있나요? REST API를 설계하는데 중요한 것이 있을까요? HTTP 요청 메서드에 대해서 아는대로 얘기해보세요 HTTP 상태 코드를 아는대로 말해주세요 🔥 Promise 🔥

콜백이란 뭐라고 생각하나요? 🔥 프로미스가 뭔가요? 🔥 프로미스 생성 방법 프로미스의 상태를 나타내는 것은 어떤 것들이 있나요? 🔥 프로미스 빌트인 객체가 제공하는 정적 메서드에 대해 알고 있나요? 🔥 제너레이터와 async await 🔥

제너레이터란 뭔가요? 일반 함수와는 어떤 차이가 있죠? 제너레이터의 구조 async/await 가 뭔가요? 기존의 Promise와는 어떤 차이가 있죠? 🔥 Promise와 async/await의 차이점 한 줄 요약 🔥 에러 🔥

에러처리를 왜 해야 하나요? 🔥 자바스크립트에서 에러를 처리하는 방법에는 뭐가 있을까요? 모듈 🔥

모듈이 뭔가요?