Skip to content

Commit

Permalink
Merge branch 'master' of https://github.com/yangshun/front-end-interv…
Browse files Browse the repository at this point in the history 
…iew-handbook
  • Loading branch information
@pocojang
pocojang committed Feb 19, 2018
2 parents 692a6be + bb5e645 commit 7fed9d2
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 11 deletions.
36 changes: 36 additions & 0 deletions translations/jp/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<h1 align="center">フロントエンド面接ハンドブック</h1>

<div align="center">
<a href="https://dribbble.com/shots/3831443-Tech-Interview-Handbook">
<img src="https://cdn.rawgit.com/yangshun/front-end-interview-handbook/f4d3132f/assets/book.svg" alt="Front End Interview Handbook" width="400"/>
</a>
<br>
<p>
<em>クレジット: <a href="https://dribbble.com/shots/3831443-Tech-Interview-Handbook">イラスト</a>作者 <a href="https://dribbble.com/yangheng">@yangheng</a>
</em>
</p>
</div>

## これは何のリポジトリですか？

フロントエンドの求人面接では、典型的なソフトウェアエンジニアの面接とは異なり、アルゴリズムの重要性が低く、特定の領域（HTML、CSS、JavaScript など）の入り組んだ知識や専門的な技術について、より多くの質問がなされます。

フロントエンドエンジニアの面接の準備に役立つ既存のリソースはいくつかありますが、ソフトウェアエンジニアの面接のリソースほど豊富ではありません。既存のリソースの中で最も有益な質問集はおそらく [Front-end Developer Interview Questions](https://github.com/h5bp/Front-end-Developer-Interview-Questions) ですが、残念ながら私はこれらの質問の多くに対して完全かつ満足のいく回答をネット上に見つけることができませんでした。そう、このプロジェクトはそれらの質問に回答する試みなのです。このプロジェクトはオープンソースのリポジトリなので、Web の状況が進歩するのにあわせてコミュニティのサポートを受けながら生き続けることができます。

## より広範囲の面接の準備がしたいですか？

そういった場合には、[Tech Interview Handbook](https://github.com/yangshun/tech-interview-handbook) が良いかもしれません。こちらのリポジトリはより一般的なコーディング面接に役立つ内容になっています。含まれるものには、例えば、アルゴリズム関連の問題や、行動面接（behavioral interview）対策、[面接チートシート](https://github.com/yangshun/tech-interview-handbook/blob/master/preparing/cheatsheet.md)もあります！

## 目次

1. [HTML に関する問題](questions/html-questions.md)
1. [CSS に関する問題](questions/css-questions.md)
1. [JavaScript に関する問題](questions/javascript-questions.md)

## 関連情報

データ構造の実装方法に興味がある場合は、JavaScript のデータ構造とアルゴリズムライブラリである [Lago](https://github.com/yangshun/lago) を参照してください。 Lago はまだかなり実装途中のものですが、私は Lago を実製品に使用できるライブラリにし、データ構造とアルゴリズムを復習するための参照リソースにもするつもりです。

## コントリビューション

解答の間違いを訂正したり、新たな問題を提案したい場合には、気軽にプルリクエストを送ってください。
22 changes: 11 additions & 11 deletions translations/kr/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@
- [`<script>`, `<script async>`, `<script defer>` 사이의 차이점을 설명하세요.](#script-script-async-script-defer-사이의-차이점을-설명하세요)
- [왜 일반적으로 CSS `<link>` 태그를 `<head></head>` 태그 사이에 위치시키고, JS `<script>` 태그를 `</body>` 직전에 위치시키는 것이 좋은 방법입니까? 다른 예외적인 상황을 알고있습니까?](#왜-일반적으로-css-link-태그를-headhead-태그-사이에-위치시키고-js-script-태그를-body-직전에-위치시키는-것이-좋은-방법입니까-다른-예외적인-상황을-알고있습니까)
- [프로그레시브 렌더링이 무엇입니까?](#프로그레시브-렌더링이-무엇입니까)
- [Why you would use a `srcset` attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.](#why-you-would-use-a-srcset-attribute-in-an-image-tag-explain-the-process-the-browser-uses-when-evaluating-the-content-of-this-attribute)
- [Have you used different HTML templating languages before?](#have-you-used-different-html-templating-languages-before)
- [이미지 태그에 `srcset` 속성을 사용하는 이유는 무엇입니까? 이 속성의 컨텐츠를 평가할 때 브라우저가 사용하는 프로세스를 설명하세요.](#이미지-태그에-srcset-속성을-사용하는-이유는-무엇입니까-이-속성의-컨텐츠를-평가할-때-브라우저가-사용하는-프로세스를-설명하세요)
-   [다른 HTML 템플릿 언어를 사용해본 적이 있습니까?](#다른-html-템플릿-언어를-사용해본-적이-있습니까)

**[CSS Questions](#css-questions)**

Expand Down Expand Up @@ -226,7 +226,7 @@ JavaScript 프레임워크가 인기를 끌기 전에 전에 프런트엔드 개

- `<script>` - HTML 파싱이 중단되고 스크립트가 즉시 실행되며 스크립트 실행 후 HTML 파싱이 다시 시작됩니다.
- `<script async>` - 이 스크립트는 HTML 파싱과 병행되어 사용 가능한 즉시 (HTML 파싱이 완료되기 전에) 실행됩니다. 스크립트가 페이지의 다른 스크립트(예: 분석)와 독립적인 경우 `async`를 사용하세요.
- `<script defer>` - 이 스크립트는 HTML 파싱과 병행되지만 페이지 파싱이 끝나면 실행됩니다. 이 것이 여러개 있는 경우 각 스크립트는 페이지에 등장한 순서대로 실행됩니다. 스크립트가 완전히 파싱된 DOM에 의존하는 경우 `defer` 속성은 실행하기 전에 HTML 전부 파싱되도록 하는데 유용합니다. `<body>`의 끝부분에 평위한 `<script>`를 두는 것과 별 차이가 없습니다. `defer` 스크립트는 `document.write`를 포함하면 안됩니다.
- `<script defer>` - 이 스크립트는 HTML 파싱과 병행되지만 페이지 파싱이 끝나면 실행됩니다. 이 것이 여러개 있는 경우 각 스크립트는 페이지에 등장한 순서대로 실행됩니다. 스크립트가 완전히 파싱된 DOM에 의존하는 경우 `defer` 속성은 실행하기 전에 HTML 전부 파싱되도록 하는데 유용합니다. `<body>`의 끝부분에 평범한 `<script>`를 두는 것과 별 차이가 없습니다. `defer` 스크립트는 `document.write`를 포함하면 안됩니다.

주의: `src` 속성이 없는 스크립트에서는 `async` 와 `defer` 속성이 무시됩니다.

Expand Down Expand Up @@ -264,20 +264,20 @@ JavaScript 프레임워크가 인기를 끌기 전에 전에 프런트엔드 개
- 보이는 콘텐츠의 우선순위 설정 (또는 스크롤 없이 볼 수 있는 렌더링) - 가능한 한 빨리 표시하기 위해 사용자 브라우저에서 렌더링 될 페이지의 양에 필요한 최소한의 CSS / 콘텐츠 / 스크립트 만 포함하면 `deferred` 스크립트를 사용하거나 `DOMContentLoaded` / `load` 이벤트를 수신하여 다른 리소스와 내용을 로드 할 수 있습니다.
- 비동기 HTML 프래그먼트 - 페이지의 백엔드에서 HTML 페이지의 일부를 브라우저로 가져옵니다. 이 기술에 대한 자세한 내용은 [여기](http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/)에서 찾을 수 있습니다.

### Why you would use a `srcset` attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.
### 이미지 태그에 `srcset` 속성을 사용하는 이유는 무엇입니까? 이 속성의 컨텐츠를 평가할 때 브라우저가 사용하는 프로세스를 설명하세요.

TODO

###### References
###### 참고자료

- <https://stackoverflow.com/questions/33651166/what-is-progressive-rendering>
- <http://www.ebaytechblog.com/2014/12/08/async-fragments-rediscovering-progressive-html-rendering-with-marko/>

### Have you used different HTML templating languages before?
### 다른 HTML 템플릿 언어를 사용해본 적이 있습니까?

Yes, Pug (formerly Jade), ERB, Slim, Handlebars, Jinja, Liquid, just to name a few. In my opinion, they are more or less the same and provide similar functionality of escaping content and helpful filters for manipulating the data to be displayed. Most templating engines will also allow you to inject your own filters in the event you need custom processing before display.
네, Pug (formerly Jade), ERB, Slim, Handlebars, Jinja, Liquid 등이 있습니다. 필자의 견해로 그것들은 어느 정도 동일하고, 보여 줄 데이터를 조작하는 데 유용한 필터와 컨텐츠를 유출하는 유사한 기능을 제공한다. 대부분의 템플릿 엔진을 사용하면 표시 전에 맞춤 처리가 필요한 이벤트에 자신의 필터를 삽입 할 수도 있습니다.

### Other Answers
### 기타 답변

- <https://neal.codes/blog/front-end-interview-questions-html/>
- <http://peterdoes.it/2015/12/03/a-personal-exercise-front-end-job-interview-questions-and-my-answers-all/>
Expand Down Expand Up @@ -673,7 +673,7 @@ Pull Request를 통한 제안 및 수정 요청을 환영합니다.
온라인에 많은 설명이 있는데 [Arnav Aggrawal](https://medium.com/@arnav_aggarwal)의 설명이 가장 명확했습니다.
다음 규칙과 같습니다.

1. 함수를 호출할 때 `new` 키워드가 사용하는 경우 함수 내부에 있는 `this`는 완전히 새로운 객체입니다.
1. 함수를 호출할 때 `new` 키워드를 사용하는 경우 함수 내부에 있는 `this`는 완전히 새로운 객체입니다.
2. `apply`, `call`, `bind`가 함수의 호출 / 작성에 사용되는 경우 함수 내의 `this`는 인수로 전달된 객체입니다.
3. `obj.method()`와 같이 함수를 메서드로 호출하는 경우 `this`는 함수가 프로퍼티인 객체입니다.
4. 함수가 자유함수로 호출되는 경우 즉 위의 조건없이 호출되는 경우 `this`는 전역 객체입니다. 브라우저에서는 `window` 객체입니다. 엄격 모드(`'use strict'`) 일 경우 `this`는 전역 객체 대신 `undefined`가 됩니다.
Expand Down Expand Up @@ -711,11 +711,11 @@ ES2015 모듈이 동기식 및 비동기식 로딩을 모두 지원하는 것이

### 다음 내용이 IIFE로 작동하지 않는 이유를 설명하세요: `function foo(){ }();`를 IIFE로 제대로 만들기 위해서는 무엇이 바뀌어야 할까요?

IIFE는 즉시 함수 호출 표현식을 의미합니다. JavaScript 해석기는 `function foo(){ }();`을 `function foo(){ }`와 `();` 같이 읽습니다. 전자는 함수 선언이며 후자 ( 한 쌍의 괄호 )는 함수를 호출하려고 시도했지만 이름이 지정되지 않았기 때문에 `Uncaught SyntaxError : Unexpected token `)을 던집니다.
IIFE는 즉시 함수 호출 표현식을 의미합니다. JavaScript 파서는 `function foo(){ }();`을 `function foo(){ }`와 `();` 같이 읽습니다. 전자는 함수 선언이며 후자 ( 한 쌍의 괄호 )는 함수를 호출하려고 시도했지만 이름이 지정되지 않았기 때문에 `Uncaught SyntaxError : Unexpected token `)을 던집니다.

추가로 괄호를 추가하는 두 가지 방법이 있습니다: `(function foo(){ })()` 그리고 `(function foo(){ }())`.

JavaScript 해석기는 `function foo () {} ();`를`function foo () {}`와 `();`로 읽습니다. 이러한 함수는 전역 스코프에서 노출되지 않으며 본문 내에서 자체를 참조할 필요가 없는 경우 해당 함수의 이름을 생략할 수도 있습니다.
JavaScript 파서는 `function foo () {} ();`를`function foo () {}`와 `();`로 읽습니다. 이러한 함수는 전역 스코프에서 노출되지 않으며 본문 내에서 자체를 참조할 필요가 없는 경우 해당 함수의 이름을 생략할 수도 있습니다.

###### 참고자료

Expand Down

0 comments on commit 7fed9d2

Please sign in to comment.