프론트엔드 면접 빈출 질문 20개

 
안녕하세요, 오늘은 신입 프론트엔드 개발자를 위한 프론트엔드 신입 기술 면접 질문 30개를 소개하고 어떻게 답을 준비해야 하는지 준비하는데 도움이 되었으면 좋겠습니다. 또한 본 포스팅 내용은 개인적인 견해임을 밝힙니다.
 

1. 자신의 강점과 약점은 무엇인가요? ⭐⭐⭐⭐⭐

준비 요령: 강점에 대한 대답은 회사의 인재상, 기업 PR 자료나 대표의 인터뷰, 사업 보고서 등을 보고 자신의 강점에 대한 답변을 준비하는 게 좋습니다. 약점에 대한 대답은 자신의 약점에 대한 보완을 인지하고 있고, 지속적으로 보완하려는 노력을 보여줄 수 있는 게 좋습니다.
 
추가 팁: 이어지는 질문으로 강점을 발휘한 사례와 단점을 발휘한 사례에 대한 답변까지 준비할 수 있다면 꼼꼼하게 잘 준비할 수 있겠죠?
 

2. 어떤 프레임워크를 사용하여 개발했나요? 그 프레임워크를 사용한 이유가 있나요? ⭐⭐⭐⭐⭐

준비 요령: 자신이 프로젝트에 사용한 라이브러리, 프레임워크를 선정한 이유와 기획한 프로젝트의 목표에 해당 프레임워크의 강점을 잘 드러냈던 예시를 설명할 수 있도록 준비하는 것이 좋습니다.
 
추가 팁: 다른 프레임워크 또는 라이브러리와 어떤 장/단점이 있고 해당 프레임워크를 채택한 이유에 대해 잘 설명해줄 수 있다면 좋습니다.
 

3. async/await에 대해 설명해보세요. ⭐⭐⭐⭐⭐

async와 await는 비동기 작업을 처리할 수 있는 ES2017 문법입니다.
 
async 함수를 정의하면 함수 내부에서 await 키워드를 이용하여 비동기적으로 처리되는 작업이 완료될 때까지 기다린 후, 결과값을 반환하는 처리를 할 수 있습니다.
 
async/await는 Promise를 기반으로 동작하며 코드를 보다 간결하고 직관적으로 작성할 수 있도록 도와줍니다. async 함수는 항상 Promise 객체를 반환하며 await 키워드를 이용하여 비동기 처리 결과를 기다립니다.
 

준비 요령: 추가로 비동기가 어떤 동작 원리인지 설명할 수 있도록 준비한다면 좋습니다.

 

4. 비동기 함수에 대해서 설명해보세요. ⭐⭐⭐⭐⭐

비동기 함수(Asynchronous function)는 함수의 실행 결과가 즉시 반환되지 않고, 특정 조건이 충족될 때까지 기다리는 함수입니다. 비동기 함수는 일반적으로 콜백 함수나 Promise 객체를 반환합니다. 콜백 함수는 비동기 작업이 완료되었을 때 호출되는 함수이며, Promise 객체는 비동기 작업이 성공적으로 완료되었는지 또는 실패했는지를 나타내는 객체입니다.
 
비동기 함수를 사용하는 목적은 애플리케이션의 성능을 향상시키고, 사용자 인터페이스의 반응성을 유지하기 위해 사용합니다. 비동기 함수를 사용할 때 주의해야 할 점은 콜백 지옥과 같은 문제를 해결하기 위해 적절한 에러 처리와 코드 구성이 필요합니다.
 
여러 개의 비동기 함수가 실행되면 이벤트 루프는 비동기 함수 호출을 처리하고 비동기 함수가 완료되었을 때 콜백 함수를 호출합니다. 이벤트 루프는 실행 대기 중인 비동기 함수가 있으면 해당 함수를 호출하고 실행이 완료될 때까지 다음 비동기 함수를 호출합니다. 따라서 여러 개의 비동기 함수가 실행될 때 이 함수는 동시에 실행되며 이벤트 루프에 의해 비동기 함수의 실행 순서가 제어됩니다.
 
준비 요령: 프론트엔드 기술 면접에서 굉장히 자주 물어보는 질문으로 비동기 함수와 이벤트 루프에 대한 이해하는 것이 필요합니다.
 

5. 호이스팅에 대해 설명해보세요. ⭐⭐⭐⭐⭐

호이스팅은 변수와 함수 선언이 스코프(scope)의 최상단으로 올려져 실행되는 것을 의미합니다. 이로 인해 선언 전에 사용하는 경우 오류가 발생할 수 있습니다.

 

준비 요령: 변수 선언의 3단계인 선언 > 초기화 > 할당 순서에 대해서 대답하는 연습을 해야 합니다. 코드 동작 원리는 이해하더라도 면접가기 전에 말로 하는 연습이 필요한 질문이라고 생각합니다.

 

6. 이벤트 버블링에 대해서 설명해주세요. ⭐⭐⭐⭐⭐

이벤트 버블링은 HTML에서 이벤트가 발생했을 때 해당 요소에서 이벤트가 처리된 후 상위 요소로 이벤트가 전파되는 현상을 말합니다. 이벤트 버블링은 이벤트가 전파되는 동안 부모 요소에서도 이벤트를 감지할 수 있다는 장점이 있습니다. 이벤트 처리하는 핸들러 함수를 부모 요소에 등록해놓으면 자식 요소에서 발생한 이벤트도 모두 처리할 수 있습니다. 이를 활용하면 여러 개의 하위 요소에서 발생하는 이벤트를 하나의 이벤트 핸들러로 바인딩하는 이벤트 위임 처리를 할 수 있습니다.
 
버블링 및 캡쳐링을 방지하기 위해서는 이벤트 객체의 stopPropagation() 메서드를 사용하여 이벤트 전파를 중지시키거나 이벤트 핸들러에서 이벤트가 발생한 요소를 확인하여 처리해야 합니다.
 
준비 요령: 이벤트 버블링과 이벤트 캡쳐링은 함께 숙지하고 둘의 차이점에 대해 설명할 수 있어야 합니다. 또한 이벤트 위임에 대해서도 알고 있는 것이 좋습니다.
 
 

7. Flex와 Grid의 차이점에 대해서 설명해보세요. ⭐⭐⭐⭐

Flex는 주로 단일 축 방향의 레이아웃을 구성하는 데 사용되며, 주로 수평 방향으로 레이아웃을 정렬합니다. Flex는 아이템들의 크기가 자유로워 유동적으로 변할 수 있습니다. Flex는 유동적인 레이아웃 변화를 구성(예를 들어 반응형 웹 구현)하기에 적합합니다.
 
Grid는 2차원 그리드 시스템을 구성하는 데 사용되며, 수평과 수직 방향으로 모두 레이아웃을 정렬할 수 있습니다. Grid는 아이템들의 크기를 미리 정의하여 각 셀의 크기를 일정하게 유지합니다. Grid는 미리 정의된 2차원 그리드 구조를 유지하기 때문에 레이아웃 변화가 적은 경우에 적합합니다.
 

8. 클로저(Closure)란 무엇인가요?⭐⭐⭐⭐⭐

함수가 선언될 때 자동으로 생성되는 렉시컬 환경에 대한 설명입니다. 이러한 렉시컬 환경은 스코프 체인(scope chain)을 형성하게 되는데, 스코프 체인은 함수가 선언될 떄 모든 변수와 함수를 포함하는 렉시컬 스코프(lexical scope)를 형성합니다. 외부 함수가 실행되고 반환된 후에도 외부 함수의 범위 내의 함수에 체이닝을 할 수 있는 함수입니다. private 한 정보를 관리할 때 주로 사용합니다.
 
추가 팁: 클로저는 매우 중요한 개념으로 꼭 이해하고 설명할 수 있어야 합니다.
 

9. RESTful API에 대해 설명해주세요.⭐⭐⭐⭐⭐

RESTful API는 HTTP 프로토콜을 기반으로 하는 웹 서비스 아키텍처입니다. 자원, 메서드, 메시지 등을 정의하여 클라이언트-서버 간의 통신을 가능하게 합니다. 또한  RESTful API는 표준 HTTP 메서드(GET, POST, PUT, DELETE)를 사용하여 서버와 통신합니다.
 
준비 요령: 이 질문은 HTTP 메서드에 대한 사용 방법에 대한 질문까지 이어질 수 있으므로 사용 방법에 대한 개념 숙지와 예시까지 준비하는 것이 좋습니다.
 

10. "=="와 "==="의 차이는 무엇인가요? ⭐⭐⭐⭐

"=="는 동등 연산자로 두 값을 비교할 때 형 변환(type coercion)을 수행합니다. 즉 비교한 값의 데이터 타입이 다르더라도 자동으로 형 변환을 수행한 후에 비교합니다. 이러한 형변환은 때로 예측하지 못한 결과를 초래할 수 있으므로 "=="를 사용할 때는 조심해야 합니다.
 
"==="는 일치 연산자로 두 값이 데이터 타입과 값이 모두 같은지 비교합니다. 따라서 "==="를 사용하면 형변환 없이 정확한 값을 비교할 수 있습니다. 이러한 일치 연산자를 사용하는 것이 예상하지 못한 에러를 방지하고 안정적인 코드를 작성하는 데 도움을 줍니다.
 
팁: 데이터 타입 일치, 값 일치라는 키워드로 기억하면 쉽습니다.
 

11. TDD란 무엇인가요? ⭐⭐⭐⭐

TDD(Test-Driven Development)는 테스트 주도 개발 방법론으로 개발자가 코드를 작성하기 전에 먼저 테스트 케이스를 작성하고 이를 통과시키는 것을 중심으로 개발을 진행하는 방법입니다.
 
TDD는 코드 품질을 향상시키고 버그를 미리 발견하여 개선하는 데 도움이 됩니다. 또한 코드 변경 시 이전에 작성된 테스트 케이스를 수행하여 기존 코드의 영향을 미치는 부분을 파악하고 안정적인 코드 개발에 도움을 줍니다.
 
추가 팁: TDD 도구인 Jest, Cypress, testing-library에 대한 학습, 프로젝트에 적용한 사례를 준비할 수 있다면 좋습니다.
 

12. 브라우저 렌더링 원리에 대해서 설명해보세요.⭐⭐⭐⭐⭐

브라우저 렌더링은 HTML, CSS, JavaScript 등의 웹 페이지 자원을 브라우저가 화면에 그리는 과정을 말합니다. 브라우저 렌더링 원리와 순서는 크게 다음과 같은 단계로 구성됩니다.
 
1. DOM을 생성: 브라우저는 HTML 문서를 파싱하여 DOM 트리를 생성합니다. 이때 HTML 태그를 노드로 변환하고 노드 간의 계층 관계를 형성합니다.
2. CSSOM을 생성: 브라우저는 CSS 파일을 파싱하여 CSSOM 트리를 생성합니다. 이때 CSS 속성을 노드로 변환하고 노드 간의 계층 관계를 형성합니다.
3. DOM 트리와 CSSOM을 결합하여 렌더 트리를 생성: 이때 실제 화면에 표시될 요소만을 선택하여 렌더 트리를 형성합니다. 브라우저는 렌더 트리를 이용하여 각 요소의 크기와 위치를 계산하는 과정인 레이아웃을 거쳐 화면에 요소를 그리는 페인팅 과정을 거치게 됩니다. 이때 요소의 배경, 테두리, 글자 등을 그리게 됩니다.
 
준비 팁: 전체적인 과정을 머릿 속에 그려놓고 동작 흐름을 설명할 수 있는 정도로 준비하시면 어렵지 않습니다.
 

13. 가장 최근에 해결한 기술적인 문제는 무엇인가요? ⭐⭐⭐⭐⭐

준비 요령: 본인이 프로젝트에서 직접적으로 개선한 부분을 말씀하면 됩니다. 평소에 리팩토링 습관이 있다면 대답하기 수월합니다. 꼬리 질문으로 이어지기 좋은 질문 유형이므로 프로젝트가 끝날 때마다 어려웠던 점과 해결 과정을 잘 정리해놓는 평소의 습관이 중요합니다. 본인이 해결한 기술적인 문제가 무엇이고 어떠한 배경과 근거에서 해결 과정을 처음 듣는 사람 입장에서 잘 이해될 수 있도록 키워드를 잘 전달하는 연습이 필요합니다.
 

14. 프로젝트에서 지원자 분의 역할은 무엇이었나요? ⭐⭐⭐⭐⭐

준비 요령: 협업 경험을 묻는 질문입니다. 이 부분도 13번 질문과 마찬가지로 답변에 대해 이어지는 질문이 많은 유형이므로 협업 과정에서의 의사 결정 과정, 갈등 경험, 갈등 극복 사례 등을 잘 준비하는 것이 필수적입니다.
 

15. 클래스형 컴포넌트와 함수형 컴포넌트의 차이는 무엇일까요? ⭐⭐⭐

리액트에서 컴포넌트를 만드는 방법에는 클래스형 컴포넌트와 함수형 컴포넌트가 있습니다. 클래스형 컴포넌트는 ES6의 클래스를 사용하여 컴포넌트를 정의합니다. 이 방식은 React의 컴포넌트의 상태(state)와 생명주기(lifecycle)를 다룰 때 매우 유용합니다.
 
반면 함수형 컴포넌트는 ES6의 화살표 함수(arrow funciton)를 사용하여 컴포넌트를 정의합니다. 이 방식은 훅(hook) API와 함께 많이 사용되며 컴포넌트의 상태와 생명주기를 다룰 때 유용합니다.
 
클래스형 컴포넌트와 함수형 컴포넌트의 가장 큰 차이점은 상태와 생명주기의 다루는 방식입니다. 클래스형 컴포넌트는 상태를 this.state로 정의하고 생명주기 메서드를 오버라이드하여 다양한 작업을 수행합니다. 반면에 함수형 컴포넌트는 상태를 useState 훅을 사용하여 정의하고 useEffect 훅을 사용하여 생명 주기를 다룹니다. 또한 클래스형 컴포넌트에서는 this 키워드를 사용하여 상태나 메서드를 참조하며 함수형 컴포넌트에서는 this 키워드를 사용하지 않습니다. 이러한 차이점 때문에 함수형 컴포넌트는 더 간결하고 가독성이 좋아지며 테스트와 리팩토링이 쉽게 이루어질 수 있습니다.
 

16. SPA, CSR, SSR을 각각 설명하고 차이점을 설명해주세요. ⭐⭐⭐⭐

SPA(Single Page Application)는 최초로 한 번 페이지 전체를 로딩한 후 데이터만 변경해서 사용할 수 있는 웹 애플리케이션입니다. 하나의 페이지에서 실행됩니다.
 
CSR(Client Side Rendering)은 페이지 최초 로드 시 필요한 파일을 전부 받고 사용자의 인터랙션(Ex. 사용자의 액션에 따라 상태가 변하는 버튼 컴포넌트 등)에 따라 클라이언트 부분에서 받아와 렌더링을 해주는 방식입니다. 기본 틀만 받고 브라우저 동작으로 DOM을 그립니다. CSR의 장점은 렌더링 속도가 빠르지만 단점으로는 SEO에 취약하고 페이지 최초 진입 시 화면의 렌더링 속도가 SSR 방식과 비교해 느리다는 단점이 있습니다.
 
SSR(Server Side Rendering)은 요청시 마다 서버로부터 html 파일을 받아오는 방식입니다. SSR의 장점은 html 파일을 서버로부터 받기 때문에 메타태그 등 SEO 방식에서 강점이 있지만, 매 렌더링 시마다 서버로부터 파일을 받기 때문에 속도가 느리다는 단점이 있습니다.
 

17. 타입스크립트를 사용하신 경험이 있나요? ⭐⭐⭐⭐

타입스크립트는 자바스크립트에 타입을 명시해줌으로써 정적 타입을 명시하여 코드의 타입의 에러나 버그를 사전에 파악하고 오류가 나는 부분을 빠르게 찾아 해결할 수 있다는 장점이 있습니다. 프로젝트가 크고 복잡할 수록 타입스크립트가 가진 장점이 강해집니다.
 

18. 주소창에 www.naver.com을 입력하면 일어나는 일을 설명해주세요. ⭐⭐⭐⭐⭐

1. 사용자가 웹 브라우저를 통해 naver.com을 입력하면 URL 주소 중 도메인 네임 부분을 DNS 서버에서 검색합니다.
2. DNS 서버에서 해당 도메인 네임에 해당하는 IP  주소를 찾아 사용자가 입력한 URL 정보와 함께 전달합니다.
3. 브라우저는 HTTP 프로토콜을 사용하여 요청 메시지를 생성하고 HTTP 요청 메시지는 TCP/IP 프로토콜을 사용하여 서버로 전송됩니다.
4. 서버는 response 메시지를 생성하여 다시 브라우저에게 데이터를 전송합니다.
5. 브라우저는 response를 받아 파싱하여 유저의 화면에 렌더링합니다.
 
준비 요령: 면접에서 자주 나오는 유명한 질문으로 해당 질문에 대한 답변과 네트워크에 대한 이해를 추가적으로 하고 가는 것이 좋습니다.
 

19. CORS가 무엇인지 설명해주세요.⭐⭐⭐⭐⭐

서버와 브라우저가 서로 통신할 때 서버는 브라우저가 자원에 접근하는 것에 대해 권한을 부여하고 이를 알려줘야 합니다. 그러지 않을 경우 브라우저 측에서는 해당 자원에 접근하는 것이 안전하지 않다고 판단하여 통신을 차단해버리는데 이 때 발생하는 것이 CORS(Cross-Origin Resource Sharing)입니다.
 

추가 질문: CORS를 방지하기 위해서는 어떻게 해야 하나요?

서버 측에서 브라우저에게 접근에 대한 권한이 있음을 알리는 방법과 응답 헤더의 Access-Control-Allow-Origin에 접근을 허용할 출처를 반환하는 방법이 있습니다.
 

20. React의 라이프사이클에 대해 설명해주세요. ⭐⭐⭐⭐⭐

리액트는 컴포넌트 기반의 view를 중심으로 한 라이브러리 입니다. 각각의 컴포넌트에는 수명주기가 존재합니다. 컴포넌트의 수명은 보통 페이지에서 렌더링 되기 전부터 페이지에서 사라질 때 끝이 납니다.  라이프 사이클은 크게 보면 컴포넌트가 처음 실행될 때인 mount, 데이터에 변화가 있을 때인 update, 컴포넌트가 제거될 때인 unmount 이렇게 3 개로 나눌 수 있습니다.
 

추가로 참고하면 좋은 것

프론트엔드 신입 개발자 면접을 앞둔 사람이 보면 좋은 영상(유튜브 채널 EO <채용 담당자가 말하는 '꼭' 뽑고 싶은 신입 개발자 특징은? | 개발자 특집 4편>
https://youtu.be/2to3IQFhZVo

 
자신이 사용한 프레임워크를 비롯한 다양한 기술들에 대한 이해와 프로젝트에서 경험한 부분을 잘 정리해서 면접에서 좋은 결과가 있었으면 좋겠습니다. 보통 신입 프론트엔드 기술 면접에서 물어볼 수 있는 것들은 단기간에 준비할 수 있지만 프로젝트에 대한 경험, 문제 해결 과정에 대한 부분은 평소에 잘 정리해놓는 습관이 중요하므로 평소에 성실하게 정리하고 리팩토링 하는 경험이 있다면 면접 준비 난이도가 훨씬 줄어들 것이라 생각합니다.