티스토리 뷰

기타/기타 글들

[스크랩]웹 개발자 면접질문

철철22 2018. 10. 1. 14:06
반응형

원본 이동

ㅇHTML에 관련된 질문들:

  • doctype이 무엇을 하는 것이고, 몇 번 지정할 수 있나요?
    =>
    DOCTYPE은 문서의 종류를 선언하는 태그
    Document Type Definition, DTD라고 하며, 어떤 버전의 HTML을 사용할 것인지를 인터넷 브라우저에 알려준다.
    html5 = <!DOCTYPE html> 이런 형식으로 <html>위에 한번 사용

    <!-- 버전마다 선언 방식이 다름 -->

    출처
    doctype
    http://theqoop.tistory.com/265
    http://tuhbm.tistory.com/2



  • 다국어가 포함된 페이지는 어떤 방식으로 제공하나요?
  • 다국어 페이지를 제공하는 여러 방법에 대해 설명해주세요.

  • data-속성은 무엇을 하는 것인가요? 사용했을때 이점은 무엇인가요?
    =>
    data- 속성은, 
    HTML5에서 공식 지원하는 데이터 속성
    나만의 새로운 속성을 추가하고자 할 때에 사용된다.

    출처
     https://www.zerocho.com/category/HTML/post/5a76d1eaabd090001b981ba6
     https://tonks.tistory.com/147

  • 쿠키(Cookies)와 세션저장소(sessionStorage)와 로컬저장소(localStorage)의 차이점을 설명해주세요.
    =>
    쿠키는 클라이언트 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일
    쿠키에는 이름, 값, 만료날짜, 경로 정보가 들어있다.
    쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조

    세션은 일정 시간동안 같은 브라우저로 부터 들어오는 일련의 요구를 하나의 상태로 보고 그 상태를 유지하는 기술이다.
    즉, 웹 브라우저를 통해 웹 서버에 접속한 이후로 브라우저를 종료할 때 까지 유지되는 상태

    세션 스토리지와 로컬스토리지는 HTML5 에서 추가된 저장소이며 간단한 키와 값을 지정할 수 있다.
    둘의 차이는 영구성이며, 로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 브라우저에 남아 있으며, 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 때 제거됨

    출처 
    쿠키와 세션의 차이
    http://jeong-pro.tistory.com/80

    세션스토리지, 로컬 스토리지
    https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048


  • <script>, <script async>와 <script defer>의 차이점에 대해 설명해주세요.
    => https://blog.asamaru.net/2017/05/04/script-async-defer/

  • CSS<link>를 <head></head>사이에 쓰는것과 JS<script>를 <body></body>뒤에 사용하는것은 좋은 사용법일까요? 어디에 배치하는게 좋을까요?
    =>
    CSS파일을 로드하는 방법은 기본적으로 <link>태그와 @import 로 추가하는 방법이 있으며
    <link>는 기본적으로 외부에 있는 리소스를 가져오는 태그이며 <head> 섹션 안에 들어와야 한다.


    웹브라우저가 HTML 문서를 해석(Parsing) 할 때 <script> 태그를 만나면 그 안에 있는 JavaScript 의 처리가 끝날 때 까지 다른 HTML의 해석을 멈추기 때문에 사용자 입장에서 HTML 페이지가 화면에 다 그려지기까지 더 오래걸리게 됩니다. 그래서 우선 CSS, HTML 해석이 먼저 완료되고 나서 JavaScript 가 수행하는 것이 더 빠르게 느껴지기 때문에 HTML 문서의 마지막(= </body> 직전)에 두는 것을 권합니다.

  • 출처
    <link>
    http://triki.net/wiki/1733

    <script> 위치 
    https://teamtreehouse.com/community/best-practice-where-to-include-your-script-tags

  • progressive rendering이란 무엇인가요?
  • HTML templating language를 사용해 본 경험이 있나요?

Javascript에 관련된 질문들:

  • event delegation에 대해 설명해주세요.
  • this는 javascript에서 어떻게 작동하는지 설명해주세요.
  • prototype 기반 상속은 어떻게 하는지 설명해주세요.
  • null과 unedefined 그리고 undeclared의 차이점은 무엇인가요?
    • 두개를 구분하기 위해서는 어떻게 하면 될까요?
  • 클로져(Closure)는 무엇이며, 어떻게/왜 사용하는지 설명해주세요.
    • 클로져를 만들 때 선호하는 패턴은 무엇인가요? argyle (IIFEs에만 적용할 수 있다)
  • 익명함수(anonymous functions)는 주로 어떤 상황에서 사용하나요?
  • "Javascript 모듈 패턴(Javascript module pattern)"이 무엇인지 설명을 해주시고, 언제 사용하는지도 말씀해주시기 바랍니다.
    • "네임스페이스(namespacing)"에 대해서 언급을 하면, 보너스 포인트가 있습니다.
    • 당신의 모듈이 네임스페이스가 없는 상황이라면?
  • 호스트 객체(Host Objects)와 네이티브 객체(Native Objects)의 차이점은 무엇인가요?
  • .call과 .apply의 차이점은 무엇인가요?
  • Function.prototype.bind을 설명 하시오
  • 코드 최적화를 하는 시점은 언제인가요?
  • Javascript에서 어떻게 상속을 하는지 설명할 수 있나요?
    • "누구도 할 수 없어요" 같은 재밌는 대답 시에 보너스 포인트가 있습니다.
    • 안되는 이유에 대해서 설명을 시도한다면, 더 많은 점수를 주세요.
  • 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

네트워크 질문들:

  • 전통적으로, 웹사이트의 assets을 여러 도메인으로 서빙했을 때 장점은 무엇인가요?
  • URL로 접속했을 때 어떤 플로우로 화면에 웹사이트가 그려지는지 네트워크 관점에서 설명해주세요.
  • Long-Polling과 Websocket, Server-Sent Event에 대해 설명해주세요.
  • 다음 request header들에 대해 설명해주세요.
    • Diff. between Expires, Date, Age and If-Modified-...
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options

  • HTTP와 HTTPS에 대해 설명해주세요.

    HTTP (Hyper Text Transfer Protocol)

    WWW 상에서 정보를 주고받을 수 있는 프로토콜이다. 주로 HTML 문서를 주고받는 데에 쓰인다. TCP와 UDP를 사용하며, 80번 포트를 사용한다. 1996년 버전 1.0, 그리고 1999년 1.1이 각각 발표되었다.

    HTTP는 클라이언트와 서버 사이에 이루어지는 요청/응답(request/response) 프로토콜이다. 예를 들면, 클라이언트인 웹 브라우저가 HTTP를 통하여 서버로부터 웹페이지나 그림 정보를 요청하면, 서버는 이 요청에 응답하여 필요한 정보를 해당 사용자에게 전달하게 된다. 이 정보가 모니터와 같은 출력 장치를 통해 사용자에게 나타나는 것이다.

    HTTPS

    HTTPS = HTTP + SSL 로 도식화할 수 있습니다.
    HTTP = Hyper Text Transfer Protocol. Hypertext인 html을 전송하기 위한 통신 규약
    HTTPS = HTTP + S(over Secure socket layers). 보안이 강화된 HTTP

    SSL(Secure Socket Layer) = TLS(Transport Layer Security). 인터넷에서 정보를 암호화해서 송수신하는 프로토콜로 넷스케이프가 개발. 국제 인터넷 표준화 기구에서 표준으로 인정받은 프로토콜임. 표준에 명시된 정식 명칭은 TLS이지만 아직도 SSL이라는 용어가 많이 사용됨.


    출처
    HTTP
    https://ko.wikipedia.org/wiki/HTTP
    HTTPS
    https://ko.wikipedia.org/wiki/HTTPS
    https://gobooki.net/archives/1454

  • HTTP Method들에 대해 설명해주세요.




기타 






참고

HTML과 XHTML의 차이

 http://tuhbm.tistory.com/2

 http://blog.wystan.net/2007/05/24/xhtml-vs-html


XML과 XHTML의 차이

https://ko.esdifferent.com/difference-between-xml-and-xhtml



반응형
저작자표시

'기타 > 기타 글들' 카테고리의 다른 글

AR이란?  (0) 2018.12.05
window 에서 패키지 관리자 scoop  (0) 2018.11.19
NPM 옵션  (0) 2018.08.01
Mac에서 패키지 관리 및 node관리  (0) 2018.07.27
플랫폼이란  (0) 2018.07.06
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
글 보관함