프론트엔드 면접/인터뷰 질문과 답변 (2024)

SPA와 SEO

SPA (Single Page Application)란 서버로부터 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말합니다. 즉, 현재의 HTML을 고정하고 변경되는 부분에 대해서만 서버에서 불러와 클라이언트 사이드에서 렌더링하는 방식인 것입니다.

(1)장점

페이지 로딩속도가 빠릅니다. 우선, 페이지 로딩속도가 빠릅니다. 클라이언트가 최초 요청에 서버로부터 모든 재료(html, css, js 등)를 가져오기 때문에 사용자의 요청에 대해 클라이언트 사이드에서 렌더링하기 때문에 서버로부터 데이터를 매번 가져올 필요가 없어 페이지 이동 간에 딜레이가 거의 없습니다.
사용자 경험이 우수합니다. 결국, 빠른 로딩속도는 사용자 경험을 증대시키고 사용자가 웹사이트에 머무는 데 있어 로딩으로 인한 피로도도 적을 것입니다.

(2) 단점

최초 페이지 로딩속도가 느립니다. 클라이언트가 최초로 서버에 요청할 때 모든 데이터를 가져오기 때문에 상대적으로 최초 요청에서 속도가 MPA에 비해 상대적으로 느립니다. 그러나 스마트폰 앱을 작동할 때 최초 로딩시간을 기꺼이 기다리는 사용자라면 이는 큰 문제가 되지 않을 것입니다.
SEO에 적합하지 않을 수 있습니다. 위의 문제를 해결하기 위해 아래와 같이 SSR (Server Side Rendering) 또는 동적 렌더링 (Dynamic Rendering), 그리고 History API를 이용하여 SEO, 즉, 검색엔진최적화를 할 수 있습니다.

(1) SSR (Server Side Rendering) 만약, 우리 사이트가 구축 전이어서 SEO 구축이 필요한 상황이라면 SPA를 SSR (서버사이드렌더링) 방식으로 구축하여야합니다. SPA는 기본적으로 CSR (Client-Side Rendering) 방식으로 구현됩니다. 즉, 서버에서는 HTML, JS 등 모든 재료를 다운 받은 후 클라이언트 단에서 렌더링을 하는 방식을 취합니다. 그러나 SPA이지만 크롤링에 더 친화적인 SSR 방식으로 사이트를 구축하는 것이 SEO의 관점에서 적합합니다. 참고로 대표적인 SSR 프레임워크로는 React의 Next.js, Vue의 Nuxt, Angular의 Angular Universal이 있습니다.

(2) 동적 렌더링 (Dynamic Rendering) 만약 우리 사이트가 이미 SPA의 CSR 방식으로 구현되어있거나, SSR을 사용하지 못한다면, 동적 렌더링 (Dynamic Rendering)을 통해 SEO할 수 있습니다. 동적 렌더링은 서버에서 요청하는 자가 사람인지 크롤러인지 판단하여 사람에게는 HTML과 js 등을 제공하고 크롤러에게는 사전에 렌더링된 HTML 버전의 페이지를 보여주는 방식입니다. 즉, 크롤러는 서버에서 이미 렌더링된 HTML 버전의 소스를 손쉽게 읽을 수 있게 됩니다. 동적 렌더링을 하는 방법으로는 react-helmet, prerender-spa-plugin, prerender.io, puppeteer, rendertron 등이 있습니다.

(3) History API History API는 SPA방식의 웹사이트에서 주소가 바뀌지 않는 문제를 해결하기 위해 싱글페이지이지만 주소를 부여하는 기능의 API입니다. History API는 어떤 렌더링 방식이든지 사용해야합니다. 과거 SPA환경에서 #또는 #!을 통해 주소를 구분하였지만 현재는 History API와 pushState() 방법을 통해 특수문자로 된 주소가 아닌 정적인 URL과 같은 주소를 설정할 수 있게 되었습니다. SEO의 관점에서 이는 크롤링뿐만 아니라 백링크를 얻기 용이하게 되었다고 볼 수 있습니다

DOM이란 무엇입니까? DOM은 문서 개체 모델을 나타냅니다. HTML 문서를 태그 트리로 표현한 것입니다. DOM 트리의 각 노드는 객체입니다. HTML 문서의 기본 요소는 태그입니다.
Virtual Dom
Event Loop 이벤트 루프 — 코드 실행을 관리하는 메커니즘입니다. 이벤트 처리 및 작업 실행을 올바른 순서로 처리합니다. 이벤트 루프의 주요 아이디어는 JavaScript가 단일 스레드 환경에서 실행되지만 비동기 작업을 처리할 수 있다는 것입니다. 서버 요청과 같은 비동기 작업이 완료되면 해당 이벤트를 이벤트 큐에 넣습니다. 이벤트 루프는 루프에서 작동하여 이러한 이벤트를 도착하는 순서대로 처리합니다. 대기열에서 이벤트를 가져와서 실행을 위해 전달합니다. 이벤트에 콜백이나 핸들러가 포함되어 있으면 이벤트가 호출되고 해당 이벤트와 연결된 코드가 실행됩니다. 이벤트 루프는 타이머 및 마이크로 작업(Promise)과 같은 다른 작업도 처리합니다. 일관성을 보장하고 코드 실행의 기본 스레드가 차단되는 것을 방지하기 위해 이러한 모든 작업의 실행 순서를 관리합니다. 간단히 말해서 JavaScript의 이벤트 루프는 대기열의 이벤트를 처리하고 해당 코드를 올바른 순서로 실행하여 비동기 작업을 관리합니다. 이를 통해 JavaScript는 비동기 작업을 수행할 때 응답성이 뛰어나고 리소스를 효과적으로 활용할 수 있습니다.

JavaScript의 마이크로 및 매크로 작업이란 무엇입니까? JavaScript에서 마이크로태스크와 매크로태스크는 이벤트 루프에서 실행되어야 하는 작업 유형을 나타냅니다. 마이크로태스크는 브라우저가 페이지를 다시 그리기 전에 현재 이벤트 루프 내에서 실행되어야 하는 작업입니다. 일반적으로 Promise.then(), process.nextTick()(Node.js에서) 또는 MutationObserver와 같은 메서드를 사용하여 실행 대기열에 추가됩니다. 마이크로태스크의 예로는 Promise 핸들러 실행 및 DOM 변형이 있습니다. 반면, 매크로태스크는 현재 이벤트 루프가 완료된 후 변경 사항이 화면에 렌더링되기 전에 실행되어야 하는 작업입니다. 여기에는 setTimeout, setInterval, requestAnimationFrame을 사용하여 이벤트 대기열에 추가된 작업과 입력 이벤트 및 네트워크 요청 처리가 포함됩니다. 매크로태스크는 현재 이벤트 루프의 모든 마이크로태스크가 처리된 후에 실행됩니다. 마이크로태스크와 매크로태스크의 차이점은 실행 순서를 결정하고 JavaScript에서 다양한 작업의 우선순위를 관리할 수 있게 해주기 때문에 중요합니다. 마이크로태스크는 우선순위가 더 높고 매크로태스크보다 먼저 실행되므로 인터페이스 업데이트가 더 빨라지고 기본 JavaScript 실행 스레드가 차단되는 것을 방지할 수 있습니다.

Rendering and paint, reflow
Prototype 프로토타입은 객체 지향 프로그래밍에서 상속을 구현하는 데 사용됩니다. 프로토타입을 기반으로 다른 개체를 만들 수 있습니다. 생성된 객체는 프로토타입의 메서드와 속성을 자동으로 상속받습니다. 객체에 속성이 없으면 해당 검색은 프로토타입에서 수행됩니다.
Optional Chaining 연산자란 무엇입니까? 선택적 연결 연산자 ?. ? 이후의 부분이 있으면 평가를 중지하고 정의되지 않은 값을 반환합니다. 정의되지 않았거나 null입니다.
Closure 클로저는 함수와 함수가 선언된 렉시컬 환경의 조합입니다. 클로저는 함수가 선언된 위치에서 외부 변수에 대한 참조를 기억합니다. 클로저는 외부 변수에 대한 참조를 유지하고 해당 변수가 소멸되더라도 해당 변수에 대한 참조를 사용하여 함수를 호출할 수 있습니다.
Promise
async, await async 함수는 항상 Promise를 반환합니다. await 키워드는 async 함수 내에서만 사용할 수 있습니다. await 키워드는 Promise가 처리되거나 거부될 때까지 async 함수의 실행을 일시 중지합니다. await 키워드는 Promise가 처리되면 해당 값을 반환하고, 거부되면 예외를 throw합니다.
Deep Copy 깊은 복사는 객체의 모든 속성을 복사하는 것을 의미합니다. 깊은 복사를 수행하면 원본 객체와 복사본 객체가 서로 독립적이며 변경 사항이 서로에게 영향을 주지 않습니다. 깊은 복사를 수행하는 방법에는 JSON.stringify() 및 JSON.parse()를 사용하는 방법, lodash의 cloneDeep() 메서드를 사용하는 방법, 객체의 속성을 반복하고 복사하는 방법 등이 있습니다.
함수의 컨텍스트를 변경하는 방법은 무엇입니까? 바인딩된 컨텍스트가 포함된 새 함수를 반환하는 바인딩() 메서드를 사용합니다 . apply(), call(), bind() 메서드를 사용하여 함수의 컨텍스트를 변경할 수 있습니다. apply() 메서드는 함수를 호출하고 this 값과 인수 배열을 전달합니다. call() 메서드는 함수를 호출하고 this 값과 인수 목록을 전달합니다. bind() 메서드는 함수를 호출할 때 사용할 this 값을 설정하고 새 함수를 반환합니다.
재귀란 무엇인가요? 사용 방법? 재귀는 함수가 자체 함수 본문 내에서 자신을 재사용하여 문제를 해결하는 문제 해결에 대한 접근 방식입니다. 종료조건이 필요합니다.
함수 표현과 함수 선언의 차이점은 무엇인가요? 함수 선언은 함수를 선언하는 전통적인 방법입니다. 함수 선언을 사용하면 다른 값과 마찬가지로 함수가 생성되어 변수에 할당됩니다. 본질적으로 함수는 변수 "foo"에 저장된 값이므로 함수가 어떻게 정의되는지는 중요하지 않습니다. 그러나 함수 선언은 코드 블록이 실행되기 전에 처리됩니다. 즉, 전체 코드 블록에서 볼 수 있습니다. 반면, 함수 표현식은 실행 흐름이 도달할 때만 생성됩니다.
생성자 함수란 무엇입니까? 생성자 함수는 객체를 생성하는 데 사용되는 일반 함수입니다. 그러나 이를 사용하는 데에는 두 가지 규칙이 있습니다.

생성자 함수의 이름은 대문자로 시작해야 합니다. 생성자 함수는 new 연산자를 사용하여 호출해야 합니다.

new 연산자를 사용하여 생성자 함수를 만들면 다음과 같은 일이 발생합니다.

새로운 빈 객체가 생성되어 여기에 할당됩니다. 생성자 함수 내부의 코드가 실행됩니다. 일반적으로 이 코드는 this 개체를 수정하고 새 속성을 추가합니다. 이 값이 반환됩니다.

ES6의 새로운 기능에 대한 예를 제공하세요. 가장 일반적인 것:

하자 및 const. 블록 범위로 변수를 선언하기 위한 새로운 키워드 let 및 const가 도입되었습니다. 화살표 기능. 화살표 함수의 개념을 사용하면 보다 간결하고 명확한 함수 정의가 가능합니다.

기본 매개변수. 함수 매개변수의 기본값을 정의할 수 있습니다.

스프레드 연산자(…). 스프레드 연산자를 사용하면 함수 인수에 대한 배열 또는 객체 요소의 압축을 풀거나 새 배열/객체를 만들 수 있습니다.

구조 파괴. 구조 분해를 통해 배열이나 객체에서 값을 추출하고 이를 변수에 할당할 수 있습니다.

브라우저에 데이터를 저장하는 방법은 무엇입니까? 브라우저에 데이터를 저장하는 방법에는 여러 가지가 있습니다. LocalStorage 및 SessionStorage — 브라우저에 키-값 쌍을 저장합니다. 여기에 저장된 데이터는 페이지를 새로 고친 후에도 유지됩니다. 두 저장소 옵션 모두 문자열만 키와 값으로 사용할 수 있으므로 JSON.stringify()를 사용하여 객체를 변환해야 합니다. 쿠키 — 브라우저에 저장되는 작은 데이터 문자열입니다. 쿠키는 일반적으로 Set-Cookie 헤더를 사용하여 웹 서버에 의해 설정됩니다. 그런 다음 브라우저는 쿠키 헤더를 사용하여 동일한 도메인에 대한 거의 모든 요청에 자동으로 추가합니다. 하나의 쿠키는 최대 4kb의 데이터를 저장할 수 있습니다. 브라우저에 따라 사이트당 20개 이상의 쿠키가 허용됩니다. IndexedDB — 내장 데이터베이스로 localStorage보다 더 강력합니다. 여러 유형의 키를 사용할 수 있고 값은 거의 모든 것이 될 수 있는 키-값 저장소입니다. IndexedDB는 안정성을 위해 트랜잭션을 지원하고, 키 범위 쿼리 및 인덱스를 지원하며, localStorage보다 더 많은 데이터를 저장할 수 있습니다. IndexedDB는 오프라인 애플리케이션용으로 설계되었으며 서비스 워커 및 기타 기술과 결합될 수 있습니다. 자세히 알아보기 자세히 알아보기 자세히 알아보기
sessionStorage와 localStorage의 차이점은 무엇입니까? SessionStorage와 localStorage를 사용하면 브라우저에 키-값 형식으로 객체를 저장할 수 있습니다. 주요 차이점은 다음과 같습니다.

localStorage는 최대 10MB의 데이터를 저장할 수 있고, sessionStorage는 최대 5MB를 저장할 수 있습니다. localStorage의 데이터는 삭제되지 않지만, sessionStorage의 데이터는 브라우저 탭을 닫을 때 삭제됩니다. localStorage의 데이터는 모든 창에서 액세스할 수 있는 반면, sessionStorage의 데이터는 동일한 브라우저 창에서만 액세스할 수 있습니다. 더 알아보기

정규식이란 무엇입니까? 정규식은 특별한 규칙과 패턴으로 정의된 문자열입니다. 문자열 내의 복잡한 구조를 감지하고 작업할 수 있는 강력한 도구입니다.
동일한 필드를 가진 두 개체를 비교할 때 왜 false가 반환됩니까? 객체는 메모리 영역에 대한 참조를 기반으로 비교됩니다. JavaScript의 경우 test1 및 test2 객체는 동일한 필드를 갖고 있어도 서로 다릅니다. 객체는 동일한 객체인 경우에만 동일합니다.

사용자 인터페이스 브라우저 엔진 (새로고침) 렌더링 엔진 (화면에 표시)

렌더링 엔진 동작과정 파싱 : HTML 문서가 문법에 맞는지 확인하며 파스트리를 구성하고 이를 기반으로 DOM 트리를 생성한다. CSS 파싱: CSS 파일을 파싱하여 CSSOM 트리를 생성한다 . 렌더트리 구축 : DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 생성한다. 레이아웃(리플로우) : 렌더 트리를 기반으로 각 노드의 크기와 위치를 계산한다. 페인팅 : 레이아웃을 기반으로 각 노드를 화면에 그린다.