Section 1. [기술 면접]

Notice

Recent Posts

Recent Comments

Link

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Jieunny의 블로그

Section 1. [기술 면접] 본문

CodeStates/learning contents

Section 1. [기술 면접]

Jieunny 2022. 12. 29. 16:19

📣 기술 면접 질문에 대한 답변을 미리 준비해보자.

📌 HTML

✔️ 브라우저의 렌더링 원리에 대해 설명해주세요.

➰ 브라우저는 렌더링 엔진을 사용해서 요소들을 렌더링하며, 렌더링 엔진은 CRP 프로세스를 거칩니다.

➕ CRP란 무엇인가?

➰ Critical Rendering Path

➰ 문서를 화면에 표현하기 위해 거치는 일련의 과정입니다.

1️⃣ HTML, CSS를 각각 파싱 후 DOM Tree와 CSSOM Tree를 구축하고, js를 실행합니다.

2️⃣ DOM Tree와 CSSOM Tree를 결합해 렌더트리를 구축합니다.

3️⃣ 렌더트리의 각 노드가 가지는 위치와 크기를 계산합니다. (Layout 단계)

4️⃣ 계산한 위치와 크기를 기반으로 픽셀로 변환해 화면에 그립니다. (Paint 단계)

➕ 파싱이 무엇인가?

➰ 문서의 내용을 토큰으로 분석하고, 이를 바탕으로 DOM Tree, CSSOM Tree를 생성하는 과정입니다.

➕ DOM Tree를 사용하는 이유는?

➰ 웹 페이지의 요소를 관리하기 위해 이들을 잘 반영하는 자료구조가 필요합니다.

➰ DOM은 트리 자료구조 형태를 가지고 있으며 문서를 읽어들이고 제어하기 좋습니다.

➕ 렌더링이 무엇인가?

➰ 개발자가 작성한 문서들을 브라우저가 렌더링 엔진을 통해 화면에 그려주는 동작입니다.

➰ DOM Tree와 CSSOM Tree를 이용해 Render Tree를 생성, 이를 배치하고 그립니다.

➕ 렌더트리는 무엇인가?

➰ DOM Tree + CSSOM Tree의 결합으로, 웹 페이지에 나타날 요소들의 위치를 계산하는데 사용됩니다.

🚨 이때, display: none 과 같은 속성은 렌더트리로 구축되지 않습니다.

✔️ Reflow와 Repaint가 실행되는 시점에 대해 말씀해주세요.

➰ Reflow는 엘리먼트 변경, CSS변경, 유저 행동(hover, 텍스트입력, 창 크기 변경) 등에 의해 트리거 됩니다.

➰ Repaint는 Reflow 과정이 끝난 후 또는 엘리먼트의 가시성에 변화가 있지만 레이아웃에는 영향을 미치지 않을 때 트리거 됩니다.

➕ Reflow 란?

➰ 생성된 DOM 노드의 레이아웃 수치 변경 시 영향 받은 모든 노드의 수치를 다시 계산하여 렌더 트리를 재생성하는 과정입니다.

➰ Reflow만 일어나면 실제 화면에 반영되지 않습니다.

➕ Repaint 란?

➰ Reflow 과정이 끝난 후 재생성된 렌더 트리를 다시 그리는 과정입니다.

➰ Repaint 과정까지 거쳐야 실제 화면에 변화가 일어납니다.

✏️ ✔️ CSS를 불러오기 위해 <link> 요소를 <head> 요소의 자식 요소로 하고, JS를 불러오기 위해 <script> 요소를 <body> 요소가 끝나기 직전에 위치시키는 이유는 무엇인가요?

➰ 렌더링이 제대로 이루어지게 하기 위함입니다.

➰ 파싱 과정에서 DOM Tree가 생성되도 CSSOM Tree가 없으면 렌더링이 되지 않기 때문에 빠르기 CSS 파일을 읽어와 렌더링을 완성하기 위함입니다. <head> 에 두어야 화면을 유저에게 빠르게 전달할 수 있습니다.

➰ 만약 <script>가 <head> 안에 있다면 파싱 과정에서 <script>를 만나면 파싱을 멈추고 <script> 파일을 읽습니다.

이 과정이 렌더링에 방해가 되어 사용자 입장에서 웹페이지가 느리게 보이기 때문입니다.

➕ 렌더링이 무엇인가?

➰ 개발자가 작성한 문서들을 브라우저가 렌더링 엔진을 통해 화면에 그려주는 동작입니다.

➰ DOM Tree와 CSSOM Tree를 이용해 Render Tree를 생성, 이를 배치하고 그립니다.

✔️ <li> 요소는 왜 <ul> 요소의 자식 요소여야만 하나요?

➰ 의미있는 코드를 구현하기 위함입니다.

➰ 화면상으로는 차이가 없지만 <ul>안에 <li>를 쓰게되면 다른 개발자가 봤을 때도 목록과 리스트를 보여주고 있다는 것을 쉽게 알 수 있습니다.

✔️ id 속성과 class 속성의 차이에 대해서 설명해주세요.

➰ id는 하나의 문서에 한 요소에만 사용가능하고, class는 여러 요소에 사용 가능합니다.

➰ id는 개별 스타일 지정을 위해 사용하고, class는 스타일의 분류를 위해 사용합니다.

📌 CSS

✏️ ✔️ CSS box model에 대해서 설명해주세요.

➰ 모든 HTML 요소는 박스모양으로 구성되며 이를 박스 모델이라고 부릅니다.

➰ 박스 모델은 HTML 요소를 content, padding, border, margin 으로 구분합니다.

✔️ 간단한 로그인 폼 컴포넌트를 가운데 위치시키려면 CSS를 어떻게 작성해야 하나요?(centering)

➰ Flexbox를 사용할 것 입니다.

➰ 로그인 폼 컴포넌트의 부모 요소에 display: flex, justify-content: center, align-items: center 를 지정합니다.

✔️ 간단한 블로그에서 아래와 같은 레이아웃을 구성하려면 CSS를 어떻게 작성해야 하나요?

➰ Flexbox를 사용할 것 입니다.

➰ author-container 요소에 display: flex, flex-direction: row 속성을 줍니다.

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

➰ margin은 border를 기준으로 바깥쪽 여백을 말하고, padding은 안쪽 여백을 말합니다.

✔️ CSS에서 position을 어떻게 사용하는지 알려주세요.

➰ position 속성은 요소를 배치하는 방법을 지정합니다.

➰ static, relative, absolute, fixed, sticky 가 있습니다.

➕ position 속성 종류

1️⃣ static : 요소를 일반적은 문서 흐름대로 배치합니다.

2️⃣ relative : static을 기준으로 top, bottom, left, right 값 만큼 떨어져 배치합니다.

3️⃣ absolute : 가장 가까운 위치 지정 요소(position이 static이 아닌)를 기준으로 top, bottom, left, right 값 만큼 떨어져 배치합니다.

4️⃣ fixed : 요소를 뷰포트를 기준으로 top, bottom, left, right 값 만큼 떨어져 배치하며, 스크롤을 하더라도 위치가 바뀌지 않습니다.

5️⃣ sticky : 평소에는 static과 같은 일반적은 흐름을 따르지만, 설정된 위치가 다다르면 fixed 처럼 배치되는 속성입니다.

➕ 뷰포트란?

➰ 현재 화면에 보여지고 있는 영역을 말합니다.

➰ 뷰포트 바깥의 콘텐츠는 스크롤 하기 전엔 보이지 않습니다.

📌 JavaScript

✔️ 스코프에 대해서 설명해주세요.

➰ 변수에 접근할 수 있는 범위를 말합니다.

➰ 블록 레벨 스코프, 함수 레벨 스코프, 렉시컬 스코프, 동적 스코프가 있습니다.

➰ 상위 스코프는 하위 스코프에서 선언한 변수에 접근할 수 없습니다.

✏️ ✔️ 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유에 대해서 설명해주세요.

➰ 배열과 객체는 참조 자료형이기 때문에 값 자체가 아닌 주소를 저장하고 있기 때문입니다.

➰ stack에는 주소가, heap에는 실제 배열 요소들이 저장되어 있는데 실제 배열 요소들을 변경해도 주소는 바뀌지 않습니다.

✔️ 원시 자료형과 참조 자료형에 대해서 설명해주세요.

➰ 원시 자료형은 고정된 저장 공간을 차지하고, 참조 자료형의 저장 공간은 동적입니다.

➰ 원시 자료형에는 number, boolean, string 등이 있고 참조 자료형에는 배열,객체,함수가 있습니다.

➰ 원시 자료형은 stack에 값을 저장하고, 참조 자료형은 heap에 저장합니다.

✔️ 얕은 복사와 깊은 복사에 대해서 설명해주세요.

➰ 얕은 복사는 주소 값을 복사한다는 의미이고, 깊은 복사는 실제 값을 복사한다는 의미입니다.

얕은 복사	깊은 복사
아주 최소한만 복사	데이터 자체를 통째로 복사
인스턴스가 메모리에 새로 생성되지 않음 (하나 바꾸면 나머지 하나도 바뀜)	복사된 두 객체는 완전히 독립적인 메모리 차지(하나 바꿔도 하나 안바뀜)
참조 자료형	원시 자료형

➰ copy() 메소드는 참조 자료형도 깊은 복사

🚨 참조 자료형 내부에 참조 자료형을 가지고 있는 경우

➰ 외부 자료형을 copy()로 깊은 복사를 해도 내부 자료형은 얕은 복사가 일어난다.

(참조 자료형을 복사하는 경우 명시하지 않으면 기본적으로 얕은 복사가 일어난다.)

🚨 원시 자료형 내부에 참조 자료형을 가지고 있는 경우

➰ 원시 자료형은 깊은 복사, 참조 자료형은 얕은 복사가 일어난다.

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

➰ 코드가 실행되기 전 변수나 함수의 선언문의 최상단으로 끌어올려지는 것 같은 현상을 말합니다.

➰ 때문에 var 변수 선언, 함수선언문은 선언보다 호출이 먼저 나와도 에러가 나지 않습니다.

➕ 추가 설명

➰ 자바스크립트 엔진은 코들르 실행하기 전, 실행 가능한 코드를 형상화하고 구분하는 '실행 컨텍스트 형성' 과정을 거칩니다.

이 과정에서 모든 변수(var, let, const, function, class) 선언이 변수 객체 메모리에 저장됩니다.

코드 실행 전 이미 선언이 저장되어 있기 때문에 선언문보다 참조 및 호출이 먼저 나와도 동작할 수 있습니다.

➕ 변수의 생성 단계?

1️⃣ 선언 단계 : 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계

2️⃣ 초기화 단계 : 실행 컨텍스트에 존재하는 변수 객체에 선언 단계에서 생성한 변수를 위한 메모리를 만드는 단계

(이 단계에서 할당된 메모리에 undefined를 할당한다.)

3️⃣ 할당 단계 : 초기화 단계에서 undefined으로 초기화 된 메모리에 다른 값을 할당하는 단계

➕ 실행 컨텍스트란?

➰ 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다.

➕ var 변수는 왜 호이스팅이 일어나는가?

➰ 선언 단계와 초기화 단계가 동시에 진행되서 실행 컨텍스트의 변수 객체에 변수를 등록하는 동시에 undefined으로 초기화 하기 때문입니다.

➕ let 변수는 호이스팅이 일어나지 않는 것인가?

➰ 호이스팅이 일어납니다.

➰ 선언 단계와 초기화 단계가 분리되어 진행되기 때문에, 변수 객체에 변수가 등록만 되고 메모리에 할당되지 않아 접근하지 못해 에러가 나는 것입니다.

➕ 함수표현식은 호이스팅이 일어나지 않는 것인가?

➰ 호이스팅이 일어납니다.

➰ 함수표현식은 변수에 함수를 할당하는 형태이기 때문에 변수 호이스팅 사례로 볼 수 있습니다.

var 함수의 경우 undefined으로 초기화가 되기 때문에 함수로 인식되지 않기 때문입니다.

✔️ 클로저에 대해 설명해주세요.

➰ 클로저는 함수와 함수가 선언된 어휘적 환경의 조합입니다.

➕ 어휘적 환경이란?

➰ 함수가 선언된 주변 환경을 의미합니다. 외부 함수의 변수가 내부 함수의 어휘적 환경에 포함됩니다.

➰ 떄문에 외부 함수가 리턴 되어도 내부 함수에 접근하여 외부 함수의 변수에 접근할 수 있습니다.

➕ 클로저를 언제 사용하나요?

➰ private 메서드를 구현하기 위해서 활용할 수 있습니다.

➰ 클로저 내에 있는 변수는 외부에서 접근할 수 없기 때문에 클로저 내에 있는 변수를 활용 할 수 있는 private 메서드만 따로 노출시켜서 사용할 수 있습니다.

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

➰ this는 호출 방식에 따라 다른 객체를 참조합니다.

➰ 실행 컨텍스트가 생성될 때 this의 바인딩이 일어나게 됩니다.

➕ 자바스크립트 함수 호출 방식에 따른 this 바인딩

1️⃣ 함수 호출 : 전역 객체에 바인딩 됩니다. (기본 바인딩)

const foo = function(){
  console.log(this);
}

foo(); // window

2️⃣ 메소드 호출(함수가 객체의 메서드로 호출되는 상황) : 해당 메소드를 소유한 객체에 바인딩 됩니다. (암시적 바인딩)

var person = {
  name: 'Lee',
  printName: function() {
    console.log(this.name);
  }
}

person.printName() // Lee

3️⃣ call(), apply(), bind() 호출 : 내가 명시한 객체에 바인딩 됩니다. (명시적 바인딩)

const foo = {
  a: 20,
}

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

bar.call(foo); // 20
bar.apply(foo); // 20

➰ bar 함수를 실행할 때의 this 컨텍스트를 foo로 직접 바인딩 해주었습니다.

const foo = {
  a: 20,
}

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

const bound = bar.bind(foo)

bound(); // 20

➰ bind 메서드는 매개변수로 전달받은 오브젝트로 this가 바인딩된 함수를 반환합니다.

4️⃣ 화살표 함수 : 화살표 함수를 정의하는 시점의 컨텍스트 객체가 this에 바인딩 됩니다.

const foo = {
  a: 20,
  bar: function () {
    setTimeout(() => {
      console.log(this.a);
    }, 1);
  }
}

foo.bar(); // 20

➰ setTimeout의 콜백인 화살표 함수의 선언시에 this는 foo 객체를 가리키고 있기 때문에(lexical scope), 콜백이 실행될 때 this는 foo를 가리키게 됩니다.

➕ 바인딩이란?

➰ 프로그램에 사용된 구성 요서의 구체적인 값을 확정하는 것을 말합니다.

➕ call(), apply(), bind() ?

➰ 자바스크립트의 모든 function 은 call, apply, bind라는 프로토타입 메소드를 가지고 있습니다.

➕ 프로토타입이란?

➰ 클래스나 객체의 내용 복사 없이도 상속의 효과를 구현할 수 있게 해줍니다.

✔️ JavaScript는 어떤 언어인가요?

➰ 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어 입니다.

➰ 싱글 스레드 이면서 논 블록킹 언어 입니다.

➕ 싱글 스레드가 무엇인가?

➰ 스레드가 하나밖에 존재하지 않아 한번에 하나의 작업만 할 수 있습니다.

➕ 논 블록킹이 무엇인가?

➰ 추가적인 JS 실행을 위해 JS가 아닌 작업이 완료될 때 까지 기다리지 않아도 되는 것입니다.

➕ 비동기 처리란 무엇인가?

➰ 특정 로직의 실행이 끝날때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 처리방식 입니다.

➕ 동기적 처리란?

➰ 먼저 시작된 일이 반환되야 다음 일이 실행되는 것을 말합니다.

➕ 자바스크립트는 싱글 스레드인데 어떻게 비동기 처리가 가능한가?

➰ Web API, Task Queue, Event Loop 등 자바스크립트 실행에 관여하는 요소들 때문입니다.

✔️ JavaScript에서 비동기적으로 코딩하는 법을 알려주세요.

➰ 자바스크립트는 단일 스레드로 동작하며, 비동기 환경이 별도로 존재합니다.

➰ 비동기 환경은 자바스크립트 엔진 외부에 위치하며 Event loop, Task queue, Job Queue로 구성됩니다.

➰ setTimeout, Fetch 등 기본적으로 제공되는 API 함수나, Promise, Async로 비동기 처리를 구현할 수 있습니다.

➕ 관련 내용 블로깅

✔️ null, undefined, undeclared, NaN 에 대해 설명해주세요.

1️⃣ undefined : 선언은 되었지만 아직 할당이 되지 않아 undefined로 초기화 된 상태입니다.

2️⃣ undeclared : 선언조차 되지 않아서 참조시에 에러를 발생시키는 상태입니다.

typeof undeclared 는 undefined 입니다.

3️⃣ null : 선언, 초기화 후 변수에 null을 할당한 상태입니다.

typeof null 은 object 입니다.

4️⃣ NaN : 컴퓨터에서 숫자로 나타낼 수 없는 상태입니다. (Not a Number)

📌 DOM

✔️ innerHTML 메서드와 textContent 메서드의 차이에 대해서 설명해주세요.

➰ innerHTML은 HTML태그도 같이 가져오고, textContent는 마크업 태그를 제외한 문자열을 가져온다.

🚨 innerHTML vs innerText vs textContent

➰ innerHTML은 HTML 태그요소들까지 가져온다.

➰ innerText는 태그 값은 불러오지 않고, display: none; 한 값도 불러오지 않는다. (마크업 언어가 적용된 상태라는 뜻)

➰ textContent 는 마크업 태그 적용은 상관없이 문자열을 불러온다.

✏️ ✔️ event.preventDefault 메서드는 언제, 왜 사용하는지 설명해주세요.

➰ 기본으로 정의된 이벤트를 작동하지 못하게 하기 위해 사용합니다.

➰ <a>태그나 <submit> 태그 처럼 페이지 이동, 새로고침 등 자동으로 동작하는 것을 막기 위해 사용합니다.

저작자표시

'CodeStates > learning contents' 카테고리의 다른 글

S2) Unit 1. [JS] 고차함수 (0)	2023.01.12
Unit 11. 페이지 네이션 & 웹 스토리지 (0)	2023.01.04
Unit 10. [JS/브라우저] 이벤트 객체 (0)	2022.12.28
Unit 10. [JS/DOM] 유효성 검사 (0)	2022.12.27
Unit 10. [JS/브라우저] DOM 기초 (0)	2022.12.26

'CodeStates/learning contents' Related Articles

Jieunny의 블로그

Section 1. [기술 면접] 본문

Section 1. [기술 면접]

📣 기술 면접 질문에 대한 답변을 미리 준비해보자.

📌 HTML

📌 CSS

📌 JavaScript

📌 DOM

'CodeStates > learning contents' 카테고리의 다른 글

티스토리툴바