프론트엔드 면접 질문

신입 프론트엔드 개발자가 꼭 알아야 할 11가지 면접 질문

제로베이스 프론트엔드 스쿨

프론트엔드 개발자 신입, 대체 어느 수준까지 알아야 될까?

프론트엔드 신입 면접에 들어올 면접관은 ‘프론트엔드 신입 지원자가 정말 개발에 관심이 있고 꾸준한 성장이 가능한 신입인가?’에 대한 의문을 가지고 있습니다. 프론트엔드 신입 면접에서 면접관이 이를 확인할 방법은 프론트엔드 기본 지식에 대한 질문뿐입니다.(여기서 말하는 기본 지식은 컴퓨터 공학 지식과 언어, 프레임워크의 동작 원리 등을 의미합니다.)

취업 중심 부트캠프인 프론트엔드 스쿨 강사님이신 김영민님께 프론트엔드 신입 면접 기본 질문을 여쭤봤습니다. 프론트엔드 신입 개발자라면 꼭 알아야 할 기본 지식, 총 3가지 파트로 11가지 질문과 해설을 함께 공개합니다.

이 질문은 면접을 통과하기 위해 답을 찾고 외우는 것이 아니라 취업을 준비하시는 신입 개발자분들께서 스스로 이 질문에 자연스럽게 대답할 수 있는지 확인하는 지표로 봐주시길 바랍니다. 질문과 해설에 낯선 용어나 내용이 있다면 이 방향에 추가 학습이 필요하구나 라는 생각 해보실 수 있는 계기가 되길 바랍니다.

신입 프론트엔드 개발자가 면접 전 꼭 알아야 할 기본 질문 11가지

Part 1. 웹 기본 지식

1. HTTP와 HTTPS의 차이와 https를 사용했을 때의 장점은 무엇일까요?

HTTPS(HyperText Transfer Protocol Secure)는 기존 프로토콜(컴퓨터 사이의 데이터 교환 방식 규칙 정의)에서 데이터가 쉽게 도난 당할 수 있는 것을 방지하기 위해서 SSL(보안 소켓)을 사용하면서 브라우저와 서버 사이에 안전하게 암호화된 연결을 만들 수 있게 도와줍니다. 또한 TLS(전송 계층 보안) 프로토콜을 통해서도 보안을 유지합니다. TLS는 데이터 무결성을 제공하므로 데이터가 전송 중에 손상되거나 수정되는 것을 방지합니다.

또한, HTTPS의 장점은 검색엔진 최적화(SEO에 도움이 됩니다. 구글과 같은 포털에서는 HTTPS를 사용하는 웹 사이트에 가산점을 부여합니다. 별개로 주소창 옆에 HTTPS가 아니라면 주의 요함 과 같은 경고 문구가 있는데 사용자 측면에서도 자주 들어가고 싶지 않겠지요.

2. 캐시란 무엇이고 어떻게 동작할까요?

캐시는 데이터나 값을 미리 복사해 놓은 임시 저장소를 말합니다. 캐시는 데이터를 접근하는 시간이 오래걸리는 경우나 값을 계산하는 시간이 오래걸리는 로직 등에 사용합니다. 캐시가 없다면 데이터가 변경되지 않는 고정 데이터임에도 계속해서 네트워크를 통해 데이터를 다운 받아야 합니다. 불필요한 데이터를 계속 받는다면 데이터 비용의 비중도 올라가게 됩니다. 그리고 결국 사용자 측면에서도 로딩 속도가 반복해서 느려지게 되고, 이는 사용자에게 좋지 못한 경험을 제공합니다.

캐시를 사용하면 새로고침 시에 반복되는 데이터가 네트워크를 통하지 않으므로 네트워크 사용량이 줄고, 브라우저 로딩 속도가 빨라지게 되며, 이는 빠른 사용자 경험으로 직결됩니다.

3. 브라우저 렌더링 엔진은 HTML, CSS, Javascript를 어떤 순서로 해석할까요?

렌더링 엔진은 HTML 문서 자체를 파싱하여 DOM트리를 만듭니다. 그런 다음 CSS파일과 함께 포함된 CSSOM을 생성합니다. 이후 DOM트리와 CSSOM의 결과를 합친 렌더트리를 구축합니다. 그리고 렌더트리를 배치(Layout)한 후, 마지막으로 렌더트리를 그립니다. 렌더트리를 그리는 과정에서 화면에 그리는 Paint라는 레이어를 채우는 과정을 거쳐 합성(Composite)을 통해 실제로 레스터화를 하며 픽셀로 변환하는 단계를 거칩니다.

4. 쿠키, 로컬스토리지, 세션스토리지는 각각 어떤 특징을 가지고 있을까요?

◎ 쿠키
만료 기간이 있는 Key, Value 형태의 저장소를 말합니다.
대부분의 브라우저가 지원하며, HTTP 요청마다 포함되어 API 호출의 부담으로 작용할 수 있습니다. 용량은 약 4KB 정도로 작은 편입니다.
쿠키 자체의 도난 위험이 있어 최근에는 구글 크롬의 샌드박스 정책과 같이 보안의 위험이 있는 경우를 방지하기 위해서 노력하는 중입니다.

◎ 로컬스토리지
가장 큰 특징으로는 브라우저 창을 닫더라도 데이터가 유지됩니다. 장점은 서버에 불필요한 데이터를 저장하지 않는 다는 점입니다.
그리고 브라우저마다 차이는 있지만 용량이 약 5MB로 매우 큽니다. 단점으로는 HTML5을 지원하지 않는 브라우저에서는 사용이 불가능합니다.

◎ 세션스토리지
가장 큰 특징으로는 브라우저 창을 닫는 순간 영구적으로 데이터가 삭제됩니다.
세션스토리지도 마찬가지로 서버에 불필요한 데이터를 저장하지 않고, 용량이 5MB로 매우 크고 HTML5를 지원하지 않는 브라우저에서는 사용할 수 없습니다.


주로 폼 정보나 장바구니 정보 등 휘발성이 강한 개인적인 내용에는 세션스토리지를 사용합니다. 자동 로그인 기능이나 다크모드 테마와 같은, 사용자에 귀속되면서 유출되어도 상관 없는 정보들에는 로컬스토리지를 사용하고, 만료 기간을 두고 몇일 보지 않는 팝업 같은 부분은 쿠키를 사용하는 것이 좋습니다.

5. Binary Tree의 시간 복잡도가 어떻게 되나요?

브라우저와 서버 간 통신을 할 때, 의도되지 않은 특정 서버와 통신을 해서 원하지 않는 리소스를 받을 가능성을 막아주는 브라우저 보안 규칙입니다.

Part 2. 프레임워크 활용 지식

6. CSR과 SSR의 차이는 무엇일까요?

◎ CSR(Client Side Rednering)
최초에 서버에서 전체 페이지를 로딩해서 사용자에게 보여주고 이후에는 사용자의 요청에 따라서 리소스를 서버에서 제공하면서 클라이언트가 해석하고 바로 렌더링을 하는 방식입니다.
빠른 반응속도가 특징이며, 초기 구동속도가 SSR에 비해서 느리고 SEO에 취약합니다.

◎ SSR(Server Side Rendering)
기존에 존재하던 방식으로 사용자가 웹페이지에 접근할 때 서버에서 페이지에 대한 요청을 해서 html과 같은 view 리소스들을 어떻게 보여줄지 결정한 뒤에 사용자에게 반환합니다.
SEO(검색엔진최적화)에 있어서는 google의 검색봇 등의 크롤링을 위해서 정적인 웹페이지의 리소스를 제공하는 것이 중요한데 이런 부분에 있어서는 SSR을 사용하는 것이 보다 도움이 됩니다.

7. 리액트나 뷰와 같은 가상돔을 사용하는 프레임워크에서 상태 관리란 무엇일까요?

상태 관리란 해당 컴포넌트에 적용되는 상태이며, 화면이 바뀌는 것에 대한 데이터를 state로 만들어줍니다. 이러한 state를 사용하는 이유는 데이터가 변할 때마다 데이터에 관련된 DOM을 찾아서 원하는 동작들을 실행한다면 코드도 중복되고 불필요한 DOM에 대한 접근이 많아질 것입니다. React에서는 주로 Redux를 사용하며, Vue에서는 Vuex를 사용합니다. 기존의 디자인 패턴인 MVC 패턴과 다르게 단방향으로 데이터가 흐르는 Flux 패턴을 사용합니다. 따라서 View는 데이터가 어떻게 바뀌었는지 직접 MVC의 Model을 사용해서 참조할 필요가 없으며, Dispatch를 통해 Action을 발생시키므로 인해 Store에서 전체적으로 영향을 주는 View를 갱신합니다.

8.Webpack, Parcel, Rollup과 같은 모듈 번들러가 하는 일은 무엇이고 왜 사용할까요?

최종적으로 바인딩되는 웹 어플리케이션 리소스들(HTML, CSS, JS, Image, Font 등)을 모두 모듈로 보고, 이를 조합해서 하나로 만드는 역할을 합니다.
기존 HTML이나 Javascript파일이 상대적으로 작았던 시절에는 서비스를 유지하는 것에 있어서 그렇게 큰 문제가 되지 않았으나 인터넷이 계속 발달을 거듭하며 대규모 웹 서비스들이 탄생하고, 이에 대해서 수십 수백개의 자바스크립트 파일들을 유지보수하면서 조금 더 편하고 모듈화 된 작업 단위들을 유지보수 하고자 하는 욕구에 의해서 탄생했습니다.

Part 3. 컴퓨터 공학

9. 스택과 큐의 차이는 무엇일까요?

◎ 스택
스택은 물건을 쌓고 그것을 다시 뺄 수 있는 구조로 되어있습니다. 보통 배열이라고 하는 자료형의 구조도 스택으로 되어있습니다. 배열의 길이를 정하고 거기에 데이터를 넣는 것을 PUSH라고 합니다. 그리고 다시 꺼내는 것을 POP이라고 하며, LIFO(Last-In-First-Out) 구조라고 합니다.

◎ 큐
큐는 먼저 들어온 데이터가 먼저 처리되는 구조로 되어있습니다. 입구와 출구가 있는 이벤트 루프를 생각하면 쉽습니다. FIFO(First-In-First-Out) 구조라고 합니다

10. 컴파일러와 인터프리터의 차이는 무엇일까요?

◎ 컴파일러
전체 코드를 보고 명령어를 수집하고 재구성 합니다. C, C++ 등이 해당합니다.

◎ 인터프리터
소스코드의 각 행을 연속적으로 분석하며 실행합니다. 인터프리터는 고레벨 언어를 중간 레벨 언어로 변환 한 뒤에 각 행마다 실행하기 때문에 보통은 컴파일러가 인터프리터보다 빠릅니다.
Python, Javascript 등이 해당합니다. Java는 컴파일러에서 .class파일로 변환한 뒤에 인터프리터 과정으로 한번 더 해석을 하기 때문에 두가지 방법 모두 다 쓴다고 할 수 있습니다.

11. 프로세스와 스레드의 차이는 무엇일까요?

◎ 프로세스
운영체제로부터 CPU자원을 할당받는 작업의 단위입니다. 메모리에 올라와서 실행되고 있는 프로그램의 인스턴스를 의미합니다. Stack, Code, Data, Heap 구조로 되어있습니다.

◎ 스레드
프로세스 내에서 실행되는 여러 흐름의 단위입니다. 프로세스 내에서 각각 Stack만 따로 할당 받고 Code, Data, Heap 영역은 공유합니다. 멀티 스레드가 가지는 장점은 첫 번째로 프로세스를 생성하여 자원을 할당하는 시스템 콜이 감소하므로 자원을 효율적으로 관리할 수 있고, 스레드 간의 통신 비용이 더 적게 발생합니다. 대신, 스레드 간에 공유자원으로 인한 문제를 위해 동기화에 대해서 신경을 써줘야 합니다.

신입 준비 팁

이 외에도 기본 지식과 기술 면접 대비를 위한 다양한 블로그 콘텐츠 들이 있습니다. 현직에 계신 많은 프론트엔드 개발자분들께서 면접 후기를 기록하고 공유하고 있죠.

프론트엔드 신입 면접 준비 시 필요한 내용이 모두 담긴 인터뷰 핸드북 링크를 드립니다. 읽기 쉽게 정리된 자료가 많으니 꼭 한 번 읽어보셨으면 좋겠습니다.
https://www.frontendinterviewhandbook.com

마치며,

아쉽게도 기본기를 익히는 것은 지름길이 없습니다. 원론적인 내용에 파고 들수록 내용은 방대하고 지루해집니다. 그렇지만 프론트엔드 개발자를 꿈꾼다면, 웹은 어떻게 시작되었고 그렇기에 어떠한 형식을 가지고 있는지 충분한 이해를 가지고 있어야 합니다. 수많은 기본 질문들을 보고 좌절한 신입 개발자 취업 준비생이 있다면, “난 앞으로 성장할 가능성이 많구나!”라는 걸 꼭 알아주셨음 좋겠습니다. 11가지 기본 질문이 여러분의 취업 성공 길을 열어줄 출발점이 되길 바래봅니다.


김영민 강사님께 더 많은 이야기를 들어보고 싶다면?
>> 프론트엔드 스쿨 바로가기

추천 컨텐츠