Merge pull request #8 from Songhun/master
Merged in a Korean Translation
This commit is contained in:
Darcy Clarke
commit
e3859d7e38
|
|
@ -0,0 +1,188 @@
|
|||
#면접 문제 은행
|
||||
|
||||
@version 1.0
|
||||
|
||||
##Contributors
|
||||
|
||||
@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)
|
||||
|
||||
##한국어 번역(한국 상황에 맞춰서 약간 수정 하였습니다.)
|
||||
@ohgyun(http://ohgyun.com), @nerdog, @javarouka, @Songhun(http://songhun.blogspot.com)
|
||||
|
||||
## 일반적인 질문:
|
||||
|
||||
* Twitter,Facebook 혹은 Me2day등의 SNS를 사용하시나요?
|
||||
* 사용한다면, 누구를 팔로우 하고 있나요?
|
||||
* GitHub을 사용하시나요?
|
||||
* 사용한다면, 어떤 프로젝트를 Watch 혹은 Fork하시나요?
|
||||
* 자주 보는 Blog가 있습니까?
|
||||
* 버전 관리 시스템은 어떤 것들을 사용해보셨습니까?
|
||||
* 선호하는 개발 환경은 무엇입니까? (운영체제, 에디터, 브라우저, 도구 등등)
|
||||
* 당신이 웹 페이지를 만들 때의 과정을 설명 해주실 수 있을까요?
|
||||
* 점진적 향상법(progressive enhancement)과 우아한 성능저하법(graceful degradation)의 차이를 설명하실 수 있습니까?
|
||||
* "누구도 성공하지 못합니다" 라고 말하면 보너스 포인트를 주세요.
|
||||
* 각 특색을 설명을 한다면, 더 높은 보너스 포인트를 주세요.
|
||||
* "시멘틱 HTML(Semantic HTML)"이 무엇을 뜻하는지 설명해주세요.
|
||||
* "최소화(minification)"가 무엇을 하는 것입니까?
|
||||
* 여러 도메인을 이용하여 서버 사이트 데이터를 제공하는 것이 더 나은 이유는 무엇인가요?
|
||||
* 브라우저가 한 번에 1개의 도메인에서 다운로드 받는 리소스는 몇 개 인가요?
|
||||
* 만약에 디자인을 표현하기 위해 8개의 다른 Stylesheet를 가지고 있다면, 사이트에서는 어떻게 통합하실 건가요?
|
||||
* 파일의 연결법을 찾아내세요.
|
||||
* Build system을 이용한 결합없이, `@import`를 사용하면 점수를 깎으세요.
|
||||
* 당신이 프로젝트에 합류했습니다. 근데 그들은 Tab을 이용하고, 당신은 Sapce를 사용했습니다. 어떻게 하실건가요?
|
||||
* `:retab!` 명령어를 아는지 확인
|
||||
* 간단한 Slideshow 페이지를 만들어보세요.
|
||||
* Javascript를 사용하지 않고 만들었다면, 보너스 점수가 있습니다.
|
||||
* 당신의 코드의 성능을 테스트하기 위해서 사용하는 도구가 무엇입니까?
|
||||
* 올해 당신이 익히고 싶은 기술이 있다면, 그것은 무엇입니까?
|
||||
* 페이지 로딩 시간을 줄이는 3가지 방법은?
|
||||
* 표준의 중요함을 설명하세요.
|
||||
|
||||
## HTML에 관련된 질문들:
|
||||
|
||||
* `doctype`이 무엇을 하는 것이고, 몇 번 지정할 수 있나요?
|
||||
* 표준모드(standards mode)와 쿽스모드(quirks mode)의 다른 점은 무엇인가요?
|
||||
* XHTML을 이용한 페이지의 한계점은 무엇이 있나요?
|
||||
* `application/xhtml+xml`으로 지정한 페이지에 어떠한 문제가 있나요?
|
||||
* 다국어가 포함된 페이지는 어떤 방식으로 제공하나요?
|
||||
* HTML5에서 XHTML문법을 사용할 수 있나요? HTML5에서 XML을 어떻게 사용하나요?
|
||||
* `data-`속성은 무엇을 하는 것인가요?
|
||||
* HTML4에서 콘텐츠 모델(content models)은 무엇이며, HTML5의 그것과 다른 점은 무엇인가요?
|
||||
* HTML5를 오픈웹플랫폼(open web platform)으로 생각해본다면, 어떤 것들로 구성돼 있을까요?
|
||||
* 쿠키(Cookies)와 세션저장소(sessionStorage)와 로컬저장소(localStorage)의 차이점을 설명해주세요.
|
||||
|
||||
## Javascript에 관련된 질문들:
|
||||
|
||||
* 사용해 본 Javascript 라이브러리들을 말씀해주세요.
|
||||
* Java와 Javascript의 다른 점은 무엇인가요?
|
||||
* `undefined`와 `undeclared` 변수는 무엇인가요?
|
||||
* 클로져(Closure)는 무엇이며, 어떻게/왜 사용하는지 설명해주세요.
|
||||
* 클로져를 만들 때 선호하는 패턴은 무엇인가요? argyle (IIFEs에만 적용할 수 있다)
|
||||
* 익명함수(anonymous functions)는 주로 어떤 상황에서 사용하나요?
|
||||
* "Javascript 모듈 패턴(Javascript module pattern)"이 무엇인지 설명을 해주시고, 언제 사용하는지도 말씀해주시기 바랍니다.
|
||||
* "네임스페이스(namespacing)"에 대해서 언급을 하면, 보너스 포인트가 있습니다.
|
||||
* 당신의 모듈이 네임스페이스가 없는 상황이라면?
|
||||
* 당신의 코드를 어떻게 구성하는지?(모듈 패턴, Class기반 상속?)
|
||||
* 호스트 객체(Host Objects)와 네이티브 객체(Native Objects)의 차이점은 무엇인가요?
|
||||
* 다음 코드의 차이점은 무엇인가요?
|
||||
```javascript
|
||||
function Person(){} var person = Person() var person = new Person()
|
||||
```
|
||||
* `.call`과 `.apply`의 차이점은 무엇인가요?
|
||||
* `Function.prototype.bind`을 설명 하시오
|
||||
* 코드 최적화를 하는 시점은 언제인가요?
|
||||
* Javascript에서 어떻게 상속을 하는지 설명할 수 있나요?
|
||||
* "누구도 할 수 없어요" 같은 재밌는 대답 시에 보너스 포인트가 있습니다.
|
||||
* 안되는 이유에 대해서 설명을 시도한다면, 더 많은 점수를 주세요.
|
||||
* `document.write()`를 언제 사용하시나요?
|
||||
* 정답 : 1999년 - 초보개발자를 걸러내기 위한 시절
|
||||
* UA문자열을 이용하여 기능 검출(feature detection)과 기능 추론(feature inference)의 차이점을 설명 하시오.
|
||||
* AJAX에 관해 가능한 자세히 설명하세요.
|
||||
* JSONP가 어떻게 동작 되는지 설명하세요.(그리고,실제 AJAX와 어떻게 다른지 설명하세요.)
|
||||
* 기존에 Javascript 템플릿을 사용한 적이 있나요? 만약에 있다면, 어떠한 방식으로 사용했는지 말씀해주세요.
|
||||
* "호이스팅(Hoisting)"에 대해서 설명 하시오.
|
||||
* FOUC가 무엇이며 FOUC를 어떻게 방지하나요?
|
||||
* 이벤트 버블링(Event Bubbling)에 대해서 설명하세요.
|
||||
* "속성(Attribute)"와 "요소(property)"의 차이가 무엇인가요?
|
||||
* Javascript 객체를 확장하는 것이 좋지 않은 이유는 무엇인가요?
|
||||
* Document Load 이벤트와 Ready 이벤트의 차이가 무엇인가요?
|
||||
* `==`와 `===`의 차이점은 무엇인가요?
|
||||
* 브라우저의 URL에서 파라메터를 얻을 수 있는 방법에 대해서 설명하세요.
|
||||
* Javascript의 "동일출처정책(the same-origin policy)"에 대해서 설명하세요.
|
||||
* 이벤트 딜리게이션(Event Delegation)에 대해서 설명하세요.
|
||||
* Javascript의 상속패턴(inheritance patterns)에 대해서 설명하세요.
|
||||
* 다음 코드를 동작하게 만드세요.
|
||||
```javascript
|
||||
[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
|
||||
```
|
||||
* Javascript에서 메모이제이션(memoization, 중복 계산 방지)에 대한 전략을 설명해주세요.
|
||||
* 삼항식(Ternary statement)을 사용하는 이유는 무엇이고, 그것을 표현하기 위한 연산자 단어는 무엇인가요?
|
||||
* arity는 어떠한 함수인가요?
|
||||
|
||||
## Javascript 코드 예제:
|
||||
|
||||
```javascript
|
||||
>~~3.14
|
||||
```
|
||||
문제: 위 상황의 결과 값은?
|
||||
|
||||
**답: 3**
|
||||
|
||||
```javascript
|
||||
"i'm a lasagna hog".split("").reverse().join("");
|
||||
```
|
||||
문제: 위 상황의 결과 값은?
|
||||
|
||||
**답: "goh angasal a m'i"**
|
||||
|
||||
```javascript
|
||||
( window.foo || ( window.foo = "bar" ) );
|
||||
```
|
||||
문제: window.foo의 값은 무엇인가요?
|
||||
|
||||
**답: "bar"**
|
||||
|
||||
처음에 window.foo는 false, undefined 혹은 0등의 값을 가지고 있다.
|
||||
|
||||
```javascript
|
||||
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를 최적화 해주세요.:
|
||||
|
||||
```javascript
|
||||
$(".foo div#bar:eq(0)")
|
||||
```
|
||||
|
||||
## CSS 관련 질문들:
|
||||
|
||||
* "reset" CSS가 무엇인지, 어떻게 유용한지 설명 해주세요.
|
||||
* Floats가 어떻게 동작하는지 설명해주세요.
|
||||
* 클리어링(Clearing) 기술에는 어떤 것들이 있으며, 어떠한 경우에 어떻게 사용하는 것이 적절한지 설명하세요.
|
||||
* CSS 스프라이트(CSS Sprites)를 설명하고, 페이지나 사이트를 어떻게 향상시키는지 설명하시오.
|
||||
* IE box model과 W3C box model의 차이점을 설명하시오.
|
||||
* Image Replacement를 사용해야 할 때, 선호하는 기술과 언제 사용하는지를 설명 해주세요.
|
||||
* CSS 요소핵(CSS property hacks)을 조건부적으로 .css파일안에 넣으시나요 혹은 다른 방식이 있나요?
|
||||
* 기능이 제약된 브라우저를 위해서 어떤 방식으로 페이지를 만드나요?
|
||||
* 어떠한 기술과 절차를 거치는지 설명하시오.
|
||||
* 컨텐츠를 안보이게 하는 기술들의 차이점을 설명하시오.(그리고 스크린 리더(Screen readers)에서 접근이 가능한 방법은?)
|
||||
* 그리드 시스템(Grid system)을 사용한 적이 있나요? 있다면 어떠한 것을 선호하나요?
|
||||
* 미디어 쿼리(media queries)를 사용한 적이 있나요? 혹은 모바일에 맞는 layout과 CSS를 사용한 적이 있나요?
|
||||
* SVG를 스타일링 하기 위한 편한 방법이 있나요?
|
||||
* 인쇄를 하기 위해 웹페이지를 어떻게 최적화 하나요?
|
||||
* 효율적인 CSS를 작성하기 위한 "비법(gotchas)"은 어떤 게 있나요?
|
||||
* CSS 전처리(CSS preprocessors)를 사용해보셨나요?
|
||||
* 그렇다면, 사용 경험에 기반해 좋았던 점과 나빴던 점을 설명해주세요.
|
||||
* 페이지에서 표준 폰트가 아닌 폰트 디자인을 사용할 때 어떤 방식으로 처리하시나요?(웹폰트를 제외하고)
|
||||
* CSS Selector가 어떠한 원리로 동작하는지 설명하시오.
|
||||
|
||||
## 그 외 흥미로운 질문들:
|
||||
|
||||
* 당신이 작성한 코드 중 어떤 것을 가장 멋지고, 자랑스럽게 여기나요?
|
||||
* HTML5 gang sign에 대해서 아시나요?
|
||||
* 배를 타본 적이 있으세요?
|
||||
* Firebug와 Webkit Inspector에서 좋아하는 부분을 말씀해주세요.
|
||||
* 당신 스스로 하는 프로젝트가 있나요? 어떤 종류인가요?
|
||||
* "유니콘화(cornify)"의 의미를 설명해주세요.
|
||||
* 한장의 종이 위에, A B C D E를 차례대로 내려 쓰시오. 그다음, 코드로 작성하지 말고, 역순으로 재배치 해보세요.
|
||||
* 종이를 위아래를 뒤집어낼 때 까지 기다리세요.
|
||||
* 이것은 인터뷰의 끝에 긴장감을 풀어주고 웃음을 줄 수 있는 좋은 방법이 입니다.
|
||||
* 해적입니까? 닌자입니까?
|
||||
* 만약에 둘 다 이며, 좋은 이유를 댄다면 보너스 점수를 주세요.(좀비 몽키 해적 닌자인 경우엔 +2)
|
||||
* 만약에 웹개발을 안했다면, 무엇을 했었을까요?
|
||||
* Carmen Sandiego는 세상의 어디에 있을가요?(힌트 : 그들의 답은 항상 틀릴겁니다.)
|
||||
* Internet Explorer의 당신이 좋아하는 기능은 무엇입니까?
|
||||
* 다음 문장을 완성하세요 : Brendan Eich 와 Doug Crockford 는 Javascript의 __________ 이다.
|
||||
* jQuery: 훌륭한 라이브러리인가요? 최고로 좋은 라이브러리인가요? 토론하세요.
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
##해설집
|
||||
```
|
||||
이 문서는 정답을 알려주는 문서가 아닙니다.
|
||||
면접에 대한 답은 스스로가 찾아야 좋으며,
|
||||
그 판단을 돕기 위한 해설서 임을 밝히는 바입니다.
|
||||
```
|
||||
|
||||
##기여자
|
||||
@Songhun(http://songhun.blogspot.com)
|
||||
@YiHanghee(http://blog.javarouka.me)
|
||||
|
||||
##일반적인 질문에 대한 참고
|
||||
* SNS에 대해서 물어보는 이유가 무엇일까요?
|
||||
|
||||
##HTML에 대한 참고
|
||||
* `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) 에서 찾아볼 수 있습니다.
|
||||
* 문서 타입에 대한 자세한 설명을 담은 블로그 ["Activating Browser Modes with Doctype"](http://hsivonen.iki.fi/doctype/)
|
||||
* 표준 모드는 W3C의 표준에 맞춘 구현 렌더링으로 동작하며(미세하게 다릅니다), 쿽스 모드는 다양한 브라우저 및 표준 정립 이전의 구버전 기준으로 작성된 HTML의 fallback 과 비슷합니다.
|
||||
* [Quirks Mode 렌더링과 DTD.](http://naradesign.net/wp/2007/03/27/118/)
|
||||
* [Mozilla's Quirks Mode](https://developer.mozilla.org/ko/Mozilla's_Quirks_Mode)
|
||||
* [XHTML 과 HTML의 차이](http://blog.wystan.net/2007/05/24/xhtml-vs-html) 블로그 포스팅에 4부작(?)으로 좋은 설명이 있네요.
|
||||
* application/xhtml+xml 컨텐트 타입은 브라우저에 따라 해석할 수 없기도 합니다.(IE...)
|
||||
* 엘리먼트의(특히 루트인 html) lang attribute 와 관련이 있을까요...?
|
||||
* [HTML 5 + XML = XHTML 5](http://html5doctor.com/html-5-xml-xhtml-5/), <!doctype xhtml>
|
||||
* Programer custom attribute. ex) 자동차를 엘리먼트로 나타내야 할 경우를 생각해보면 기본 html 속성으로는 부족하겠죠.
|
||||
* HTML4의 콘텐츠 모델이 div와 span에 id와 클래스를 입힌 inline 및 block display의 사용자 정의형이라면, HTML5는 그것을 표준화한 콘텐츠 모델.
|
||||
* 자세한 것은 [내용 모델(한글 by ClearBoth 팀)](http://html5.clearboth.org/content-models.html) 이쪽으로.
|
||||
* open web platform 이 뭘까요...?
|
||||
* 서버와 공유할 필요가 있는지의 여부, 저장 용량, 저장 생명주기에 따라 셋을 구분할 수 있습니다.
|
||||
|
||||
##Javascript에 대한 참고
|
||||
* 유명한 Javascript Library는 다음과 같습니다.
|
||||
* jQuery
|
||||
* Prototype.js
|
||||
* YUI
|
||||
* Ext JS
|
||||
* Dojo
|
||||
* Java와 Javascript는 Car와 Carpet의 차이와 비슷하다고 할 수 있습니다.
|
||||
* [Undeclared, Undefined, Null in JavaScript](http://constc.blogspot.com/2008/07/undeclared-undefined-null-in-javascript.html)
|
||||
* [Naver Developer에서 제공 되는 Closure설명](http://dev.naver.com/tech/ajaxui/ajaxui_2.php#a_2_2)
|
||||
* [Javascript anonymous functions](http://helephant.com/2008/08/23/javascript-anonymous-functions/)
|
||||
* [Pro Javascript Techniques(3): Anonymous Functions(한글)](http://happyzoo.tistory.com/124)
|
||||
|
||||
##jQuery에 대한 참고
|
||||
* jQeury들의 거의 모든 method들은 jQuery object를 돌려주도록 되어있습니다.
|
||||
* 이 특성으로 인해 같은 scope에서 일어나는 거의 모든 method들을 연결하여 정의를 할 수 가 있습니다.
|
||||
* Paul Irish 가 작성한 [블로그](http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/) 를 참고하시면 좋을 듯 합니다.
|
||||
* [.end()](http://api.jquery.com/end/)
|
||||
* [Namesapced Events](http://docs.jquery.com/Namespaced_Events)
|
||||
* [Effect queue()](http://api.jquery.com/queue/)
|
||||
* [Understanding jQuery Effects Queue](http://blog.bigbinary.com/2010/02/02/understanding-jquery-effects-queue.html)
|
||||
|
||||
|
||||
##CSS 참고
|
||||
|
||||
##흥미로운 질문들에 대한 참고
|
||||
* http://html5homi.es/
|
||||
Loading…
Reference in New Issue