배고픈 희동이 IT 스토리

[면접] 프론트엔드 면접질문(웹개발자) - 1 본문

정보공유/프론트엔드 면접질문

[면접] 프론트엔드 면접질문(웹개발자) - 1

배고픈 희동이 2019. 8. 4. 10:02

javascript, jquery, html, css 면접질문.

웹개발자 면접질문. front-end 프론트엔드 면접질문 스크랩 자료 공유합니다.

 

스크랩 출처

 

Javascript에 관련된 질문들

  • event delegation에 대해 설명해주세요.
  • this는 javascript에서 어떻게 작동하는지 설명해주세요.
  • prototype 기반 상속은 어떻게 하는지 설명해주세요.
  • AMD와 CommonJS는 무엇이고, 이것들에 대해 어떻게 생각하시나요?
  • null과 unedefined 그리고 undeclared의 차이점은 무엇인가요?
    • 두개를 구분하기 위해서는 어떻게 하면 될까요?
  • 클로져(Closure)는 무엇이며, 어떻게/왜 사용하는지 설명해주세요.
    • 클로져를 만들 때 선호하는 패턴은 무엇인가요? argyle (IIFEs에만 적용할 수 있다)
  • 익명함수(anonymous functions)는 주로 어떤 상황에서 사용하나요?
  • "Javascript 모듈 패턴(Javascript module pattern)"이 무엇인지 설명을 해주시고, 언제 사용하는지도 말씀해주시기 바랍니다.
    • "네임스페이스(namespacing)"에 대해서 언급을 하면, 보너스 포인트가 있습니다.
    • 당신의 모듈이 네임스페이스가 없는 상황이라면?
  • 당신의 코드를 어떻게 구성하는지?(모듈 패턴, Class기반 상속?)
  • 호스트 객체(Host Objects)와 네이티브 객체(Native Objects)의 차이점은 무엇인가요?
  • 다음 코드의 차이점은 무엇인가요?
function Person(){} var person = Person() var person = new Person()
  • .call과 .apply의 차이점은 무엇인가요?
  • Function.prototype.bind을 설명 하시오
  • document.write()는 언제 사용하나요?
  • 코드 최적화를 하는 시점은 언제인가요?
  • Javascript에서 어떻게 상속을 하는지 설명할 수 있나요?
    • "누구도 할 수 없어요" 같은 재밌는 대답 시에 보너스 포인트가 있습니다.
    • 안되는 이유에 대해서 설명을 시도한다면, 더 많은 점수를 주세요.
  • document.write()를 언제 사용하시나요?
    • 정답 : 1999년 - 초보개발자를 걸러내기 위한 시절
  • UA문자열을 이용하여 기능 검출(feature detection)과 기능 추론(feature inference)의 차이점을 설명 하시오.
  • AJAX에 관해 가능한 자세히 설명하세요.
  • AJAX를 사용했을때의 장점과 단점에 대해 설명해주세요.
  • JSONP가 어떻게 동작 되는지 설명하세요.(그리고,실제 AJAX와 어떻게 다른지 설명하세요.)
  • 기존에 Javascript 템플릿을 사용한 적이 있나요? 만약에 있다면, 어떠한 방식으로 사용했는지 말씀해주세요.
  • "호이스팅(Hoisting)"에 대해서 설명 하시오.
  • 이벤트 버블링(Event Bubbling)에 대해서 설명하세요.
  • "속성(Attribute)"와 "요소(property)"의 차이가 무엇인가요?
  • Javascript 객체를 확장하는 것이 좋지 않은 이유는 무엇인가요?
  • docuemnt load event와 DOMContentLoaded event의 차이점은 무엇인가요?
  • ==와 ===의 차이점은 무엇인가요?
  • Javascript의 "동일출처정책(the same-origin policy)"에 대해서 설명하세요.
  • Javascript의 상속패턴(inheritance patterns)에 대해서 설명하세요.
  • 다음 코드를 동작하게 만드세요.
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
  • Javascript에서 메모이제이션(memoization, 중복 계산 방지)에 대한 전략을 설명해주세요.
  • 삼항식(Ternary statement)을 사용하는 이유는 무엇이고, 그것을 표현하기 위한 연산자 단어는 무엇인가요?
  • use strict;은 무엇이고, 사용했을때 장단점에 대해서 설명해주세요.
  • 100번 반복되는 반복문이 있습니다. 3의 배수일때는 fizz, 5의 배수일때는 buzz, 3과 5의 공배수일때는 fizzbuzz가 출력되는 코드를 작성해보세요.
  • 전역 scope를 사용했을 때 장단점에 대해 설명해주세요.
  • 때때로 load event를 사용하는 이유에 대해 설명해주세요. 또 단점이 있다면 대안책에 대해서도 설명해주세요.
  • SPA에서 SEO에 유리하도록 만들기 위한 방법에 대해 설명해주세요.
  • Promise란 무엇인가요? 또 polyfills이란 무엇인가요?
  • Promise를 사용방법과 사용했을 때 이점에 대해 설명해주세요.
  • javascript의 작동방식의 장단점에 대해 설명해주세요.
  • javascrpt를 디버깅할때 사용하는 툴이 있으면 설명해주세요.
  • object properties와 array items를 순회할 때 사용하는 문법에 대해 설명해주세요.
  • mutable object와 immutable object에 대해 설명해주세요.
  • 동기방식과 비동기방식에 대해 설명해주세요.
  • event loop란 무엇인가요?
    • call stack과 task queue에 대해 설명해주세요.

Javascript 코드 예제

>~~3.14

문제: 위 상황의 결과 값은?

답: 3

 

"i'm a lasagna hog".split("").reverse().join("");

문제: 위 상황의 결과 값은?

답: "goh angasal a m'i"

 

( window.foo || ( window.foo = "bar" ) );

문제: window.foo의 값은 무엇인가요?

답: "bar"

처음에 window.foo는 false, undefined 혹은 0등의 값을 가지고 있다.

var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar);

문제: 어떠한 두 가지의 알럿이 나올까요?

답: "Hello World" & ReferenceError: bar is not defined

 

 

jQuery에 관련된 질문들

  • "체이닝(Chaining)"에 대해서 설명 하세요.
  • .end()는 무엇을 하는 것입니까?
  • 이벤트 핸들러 선언 시, 언제 그리고 왜 namespace를 부여하는지를 설명해주세요.
  • 이펙트 큐(queue)라는 것은 무엇인가요?
  • .get(),[] 그리고 .eq()의 차이점이 무엇인가요?
  • .bind(),.live()그리고 .delegate()의 차이점이 무엇인가요?
  • $과 $.fn 차이점이 무엇인지 설명 해주시오. 혹은, $.fn가 무엇인지 설명해주세요.
  • 다음 Selector를 최적화 해주세요.:
$(".foo div#bar:eq(0)")

 

HTML에 관련된 질문들

  • doctype이 무엇을 하는 것이고, 몇 번 지정할 수 있나요?
  • 표준모드(standards mode)와 쿽스모드(quirks mode)의 다른 점은 무엇인가요?
  • XML과 XHTML의 다른 점은 무엇인가요
  • XHTML을 이용한 페이지의 한계점은 무엇이 있나요?
  • application/xhtml+xml으로 지정한 페이지에 어떠한 문제가 있나요?
  • 다국어가 포함된 페이지는 어떤 방식으로 제공하나요?
  • 다국어 페이지를 제공하는 여러 방법에 대해 설명해주세요.
  • data-속성은 무엇을 하는 것인가요? 사용했을때 이점은 무엇인가요?
  • HTML5를 오픈웹플랫폼(open web platform)으로 생각해본다면, 어떤 것들로 구성돼 있을까요?
  • 쿠키(Cookies)와 세션저장소(sessionStorage)와 로컬저장소(localStorage)의 차이점을 설명해주세요.
  • <script>, <script async>와 <script defer>의 차이점에 대해 설명해주세요.
  • CSS<link>를 <head></head>사이에 쓰는것과 JS<script>를 <body></body>뒤에 사용하는것은 좋은 사용법일까요? 어디에 배치하는게 좋을까요?
  • progressive rendering이란 무엇인가요?
  • HTML templating language를 사용해 본 경험이 있나요?

CSS 관련 질문들

  • class와 id의 차이점에 대해서 설명해주세요.
  • "reset" CSS가 무엇인지, 어떻게 유용한지 설명 해주세요.
  • Floats가 어떻게 동작하는지 설명해주세요.
  • z-index에 대해 설명해주세요.
  • BFC(Block Formatting Context)에 대해 설명해주세요
  • 클리어링(Clearing) 기술에는 어떤 것들이 있으며, 어떠한 경우에 어떻게 사용하는 것이 적절한지 설명하세요.
  • CSS 스프라이트(CSS Sprites)를 설명하고, 페이지나 사이트를 어떻게 향상시키는지 설명하시오.
  • Image Replacement를 사용해야 할 때, 선호하는 기술과 언제 사용하는지를 설명 해주세요.
  • 브라우저 스펙차이에 따른 이슈는 어떤것들이 있는지 설명해주세요.
  • IE box model과 W3C box model의 차이점을 설명헤주세요.
  • 시각적으로 보이지 않게 만드는 방법에 대해 설명해주세요.
  • CSS 요소핵(CSS property hacks)을 조건부적으로 .css파일안에 넣으시나요 혹은 다른 방식이 있나요?
  • 기능이 제약된 브라우저를 위해서 어떤 방식으로 페이지를 만드나요?
    • 어떠한 기술과 절차를 거치는지 설명하시오.
  • 컨텐츠를 안보이게 하는 기술들의 차이점을 설명하시오.(그리고 스크린 리더(Screen readers)에서 접근이 가능한 방법은?)
  • 그리드 시스템(Grid system)을 사용한 적이 있나요? 있다면 어떠한 것을 선호하나요?
  • 미디어 쿼리(media queries)를 사용한 적이 있나요? 혹은 모바일에 맞는 layout과 CSS를 사용한 적이 있나요?
  • SVG를 스타일링 하기 위한 편한 방법이 있나요?
  • 인쇄를 하기 위해 웹페이지를 어떻게 최적화 하나요?
  • 효율적인 CSS를 작성하기 위한 "비법(gotchas)"은 어떤 게 있나요?
  • CSS 전처리(CSS preprocessors)를 사용해보셨나요?
    • 그렇다면, 사용 경험에 기반해 좋았던 점과 나빴던 점을 설명해주세요.
  • 페이지에서 표준 폰트가 아닌 폰트 디자인을 사용할 때 어떤 방식으로 처리하시나요?(웹폰트를 제외하고)
  • CSS Selector가 어떠한 원리로 동작하는지 설명해주세요.
  • pseudo-elements에 대해서 설명주세요.
  • box model에 대해 설명하고 브라우저에서 어떻게 동작하는지 설명해주세요.
  • * { box-sizing: border-box; }은 무엇이고 사용했을때 이점은 무엇인가요?
  • inline과 inline-block의 차이점은 무엇인가요?
  • relative, fixed, absolute, 그리고 정적 포지션 엘리멘트의 차이점은 무엇인가요?
  • cascading에 대해서 설명해주세요. 또 cascading system의 장점은 무엇인가요?
  • CSS framework를 사용해본적이 있으신가요? 실무에서 사용해보았다면 어떤 이점이 있었나요?
  • 반응형 디자인은 adaptive 디자인과 어떤 차이점이 있나요?
  • 레티나 그래픽 환경에서 작업해 보신적이 있나요? 하셨다면 어떤 기술을 사용하셨나요?

 

나머지는 2탄에서 올리겠습니다.

감사합니다. 총총

 

저작자표시

'정보공유 > 프론트엔드 면접질문' 카테고리의 다른 글

[면접] 프론트엔드 면접질문(웹개발자) - 2  (0) 2019.08.05
'정보공유/프론트엔드 면접질문' Related Articles more
Comments