프론트엔드 개발자 기술면접 인터뷰 질문 모음(업데이트)

프론트엔드 기술면접 실제현업 질문 모음

최근 1년 간 프론트엔드 면접을 7번 정도 본 것 같다. 국내 IT 대기업 N사만 여러번, K사, 온라인쇼핑몰 C사 등등 여러군데를 면접을 진행했으며 비록 떨어졌지만 여러모로 좋은 경험을 하였습니다. 프론트엔드 엔지니어를 꿈꾸는 시니어 주니어 엔지니어들에게 면접을 진행하기전 필수적으로 알아야 할 질문과 마음가짐에 대해서 공유해보려고 합니다. 

다른 프론트엔드 기술면접 관련된 글도 많지만 너무 많아서 조금 요약을 해보려고 합니다. 면접관으로 들어가시는 분들께서도 어떤 질문을 할지 모를 경우에는 참고하셨으면 좋겠습니다.

Frontend 필수 언어

중요도	설명
★★★★★	프론트 엔지니어를 꿈꾼다면 정확하게 알고 있어야 하는 것들이며 하나라도 모르면 떨어진다고 봐도 무방하다. 꼭 알고 들어가자
★★★★	90% 이상을 알아야 하며 많이 대답한다고 좋은게 아니라 정확하게 대답해야 함. 본인이 프론트엔드 엔지니어라고 말하고 싶다면 필수적으로 알아야 함
★★★	Javascript 프레임워크, 플러그인, 그 외 사용법 등 중요한 질문
★★	가볍고 기본적인 질문
★	알면 가산점이나 모른다고 크게 등락에 영향은 없음 그리고 그 외적인 것

중요도는 주관적이나 1시간 동안 공통적으로 질문을 받은 내용

※ 질문에 대한 답변은 직접 찾아보면서 이해해 나가보면 더 도움이 될 것 입니다. 왜냐하면 저는 떨어졌기 때문에 제가 답변하는 것이 정확한 답변이라고 말씀드리기 어렵습니다. 관련 링크만 소개해 드리겠습니다. 개인적으로 별 3~5사이를 90%이상 알고 계시다면 면접은 충분히 통과할 거라고 봅니다.

★★★★★

1. 브라우저 렌더링 원리
1-1. 홈페이지가 사용자에게 보이는 순서에 대해서 설명해주세요.

-> https://d2.naver.com/helloworld/59361

2. 호이스팅에 대해서 설명해 보세요.

-> https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

3. 클로저는 무엇인가요? 원리와 왜 사용하는지 설명해 주세요.

-> https://hyunseob.github.io/2016/08/30/javascript-closure/

4. CSS에서 margin과 padding에 대해서 설명해주세요.
4-1 position을 어떻게 사용하는지 알려주세요.

-> https://www.w3schools.com/css/css_margin.asp
-> https://www.w3schools.com/css/css_padding.asp

5. GET, POST가 어떻게 다르게 쓰는지 말씀해 주세요(주니어 기준, 시니어는 잘 안물어봄)

-> https://www.w3schools.com/tags/ref_httpmethods.asp

 

★★★★

1. this의 용법 아는대로 설명해주세요.

-> https://poiemaweb.com/js-this

2. 브라우저 저장소에 대해서 차이점을 설명해 주세요. ( Localstorage, SessionStorage, Cookie )

-> https://velog.io/@ejchaid/localstorage-sessionstorage-cookie%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

3. Restful API에 대해서 아는대로 설명해 주세요. ( GET, PUT, POST, PATCH, OPTION, DELETE )

-> https://javaplant.tistory.com/18

4. Javascript는 어떤 언어인가요? -> 싱글 스레드 언어
4-1 하지만 실제 사용시에는 멀티 스레드 처럼 사용하는데 어떻게 사용하나요?
4-2 비동기적으로 실행이 되는 것을 동기적으로 코딩하는 방법이 있나요?

-> https://realmojo.tistory.com/109
-> https://boxfoxs.tistory.com/294

5. Event Loop 에 대해서 알고 있으신가요?
5.1 마이크로태스크 큐와 태스크 큐에 대해서 말씀해주세요.

-> https://baeharam.netlify.app/posts/javascript/JS-Task%EC%99%80-Microtask%EC%9D%98-%EB%8F%99%EC%9E%91%EB%B0%A9%EC%8B%9D

-> https://im-developer.tistory.com/113

6. 이벤트 버블링에 대해서 말씀해 주세요
6-1. 이벤트 버블링은 기본적으로 child -> parent 인데 반대로 구현하는 법은?
6-2. 이벤트 버블링을 막기위한 방법은?
6-3. 이벤트 버블링을 잘 활용하면 어떻게 사용할 수 있을까요?

-> https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/

7. 타입스크립트에 대해서 사용해 본적이 있나요? 어떤지 말씀해주세요.

-> https://hyunseob.github.io/2018/08/12/do-you-need-to-use-ts/

8. 실행문맥에 대해서 설명해 주세요.(자주 물어보지는 않음 그러나 알아야 함)

-> https://poiemaweb.com/js-execution-context

9. 이터러블, 이터레이터 프로토콜에 대해 말씀해주세요.

-> https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9D%B4%ED%84%B0%EB%9F%AC%EB%B8%94-%EC%9D%B4%ED%84%B0%EB%A0%88%EC%9D%B4%ED%84%B0-%F0%9F%92%AF%EC%99%84%EB%B2%BD-%EC%9D%B4%ED%95%B4

10. 제네레이터에 대해서 말씀해주세요.

https://poiemaweb.com/es6-generator

★★★

1. HTML이 렌더링 중에 Javascript가 실행되면 렌더링이 멈추는데 그 이유는 무엇인가

-> https://webclub.tistory.com/630
-> https://realmojo.tistory.com/96

2. 현재 Javascript 프레임워크를 사용하는 것과 그 선택을 한 이유.
2-1. 프로젝트를 진행할 때 어떤 Javascript 프레임워크를 선택할 것인가? 그 이유는?
2-2. 최근 사용되는 Javascript 프레임워크에 대해 차이점과 장단점? 언제 어떻게 사용해야 할까?

-> 이 질문자체는 엔지니어마다 전부 주관적일 것이다. 제대로 고민해보고 답변해야 한다.

-> https://www.popit.kr/%EB%B2%88%EC%97%AD%EA%B8%80-react-vs-angular-%EB%91%98-%EC%A4%91-%EC%96%B4%EB%96%A4-%EA%B2%83%EC%9D%B4-%EB%8B%B9%EC%8B%A0%EC%9D%98-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-%EC%95%8C%EB%A7%9E/

-> https://brunch.co.kr/@hee072794/112

3. SPA와 서버사이드 렌더링의 차이점은 무엇인가요?

-> https://goodgid.github.io/Server-Side-Rendering-and-Client-Side-Rendering/

4. require와 import의 차이점

-> https://blueshw.github.io/2017/05/16/ES-require-vs-import/

5. SASS, SCSS를 사용해본 적이 있나요? 기존 CSS와 비교할 때 어떤면이 더 좋은가요?

-> https://heropy.blog/2018/01/31/sass/#sasswa-scssneun-caijeomeun-mweongayo

6. Javascript 성능 최적화를 위해 어떤 것을 적용해 보았나요?

-> https://engineering.huiseoul.com/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%9E%91%EB%8F%99%ED%95%98%EB%8A%94%EA%B0%80-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EA%B4%80%EB%A6%AC-4%EA%B0%80%EC%A7%80-%ED%9D%94%ED%95%9C-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EB%88%84%EC%88%98-%EB%8C%80%EC%B2%98%EB%B2%95-5b0d217d788d

-> https://itstory.tk/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%97%90%EC%84%9C-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EB%88%84%EC%88%98%EC%9D%98-4%EA%B0%80%EC%A7%80-%ED%98%95%ED%83%9C

7. Vue & React
7-1 Vue와 React의 차이는 무엇인가요?
7-1 Vue 혹은 React를 사용해보셨다면 상태관리는 어떻게 구현하셨나요?
7-2 (Vue 면접관이라면) 라이프 사이클을 가볍게 설명해주세요.
7-3 Vue에서 양방향 데이터가 일어나는 원리에 대해서 말씀해주세요.

-> https://medium.com/@erwinousy/%EB%82%9C-react%EC%99%80-vue%EC%97%90%EC%84%9C-%EC%99%84%EC%A0%84%ED%9E%88-%EA%B0%99%EC%9D%80-%EC%95%B1%EC%9D%84-%EB%A7%8C%EB%93%A4%EC%97%88%EB%8B%A4-%EC%9D%B4%EA%B2%83%EC%9D%80-%EA%B7%B8-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%9D%B4%EB%8B%A4-5cffcbfe287f
-> https://ko.bccrwp.org/compare/redux-vs-vuex-for-state-management-in-vue-js-d57692/
-> https://medium.com/witinweb/vue-js-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-7780cdd97dd4
-> https://kr.vuejs.org/v2/guide/reactivity.html

8. 무작위 데이터에 대해서 테스트는 어떻게 하시나요?

-> https://www.json-generator.com/

9. ES6 에서 Arrow 함수를 언제 쓰나요? 왜 쓰나요?

-> https://poiemaweb.com/es6-arrow-function

10. var let const 차이점

-> https://gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d

11. CORS를 대처하는 방법과 우회하는 방법

-> https://brunch.co.kr/@adrenalinee31/1

12. MVVM 모델에 대해서 설명해 주세요

-> https://beomy.tistory.com/43

 

★★

1. CSS에는 Box-model 이라는 것이 있습니다. 이때 width의 값을 차지하는 크기는 어떻게 될까요?

-> https://www.w3schools.com/css/css_boxmodel.asp

2. 이진트리에 대해서 말씀해 주시고 종류는 어떻게 될까요? 실제 적용해본 경험이 있나요?

-> https://ratsgo.github.io/data%20structure&algorithm/2017/10/21/tree/

3. git을 사용해보신 적이 있으신가요? 사용했다면 어떤식으로 사용했는지 말씀해 주세요.

-> https://woowabros.github.io/experience/2017/10/30/baemin-mobile-git-branch-strategy.html

4. HTTP 0.9/1.0 의 차이를 말씀해 주세요.

-> https://medium.com/platform-engineer/evolution-of-http-69cfe6531ba0

 

★

1. 협업에 대해서 어떻게 생각하시나요

2. 스켈레톤 UI에 대해서 적용해본 적이 있나요.

-> https://www.sitepoint.com/how-to-speed-up-your-ux-with-skeleton-screens/
-> https://vuetifyjs.com/en/components/skeleton-loaders/

3. 지원자님께서 시간이 있으시다면 Frontend 향상을 위해 어떤 노력을 할 것인가요?

4. 프론트엔드 주제를 가지고 발표를 해야한다면 바로 가능한게 있을까요?

5. 고객님께서 우리가 제작한 홈페이지 화면이 로딩속도가 느리다고 요청이 왔습니다. 어떻게 해결할(대처할) 것인가요? 충분히 고민해보시고 대답해주세요.

6. 여태까지 협업을 하면서 가장 어려웠던 것과 그것을 어떻게 해결했는지 말씀해주세요.

그 외

1. 기업에 따라 코딩 면접이 있을 수 있습니다. 알고리즘의 경우 보통 난이도는 leetcode에서 easy <-> medium 중간 정도의 난이도 입니다. 대체적으로 재귀적인 문제와 규칙찾는 것들이 자주 나왔던 걸로 기억합니다. 면접중에 풀어야 한다면 보통 15분 정도 시간을 주는 경우도 있습니다. 

Homework 과제라면 3~4시간 정도의 난이도로 코딩하는 경우도 있습니다. 혹은 PDF를 전달 주고 그대로 구현해서 소스코드를 제출해야 하는 경우도 있습니다.

2. SEO에 관련된 질문을 받았다면 그 조직은 검색엔진 부서가 아닌이상 큰 조직이 아닐 확률이 높습니다. 스타트업이나 마케팅 쪽에서 SEO나 크롤링 잘하는 개발자를 선호합니다. IT의 큰 조직으로 갈 수록 SEO에 관련해서 물어보지는 않습니다.

 

3. 주니어나 시니어 엔지니어분들께서는 면접에 들어갔을 때 위의 질문들이 70% 이상이 나오지 않는다면 면접을 진행한 그 조직은 프론트엔지니어를 전문적으로 하는 조직이 아니라고 봐도 무방합니다. 백엔드 개발자와 적절하게 협업을 하면서 개발을 할 조직일 것입니다.

또한 프론트엔드 면접을 진행했는데 DB, 인프라, 백엔드 관련해서 질문을 같이 한다면 그 조직은 프론트엔지니어 이면서 풀스택을 원하는 경우가 대부분 입니다. 다른 분야도 같이 할줄아는 사람을 합격할 확률이 높습니다.

실제로 프론트엔드만 전문으로 하는 조직에서는 DB, 인프라, 백엔드 관련해서 질문을 주시지 않았습니다.

프론트엔드만 하신 분이면 아시겠지만 1시간 내에 프론트 관련 질문을 해서 지원자를 판별하기가 부족합니다.

DB + 인프라 => 프론트(메인) + 인프라 엔지니어( Golang, Docker, Orchestration, kubernetes, terraform )

DB + 백엔드 => 프론트(메인) + 백엔드 엔지니어( Java spring, node.js )

 

4. DB에 관련해서 물어본다면 용어 정리를 확실히 해야 합니다. 간혹 홈페이지나 웹사이트 등의 게시판 시스템을 만들어 본 경험이 있다고 DB설계로 작성하시면 안됩니다. DB설계와 Table(column)설계는 다릅니다.

간혹 이력서에 DB설계로 작성하셔서 면접에 들어가시면 NoSql, RDBMS의 설계 방식에 대해서 질문이 들어옵니다. 어느 경우에 Nosql을 사용해야 하는지 RDBMS 사용해야 하는지 DB백업은 어떻게 해야 하는지 이중화 구성은 어떻게 해야하는지 장애처리를 위한 방법은 뭔지 그리고 샤딩 혹은 파티셔닝을 어떤식으로 구성해야 하는 것인지가 DB설계 입니다.

Table 컬럼을 추가해서 데이터를 저장하고 조회하고 수정하는 등의 작업은 DB설계가 아니라. Table Column을 구성할 줄 안다 라고 생각하셔야 합니다.