프론트엔드 기술 면접 - 1

지은·2023년 3월 17일

FE 면접

목록 보기

1/4

1. 브라우저 렌더링 원리 / 홈페이지가 사용자에게 보이는 순서에 대해서 설명해주세요.

DOM Tree → CSSOM Tree → Render Tree → Layout → Paint

먼저 HTML과 CSS 파일을 파싱하여 DOM 트리와 CSSOM 트리를 생성하고, 둘을 결합하여 Render 트리를 생성합니다. 그런 다음 레이아웃 단계에서 요소의 크기와 위치를 계산하고, 레이아웃 계산이 끝나면 실제 화면에 그리는 페인트 단계를 거쳐 화면이 렌더링됩니다.

상세 답변

가장 먼저 브라우저의 렌더링 엔진은 HTML 파일을 파싱하여 DOM 트리를 생성합니다. HTML 파일을 파싱하던 중 style 태그를 만나면 CSS 파일을 파싱하여 CSSOM 트리를 만듭니다.
그러고나서 두 트리를 결합하여 Render 트리를 생성하는데, 이때 실제 화면에 보이지 않는 요소들은 렌더 트리에서 제외됩니다. (ex. display: none, meta 태그)
렌더 트리가 완성되면 렌더 트리를 기반으로 브라우저 화면의 어느 위치에 어떤 크기로 배치될지 결정하는 레이아웃 과정을 거칩니다. 이때 %, vh, vw 와 같이 상대적인 값은 px 로 변환됩니다.
레이아웃 계산이 끝나면 이 계산에 따라 요소들을 실제 화면에 그리는 페인트 단계를 거쳐 화면이 렌더링됩니다.

리플로우 : 웹 인터랙션으로 인해 렌더링 과정에서 레이아웃 단계를 반복 수행하는 것
리페인트 : 렌더링 과정의 페인트 단계를 반복 수행하는 것

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

호이스팅은 브라우저가 JavaScript를 해석할 때, 변수와 함수의 선언을 스코프의 최상단으로 끌어올리는 것을 말합니다. 이때 실제로 코드가 끌려올려지는 것은 아니고, JavaScript parser가 내부적으로 끌어올려 처리하는 것입니다.

상세 답변

따라서 함수 선언문이나 var로 선언한 변수는 해당 함수와 변수의 선언문에 도달하기 전에 함수를 사용하거나 변수를 참조할 수 있습니다.

하지만 let, const로 선언한 변수나 함수 표현식은 TDZ의 영향을 받기 때문에 초기화 이전에 참조할 시 참조 에러(Reference error)가 발생합니다.

3. 클로저는 무엇인가요? 원리와 왜 사용하는지 설명해주세요.

클로저란 반환된 내부 함수를 의미하기도 하고 내부 함수가 자신이 선언됐을 때의 어휘적 환경을 기억하여 그 렉시컬 스코프 밖에서 호출되어도 해당 스코프에 접근할 수 있는 환경을 말합니다.

클로저를 왜 사용하나요?

클로저를 통해 변수의 값을 외부에서 변경할 수 없도록 보호하고 싶을 때 사용할 수 있습니다.
예를 들어, 외부함수의 지역변수는 외부함수가 종료되면 더 이상 접근할 수 있는 방법이 없어지는데, 이 경우, 반환된 내부함수를 이용해야만 외부함수의 지역변수에 접근할 수 있습니다. 이를 통해 의도하지 않은 값의 변경을 막고 코드를 안전하게 유지할 수 있습니다.

어휘적 환경이 뭐죠?

어휘적 환경이란 "함수가 선언됐을 때의 함수의 주변 환경"을 의미합니다.
내부함수의 어휘적 환경에는 외부함수의 변수가 포함되어, 외부함수가 리턴되어도 나중에 클로저(내부함수)의 어휘적 환경에 접근하여 외부함수의 변수에 접근할 수 있습니다.

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

box model에서 margin은 요소의 border 밖의 여백을 조절하고, padding은 border 내부의 여백(컨텐츠와 border 사이의 여백)을 조절하는 데 사용합니다.

4-1. position을 어떻게 사용하는지 알려주세요.

기본값은 static으로 문서의 일반적인 흐름에 따라 배치됩니다. relative는 자신의 원래 있던 위치를 기준으로 top, left, right, bottom 속성에 지정한 값만큼 이동합니다. absolute는 position 속성이 relative인 가장 가까운 부모 요소를 기준으로 이동합니다. fixed는 요소가 뷰포트를 기준으로 이동하고, sticky는 요소가 스크롤 영역 내에서 일정 위치에 고정됩니다.

5. GET과 POST가 어떻게 다르게 쓰이는지 말씀해주세요.

GET은 서버로부터 데이터를 가져와 보여주는 데에 사용하며, 주로 검색 결과나 페이지 뷰 등을 요청할 때 사용됩니다. POST는 서버에게 데이터를 전송하기 위해 사용하며 주로 회원가입, 로그인 등에 사용됩니다.

GET 방식에 대해 더 자세하게 설명해주세요.

GET 방식은 URL 뒤에 쿼리 스트링(query string)의 형태로 데이터를 전송할 수 있습니다. (e.g. url?filter=cafe&order=latest) 쿼리 스트링은 ?로 시작하며 key=value 형태로 여러 개의 파라미터를 전달할 수 있습니다. 이 방식의 장점은 간단하고 빠르게 데이터를 전달할 수 있다는 것입니다. 하지만 URL 상에 데이터가 노출되기 때문에 보안에 취약합니다. 또한, 전송 데이터의 길이에 제한이 있습니다.

POST 방식에 대해 더 자세하게 설명해주세요.

POST 방식은 HTTP 메세지의 body에 데이터를 담아 전송할 수 있습니다. 이 방식은 GET 방식처럼 URL 상에 데이터가 노출되지 않기 때문에 보안적으로 더 안전하며, 전송 데이터의 길이에도 제한이 없습니다. 하지만 GET 방식보다 느리고 복잡하다는 단점이 있습니다.