🙋🏻‍♀️ 프론트엔드 면접 질문 정리

프론트엔드 직무로 지원했던 회사에 서류통과 후, 면접에서 실제로 받았던 질문들과 면접을 대비하기 위한 예상 질문들에 대한 답을 정리한 포스팅 입니다! (계속 업데이트 예정)

2번 이상 들었거나 중요하다고 생각되는 질문은 추가 설명 및 또는 ⭐️ 표시!

✍ 실제 면접에서 들었던 질문

✔️ 브라우저 렌더링 과정⭐️
: 브라우저 렌더링은 html, css, javascript와 같은 웹페이지 자원을 브라우저가 렌더링하는 과정입니다. 먼저 HTML 문서를 파싱하여 DOM tree를 생성하고, CSS 문서를 파싱하여 CSSOM(CSS Object Model)을 생성합니다. 그런 다음, 생성한 DOM과 CSSOM을 조합하여 렌더 트리를 구축합니다. 마지막으로 뷰포트를 기반으로 렌더 트리의 각 노드의 위치와 크기를 결정한 뒤 화면에 그립니다(페인팅하는 과정을 거치게 됩니다).

✔️ 비동기, 비동기 함수란 무엇인가요?⭐️
: 비동기 함수는 함수의 실행 결과가 즉시 반환되지 않고, 특정 조건이 충족될 때까지 기다리는 함수입니다. 자바스크립트에서는 크게 콜백 함수, Promise, async await 3가지 비동기 방식이 존재합니다.

• 자바스크립트에서 함수는 object이므로 다른 함수를 함수의 파라미터로 받아서 내부에서 호출할 수 있는데 그것을 Callback 함수라고 합니다. Callback함수는 함수 내의 다른 태스크를 끝낸 후에 실행되므로 비동기적인 동작을 가능하게 합니다.

const message = function() {
  console.log("This message is shown after 3 seconds");
}
setTimeout(message, 3000);

• Promise는 비동기 작업이 완료된 후 결과 값을 반환합니다. resolve와 reject를 인자로 받으며 비동기 처리가 성공하면 resolve가 호출되고 실패하면 reject가 호출됩니다. Promise는 new Promise()로 생성할 수 있으며, 종료 될 때 Pending, Fulfilled, Rejected 세 가지 상태를 갖습니다.
• async 함수 안에 있는 await 뒤의 구문을 비동기 처리하는 것이 async await 방식입니다.

✔️ ContextAPI와 Redux의 차이
* 제가 ContextAPI를 사용했던 이력이 있기 때문에 둘의 차이에 대해 질문을 받았습니다.
ContextAPI로 다크모드 만들기
: 먼저 ContextAPI란, React에서는 props를 사용하여 부모에서 자식에게로 데이터를 직접 전달하기 때문에 깊은 하위 컴포넌트까지 상태를 전달해주거나 하위 컴포넌트에서 상위 컴포넌트로 상태를 끌어올리는데 어려움이 있습니다. 그래서 Context를 선언하여 전역적으로 데이터를 공유할 수 있게 한 것이 ContextAPI입니다. 그러나 Context를 사용하면 상위 컴포넌트가 리렌더링 될 때 같은 context를 공유받은 모든 하위 컴포넌트가 다같이 리렌더링 되어 렌더링 이슈가 발생할 수 있다는 단점이 있습니다. 또한, 상태관리 툴인 Redux와 다르게 ContextAPI는 상태를 공유만 할 뿐 상태를 관리해주지는 않습니다.

✔️ Redux에 대한 질문(Redux란?, 장점)⭐️
: Redux란 javascript의 상태관리 라이브러리입니다. Redux를 사용할 때, 앱의 모든 상태는 store라는 하나의 저장소에 보관됩니다. store의 상태는 직접 가져오거나 변경할 수 없고 action을 통해 할 수 있는데 dispatch() 메소드를 사용하여 action을 reducer로 전달하고, reducer를 통해 store에 접근하여 상태를 변경할 수 있습니다.

✔️ API란?
: API는 Application Programming Interface의 줄임말 입니다. 즉, 여러 프로그램들, 데이터베이스 혹은 기능들의 상호 통신 방법을 규정하고 도와주는 매개체 입니다. 웹에서는 주로 RESTfulAPI라고 하는 HTTP 프로토콜을 기반으로 하는 웹 서비스 아키텍처를 통해 클라이언트-서버 간의 통신을 합니다.
➡️ 이렇게 대답할 시, RESTful API에 대한 질문이 들어올 수 있을 것 같습니다!

✔️ CDN이란?
: CDN(Content Delivery Network, 콘텐츠 전송 네트워크)이란 지리적으로 분산된 여러 개의 서버입니다. CDN을 사용하여 HTML 페이지를 포함한 Javascript,CSS, 이미지, 동영상 등 웹 콘텐츠를 사용자와 가까운 곳에서 캐싱하여 전송 속도를 높일 수 있습니다.

✔️ caching이란?
: 원래 데이터를 복사한 복사본이나 오래 걸리는 작업의 결과를 cache에 임시로 저장해서 빠르게 데이터를 가져올 수 있는 접근 방식이다.

✔️ CI/CD란? + 사용해본적 있는지
: CI/CD 도구를 직접 사용해본 적은 없습니다. 그러나 CI/CD의 개념에 대해서는 알고 있는대로 말씀드리겠습니다. CI/CD는 애플리케이션 개발부터 배포까지의 모든 단계를 자동화하여 사용자에게 빠르고 효율적으로 빈번하게 배포할 수 있는 방법입니다. CI(Continuous Integration)는 지속적인 통합이라는 뜻으로 코드 변경이 있을 때 빌드 및 테스트 되면서 정기적으로 공유 레파지토리에 merge 되는 것 입니다. CD는 Continuous Delivery 혹은 Deploy라는 의미를 가지며 CI에서 build, test 단계를 거친 후에 자동으로 배포하는 것입니다. 대표적인 CI/CD 도구로는 Jenkins와 Gitlab 등이 있습니다.

✔️ javascript에서 map과 forEach문의 차이⭐️
: map과 forEach 모두 for문처럼 배열의 요소에 접근할 수 있습니다. 콜백 함수를 인자로 받아 배열의 각 요소에 대해 콜백함수를 실행합니다. 그러나 map은 콜백함수를 실행한 후 새로운 요소를 return 합니다.

✔️ React에서 map을 사용할 때 key를 지정해줘야하는 이유
: React에서 요소를 업데이트 할 때 엘리먼트에 지정된 고유의 key가 있으면 안정적으로 변경이 가능합니다. key가 어떤 항목을 변경, 추가, 삭제할지 식별할 수 있도록 하는 역할을 한다.

✔️ 레이아웃을 구성하는 html 태그
: header, nav, section, article, footer, aside 태그가 있습니다.

✔️ class란 무엇인가?

✔️ React에서 class형 컴포넌트와 function 컴포넌트의 차이 (+ 나는 무엇을 사용했는지, 그 이유는 무엇인지)

✔️ 배열과 object의 차이

✔️ React에서 object의 상태를 어떻게 바꾸는지 (다른 변수들과 차이)
'구조 분해 할당'이라는 단어가 기억나지 않아서 '쩜쩜쩜(...) 문법'이라고 답변한적 있다..^^;

✔️ 프론트엔드 라이브러리 / 프레임워크에 대한 설명(차이점), 각각 예를 들면 어떤게 있는지

✔️ React의 특징 (React를 사용하는 이유)

✔️ React Hooks란? (+ 각각 Hooks에 대한 질문, 사용해본적 있는지) ⭐️

✔️ 호이스팅이란?⭐️

✔️ var과 let의 차이 (최근 var가 아닌 let을 사용하고 있는데 그 이유)

✔️ typescript를 사용하는 이유

✔️ 화살표 함수의 장점

✔️ 웹 표준, 웹 접근성이란?

✔️ 반응형 UI, 적응형 UI란?

✔️ scope에 대해서 설명해보세요

✔️ API 소통 시 request query와 body의 차이 (둘 중 무엇을 사용했나요?)

✍🏻 인터넷에 돌아다니는 프론트엔드 면접 질문

아직 들어본 적 없는 질문이라도 프론트엔드 개발 직무를 지원했을 때, 준비해야할 내용들을 정리합니다! (맨 아래 출처 표기)

✔️ RestFull API란?
: HTTP 프로토콜을 기반으로 하는 웹 서비스 아키텍처 입니다. 자원, 메소드, 메세지 등을 정의하여 클라이언트-서버 간의 통신을 가능하게 합니다. RESTful API는 GET, POST, PUT, DELETE 등의 표준 HTTP 메소드를 사용하여 서버와 통신합니다.

✔️ HTTP 메소드에 대한 설명
: 주로 사용되는 HTTP 메소드는 GET, POST, PUT, DELETE가 있습니다. GET은 서버에서 리소스를 요청하는 메소드 입니다. 요청한 데이터를 가져와서 응답합니다. POST는 서버에 리소스를 전송하는 메소드 입니다. 데이터를 전송하여 서버에서 처리하고, 처리 결과를 응답합니다. PUT은 서버에서 리소스를 대체하거나 없으면 신규 생성하는 메소드 입니다. DELETE는 서버에서 리소스를 삭제하는 메소드 입니다. PUT과 DELETE 모두 POST와 같이 데이터를 서버에서 처리하고 처리 결과를 응답합니다.

✔️ JS에서 '=='와 '==='의 차이는?

✔️ 클로저란?

✔️ 이벤트 버블링이란?

✔️ 함수 선언식과 표현식

✍🏻 이력(경험, 포트폴리오)와 관련된 질문

✔️ styled component가 아닌 tailwindCSS를 사용한 이유

✔️ typescript를 사용해본 적 있나요?⭐️

• 거의 모든 면접에서 typescript에 대한 질문을 받았던 것 같아요! 최근 typescript에 대한 관심과 TS를 사용하는 인재를 원한다는 것을 알 수 있었습니다.

✔️ git branch 정책을 어떻게 했었는지

(프론트엔드 직무로) 첫 면접 때, 무슨 자신감이었는지 아무런 준비 없이 임했다.
포트폴리오에 대해서도 모두 내가 했던 활동이니까 문제없이 답할 수 있을 것 같았다.

그런데 기본적인 기술 질문은 물론 이 라이브러리를 왜 썼고 왜 이런 코드를 짰는지에 대한 질문도 당당하게 대답하기 힘들었다. 이후 면접 대비를 위해서도 그렇지만 기본기를 잘 쌓아가기 위해 공부하고 있다.

면접 때 받은 질문들도 면접 이후에 기억나는대로 정리하고 답변을 생각했었는데 (소를 잃었어도 외양간을 고쳐놔야 또 소를 잃지 않을 수 있다..^^;)
오늘은 그 내용을 한군데 모아보기 위해 포스팅을 작성하게 됐다.
나를 포함해 각자 꿈을 이루기 위해 취업을 준비하는 모든 취준생들을 응원하며 포스팅 끝!✨

References

• 프론트엔드 면접 질문(zerobase)
• 비동기 함수
• 콜백(Callback) 함수
• ContextAPI란? 장단점, Redux는 왜 쓸까?
• Redux Introduction
• API 정의
• CDN이란
• CI/CD란? +많이 쓰이는 도구

🌱 해당 포스트는 각 개념 혹은 이론에 대한 면접 질문에 대해 간략하게 대답을 정리한 포스트 입니다. 세부적이고 깊은 공부가 필요할 수 있습니다.
✍🏻 추가할 질문 혹은 잘못된 내용이 있다면 댓글로 알려주세요!