프론트 엔드 기술면접 준비하기(프론트엔드 면접질문)

프론트 엔드 기술면접 질문 20가지를 정리해 보았으며
이번에 정리한 내용은 react, vue 프레임워크 상관없이 프론트엔드 개발자가 필수적으로 알아야 되는 항목들입니다

 

 

1. 브라우저 렌더링 원리

• HTML 파일을 서버로부터 내려받은 후 파싱하여 DOM 트리를 구축합니다
• 이후 CSS 파일을 파싱 하여 CSSOM 트리를 구축합니다
• 이때 HTML중간에 자바스크립트가 있다면 HTML파싱을 중단하고 자바스크립트를 실행합니다
• 이후 DOM 트리와 CSSOM 트리를 결합하여 렌더트리를 구축합니다
• 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기를 계산하며 이를 Layout 단계라 합니다
• 계산한 위치/크기를 기반으로 화면에 그리며 이를 Paint 단계라 합니다

 

 

2. Reflow와 Repaint 가 실행되는 시점

• Reflow
  • 엘리먼트 추가, 제거 또는 변경
  • CSS추가, 제거 또는 변경,
  • 유저 행동, hover 이벤트 등 리플로우 트리거 가능
• Repaint
  • 가시성시 변경되는 순간
  • Reflow 가 실행된 순간 뒤에 실행

 

3. 주소창에 google.com을 입력하면

• 사용자가 브라우저 주소창에 google.com 을 입력하면 입력한 도메인을 DNS서버에서 검색합니다
• DNS서버에서 해당 도메인 네임에 해당하는 IP주소를 찾아 사용자가 입력한 URL정보와 함께 전달합니다
• 브라우저는 HTTP 프로토콜을 사용하여 요청 메시지를 생성하고 
  HTTP 요청 메시지는 TCP/IP 프로토콜을 사용하여 서버로 전송합니다
• 서버는 응답 메시지를 생성하여 다시 브라우저에게 데이터를 전송합니다
• 브라우저는 응답을 받아 파싱 하여 화면에 렌더링 합니다

 

4. 호이스팅

• 변수 및 함수 선언문이 스코프 내의 최상단으로 끌어올려지는 현상

 

5. 클로저

• 내부함수가 외부함수에 접근할수있는 기능으로 외부함수의 실행이 종료되어도 해당 변수에 대한 참조를 유지합니다

 

6. CSS margin, padding

• margin : 바깥쪽 여백
• padding : 안쪽 여백

 

7. CSS position

• static : 요소를 일반적인 문서흐름에 따라 배치
• relative : static + 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋 적용
• absolute : 일반적인 문서흐름을 제거, 가장 가까운 위치 지정 조상 요소에 대해 상대적 배치
• fixed : 일반 적긴 문서 흐름을 제거, 바뀌지 않는 위치 지정
• sticky : static + fixed 특징을 동시에 가진다

 

8. REST API

• 자원을 이름으로 구분하여 해당 자원에 상태를 주고받는 것,
  HTTP URI를 통해 자원을 명시하고 HTTP 메서드를 통해 해당 자원에 대해 CRUD를 적용합니다

 

9. this 용법

• 호출 패턴에 따라 다른 객체를 참조하며 실행 컨텍스트가 실행될 때마다 this 바인딩이 이루어지며 아래와 같은 우선순위를 가지고 있습니다

1. new를 사용했을 때 해당 객체로 바인딩됩니다
2. call, apply, bind와 같은 명시적 바인딩을 사용했을 때는 인자로 전달된 객체에 바인딩됩니다
3. 객체의 메소드로 호출할 경우 해당 객체에 바인딩됩니다
4. 그 외로는 엄격모드에서는 undefiend로 초기화되며, 일반적으로는 window 객체에 바인딩됩니다

 

10. 브라우저 저장소의 차이점

• 로컬스토리지
  도메인 별로 별도의 로컬스토리지가 생성이 되며 데이터를 직접적으로 지우지 않는 이상 영구적으로 보관이 가능합니다
  
  
• 세션 스토리지
  세션 종료 시 클라이언트에 대한 정보가 삭제됩니다
  
  
• 쿠키
  웹사이트에서 쿠키를 설정하면 모든 웹요청에는 쿠키가 포함됩니다

 

11. Restful API

• REST API를 제공하는 웹사이트를 Restful 하다고 할 수 있습니다

• GET : 요청받은 URI의 정보를 검색하여 응답합니다
• POST : 요청된 자원을 생성합니다
• DELETE : 요청 된 자원을 삭제합니다
• PUT : 요청 된 자원 전체를 수정합니다
• PATCH : 요청 된 자원 일부를 수정합니다

 

12. 자바스크립트는 어떤 언어인가

• 싱글 스레드, 논블록킹
  자바스크립트는 비동기 처리를 통해 싱글 스레드이지만 블록킹 되지 않게 합니다
  하나의 요청이 완료될 때까지 기다리지 않고 동시에 다른 작업을 수행합니다
  
  
• 싱글 스레드
  스레드가 하나밖에 존재하지 않아 한번에 하나의 작업만 수행할 수 있습니다
  
  
• 스레드
  어떠한 프로그램 내에서 특히 프로세스 내에서 실행되는 흐름에 단계입니다
  
  
• 비동기 처리
  특정 로직의 실행이 끝날 때까지 기다려 주지 않고 나머지 코드를 먼저 실행합니다

 

13. 자바스크립트 비동기 코딩

• Promise
  자바스크립트 비동기 객체이며 다음과 같은 3가지의 상태를 가지고 있습니다
  Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
  Fulfilled(이행) : 비동기 처리가 완료되어 프로미스 결과 값을 반환한 상태
  Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태
  
  
• async/await
  기존 비동기 처리 방식인 콜백함수와 프로미스의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성할 수 있게 합니다
  예외처리에 try/catch를 사용해야 합니다

 

14. 이벤트 루프

• 이벤트 루프는 콜스택이 비워져 있으면 콜백 큐에 존재하는 함수를 하나씩 콜스택에 옮겨주는 역할을 수행합니다

 

15. 마이크로 태스크 큐, 매크로 태스크큐

• 2개의 큐 모두 콜백함수가 들어간다는 점에서는 동일하지만, 어떤 함수를 실행하느냐에 따라 어디로 들어가는지가 달라지며 마이크로 태스크 큐가 우선순위를 가지고 있습니다
  
  매크로 태스크 큐
      setTimeout, setInterval, UI 렌더링 등
  
  마이크로 태스크 큐
     process.nextTick, Promise 등
  
  
  

16. 이벤트 전파

• 이벤트 버블링
  이벤트 발생 요소로부터 상위 요소로 이벤트가 전파되는 과정입니다
  
  
• 이벤트 캡쳐링
  상위 요소로부터 실제 이벤트 발생 요소까지 이벤트가 전파되는 과정입니다
  
  
• 이벤트 위임
  이벤트 리스너를 하위요소 대신 상위 요소에 추가함으로써 성능을 개선하는 기법입니다

 

17. 타입 스크립트

• 타입을 명시하지 않는 자바스크립트와 달리 정적타입을 명시하여 사용합니다
• 코드에 목적을 명시하고 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 제거합니다

 

18. 실행 컨텍스트

• 코드가 실행되는 환경을 나타내며 변수,함수, 객체 등의 식별자와 스코프, this 바인딩 등의 정보를 담고있어 코드의 실행 흐름을 관리하고 제어합니다

 

19. SPA, CSR, SSR, SEO

• SPA(Single Page Application)
  최초 한번 페이지 전체를 로딩한 후로부터 데이터만 변경해서 사용할 수 있는 웹 애플리케이션입니다
  
  
• CSR(Client Side Rendering)
  최초 로드 시 필요한 파일들을 전부 받고 사용자에 인터렉션에 따라서 클라이언트 단에서 렌더링을 해주는 방식입니다
  
  
• SSR(Server Side Rendering)
  요청 시마다 새로고침이 일어나며 서버에 새로운 페이지에 대한 요청을 하는 방식입니다
  
  
• SEO(Search Engine Optimization)
  검색 엔진 최적화 라고 하며 특정 웹페이지가 검색 결과 상위에 노출될 수 있도록 하는 작업입니다

 

20. null, undefined, undeclared, NaN

• null
  빈값입니다
  
  
• undefined
  정의되지 않았으며, var 선언문 같은 경우는 호이스팅 되었을 때 변수 선언과 초기화가 동시에 일어나기 때문에 undefined로 초기화됩니다
  
  
• undeclared
  선언되지 않았으며, let, const 선언문 같은 경우 호이스팅 되었을 때 변수 선언과 함수 선언이 따로 이루어지기에 때문에 변수가 undeclared 가 되며 에러가 발생합니다
  
  
• NaN
  표현 불가능한 수치형 결과입니다

 

 

 

다음에는 면접 때 자주 나오는 CS(Computer Science)와 react, vue 각 프레임워크에서 나오는 면접 질문들을 정리해 보도록 하겠습니다