You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 1-js/11-async/01-callbacks/article.md
+3-37Lines changed: 3 additions & 37 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -28,11 +28,7 @@ function loadScript(src) {
28
28
}
29
29
```
30
30
31
-
<<<<<<< HEAD
32
31
함수 `loadScript(src)`는 `<script src="…">`를 동적으로 만들고 이를 문서에 추가합니다. 브라우저는 자동으로 태그에 있는 스크립트를 불러오고, 로딩이 완료되면 스크립트를 실행합니다.
33
-
=======
34
-
It inserts into the document a new, dynamically created, tag `<script src="…">` with the given `src`. The browser automatically starts loading it and executes when complete.
35
-
>>>>>>> upstream/master
36
32
37
33
`loadScript(src)` 사용법은 다음과 같습니다.
38
34
@@ -81,13 +77,9 @@ function loadScript(src, *!*callback*/!*) {
81
77
}
82
78
```
83
79
84
-
<<<<<<< HEAD
85
-
새롭게 불러온 스크립트에 있는 함수를 콜백 함수 안에서 호출하면 원하는 대로 외부 스크립트 안의 함수를 사용할 수 있습니다.
86
-
=======
87
-
The `onload` event is described in the article <info:onload-onerror#loading-a-script>, it basically executes a function after the script is loaded and executed.
80
+
`onload` 이벤트는 <info:onload-onerror#loading-a-script> 글에서 자세히 다룹니다. 기본적으로 스크립트가 로드되고 실행된 후 함수를 호출합니다.
88
81
89
-
Now if we want to call new functions from the script, we should write that in the callback:
90
-
>>>>>>> upstream/master
82
+
새롭게 불러온 스크립트에 있는 함수를 콜백 함수 안에서 호출하면 원하는 대로 외부 스크립트 안의 함수를 사용할 수 있습니다.
91
83
92
84
```js
93
85
loadScript('/my/script.js', function() {
@@ -111,13 +103,8 @@ function loadScript(src, callback) {
3.`3.js`를 로드합니다. 그 후 에러가 없으면 `(*)`로 표시한 줄에서 또 다른 작업을 수행합니다.
257
-
=======
258
-
In the code above:
259
-
1. We load `1.js`, then if there's no error...
260
-
2. We load `2.js`, then if there's no error...
261
-
3. We load `3.js`, then if there's no error -- do something else `(*)`.
262
-
>>>>>>> upstream/master
263
237
264
238
호출이 계속 중첩되면서 코드가 깊어지고 있네요. 본문 중간중간 `...`로 표시한 곳에 반복문과 조건문이 있는 코드가 들어가면 관리는 특히나 더 힘들어질 겁니다.
265
239
@@ -327,20 +301,12 @@ function step3(error, script) {
327
301
}
328
302
```
329
303
330
-
<<<<<<< HEAD
331
304
어떤가요? 새롭게 작성한 코드는 각 동작을 분리해 최상위 레벨의 함수로 만들었기 때문에 깊은 중첩이 없습니다. 그리고 콜백 기반 스타일 코드와 동일하게 동작하죠.
332
-
=======
333
-
See? It does the same thing, and there's no deep nesting now because we made every action a separate top-level function.
334
-
>>>>>>> upstream/master
335
305
336
306
그런데 이렇게 작성하면 동작상의 문제는 없지만, 코드가 찢어진 종잇조각 같아 보인다는 문제가 생깁니다. 읽는 것도 어려워지죠. 눈을 이리저리 움직이며 코드를 읽어야 합니다. 코드에 익숙지 않아 눈을 어디로 옮겨야 할지 모르면 더욱더 불편할 것입니다.
337
307
338
308
게다가 `step*`이라고 명명한 함수들은 '멸망의 피라미드'를 피하려는 용도만으로 만들었기 때문에 재사용이 불가능합니다. 그 누구도 연쇄 동작이 이뤄지는 코드 밖에선 함수들을 재활용하지 않을 겁니다. 네임스페이스가 약간 복잡해졌네요(namespace cluttering).
339
309
340
310
지금쯤이면 더 나은 무언가가 필요하다는 생각이 강하게 들 겁니다.
341
311
342
-
<<<<<<< HEAD
343
312
운 좋게도, 멸망의 피라미드를 피할 방법이 몇 가지 있습니다. 가장 좋은 방법 중 하나는 다음 챕터에서 설명할 '프라미스(promise)'를 사용하는 것입니다.
344
-
=======
345
-
Luckily, there are other ways to avoid such pyramids. One of the best ways is to use "promises", described in the next chapter.
0 commit comments