프론트엔드 기술 면접 질문 정리

오늘은 프론트엔드 기술 면접을 CS 지식 및 각종 면접 팁을 정리해보고자 합니다.
기술 면접을 보며 직접 받았던 질문 중 기억에 남는 것들 또한 공유하려고 합니다.
제가 직접 수기로 작성한 답변이기에, 100% 정확한 답변은 아닐 수 있으니 참고만 부탁드립니다.

---

Frontend

Q1. 브라우저의 렌더링 과정에 대해서 설명해주세요.

브라우저에서 렌더링이란 HTML, CSS, JavaScript 등의 문서를 받아와 웹 페이지를 화면에 그리는 것을 의미합니다.
렌더링 과정은 다음과 같습니다.

1. HTML을 파싱해서 DOM 트리를 생성합니다.
2. CSS를 파싱하여 CSSOM 트리를 생성합니다.
3. 파싱 중에 script 태그를 만나면, 자바스크립트 코드를 실행하기 위해 DOM 생성을 중지하고 자바스크립트 엔진으로 제어권을 넘깁니다.
4. 자바스크립트 실행이 완료되면 다시 HTML 파싱을 이어가고, DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성합니다.
5. 브라우저는 렌더 트리를 기반으로 각 요소의 위치와 크기를 계산합니다.
6. 계산된 정보를 바탕으로 브라우저는 화면에 요소를 그립니다.

Q2. 그렇다면 렌더링 성능을 최적화 하기 위한 방법은 무엇이 있나요?

렌더링을 최적화하는 이유는 사용자 경험을 향상시키기 위해서입니다.
성능을 최적화하기 위해 다양한 방법이 존재하지만, 제 경험에 빗대어 설명하자면 다음과 같습니다.

1. 폰트 최적화

폰트에는 다양한 포맷이 있습니다.
포맷에 따라 압축 방법이 다른데, 대부분의 브라우저에서는 압축율이 좋은 woff2 포맷을 지원합니다.
저의 경우, 압축율이 좋아 폰트의 용량이 적은 woff2 형식을 사용합니다.

2. 이미지 최적화

이미지 최적화는 이미지의 크기와 품질을 조절하여 렌더링 성능을 향상시키는 방법입니다.
이미지 포맷을 최적화하여 크기를 줄이고 있습니다.
부득이하게 용량이 큰 이미지를 사용해야하는 경우 Lazy Loading을 사용하여 렌더링 성능을 향상시킵니다.
Lazy Loading이란, 이미지가 화면에 보일 때 이미지를 로드하는 방식입니다.

3. CSS 및 Javascript 최적화

사용하지 않는 CSS를 제거하고, minify 하여 용량을 줄입니다.
CSS의 경우 클래스 선택자가 ID, 태그 선택자보다 성능이 좋기 때문에 클래스 선택자를 우선해서 사용합니다.

Javascript는 코드 스플리팅을 통해 번들링 크기를 최소화 시키며,
또한, 비동기 로딩을 통해 렌더링 성능을 향상시킵니다.

Q3. CI/CD 배포 경험이 있나요? 있다면 본인의 경험에 비추어 설명해주세요.

저는 업무 환경과 개인 프로젝트에서 각각 다른 CI/CD 도구를 활용한 경험이 있습니다.

1. 회사 프로젝트 - Jenkins

Git 저장소와 연동하여 특정 브랜치에 코드가 merge 되면 자동 빌드 및 테스트를 진행했습니다.
저의 경우, React 애플리케이션의 사용자 흐름에 대한 테스트 시나리오를 Playwright로 작성했습니다.

제가 직접 Jenkins 환경을 설정하지 않아서 Jenkins에 대한 심도있는 이해는 없지만,
백엔드 팀과의 협업을 통해 프론트엔드 빌드 및 배포 환경을 구축했습니다.

2. 개인 프로젝트 - Vercel

개인 블로그 개발 및 개인 프로젝트에서는 vercel을 활용해서 더 간소화된 배포 환경을 구축했습니다.
Github 저장소와 Vercel을 연동하여 프로덕션 브랜치 (main)에 코드가 푸시되면 자동 배포되는 환경을 구축했으며,
주요 프레임워크를 자동으로 감지해서 최적화된 빌드 설정을 적용해주었기 때문에 최적화된 성능으로 배포할 수 있었습니다.

Q4. 테스트 코드를 작성하셨다고 했는데 테스트 코드에 대해 설명해주세요.

제가 주로 진행했던 React 환경에서 많이 사용하는 테스트 방식에 대해 설명해보겠습니다.
우선, 테스트 방식 유형에는 단위 테스트, 컴포넌트 테스트, 통합 테스트, E2E 테스트가 있습니다.
저는 이중, E2E 테스트 과정에서 playwright를 사용한 경험이 있습니다.
이를 통해 버그를 조기 발견하고, CI/CD 파이프라인에서 자동으로 테스트를 진행하였으므로 안정적인 배포를 보장할 수 있었습니다.

Q5. CORS 에러를 겪은 경험이 있나요? 있다면 해당 에러를 해결하기 위한 방법에 대해 설명해주세요.

CORS 에러는 웹 페이지가 제공하는 도메인이 아닌 다른 도메인에서 리소스를 요청하는 것을 의미합니다.
저의 경우, 회사 프로젝트에서 백엔드 서버와 통신하는 과정에서 CORS 에러를 겪은 경험이 있습니다.
WebOS 환경에서 개발을 진행했기 때문에, 로컬 개발환경과 WebOS 환경은 서로 다른 보안 정책을 가지고 있어,
로컬 환경에서는 CORS 에러가 발생하더라도 WebOS 환경에서는 정상적으로 작동하는 경우가 대부분이었습니다.

개발 시에 해결책으로 브라우저 확장 프로그램을 이용한 경험이 있으나, 이는 개발 환경에 국한되는 해결책이며,
production 환경에서 해당 문제를 해결하기 위해 백엔드 서버에서 CORS 설정을 추가해달라는 요청을 통해 해결했습니다.

Q6. SPA, CSR, SSR에 대해 설명해주세요

1. SPA - Single Page Application

전체 페이지를 다시 로드하는 것이 아닌, 변경된 부분만 동적으로 업데이트 하는 방식을 의미합니다.
새로고침이 발생하지 않기 때문에 매끄럽고 응답성이 뛰어나 사용자 경험을 향상시킵니다.

2. CSR - Client Side Rendering

웹 어플리케이션에 접속한 사용자의 브라우저에서 Javascript를 통해 서버에서 필요한 데이터를 요청하고,
클라이언트 측에서 웹 어플리케이션을 동적으로 렌더링 하는 것을 의미합니다.
동적으로 DOM을 생성하는 시간을 기다려야하기 때문에 초기 속도가 느리다는 단점이 있지만,
초기 로딩 이후 페이지 변경 시에는 서버에서 데이터만 요청을 하면 되므로 빠른 응답성을 보장합니다.

3. SSR - Server Side Rendering

HTML을 클라이언트에 보내기 전, 서버 측에서 웹 어플리케이션을 렌더링 하는 것을 의미합니다.
서버는 클라이언트에게 요청을 받으면 미리 렌더링 된 페이지를 제공하고,
이 방식은 CSR에 비해서 초기 로딩 속도가 빠르고, 페이지가 처음 로드될 때 콘텐츠가 검색 엔진에 노출되므로 검색 엔진 최적화(SEO)에 유리합니다.

JavaScript

Q7. 이벤트 루프에 대해 설명해주세요.

자바스크립트는 싱글 스레드 언어입니다.
따라서 한 번에 하나의 작업만 수행이 가능한데, 웹 브라우저에서 자바스크립트가 어떻게 비동기 작업을 처리하는지 설명할 수 있는 매커니즘이 바로 이벤트 루프입니다.

이벤트 루프는 다음과 같은 순서로 작동합니다.

1. Call Stack

자바스크립트의 함수 호출은 콜스택에 순차적으로 쌓이고, 하나씩 실행됩니다.

2. Microtask Queue

이벤트 루프는 콜스택을 확인한 후에, 콜스택이 비어있다면 마이크로테스크 큐에서 대기하는 작업들을 콜스택에 추가합니다.
마이크로테스크 큐에는 Promise, async/await 등의 작업들이 있습니다.

3. Macrotask Queue

이벤트 루프는 콜스택을 확인 후에, 비어있는 콜스택에 마이크로테스크 큐에서 대기하는 작업을 추가한 후,
마이크로테스크 큐를 비우고 다시 콜스택을 확인 후 비어있다면 매크로테스크 큐의 작업을 콜스택으로 추가합니다.
매크로테스크 큐에는 setTimeout, setInterval 등의 작업들이 있습니다.

Q8. 실행 컨텍스트에 대해 설명해주세요.

실행 컨텍스트란 자바스크립트 코드가 실행되는 환경을 추상화한 것을 의미합니다.
코드가 실행될 떄 필요한 정보를 담고있는 객체라고 이해하고 있습니다.
실행 컨텍스트는, 변수 환경, 스코프 체인, this 바인딩의 주요 구성 요소를 가집니다.

1. 변수 환경

여기서 변수 선언var와 함수 선언문이 저장이 되며, 이는 호이스팅에 기반이 되는 요소입니다.
렉시컬 환경 또한 변수 선언과 함수 선언을 저장하는 공간이지만 렉시컬 환경에서는 let, const 등의 변수 선언이 저장됩니다.
렉시컬 환경 에서는 블록 스포크로 묶인 영역에서 변수 선언이 저장되며, 외부 환경에 대한 참조도 포함해서 스코프 체인을 생성합니다.

2. 스코프 체인

자바스크립트 엔진이 변수를 찾아가는 경로를 의미합니다.
자바스크립트는 렉시컬 환경에서 먼저 해당 변수를 찾아가고, 없다면 스코프 체인을 통해 외부 환경에 있는 변수를 찾아가며 올라가는데, 이는 전역 컨텍스트까지 올라가며 찾아가게 됩니다.
이러한 과정을 통해 변수를 찾아가는 것을 스코프 체인이라고 합니다.

3. this 바인딩

현재 컨텍스트에서 this가 가리키는 객체를 의미합니다.
함수가 어떻게 호출되었는지에 따라 결정되는데, 일반 함수와 화살표 함수에 차이가 있습니다.
일반 함수에서 this는 window 객체를 가리키고, 화살표 함수에서 this는 자신만의 this를 가지지 않으며, 상위 환경의 this를 참조합니다.
이는 브라우저 환경에서이고 Node.js 환경에서는 global 객체를 가리킵니다.

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

클로저는 함수가 속한 렉시컬 스코프를 기억하여, 함수가 렉시컬 스코프 밖에서 실행될 때에도 그 스코프에 접근할 수 있는 함수를 의미합니다.
예를 들어 부모 함수에서 변수를 선언하고 자식 함수를 반환할 경우, 이 자식 함수는 부모 함수의 실행이 종료 된 후에도 부모 함수의 변수에 계속 접근할 수 있게 됩니다.

실행 컨텍스트 개념에 의하면 함수가 실행된 후 종료되면 해당 실행 콘텍스트는 소멸되지만, 클로저의 경우 외부 함수의 렉시컬 환경은 내부 함수가 이를 참조하는 한 소멸되지 않습니다.
자바스크립트 엔진은 내부 함수가 외부 변수를 참조하고 있다는 것을 감지하고, 그 변수들을 메모리에서 해제시키지 않아 가비지 콜렉션에서 제외되므로
메모리 누수 측면에서 주의해야 합니다.

클로저는 제가 주로 사용하는 라이브러리인 react에도 사용되는 개념입니다.

useState가 그 예시라고 할 수 있는데, [state, setState]가 선언되는 시점에서 useState의 호출은 끝나지만,
클로저가 내부의 state 값을 기억하고 있으므로 이후에도 접근이 가능합니다.

Q10. 프로토타입에 대해 설명해주세요.

자바스크립트는 프로토타입에 기반한 언어입니다.
자바스크립트의 모든 객체는 부모 역할을 하는 객체와 연결되어 있고, 이는 상속과 같은 개념입니다.
인스턴스가 사용할 프로퍼티나 메소드를 부모 객체의 프로토타입에 구현해놓으면 부모 객체의 프로퍼티나 메서드를 자신의 것처럼 쓸 수 있습니다.
자바스크립트에서 이러한 부모 객체를 프로토타입이라 합니다.

예를 들어, object로 생성된 객체는 Object.prototype을 프로토타입으로 가지고 있습니다.
제가 직접 구현한 객체에서 저는 entries, values 등의 메서드를 작성한 적이 없지만,
이 메서드들을 사용할 수 있는 이유는 Object.prototype에 정의되어 있기 때문입니다.
자바스크립트 엔진은 객체에서 특정 프로퍼티나 메서드를 찾을 때, 해당 객체에 없다면 프로토타입 체인을 따라 상위 프로토타입에서 찾아보는 방식으로 작동합니다.

---

(추가 작성 중)