프론트엔드 면접 질문 모음

csb·2018년 11월 27일
612

설명

개발자 준비를 하면서, 면접에서 개별적으로 혹은 공통적으로 받았던 질문 리스트입니다. 주로 로켓펀치와 원티드를 통해 구직활동을 하였으며, 당연히 비율상 규모가 큰 기업 보다는 스타트업 위주로 면접이 진행되었습니다. 서류를 제출한 모든 기업으로부터 면접이 진행되지 않아, 질문 내용이 보편적이지 않을 수 있습니다. 자바스크립트를 활용한 웹 프론트엔드 직군 위주로 지원하였으며, 포트폴리오 제작시 Vue.js만을 사용하여, React.js 관련 질문은 받지 못하였습니다. 비전공자임을 감안한 질문 내용들이 있습니다.

질문 목록

개발 관련 질문 목록

  • 브라우저의 렌더링 과정에 대해서 상세하게 설명해달라

  • OOP

    • OOP에 특징에 대해 설명해달라(상속, 캡슐화 등등...)
    • 현실에 상황을 예로 들어 OOP의 개념으로 설계과정을 설명해달라
      ex) 축구를 게임으로 만든다거나, 기타 어떠한 상황이라도 좋다
  • 함수형 프로그래밍(Function Programming)
    • 함수형 프로그래밍에 대해 설명해달라
    • 함수형 프로그래밍에 개념에서 순수함수란 무엇인가
    • OOP와 함수형 프로그래밍의 가장 큰 차이점은 무엇인가
  • 비동기 프로그래밍(Asynchronous)
    • AJAX란 무엇인가
    • Promise란 무엇이며 코드가 어떻게 구성되어있는가
    • Promise와 Callback의 차이점은 무엇이며 각각의 장단점에 대해 설명해달라
    • Async, Await가 무엇이며, 사용해본 경험이 있는가
  • Vue.js
    • 면접관을 Vue.js 비사용자라고 가정하고 Vue.js에 설명하고 장단점을 말해달라
    • Vue.js의 Life-cycle에 대해 아는대로 말해달라
    • Vue.js 에서 DOM은 어느 시점에 생성되나
    • Computed와 Methods의 차이점은 무엇인가
    • 가상돔(Virtual DOM) 개념은 무엇이며, DOM과의 차이점 가상돔의 개념이 사용되게된 배경은 무엇인가
    • 최근의 프레임워크를 사용할때 외부 라이브러리와의 결합시에 더 나은 코드 작성법을 고민해본적이 있는가
    • DOM을 직접 조작하는 D3.js 같은 라이브러리와의 결합시에 예상되는 문제점이 있는가
  • AMP
    • AMP의 개념은 무엇이고 기존의 것에 비해 장점은 무엇인가
    • 최근의 프레임워크들과의 조합을 고려해 본적이 있는가 ex) vue-amp..
  • 타입스크립트를 사용해본 경험이 있는가, 타입스크립트에 대한 본인의 생각과 도입시의 장점을 말해달라
  • 자바스크립트의 원시 타입(Primitive Data Type)은 몇가지이며, 전부 말해달라
    Number, String, Boolean, Null, Undefined, (Symbol)
  • 자바스크립트의 Number Type은 다른 언어들과 차이점이 무엇인가, 왜 하나만 존재하는가
  • 실행 컨텍스트(Execution Context)에 대해 설명해달라
  • 자바스크립트의 호이스팅(Hoisting)은 어떻게 이루어져 있는가
  • 클로저(Closure)란 무엇이며, 왜 이러한 패턴을 사용하는가
  • This
    • 자바스크립트에서 This는 몇가지로 추론 될수 있는가, 아는대로 말해달라
    • Call, Apply, Bind 함수에 대해 설명해달라
  • ES6
    • 크롬 정도의 브라우저를 제외하곤 ES6 스펙에 대한 지원이 완벽하지 않다. 해결방법은 무엇인가
    • Babel의 기능을 한 단어로 말해달라
    • ES6 에서 추가된 스펙에 대해 아는대로 다 말해달라(let, const, rest parameter, class, arrow function...)
    • var 와 let, const의 가장 큰 차이점은 무엇인가 (function scope와 block scope의 개념에서)
    • Class 는 무엇이고, Prototype, fucntion의 ES5 스펙만으로 Class를 구현할수 있는가
  • 자료구조(Data Structure)
    • 자료구조에 대해 공부한 적이 있는가
    • Binary Search Tree 에 대해 알고 있는가, 설명해달라
    • Graph 에서 다른 노드를 참조하는 구조를 코드로 구현 할수 있는가
  • RESTful API 가 무엇인가, 아는대로 다 말해달라
  • 클라이언트 개발시 보안 관련 이슈
    • 보안은 서버쪽에서 많이 신경쓰고 있지만, 프론트엔드 개발에서 보안관련 이슈는 어떠한 것들이 있는가
    • Wireshark 에 대해 알고 있는가
    • HTTP 통신의 문제점에 대해서 아는대로 말해달라
    • CORS(Cross-Origin Resource Sharing)는 무엇인가 왜 이러한 방법이 정의 되었으며, 본인이 코드를 작성하면서 CORS와 관련하여서 경험하였던 이슈는 무엇인가
    • 간단한 데이터를 클라이언트로만 관리 할수 있는가, 이와 관련해서 브라우저 에서 어떠한 것들을 지원하고 있는가, 예를 들면 소셜 로그인같은 것들에 대한 브라우저 종료시 발생하는 문제에 대응 경험이 있는가

개발외 질문 목록

  • 왜 개발자가 되려고 하는가

  • 개발자로서의 본인의 비전을 이야기 해달라

  • 비전공자로써 갖고 있는 컴플렉스가 있는가

  • 운영체제같은 컴퓨터공학(cs)에 대한 기초지식이 있는가

  • 최근에 관심갖거나 공부 하고 싶은 개발 기술은 무엇인가

  • 프로젝트 협업 과정을 경험한 적이 있는가

  • 공부 방법

    • 개발자가 되기 위해서 어떻게 공부하였는가
    • 학습시 주로 이용하는 웹페이지나, 동영상 강좌 페이지는 어디인가
    • 최근의 읽은 개발 관련 서적은 무엇인가
    • 즐겨 보는 개발 관련 유튜브가 있는가
    • 회사 기술 스택에 맞추어 단기간 내에 언어와 프레임워크를 학습 하여야 할 때, 어떻게 공부하고 해결할 것인가
  • 포트폴리오 제작시에 비인기 라이브러리를 사용한 경험이 있는가

  • 이러한 비인기 라이브러리에 대한 정보를 어디서 얻는가 왜 활용하였는가

인터뷰 진행하면서 느낀점(지극히 주관적) - TIP

  • 포트폴리오로 제출한 코드를 유심히 보는 면접관은 많지 않다

  • 마찬가지로 코드의 결과물을 최종 빌드하여 결과물을 보는 면접관은 더욱 드물다
    (깃허브에 결과물의 메인페이지라도 캡쳐해서 올려놓는걸 추천합니다)

  • 로켓펀치와 원티드를 기준으로 구체적인 통계를 내보지 않았지만, 신입보다 경력직을 훨씬 선호한다

  • 채용공고 검색시에 신입, 경력 가리지 말고 본인이 관심 있는 기술을 사용 하고 있는 회사, 배우고 싶은 기술을 채택하고 잇는 회사에 이력서를 꼭 내시길 권유드립니다. (채용이 되지 않아도 앞으로 볼 일 없다)

  • 본인이 부족하다고 생각하여도 보유 스킬을 최대한 적어내야한다
    (면접관이 질문할게 없으면 나한테 질문하라고 하는데 이것 또한 난감하다)

  • 면접전에 지원회사의 서비스를 보고가야한다. 합류시 자사의 서비스 중 개선하고 싶은점과 서비스에 대해 평가를 해달라고 말하는 경우가 종종 있었다.

  • 모르는 것을 아는 것 처럼 이야기 하지도 말고, 지나치게 솔직하게 이야기 하지도 말자
    (면접을 다니면서 초기에 본인은 두 가지 다 문제가 되었고, 면접관들에게 지적받고 주의하게 되었다)
    ex) CORS 관련 질문을 받았을때, API 사용량 제한등을 설명하면서 올바른 답변을 하지 못해 면접후에 메일로 피드백 받은 경험이 있다.

  • 일부 회사 인터뷰 진행시, 채용과 별도로 면접관의 면접관련 경험을 위해 면접을 본다는 느낌을 받은 적이 있다
    (면접관이 책임자직급에서 멀어질수록 그럴 확률이 있다)

  • 포트폴리오를 깃허브에 업로드시 코드가 허접하더라도 README.md를 자세히 작성하여야 한다

개발 인터뷰 관련 링크

28개의 댓글

comment-user-thumbnail
2018년 11월 28일

소중한 경험을 공유해 주셔서 감사합니다 ㅠㅠ 많은 도움이 됐어요!

답글 달기
comment-user-thumbnail
2018년 11월 29일

좋은 정보 감사합니다!
깊이있는 질문들이 많군요 ㅎㅎ

답글 달기
comment-user-thumbnail
2018년 12월 1일

README.md에 어떠한 내용을 자세히 적으라는건가요 ?

1개의 답글
comment-user-thumbnail
2018년 12월 12일

헉! 좋은 정보 감사합니다.

답글 달기
comment-user-thumbnail
2018년 12월 13일

좋은 내용 감사드립니다!!

답글 달기
comment-user-thumbnail
2018년 12월 14일

좋은 글 감사합니다!

답글 달기
comment-user-thumbnail
2018년 12월 14일

감사합니다

답글 달기
comment-user-thumbnail
2018년 12월 18일

감사합니다~

답글 달기
comment-user-thumbnail
2018년 12월 31일

좋은 내용 감사드립니다~

답글 달기
comment-user-thumbnail
2019년 1월 24일

요즘 스타트업 미쳤네요.. 진심인가.. 신입한테 하는 질문 이라구요 ?
제가 못난걸수도 있는데, 경력직도 여기 적힌 지식 반도 모릅니다

답글 달기
comment-user-thumbnail
2019년 1월 26일

생각보다 요구하는것이 많네요... 분발해야겠습니다..!

답글 달기
comment-user-thumbnail
2019년 2월 18일

인상 깊은 글이었습니다. 여쭤볼 게 있는데 혹시 메일 주소가 어떻게 되시나요?

답글 달기
comment-user-thumbnail
2019년 3월 26일

이정도 스팩을 요구하는 회사가 있군요... 제가 다니는 회사는 저런수준은 커녕 OOP로 javascript 구성만 할줄 알면 뽑으려고 하는데도 아직까지 못뽑고 있는데...

답글 달기
comment-user-thumbnail
2019년 4월 2일

헛 글 읽다가 혼자 (뭐지? 이게 요즘 신입 면접 스펙이라고?? 헐? 어.. 쓰곤 있는데 어 자세히 설명하기가 어...)
이러다가 다른분들 댓보고 위안을..ㅠㅠ

답글 달기
comment-user-thumbnail
2019년 4월 4일

오 감사합니다!

답글 달기
comment-user-thumbnail
2019년 4월 12일

잘 보고 갑니다! 정말 감사합니다 :)

답글 달기
comment-user-thumbnail
2019년 4월 23일

잘보고갑니다! 이런 공유글 남겨주셔서 감사합니다 !

답글 달기
comment-user-thumbnail
2019년 5월 23일

좋은 내용 감사합니다!

답글 달기
comment-user-thumbnail
2019년 5월 25일

소중한 정보 공유 감사합니다!👍🏼

답글 달기
comment-user-thumbnail
2019년 6월 4일

소중한 경험 공유 감사드립니다 !

답글 달기
comment-user-thumbnail
2019년 6월 4일

와 스타트업 신입한테 요구하는 수준이 너무 높네요. 전 경력자인데 얼마전에 인터뷰 봤던 수준하고 비슷하거나 더 높은거 같습니다.

답글 달기
comment-user-thumbnail
2019년 9월 24일

소중한 경험 공유 정말 감사합니다. : )

답글 달기
comment-user-thumbnail
2019년 11월 16일

react및 vue같은 라이브러리 같은
코어 개발 경험이 없으면 대답할 수 없는 질문들도 몇 개 보이는군요.

답글 달기
comment-user-thumbnail
2020년 1월 3일

감사합니다!!!

답글 달기
comment-user-thumbnail
2020년 6월 30일

좋은 정보 너무 감사드립니다. 저도 비전공자로 프론트엔드쪽 취업을 준비중인데 도움이많이될것같습니다!

답글 달기
comment-user-thumbnail
2021년 5월 27일

잘 읽고 갑니다. 읽고 나니 생각이 많아지네요. 항상 좋은 글 올려주셔서 감사합니다 :)

답글 달기
comment-user-thumbnail
2023년 2월 21일

경험 공유 감사드립니다~

답글 달기