├── .editorconfig ├── LICENSE.md ├── Translations ├── Korean │ ├── Reference.md │ └── README.md ├── Japanese │ └── README.md ├── Chinese │ └── README.md ├── Chinese-Traditional │ └── README.md ├── Croatian │ └── README.md ├── Polish │ └── README.md ├── Serbian │ └── README.md ├── Dutch │ └── README.md ├── Slovenian │ └── README.md ├── Czech │ └── README.md ├── Slovakian │ └── README.md ├── Danish │ └── README.md ├── Bulgarian │ └── README.md ├── Russian │ └── README.md ├── Latvian │ └── README.md ├── Swedish │ └── README.md ├── Italian │ └── README.md ├── German │ └── README.md ├── Turkish │ └── README.md └── Portuguese │ └── README.md └── CONTRIBUTING.md /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | end_of_line = lf 8 | indent_size = 2 9 | indent_style = space 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2012 - 2015 Contributors to https://github.com/h5bp/Front-end-Developer-Interview-Questions 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /Translations/Korean/Reference.md: -------------------------------------------------------------------------------- 1 | ##해설집 2 | ``` 3 | 이 문서는 정답을 알려주는 문서가 아닙니다. 4 | 면접에 대한 답은 스스로가 찾아야 좋으며, 5 | 그 판단을 돕기 위한 해설서 임을 밝히는 바입니다. 6 | ``` 7 | 8 | ##기여자 9 | @Songhun(http://songhun.blogspot.com) 10 | @YiHanghee(http://blog.javarouka.me) 11 | 12 | ##일반적인 질문에 대한 참고 13 | * SNS에 대해서 물어보는 이유가 무엇일까요? 14 | 15 | ##HTML에 대한 참고 16 | * `doctype`에 대한 설명은 [Wikipedia](http://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%ED%98%95%EC%8B%9D_%EC%84%A0%EC%96%B8) 에서 찾아볼 수 있습니다. 17 | * 문서 타입에 대한 자세한 설명을 담은 블로그 ["Activating Browser Modes with Doctype"](http://hsivonen.iki.fi/doctype/) 18 | * 표준 모드는 W3C의 표준에 맞춘 구현 렌더링으로 동작하며(미세하게 다릅니다), 쿽스 모드는 다양한 브라우저 및 표준 정립 이전의 구버전 기준으로 작성된 HTML의 fallback 과 비슷합니다. 19 | * [Quirks Mode 렌더링과 DTD.](http://naradesign.net/wp/2007/03/27/118/) 20 | * [Mozilla's Quirks Mode](https://developer.mozilla.org/ko/Mozilla's_Quirks_Mode) 21 | * [XHTML 과 HTML의 차이](http://blog.wystan.net/2007/05/24/xhtml-vs-html) 블로그 포스팅에 4부작(?)으로 좋은 설명이 있네요. 22 | * application/xhtml+xml 컨텐트 타입은 브라우저에 따라 해석할 수 없기도 합니다.(IE...) 23 | * 엘리먼트의(특히 루트인 html) lang attribute 와 관련이 있을까요...? 24 | * [HTML 5 + XML = XHTML 5](http://html5doctor.com/html-5-xml-xhtml-5/), 25 | * Programer custom attribute. ex) 자동차를 엘리먼트로 나타내야 할 경우를 생각해보면 기본 html 속성으로는 부족하겠죠. 26 | * HTML4의 콘텐츠 모델이 div와 span에 id와 클래스를 입힌 inline 및 block display의 사용자 정의형이라면, HTML5는 그것을 표준화한 콘텐츠 모델. 27 | * 자세한 것은 [내용 모델(한글 by ClearBoth 팀)](http://html5.clearboth.org/content-models.html) 이쪽으로. 28 | * open web platform 이 뭘까요...? 29 | * 서버와 공유할 필요가 있는지의 여부, 저장 용량, 저장 생명주기에 따라 셋을 구분할 수 있습니다. 30 | 31 | ##Javascript에 대한 참고 32 | * 유명한 Javascript Library는 다음과 같습니다. 33 | * jQuery 34 | * Prototype.js 35 | * YUI 36 | * Ext JS 37 | * Dojo 38 | * Java와 Javascript는 Car와 Carpet의 차이와 비슷하다고 할 수 있습니다. 39 | * [Undeclared, Undefined, Null in JavaScript](http://constc.blogspot.com/2008/07/undeclared-undefined-null-in-javascript.html) 40 | * [Naver Developer에서 제공 되는 Closure설명](http://dev.naver.com/tech/ajaxui/ajaxui_2.php#a_2_2) 41 | * [Javascript anonymous functions](http://helephant.com/2008/08/23/javascript-anonymous-functions/) 42 | * [Pro Javascript Techniques(3): Anonymous Functions(한글)](http://happyzoo.tistory.com/124) 43 | 44 | ##jQuery에 대한 참고 45 | * jQeury들의 거의 모든 method들은 jQuery object를 돌려주도록 되어있습니다. 46 | * 이 특성으로 인해 같은 scope에서 일어나는 거의 모든 method들을 연결하여 정의를 할 수 가 있습니다. 47 | * Paul Irish 가 작성한 [블로그](http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/) 를 참고하시면 좋을 듯 합니다. 48 | * [.end()](http://api.jquery.com/end/) 49 | * [Namesapced Events](http://docs.jquery.com/Namespaced_Events) 50 | * [Effect queue()](http://api.jquery.com/queue/) 51 | * [Understanding jQuery Effects Queue](http://blog.bigbinary.com/2010/02/02/understanding-jquery-effects-queue.html) 52 | 53 | 54 | ##CSS 참고 55 | 56 | ##흥미로운 질문들에 대한 참고 57 | * http://html5homi.es/ 58 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Front-end Developer Interview Questions 2 | 3 | Please take a moment to review this document in order to make the contribution 4 | process easy and effective for everyone involved. 5 | 6 | Following these guidelines helps to communicate that you respect the time of 7 | the developers managing and developing this open source project. In return, 8 | they should reciprocate that respect in addressing your issue or assessing 9 | patches and features. 10 | 11 | 12 | ## Using the issue tracker 13 | 14 | The [issue tracker](https://github.com/h5bp/Front-end-Developer-Interview-Questions/issues) is 15 | the preferred channel for spelling mistakes, errors or any general feedback. Please respect the following restrictions: 16 | 17 | * Please **do not** derail or troll issues. Keep the discussion on topic and respect the opinions of others. 18 | 19 | * Please **do not** open issues or pull requests that involve including **answers** to any of the questions. 20 | 21 | 22 | ## Pull requests 23 | 24 | Please adhere to the coding conventions used throughout the project (spelling, indentation, punctuation etc.). 25 | 26 | Adhering to the following process is the best way to get your work included in the project: 27 | 28 | 1. [Fork](https://help.github.com/articles/fork-a-repo) the project, clone your fork, and configure the remotes: 29 | 30 | ```bash 31 | # Clone your fork of the repo into the current directory 32 | git clone https://github.com//Front-end-Developer-Interview-Questions.git 33 | # Navigate to the newly cloned directory 34 | cd Front-end-Developer-Interview-Questions 35 | # Assign the original repo to a remote called "upstream" 36 | git remote add upstream https://github.com/h5bp/Front-end-Developer-Interview-Questions.git 37 | ``` 38 | 39 | 2. If you cloned a while ago, get the latest changes from upstream: 40 | 41 | ```bash 42 | git checkout master 43 | git pull upstream master 44 | ``` 45 | 46 | 3. Create a new topic branch (off the main project development branch) to 47 | contain your feature, change, or fix: 48 | 49 | ```bash 50 | git checkout -b 51 | ``` 52 | 53 | 4. Locally merge (or rebase) the upstream development branch into your topic branch: 54 | 55 | ```bash 56 | git pull [--rebase] upstream master 57 | ``` 58 | 59 | 5. Squash your commits down to a single one (we want to keep the master branch nice and clean) 60 | 61 | 5. Push your topic branch up to your fork: 62 | 63 | ```bash 64 | git push origin 65 | ``` 66 | 67 | 7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/) 68 | with a clear title and description. 69 | 70 | **IMPORTANT**: By submitting patches, you agree to allow the project owners to license your work under the terms of the [MIT License](LICENSE.md). 71 | -------------------------------------------------------------------------------- /Translations/Korean/README.md: -------------------------------------------------------------------------------- 1 | #면접 문제 은행 2 | 3 | @version 1.0 4 | 5 | ##Contributors 6 | 7 | @bentruyman (http://bentruyman.com/), @roger_raymond (http://twitter.com/iansym), @ajpiano (http://ajpiano.com/), @paul_irish (http://paulirish.com/), @SlexAxton (http://alexsexton.com/), @boazsender (http://boazsender.com/), @miketaylr (http://miketaylr.com/), @vladikoff (http://vladfilippov.com/), @gf3 (http://gf3.ca/), @jon_neal (http://twitter.com/jon_neal), @wookiehangover (http://wookiehangover.com/) and @darcy_clarke (http://darcyclarke.me) 8 | 9 | ##한국어 번역(한국 상황에 맞춰서 약간 수정 하였습니다.) 10 | @ohgyun(http://ohgyun.com), @nerdog, @javarouka, @Songhun(http://songhun.blogspot.com) 11 | 12 | ## 일반적인 질문: 13 | 14 | * Twitter,Facebook 혹은 Me2day등의 SNS를 사용하시나요? 15 | * 사용한다면, 누구를 팔로우 하고 있나요? 16 | * GitHub을 사용하시나요? 17 | * 사용한다면, 어떤 프로젝트를 Watch 혹은 Fork하시나요? 18 | * 자주 보는 Blog가 있습니까? 19 | * 버전 관리 시스템은 어떤 것들을 사용해보셨습니까? 20 | * 선호하는 개발 환경은 무엇입니까? (운영체제, 에디터, 브라우저, 도구 등등) 21 | * 당신이 웹 페이지를 만들 때의 과정을 설명 해주실 수 있을까요? 22 | * 점진적 향상법(progressive enhancement)과 우아한 성능저하법(graceful degradation)의 차이를 설명하실 수 있습니까? 23 | * "누구도 성공하지 못합니다" 라고 말하면 보너스 포인트를 주세요. 24 | * 각 특색을 설명을 한다면, 더 높은 보너스 포인트를 주세요. 25 | * "시멘틱 HTML(Semantic HTML)"이 무엇을 뜻하는지 설명해주세요. 26 | * "최소화(minification)"가 무엇을 하는 것입니까? 27 | * 여러 도메인을 이용하여 서버 사이트 데이터를 제공하는 것이 더 나은 이유는 무엇인가요? 28 | * 브라우저가 한 번에 1개의 도메인에서 다운로드 받는 리소스는 몇 개 인가요? 29 | * 만약에 디자인을 표현하기 위해 8개의 다른 Stylesheet를 가지고 있다면, 사이트에서는 어떻게 통합하실 건가요? 30 | * 파일의 연결법을 찾아내세요. 31 | * Build system을 이용한 결합없이, `@import`를 사용하면 점수를 깎으세요. 32 | * 당신이 프로젝트에 합류했습니다. 근데 그들은 Tab을 이용하고, 당신은 Sapce를 사용했습니다. 어떻게 하실건가요? 33 | * `:retab!` 명령어를 아는지 확인 34 | * 간단한 Slideshow 페이지를 만들어보세요. 35 | * Javascript를 사용하지 않고 만들었다면, 보너스 점수가 있습니다. 36 | * 당신의 코드의 성능을 테스트하기 위해서 사용하는 도구가 무엇입니까? 37 | * 올해 당신이 익히고 싶은 기술이 있다면, 그것은 무엇입니까? 38 | * 페이지 로딩 시간을 줄이는 3가지 방법은? 39 | * 표준의 중요함을 설명하세요. 40 | 41 | ## HTML에 관련된 질문들: 42 | 43 | * `doctype`이 무엇을 하는 것이고, 몇 번 지정할 수 있나요? 44 | * 표준모드(standards mode)와 쿽스모드(quirks mode)의 다른 점은 무엇인가요? 45 | * XHTML을 이용한 페이지의 한계점은 무엇이 있나요? 46 | * `application/xhtml+xml`으로 지정한 페이지에 어떠한 문제가 있나요? 47 | * 다국어가 포함된 페이지는 어떤 방식으로 제공하나요? 48 | * HTML5에서 XHTML문법을 사용할 수 있나요? HTML5에서 XML을 어떻게 사용하나요? 49 | * `data-`속성은 무엇을 하는 것인가요? 50 | * HTML4에서 콘텐츠 모델(content models)은 무엇이며, HTML5의 그것과 다른 점은 무엇인가요? 51 | * HTML5를 오픈웹플랫폼(open web platform)으로 생각해본다면, 어떤 것들로 구성돼 있을까요? 52 | * 쿠키(Cookies)와 세션저장소(sessionStorage)와 로컬저장소(localStorage)의 차이점을 설명해주세요. 53 | 54 | ## Javascript에 관련된 질문들: 55 | 56 | * 사용해 본 Javascript 라이브러리들을 말씀해주세요. 57 | * Java와 Javascript의 다른 점은 무엇인가요? 58 | * `undefined`와 `undeclared` 변수는 무엇인가요? 59 | * 클로져(Closure)는 무엇이며, 어떻게/왜 사용하는지 설명해주세요. 60 | * 클로져를 만들 때 선호하는 패턴은 무엇인가요? argyle (IIFEs에만 적용할 수 있다) 61 | * 익명함수(anonymous functions)는 주로 어떤 상황에서 사용하나요? 62 | * "Javascript 모듈 패턴(Javascript module pattern)"이 무엇인지 설명을 해주시고, 언제 사용하는지도 말씀해주시기 바랍니다. 63 | * "네임스페이스(namespacing)"에 대해서 언급을 하면, 보너스 포인트가 있습니다. 64 | * 당신의 모듈이 네임스페이스가 없는 상황이라면? 65 | * 당신의 코드를 어떻게 구성하는지?(모듈 패턴, Class기반 상속?) 66 | * 호스트 객체(Host Objects)와 네이티브 객체(Native Objects)의 차이점은 무엇인가요? 67 | * 다음 코드의 차이점은 무엇인가요? 68 | ```javascript 69 | function Person(){} var person = Person() var person = new Person() 70 | ``` 71 | * `.call`과 `.apply`의 차이점은 무엇인가요? 72 | * `Function.prototype.bind`을 설명 하시오 73 | * 코드 최적화를 하는 시점은 언제인가요? 74 | * Javascript에서 어떻게 상속을 하는지 설명할 수 있나요? 75 | * "누구도 할 수 없어요" 같은 재밌는 대답 시에 보너스 포인트가 있습니다. 76 | * 안되는 이유에 대해서 설명을 시도한다면, 더 많은 점수를 주세요. 77 | * `document.write()`를 언제 사용하시나요? 78 | * 정답 : 1999년 - 초보개발자를 걸러내기 위한 시절 79 | * UA문자열을 이용하여 기능 검출(feature detection)과 기능 추론(feature inference)의 차이점을 설명 하시오. 80 | * AJAX에 관해 가능한 자세히 설명하세요. 81 | * JSONP가 어떻게 동작 되는지 설명하세요.(그리고,실제 AJAX와 어떻게 다른지 설명하세요.) 82 | * 기존에 Javascript 템플릿을 사용한 적이 있나요? 만약에 있다면, 어떠한 방식으로 사용했는지 말씀해주세요. 83 | * "호이스팅(Hoisting)"에 대해서 설명 하시오. 84 | * FOUC가 무엇이며 FOUC를 어떻게 방지하나요? 85 | * 이벤트 버블링(Event Bubbling)에 대해서 설명하세요. 86 | * "속성(Attribute)"와 "요소(property)"의 차이가 무엇인가요? 87 | * Javascript 객체를 확장하는 것이 좋지 않은 이유는 무엇인가요? 88 | * Document Load 이벤트와 Ready 이벤트의 차이가 무엇인가요? 89 | * `==`와 `===`의 차이점은 무엇인가요? 90 | * 브라우저의 URL에서 파라메터를 얻을 수 있는 방법에 대해서 설명하세요. 91 | * Javascript의 "동일출처정책(the same-origin policy)"에 대해서 설명하세요. 92 | * 이벤트 딜리게이션(Event Delegation)에 대해서 설명하세요. 93 | * Javascript의 상속패턴(inheritance patterns)에 대해서 설명하세요. 94 | * 다음 코드를 동작하게 만드세요. 95 | ```javascript 96 | [1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5] 97 | ``` 98 | * Javascript에서 메모이제이션(memoization, 중복 계산 방지)에 대한 전략을 설명해주세요. 99 | * 삼항식(Ternary statement)을 사용하는 이유는 무엇이고, 그것을 표현하기 위한 연산자 단어는 무엇인가요? 100 | * arity는 어떠한 함수인가요? 101 | 102 | ## Javascript 코드 예제: 103 | 104 | ```javascript 105 | >~~3.14 106 | ``` 107 | 문제: 위 상황의 결과 값은? 108 | 109 | **답: 3** 110 | 111 | ```javascript 112 | "i'm a lasagna hog".split("").reverse().join(""); 113 | ``` 114 | 문제: 위 상황의 결과 값은? 115 | 116 | **답: "goh angasal a m'i"** 117 | 118 | ```javascript 119 | ( window.foo || ( window.foo = "bar" ) ); 120 | ``` 121 | 문제: window.foo의 값은 무엇인가요? 122 | 123 | **답: "bar"** 124 | 125 | 처음에 window.foo는 false, undefined 혹은 0등의 값을 가지고 있다. 126 | 127 | ```javascript 128 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 129 | ``` 130 | 문제: 어떠한 두 가지의 알럿이 나올까요? 131 | 132 | **답: "Hello World" & ReferenceError: bar is not defined** 133 | 134 | ## jQuery에 연관된 질문들: 135 | 136 | * "체이닝(Chaining)"에 대해서 설명 하세요. 137 | * `.end()`는 무엇을 하는 것입니까? 138 | * 이벤트 핸들러 선언 시, 언제 그리고 왜 namespace를 부여하는지를 설명해주세요. 139 | * 이펙트 큐(queue)라는 것은 무엇인가요? 140 | * `.get()`,`[]` 그리고 `.eq()`의 차이점이 무엇인가요? 141 | * `.bind()`,`.live()`그리고 `.delegate()`의 차이점이 무엇인가요? 142 | * `$`과 `$.fn` 차이점이 무엇인지 설명 해주시오. 혹은, `$.fn`가 무엇인지 설명해주세요. 143 | * 다음 Selector를 최적화 해주세요.: 144 | 145 | ```javascript 146 | $(".foo div#bar:eq(0)") 147 | ``` 148 | 149 | ## CSS 관련 질문들: 150 | 151 | * "reset" CSS가 무엇인지, 어떻게 유용한지 설명 해주세요. 152 | * Floats가 어떻게 동작하는지 설명해주세요. 153 | * 클리어링(Clearing) 기술에는 어떤 것들이 있으며, 어떠한 경우에 어떻게 사용하는 것이 적절한지 설명하세요. 154 | * CSS 스프라이트(CSS Sprites)를 설명하고, 페이지나 사이트를 어떻게 향상시키는지 설명하시오. 155 | * IE box model과 W3C box model의 차이점을 설명하시오. 156 | * Image Replacement를 사용해야 할 때, 선호하는 기술과 언제 사용하는지를 설명 해주세요. 157 | * CSS 요소핵(CSS property hacks)을 조건부적으로 .css파일안에 넣으시나요 혹은 다른 방식이 있나요? 158 | * 기능이 제약된 브라우저를 위해서 어떤 방식으로 페이지를 만드나요? 159 | * 어떠한 기술과 절차를 거치는지 설명하시오. 160 | * 컨텐츠를 안보이게 하는 기술들의 차이점을 설명하시오.(그리고 스크린 리더(Screen readers)에서 접근이 가능한 방법은?) 161 | * 그리드 시스템(Grid system)을 사용한 적이 있나요? 있다면 어떠한 것을 선호하나요? 162 | * 미디어 쿼리(media queries)를 사용한 적이 있나요? 혹은 모바일에 맞는 layout과 CSS를 사용한 적이 있나요? 163 | * SVG를 스타일링 하기 위한 편한 방법이 있나요? 164 | * 인쇄를 하기 위해 웹페이지를 어떻게 최적화 하나요? 165 | * 효율적인 CSS를 작성하기 위한 "비법(gotchas)"은 어떤 게 있나요? 166 | * CSS 전처리(CSS preprocessors)를 사용해보셨나요? 167 | * 그렇다면, 사용 경험에 기반해 좋았던 점과 나빴던 점을 설명해주세요. 168 | * 페이지에서 표준 폰트가 아닌 폰트 디자인을 사용할 때 어떤 방식으로 처리하시나요?(웹폰트를 제외하고) 169 | * CSS Selector가 어떠한 원리로 동작하는지 설명하시오. 170 | 171 | ## 그 외 흥미로운 질문들: 172 | 173 | * 당신이 작성한 코드 중 어떤 것을 가장 멋지고, 자랑스럽게 여기나요? 174 | * HTML5 gang sign에 대해서 아시나요? 175 | * 배를 타본 적이 있으세요? 176 | * Firebug와 Webkit Inspector에서 좋아하는 부분을 말씀해주세요. 177 | * 당신 스스로 하는 프로젝트가 있나요? 어떤 종류인가요? 178 | * "유니콘화(cornify)"의 의미를 설명해주세요. 179 | * 한장의 종이 위에, A B C D E를 차례대로 내려 쓰시오. 그다음, 코드로 작성하지 말고, 역순으로 재배치 해보세요. 180 | * 종이를 위아래를 뒤집어낼 때 까지 기다리세요. 181 | * 이것은 인터뷰의 끝에 긴장감을 풀어주고 웃음을 줄 수 있는 좋은 방법이 입니다. 182 | * 해적입니까? 닌자입니까? 183 | * 만약에 둘 다 이며, 좋은 이유를 댄다면 보너스 점수를 주세요.(좀비 몽키 해적 닌자인 경우엔 +2) 184 | * 만약에 웹개발을 안했다면, 무엇을 했었을까요? 185 | * Carmen Sandiego는 세상의 어디에 있을가요?(힌트 : 그들의 답은 항상 틀릴겁니다.) 186 | * Internet Explorer의 당신이 좋아하는 기능은 무엇입니까? 187 | * 다음 문장을 완성하세요 : Brendan Eich 와 Doug Crockford 는 Javascript의 __________ 이다. 188 | * jQuery: 훌륭한 라이브러리인가요? 최고로 좋은 라이브러리인가요? 토론하세요. 189 | -------------------------------------------------------------------------------- /Translations/Japanese/README.md: -------------------------------------------------------------------------------- 1 | #フロントエンドデベロッパー面接時の質問事項 2 | 3 | @バージョン 2.0.0 4 | 5 | 本レポジトリはフロントエンドデベロッパー志願者のポテンシャルを見極めるのに有効な面接時の質問事項を列挙します。全ての下記質問事項を一人の志願者に聞くことは推奨されません（それは数時間もかかってしまうでしょう）。あなたが必要としているスキルを見極めるためには、下記の質問リストからいくつかの項目を選択するのがよいでしょう。 6 | 7 | [Rebecca Murphey](http://rmurphey.com/)の[Baseline For Front-End Developers](http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/)もとても参考になるので面接前によく読むことをおすすめします。 8 | 9 | **注意:** これらの質問の多くはオープンエンド型の質問であり、志願者から興味深い考えを引き出すことができるでしょう。この回答は単純でストレートな回答よりもより志願者の能力を見極めるのに役立ちます。 10 | 11 | #### オリジナルのコントリビューター 12 | 13 | 質問の多くは[Paul Irish](http://paulirish.com) ([@paul_irish](http://twitter.com/paul_irish))と下記のコントリビューターによって作成された[oksoclap](http://oksoclap.com/)スレッドをもとに作成されています。 14 | 15 | * [@bentruyman](http://twitter.com/bentruyman) - http://bentruyman.com 16 | * [@cowboy](http://twitter.com/cowboy) - http://benalman.com 17 | * [@ajpiano](http://ajpiano) - http://ajpiano.com 18 | * [@SlexAxton](http://twitter.com/slexaxton) - http://alexsexton.com 19 | * [@boazsender](http://twitter.com/boazsender) - http://boazsender.com 20 | * [@miketaylr](http://twitter.com/miketaylr) - http://miketaylr.com 21 | * [@vladikoff](http://twitter.com/vladikoff) - http://vladfilippov.com 22 | * [@gf3](http://twitter.com/gf3) - http://gf3.ca 23 | * [@jon_neal](http://twitter.com/jon_neal) - http://twitter.com/jon_neal 24 | * [@wookiehangover](http://twitter.com/wookiehangover) - http://wookiehangover.com 25 | * [@darcy](http://twitter.com/darcy) - http://darcyclarke.me 26 | * [@iansym](http://twitter.com) 27 | 28 | ### 一般的な質問事項 29 | 30 | * 昨日・今週に何を学びましたか？ 31 | * 何があなたをコーディングに惹きつけていますか？ 32 | * 最近直面した技術的な困難はどんなものですか？また、それをどのように解決しましたか？ 33 | * ウェブアプリやウェブサイトを構築する際にユーザーインターフェース、パフォーマンス、SEO、メンテナンス性などについてどのように考えますか？ 34 | * 好きな開発環境について教えてください。（OS、エディタ、ブラウザ、ツール等） 35 | * webページを作るときのあなたのワークフローを教えてください。 36 | * どのバージョン管理ツールに慣れていますか？（Git, SVNなど） 37 | * 5つの異なるスタイルシートをウェブサイトに統合する最適な方法はどんなものですか？ 38 | * プログレッシブエンハンスメントとグレースフルデグラデーションの違いを説明してください。 39 | * ウェブサイトのアセット・リソースの最適化をどのように行いますか？ 40 | * 下記のようないくつかのソリューションが期待されます。 41 | * ファイル結合 42 | * ファイルの縮小 43 | * CDNホスティング 44 | * キャッシュ利用 45 | * など 46 | * 複数のドメインからアセットを提供したほうがよい理由は何ですか？ 47 | * 一度にブラウザが与えられたドメインからダウンロードできるリソースの数はいくつですか？ 48 | * 例外は何ですか？ 49 | * ページロードを減らす３つの方法を挙げてください。 50 | * プロジェクトに加入したときに、もし彼らがタブを使い、あなたがスペースを使っていたとしたらどうしますか？ 51 | * EditorConfig (http://editorconfig.org) といったプラグインを利用するように提案する 52 | * 慣習に従う (一貫性を保つ) 53 | * `issue :retab! command` 54 | * シンプルなスライドショーのページを書いてください。 55 | * JSを使わなかったらボーナスポイント。 56 | * コードのパフォーマンスをテストするのにどんなツールを使いますか？ 57 | * プロファイラー、JSPerf、Dromaeo 58 | * もし今年１つの技術をマスターできるとしたら、何をマスターしますか？ 59 | * 標準化と標準化団体の重要性を説明してください。 60 | * FOUCとは何ですか？ どのようにFOUCを防ぐことができますか？ 61 | * ARIAとスクリーンリーダーとはなにか、またそれらがウェブサイトをどのようにアクセシブルにするか説明してください。 62 | * CSSアニメーションとJavaScriptアニメーションのそれぞれの利点と欠点を幾つか説明してください。 63 | * CORSとは何の省略ですか？また、それはどんな問題を表しますか？ 64 | 65 | ### HTMLに関する質問事項 66 | 67 | * `doctype`は何をしているか説明してください。 68 | * スタンダードモードとクアークスモードの違いは何ですか？ 69 | * XHTMLページを提供するときの制限は何ですか？ 70 | * `application/xhtml+xml`としてページを提供することに何か問題はありますか？ 71 | * 多言語でコンテンツをどのように提供しますか？ 72 | * 多言語化サイトのデザイン・開発時にどのようなことに注意すべきですか？ 73 | * `data-`属性は何にとって良いですか？ 74 | * HTML5をオープンなWEBプラットフォームとしてみなしましょう。HTML5の基本的な構成要素は何ですか？ 75 | * クッキー、セッションストレージ、ローカルストレージの違いを述べてください。 76 | 77 | ### JSに関する質問事項 78 | 79 | * イベントデリゲーションを説明してください。 80 | * JavaScriptにおいて`this`がどのように機能するか説明してください。 81 | * プロトタイプ継承がどのように機能するか説明してください。 82 | * JavaScriptをテストするのにどのように対処しますか？ 83 | * AMDとCommonJS、何が違いますか？ 84 | * ハッシュテーブルとは何ですか？ 85 | * `undefined`と`undeclared`変数は何ですか？ 86 | * クロージャとは何ですか？　どのように、そしてなぜそれを使うのですか？ 87 | * クロージャを作成するときに使うあなたの好きなパターンは何ですか？ （即時実行関数表現にのみ適用） 88 | * 匿名関数が有効な典型的なユースケースは何ですか？ 89 | * 「JavaScriptモジュールパターン」とそれを使う場面を説明してください。 90 | * 名前空間について述べたらボーナスポイント。 91 | * もしモジュールが名前空間無しだとしたらどうなりますか？ 92 | * コードをどのように整理しますか？（モジュールパターン、古典的な継承を使う？） 93 | * ホストオブジェクトとネイティブオブジェクトの違いは何ですか？ 94 | * 下記コードの違いは何？`function Person(){}`, `var person = Person()`, `var person = new Person()` 95 | * `.call`と`.apply`の違いは何ですか？ 96 | * `Function.prototype.bind`を説明してください。 97 | * いつコードを最適化しますか？ 98 | * JavaScriptにおいてどのように継承が機能しているか説明してください。 99 | * `document.write()`はいつ使いますか？ 100 | * 生成される広告の多くはいまだに嫌われている方法である`document.write()`を活用しています。 101 | * feature detection, feature inference, UA stringの使用の違いは何ですか？ 102 | * AJAXをできるだけ詳しく述べてください。 103 | * JSONPがどのように機能するか述べてください。(またそれがどのようにAJAXとは異なっているのか) 104 | * JavaScriptテンプレートは使ったことはありますか？ 105 | * 使ったことがあるのなら、何のライブラリを使いましたか？（Mustache.js, Handlebarsなど） 106 | * 「巻き上げ」を説明してください。 107 | * イベントバブリングを説明してください。 108 | * 「属性」と「プロパティ」の違いは何ですか？ 109 | * どうしてビルトインJavaScriptを拡張することは良くないのですか？ 110 | * ドキュメントロードイベントとドキュメントレディイベントの違いを述べてください。 111 | * `==`と`===`の違いは何ですか？ 112 | * ブラウザのウィンドウURLからクエリ文字列をどのように取得するかを説明してください。 113 | * JSに関するsame-origin policyを説明してください。 114 | * JavaScriptにおける継承パターンを述べてください。 115 | * 下記を動くように書き変えてください。 116 | ```javascript 117 | [1,2,3,4,5].duplicate(); // [1,2,3,4,5,1,2,3,4,5] 118 | ``` 119 | * JavaScriptにおけるメモ化（計算の繰り返しの回避）の方針について述べてください。 120 | * 三項演算子と呼ばれる理由は何ですか？ 「三項」という言葉が示していることは何ですか？ 121 | * 関数のarityとは何ですか? 122 | * `"use strict";`とは何ですか? これを使うことのメリット、デメリットは何ですか？ 123 | 124 | ### JSコードの例 125 | 126 | ```javascript 127 | ~~3.14 128 | ``` 129 | 質問: 上ステートメントで得られる値は何ですか？ 130 | **回答: 3** 131 | 132 | ```javascript 133 | "i'm a lasagna hog".split("").reverse().join(""); 134 | ``` 135 | 質問: 上ステートメントで得られる値は何ですか？ 136 | **回答: "goh angasal a m'i"** 137 | 138 | ```javascript 139 | ( window.foo || ( window.foo = "bar" ) ); 140 | ``` 141 | 質問: window.fooの値は何ですか？ 142 | **回答: "bar"** 143 | window.fooがfalseと判断される場合のみ。trueの場合はその値を保持し続ける。 144 | 145 | ```javascript 146 | var foo = "Hello"; (function() { var bar = " World"; alert(foo + bar); })(); alert(foo + bar); 147 | ``` 148 | 質問: 上2つのアラートの結果はどうなりますか？ 149 | **回答: "Hello World" & ReferenceError: bar is not defined** 150 | 151 | ```javascript 152 | var foo = []; 153 | foo.push(1); 154 | foo.push(2); 155 | ``` 156 | 質問: foo.lengthの値はどうなりますか? 157 | **回答: `2`** 158 | 159 | ```javascript 160 | var foo = {}; 161 | foo.bar = 'hello'; 162 | ``` 163 | 質問: foo.lengthの値はどうなりますか? 164 | **回答: `undefined`** 165 | 166 | ### jQueryに関する質問事項 167 | 168 | * 「chaining（チェイン）」を説明してください。 169 | * 「deferreds」を説明してください。 170 | * jQueryに関する最適化としてどんなことができますか？ 171 | * `.end()`は何ですか? 172 | * イベントハンドラに名前空間を与えるにはどのようにすればいいですか。またなぜ名前空間を与えますか。 173 | * jQueryメソッドに渡すことができる4つの異なる値を挙げてください。 174 | * セレクター (string)、HTML (string)、コールバック (function)、HTMLエレメント、オブジェクト、配列、エレメントの配列、jQueryオブジェクト等 175 | * エフェクト(あるいはfx)キューとは何ですか? 176 | * `.get()`、 `[]`、`.eq()`の違いは何ですか？ 177 | * `.bind()`、`.live()`、`.delegate()`の違いは何ですか？ 178 | * `$`、`$.fn`の違いは何ですか？ 単に`$.fn`と書いた場合はどうですか？ 179 | * 下記のセレクターを最適化してください: 180 | ```javascript 181 | $(".foo div#bar:eq(0)") 182 | ``` 183 | * `delegate()`と`live()`の違いは何ですか？ 184 | 185 | 186 | ### CSSに関する質問事項 187 | 188 | * 'reset' CSSファイルとは何ですか？　またその有用性は何ですか？ 189 | * フロートとそれらがどのように機能するかを説明してください。 190 | * フロートクリアの様々なテクニックは何ですか？その内のどれが適切でそれはどんな状況ですか？ 191 | * CSSスプライトを説明してください。またページやサイトでそれをどのように実装しますか？ 192 | * 1番好きな画像置き換えテクニックは何ですか？またいつどのテクニックを使いますか？ 193 | * .cssファイルに含み得るCSSハックは何ですか？また.cssファイル以外ではどうしますか？ 194 | * 機能が制限されたブラウザに対してどのようにページを提供しますか？ 195 | * どんなテクニック、プロセスを使いますか？ 196 | * コンテンツを視覚的に見えなくするのにどんな方法がありますか？（またスクリーンリーダーユーザーのみに見えるようにする方法は何ですか？） 197 | * グリッドシステムを使ったことはありますか？　使い続けたいと思いましたか？ 198 | * メディアクエリ、あるいはモバイルに特化したレイアウト、CSSを組んだことはありますか？ 199 | * SVGのスタイリングの知識は何かしら持っていますか？ 200 | * 印刷用ページの最適化はどのように行いますか？ 201 | * CSS記述における「gotchas（見落としがちなミス）」は何ですか？ 202 | * CSSプリプロセッサのメリット、デメリットは何ですか？（SASS、Compass、Stylus、LESS） 203 | * 使ったことのあるCSSプリプロセッサについてそれの好きなところ、嫌いなところを説明してください。 204 | * 非標準のフォントを使用したwebデザインカンプをどのように実装しますか？ 205 | * ウェブフォント（Googleウェブフォント、Typekit 等) 206 | * ブラウザがどのようにあるエレメントがどのCSSセレクタにマッチするかを決定しているかを説明してください。 207 | 208 | ### その他の質問事項 209 | 210 | * あなたがコーディングした中で一番素晴らしいものは何ですか？　何が一番誇れますか？ 211 | * あなたが使っている開発者ツールの一番好きなところは何ですか？ 212 | * 何か暖めてるアイディアは持っていますか？　それはどんなものですか？ 213 | * インターネットエクスプローラーの最も好きな機能は何ですか？ 214 | -------------------------------------------------------------------------------- /Translations/Chinese/README.md: -------------------------------------------------------------------------------- 1 | #前端工作面试问题 2 | 3 | 本文包含了一些用于考查候选者的前端面试问题。不建议对单个候选者问及每个问题 (那需要好几个小时)。只要从列表里挑选一些，就能帮助你考查候选者是否具备所需要的技能。 4 | 5 | **备注：** 这些问题中很多都是开放性的，可以引发有趣的讨论。这比直接的答案更能体现此人的能力。 6 | 7 | ## 目录 8 | 9 | 1. [常见问题](#general-questions) 10 | 1. [HTML 相关问题](#html-questions) 11 | 1. [CSS 相关问题](#css-questions) 12 | 1. [JS 相关问题](#js-questions) 13 | 1. [测试相关问题](#testing-questions) 14 | 1. [效能相关问题](#performance-questions) 15 | 1. [网络相关问题](#network-questions) 16 | 1. [代码相关问题](#coding-questions) 17 | 1. [趣味问题](#fun-questions) 18 | 19 | ## 参与协作 20 | 21 | 1. [贡献者](#contributors) 22 | 1. [如何参与贡献](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/CONTRIBUTING.md) 23 | 1. [许可协议](https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/master/LICENSE.md) 24 | 25 | #### 常见问题： 26 | 27 | * 你在昨天/本周学到了什么？ 28 | * 编写代码的哪些方面能够使你兴奋或感兴趣？ 29 | * 你最近遇到过什么技术挑战？你是如何解决的？ 30 | * 在制作一个网页应用或网站的过程中，你是如何考虑其 UI、安全性、高性能、SEO、可维护性以及技术因素的？ 31 | * 请谈谈你喜欢的开发环境。 32 | * 你最熟悉哪一套版本控制系统？ 33 | * 你能描述当你制作一个网页的工作流程吗？ 34 | * 假若你有 5 个不同的样式文件 (stylesheets), 整合进网站的最好方式是? 35 | * 你能描述渐进增强 (progressive enhancement) 和优雅降级 (graceful degradation) 之间的不同吗? 36 | * 你如何对网站的文件和资源进行优化？ 37 | * 浏览器同一时间可以从一个域名下载多少资源？ 38 | * 有什么例外吗？ 39 | * 请说出三种减少页面加载时间的方法。(加载时间指感知的时间或者实际加载时间) 40 | * 如果你参与到一个项目中，发现他们使用 Tab 来缩进代码，但是你喜欢空格，你会怎么做？ 41 | * 请写一个简单的幻灯效果页面。 42 | * 如果今年你打算熟练掌握一项新技术，那会是什么？ 43 | * 请谈谈你对网页标准和标准制定机构重要性的理解。 44 | * 什么是 FOUC (无样式内容闪烁)？你如何来避免 FOUC？ 45 | * 请解释什么是 ARIA 和屏幕阅读器 (screenreaders)，以及如何使网站实现无障碍访问 (accessible)。 46 | * 请解释 CSS 动画和 JavaScript 动画的优缺点。 47 | * 什么使 CORS，以及其要解决的问题？ 48 | 49 | #### HTML 相关问题： 50 | 51 | * `doctype`(文档类型) 的作用是什么？ 52 | * 浏览器标准模式 (standards mode) 和怪异模式 (quirks mode) 之间的区别是什么？ 53 | * HTML 和 XHTML 有什么区别？ 54 | * 如果页面使用 'application/xhtml+xml' 会有什么问题吗？ 55 | * 如果网页内容需要支持多语言，你会怎么做？ 56 | * 在设计和开发多语言网站时，有哪些问题你必须要考虑？ 57 | * `data-`属性的作用是什么？ 58 | * 如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？ 59 | * 请描述 `cookies`、`sessionStorage` 和 `localStorage` 的区别。 60 | * 请解释 `