When creating a browser based application, we provide a graphical user interface (GUI) for the user to use when interacting with what we've built. The most common way to interact with the browser is through clicking and typing in various elements. The challenge we face as a developer is we don't know when they're going to perform these operations!
브라우저 기반 애플리케이션을 만들 때, 사용자가 만든 것과 상호 작용하기 위한 그래픽 유저 인터페이스 (GUI)를 제공합니다. 브라우저와 상호 작용하는 가장 일반적인 방법은 다양한 요소를 클릭하고 입력하는 것입니다. 개발자로서 마주한 도전은 이러한 작업을 언제 수행할 지 모른다는 점입니다!
[Event-driven programming](https://en.wikipedia.org/wiki/Event-driven_programming) is the name for the type of programming we need to do to create our GUI. If we break this phrase down a little bit, we see the core word here is **event**. [Event](https://www.merriam-webster.com/dictionary/event), according to Merriam-Webster, is defined as "something which happens". This describes our situation perfectly. We know something is going to happen for which we want to execute some code in response, but we don't know when it will take place.
[Event-driven programming](https://en.wikipedia.org/wiki/Event-driven_programming)은 GUI를 만들기 위해 수행할 프로그래밍 타입의 이름입니다. 이 구문을 조금 자세히 보면, 여기서 핵심 단어가 **event**라는 점을 볼 수 있습니다. Merriam-Webster에 따르면, 이벤트는 "something which happens"로 정의됩니다. 이 상황을 완벽하게 설명합니다. 응답이라는 건 어떤 코드가 수행될 지 알고 있지만, 언제 발생할 지 모릅니다.
The way we mark a section of code we want to execute is by creating a function. When we think about [procedural programming](https://en.wikipedia.org/wiki/Procedural_programming), functions are called in a specific order. This same thing is going to be true with event driven programming. The difference is **how** the functions will be called.
실행하려는 코드 섹션을 출력할 방법은 함수를 만드는 것입니다. [procedural programming](https://en.wikipedia.org/wiki/Procedural_programming)으로 생각해보면, 함수는 순차적으로 호출됩니다. 이벤트 기반 프로그래밍에서도 마찬가지입니다. 다른 점이라고 하면 함수가 호출되는 **방식**입니다.
To handle events (button clicking, typing, etc.), we register **event listeners**. An event listener is a function which listens for an event to occur and executes in response. Event listeners can update the UI, make calls to the server, or whatever else needs to be done in response to the user's action. We add an event listener by using [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener), and providing a function to execute.
이벤트(버튼 클릭, 타이핑 등)를 제어하기 위해서, **event listeners**를 등록합니다. 이벤트 리스너는 이벤트 발생을 수신하고 응답하는 함수입니다. 이벤트 리스너는 UI를 갱신하고, 서버를 호출하거나, 또는 작업에 응답하는 모든 작업을 수행할 수 있습니다. [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)를 사용하여 이벤트 리스너를 추가하고, 실행할 함수를 제공합니다.
> **NOTE:**It's worth highlighting there are numerous ways to create event listeners. You can use anonymous functions, or create named ones. You can use various shortcuts, like setting the `click` property, or using `addEventListener`. In our exercise we are going to focus on `addEventLister` and anonymous functions, as it's probably the most common technique web developers use. It's also the most flexible, as `addEventListener` works for all events, and the event name can be provided as a parameter.
> **NOTE:**이벤트 리스너를 만드는 방법에는 여러 가지가 존재한다는 점을 강조하기에 충분합니다. 익명 함수를 사용하거나, 이름을 지어 만들 수 있습니다. `click` 속성을 설정하거나, `addEventListener`를 사용하는 등 다양한 단축으로 쓸 수 있습니다. 이 강의에서는 웹 개발자가 사용하는 가장 일반적인 기술인 `addEventLister`와 익명 함수에 초점을 맞출 것입니다. `addEventListener`가 모든 이벤트에서 작동하고, 이벤트 이름을 파라미터로 줄 수 있기 때문에 가장 유연합니다.
### 일반적인 이벤트
### 일반적인 이벤트
There are [dozens of events](https://developer.mozilla.org/docs/Web/Events) available for you to listen to when creating an application. Basically anything a user does on a page raises an event, which gives you a lot of power to ensure they get the experience you desire. Fortunately, you'll normally only need a small handful of events. Here's a few common ones (including the two we'll use when creating our game):
응용 프로그램을 만들 때 수신할 수 있는 [dozens of events](https://developer.mozilla.org/docs/Web/Events)가 있습니다. 기본적으로 사용자가 페이지에서 수행하는 모든 작업은 이벤트를 발생시키므로, 원하는 경험으로 많은 도움을 줍니다. 다행스럽게, 일반적인 이벤트만 필요합니다. 다음은 일반적 몇가지입니다 (게임을 만들 때 사용할 두 가지를 포함합니다):
- [click](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event): The user clicked on something, typically a button or hyperlink
- [click](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event): 사용자가 버튼 또는 하이퍼링크와 같은 무언가를 클릭했습니다
- [contextmenu](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event): The user clicked the right mouse button
- [contextmenu](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event): 사용자가 우측 마우스 버튼을 클릭했습니다
- [select](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event): The user highlighted some text
- [select](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event): 사용자가 어떤 텍스트를 강조했습니다
- [input](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event): The user input some text
- [input](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event): 사용자가 어떤 텍스트를 입력했습니다
## 게임 만들기
## 게임 만들기
We are going to create a game to explore how events work in JavaScript. Our game is going to test a player's typing skill, which is one of the most underrated skills all developers should have. We should all be practicing our typing! The general flow of the game will look like this:
JavaScript에서 이벤트가 작동하는 게임을 만들 것입니다. 이 게임은 모든 개발자가 가질 과소평가된 기술 중 하나인, 타이핑 스킬을 검증합니다. 모두 타이핑 연습을 합시다! 게임의 일반적인 흐름은 다음과 같습니다:
- Player clicks on start button and is presented with a quote to type
- 플레이어가 시작 버튼을 누르면 입력할 인용문이 표시됩니다
- Player types the quote as quickly as they can in a textbox
- 플레이어는 텍스트박스에 빨리 인용문을 입력합니다
- As each word is completed, the next one is highlighted
- 각 단어가 완성되면, 다음 단어가 강조됩니다
- If the player has a typo, the textbox is updated to red
- 플레이어가 오타를 낸 경우에는, 텍스트박스가 빨간색으로 갱신됩니다
- When the player completes the quote, a success message is displayed with the elapsed time
- 플레이어가 인용문을 완료하면, 경과된 시간과 함께 성공 메시지가 출력됩니다
Let's build our game, and learn about events!
게임을 제작하고, 이벤트에 대하여 배우겠습니다!
### 파일 구조
### 파일 구조
We're going to need three total files: **index.html**, **script.js** and **style.css**. Let's start by setting those up to make life a little easier for us.
총 3개의 파일이 필요합니다: **index.html**, **script.js** 그리고 **style.css**. 더 편하게 살 수 있게 만들 수 있는 설정부터 시작하겠습니다.
- Create a new folder for your work by opening a console or terminal window and issuing the following command:
- 콘솔 혹은 터미널 창을 열고 아래 명령을 수행하여 작업할 새로운 폴더를 만듭니다:
```bash
```bash
# Linux or macOS
# Linux or macOS
@ -51,29 +51,29 @@ mkdir typing-game && cd typing-game
md typing-game && cd typing game
md typing-game && cd typing game
```
```
- Open Visual Studio Code
- Visual Studio Code를 엽니다
```bash
```bash
code .
code .
```
```
- Add three files to the folder in Visual Studio Code with the following names:
- 다음 이름으로 Visual Studio Code의 폴더에 세 개의 파일을 추가합니다:
- index.html
- index.html
- script.js
- script.js
- style.css
- style.css
## 사용자 인터페이스 만들기
## 사용자 인터페이스 만들기
If we explore the requirements, we know we're going to need a handful of elements on our HTML page. This is sort of like a recipe, where we need some ingredients:
요구사항을 찾아보면, HTML 페이지에 몇 요소가 필요하다는 점을 알 수 있습니다. 레시피처럼, 재료가 필요합니다:
- Somewhere to display the quote for the user to type
- 사용자가 입력할 인용문을 출력할 위치
- Somewhere to display any messages, like a success message
- 성공 메시지 같은, 메시지를 출력할 위치
- A textbox for typing
- 입력할 텍스트박스
- A start button
- 시작 버튼
Each of those will need IDs so we can work with them in our JavaScript. We will also add references to the CSS and JavaScript files we're going to create.
각자 JavaScript에서 작업할 수 있게 ID가 필요합니다. 만드려는 CSS 및 JavaScript 파일에 대한 참조를 추가합니다.
Create a new file named **index.html**. Add the following HTML:
**index.html**라고 이름지은 새로운 파일을 만듭니다. 아래 HTML을 추가합니다:
```html
```html
<!-- inside index.html -->
<!-- inside index.html -->
@ -96,26 +96,26 @@ Create a new file named **index.html**. Add the following HTML:
</html>
</html>
```
```
### 어플리케이션 시작하기
### 애플리케이션 시작하기
It's always best to develop iteratively to see how things look. Let's launch our application. There's a wonderful extension for Visual Studio Code called [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) which will both host your application locally and refresh the browser each time you save.
어떻게 될 지 자주 보면서 개발하는 것이 가장 좋습니다. 애플리케이션을 시작합니다. 로컬로 애플리케이션을 호스팅하고 저장할 때마다 브라우저를 새로 고칠 [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)라는 멋진 Visual Studio Code 확장이 있습니다.
- Install [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) by following the link and clicking **Install**
- 링크 따라 **Install** 클릭하여 [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)를 설치합니다
- You will be prompted by the browser to open Visual Studio Code, and then by Visual Studio Code to perform the installation
- 브라우저에서 Visual Studio Code를 열면, Visual Studio Code에서 설치를 수행하라는 메시지가 출력됩니다
- Restart Visual Studio Code if prompted
- 메시지가 출력되면 Visual Studio Code를 다시 시작합니다
- Once installed, in Visual Studio Code, click Ctl-Shift-P (or Cmd-Shift-P) to open the command pallate
- Open a browser and navigate to **https://localhost:5500**
- 브라우저를 열고 **https://localhost:5500**으로 이동합니다
- You should now see the page you created!
- 이제 만들었던 페이지를 볼 수 있습니다!
Let's add some functionality.
몇 가지 기능을 추가하겠습니다.
## CSS 추가하기
## CSS 추가하기
With our HTML created, let's add the CSS for core styling. We need to highlight the word the player should be typing, and colorize the textbox if what they've typed is incorrect. We'll do this with two classes.
HTML이 만들어지면, 핵심 스타일링을 위한 CSS를 추가합니다. 플레이어가 입력할 단어를 강조하고, 입력한 내용이 잘못된 경우에는 텍스트박스에 색칠합니다. 두 클래스로 진행합니다.
Create a new file named **style.css** and add the following syntax.
**style.css**라는 새 파일을 만들고 다음 구문을 추가합니다.
```css
```css
/* inside style.css */
/* inside style.css */
@ -129,36 +129,36 @@ Create a new file named **style.css** and add the following syntax.
}
}
```
```
✅ When it comes to CSS you can layout your page however you might like. Take a little time and make the page look more appealing:
✅ CSS는 원하는대로 페이지를 레이아웃할 수 있습니다. 잠시 시간을 내서 페이지를 더 매력적으로 보일 수 있게 만들어 봅시다:
- Choose a different font
- 다른 글꼴 선택
- Colorize the headers
- 헤더 색칠
- Resize items
- 아이템 크기 조정
## JavaScript
## JavaScript
With our UI created, it's time to focus our attention on the JavaScript which will provide the logic. We're going to break this down into a handful of steps:
UI가 만들어졌으므로, 이제 로직을 제공할 JavaScript에 집중해야 합니다. 몇 단계로 나눌 것입니다:
- [Create the constants](#add-the-constants)
- [Create the constants](#add-the-constants)
- [Event listener to start the game](#add-start-logic)
- [Event listener to start the game](#add-start-logic)
- [Event listener to typing](#add-typing-logic)
- [Event listener to typing](#add-typing-logic)
But first, create a new file named **script.js**.
하지만 먼저, **script.js**라고 이름지은 새로운 파일을 생성합니다.
### 상수 추가하기
### 상수 추가하기
We're going to need a few items to make our lives a little easier for programming. Again, similar to a recipe, here's what we'll need:
좀 더 편하게 살도록 프로그래밍할 수 있는 몇 가지 아이템이 필요합니다. 다시, 레시피와 비슷하게, 아래와 같은 것이 필요합니다:
- Array with the list of all quotes
- 모든 인용문 목록이 들어있는 배열
- Empty array to store all the words for the current quote
- 현재 인용문에 대한 모든 단어를 저장할 빈 배열
- Space to store the index of the word the player is currently typing
- 플레이어가 현재 입력하고 있는 단어를 색인한 저장 공간
- The time the player clicked start
- 플레이어가 시작을 누른 시간
We're also going to want references to the UI elements:
> **NOTE:**We can retrieve the elements whenever we want in code by using `document.getElementById`. Because of the fact we're going to refer to these elements on a regular basis we're going to avoid typos with string literals by using constants. Frameworks such as [Vue.js](https://vuejs.org/) or [React](https://reactjs.org/) can help you better manage centralizing your code.
> **NOTE:**`document.getElementById`로 원할 때마다 코드에서 요소를 찾을 수 있습니다. 이러한 요소를 계속 참조할 예정이기 때문에 문자열 리터럴로 상수를 만들어 오타를 내지 않을 것입니다. [Vue.js](https://vuejs.org/) 혹은 [React](https://reactjs.org/)와 같은 프레임워크를 사용하면 코드를 centralizing으로 관리할 수 있습니다.
Take a minute to watch a video on using `const`, `let` and `var`
잠시 시간을 내서 `const`, `let` 그리고 `var` 사용하는 방법에 대한 영상을 봅니다.
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Types of variables")
[](https://youtube.com/watch?v=JNIXfGiDWM8 "Types of variables")
> Click the image above for a video about variables.
> 변수에 대한 영상을 보려면 위의 이미지를 누릅니다.
### Add start logic
### 시작 로직 추가하기
To begin the game, the player will click on start. Of course, we don't know when they're going to click start. This is where an [event listener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) comes into play. An event listener will allow us to listen for something to occur (an event) and execute code in response. In our case, we want to execute code when the user clicks on start.
게임을 시작하려면, 플레이어가 시작을 누릅니다. 물론, 언제 시작을 누를지 알 수 없습니다. 여기에서 [이벤트 리스너](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)가 작동됩니다. 이벤트 리스너를 사용하면 (이벤트) 발생을 수신하고 응답해서 코드를 실행할 수 있습니다. 해당 케이스의 경우에는, 사용자가 시작을 누를 때 코드를 실행하려 합니다.
When the user clicks **start**, we need to select a quote, setup the user interface, and setup tracking for the current word and timing. Below is the JavaScript you'll need to add; we discuss it just after the script block.
사용자가 **start**을 누르면, 인용문을 선택하고, 사용자 인터페이스를 설정하며, 현재 단어와 제한 시간를 추적해야 합니다. 다음은 추가해야 할 JavaScript 입니다. 스크립트 블록 바로 뒤에 적습니다.
- Using [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) and [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) allows us to randomly select a quote from the `quotes` array
- [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor)과 [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random)을 사용하면 `quotes` 배열에서 인용문을 무작위로 선택할 수 있습니다
- We convert the `quote` into an array of `words` so we can track the word the player is currently typing
- 플레이어가 현재 입력하고 있는 단어를 추적할 수 있도록 `quote`를 `words` 배열로 변환합니다
- `wordIndex` is set to 0, since the player will start on the first word
- 플레이어는 첫번째 단어부터 시작하므로, `wordIndex`는 0으로 설정합니다
- Setup the UI
- UI를 설정합니다
- Create an array of `spanWords`, which contains each word inside a `span` element
- `span` 요소 안에 각 단어를 포함하고 있는, `spanWords` 배열을 만듭니다
- This will allow us to highlight the word on the display
- 화면에서 단어를 강조하여 출력할 수 있습니다
- `join` the array to create a string which we can use to update the `innerHTML` on `quoteElement`
- 배열을 `join`하여 `quoteElement`의 `innerHTML`로 갱신할 때 사용할 문자열을 만듭니다
- This will display the quote to the player
- 플레이어에게 인용문을 출력합니다
- Set the `className` of the first `span` element to `highlight` to highlight it as yellow
- 첫 번째 `span` 요소의 `className`을 `highlight`로 설정하여 노란색을 강조합니다
- Clean the `messageElement` by setting `innerText` to `''`
- `innerText`를 `''`로 설정하여 `messageElement`로 정리합니다
- Setup the textbox
- 텍스트박스를 설정합니다
- Clear the current `value` on `typedValueElement`
- `typedValueElement`의 현재 `value`를 지웁니다
- Set the `focus` to `typedValueElement`
- `focus`를 `typedValueElement`로 설정합니다
- Start the timer by calling `getTime`
- `getTime`로 호출하여 타이머를 시작합니다
### 타이핑 로직 추가하기
### 타이핑 로직 추가하기
As the player types, an `input` event will be raised. This event listener will check to ensure the player is typing the word correctly, and handle the current status of the game. Returning to **script.js**, add the following code to the end. We will break it down afterwards.
플레이어는 입력을 하면, `input` 이벤트가 발생됩니다. 이 이벤트 리스너는 플레이어가 단어를 잘 입력하고 있는지 확인하고, 게임의 현재 상태를 제어합니다. **script.js**로 돌아가서, 마지막에 아래 코드를 추가합니다. 나중에 나누어 볼 것입니다.
Let's break down the code! We start by grabbing the current word and the value the player has typed thus far. Then we have waterfall logic, where we check if the quote is complete, the word is complete, the word is correct, or (finally), if there is an error.
코드를 나누어 봅니다! 현재 단어와 플레이어가 지금까지 입력한 값들을 알아가는 것으로 시작합니다. waterfall 로직으로서, 인용문과 단어가 온전한지, 단어가 올바른지, 혹은 (마지막으로) 오류가 있는지 확인합니다.
- Quote is complete, indicated by `typedValue` being equal to `currentWord`, and `wordIndex` being equal to one less than the `length` of `words`
- 인용문이 완성되었습니다, `typedValue`는 `currentWord`와 같고, `wordIndex`는 `words`의 `length`보다 하나 정도 적습니다
- Calculate `elapsedTime` by subtracting `startTime` from the current time
- 현재 시간에서 `startTime`을 빼서 `elapsedTime`을 계산합니다
- Divide `elapsedTime` by 1,000 to convert from milliseconds to seconds
- `elapsedTime`을 1,000으로 나누어 밀리 초에서 초로 변환합니다
- Display a success message
- 성공 메시지 출력합니다
- Word is complete, indicated by `typedValue` ending with a space (the end of a word) and `typedValue` being equal to `currentWord`
- 단어가 완성되었습니다, 공백(단어의 끝)으로 끝나는 `typedValue`와 `currentWord`같은 `typedValue`로 출력합니다
- Set `value` on `typedElement` to be `''` to allow for the next word to be typed
- `typedElement`의 `value`를 `''`로 설정하여 다음 단어를 입력할 수 있습니다
- Increment `wordIndex` to move to the next word
- `wordIndex`를 증가시켜서 다음 단어로 이동합니다
- Loop through all `childNodes` of `quoteElement` to set `className` to `''` to revert to default display
- `quoteElement`의 모든 `childNodes`를 반복하여 `className`을 `''`로 설정해서 기본적으로 출력되는 것으로 되돌립니다
- Set `className` of the current word to `highlight` to flag it as the next word to type
- 현재 단어의 `className`을 `highlight`로 설정하여 입력할 다음 단어를 플래그로 지정합니다
- Word is currently typed correctly (but not complete), indicated by `currentWord` started with `typedValue`
- 단어가 현재 올바르게 입력되었지만 (완전하지 않습니다), `typedValue`로 시작된 `currentWord`를 출력합니다
- Ensure `typedValueElement` is displayed as default by clearing `className`
- `className`을 지워서 `typedValueElement`가 기본적으로 출력되는지 확인합니다
- If we made it this far, we have an error
- 여기까지 도달해보면, 오류가 존재합니다
- Set `className` on `typedValueElement` to `error`
You've made it to the end! The last step is to ensure our application works. Give it a shot! Don't worry if there are errors; **all developers** have errors. Examine the messages and debug as needed.
마지막까지 진행했습니다! 마지막 단계는 애플리케이션이 작동되는지 확인합니다. 한번 해보시기 바랍니다! 오류가 있어도 걱정하지 마세요; **모든 개발자**는 오류를 경험합니다. 메시지를 확인하고 필요하면 디버그합니다.
Click on **start**, and start typing away! It should look a little like the animation we saw before.
**start**를 클릭하고, 바로 입력합니다! 전에 본 애니메이션과 약간 비슷해보입니다.
---
---
## 🚀 도전
## 🚀 도전
Add more functionality
더 많은 기능을 추가해봅니다
- Disable the `input` event listener on completion, and re-enable it when the button is clicked
- 완성할 때 `input` 이벤트 리스너를 끄고, 버튼을 클릭하면 다시 키기
- Disable the textbox when the player completes the quote
- 플레이어가 인용문을 다 작성하면 텍스트박스 끄기
- Display a modal dialog box with the success message
- 성공 메시지와 함께 다이얼로그 박스 출력하기
- Store high scores using [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)
- [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)를 사용하여 고득점 저장하기
## 강의 후 퀴즈
## 강의 후 퀴즈
@ -332,7 +331,7 @@ Add more functionality
## 리뷰 & 자기주도 학습
## 리뷰 & 자기주도 학습
Read up on [all the events available](https://developer.mozilla.org/en-US/docs/Web/Events) to the developer via the web browser, and consider the scenarios in which you would use each one.
웹 브라우저를 통해 [all the events available]((https://developer.mozilla.org/en-US/docs/Web/Events)) to the developer를 읽고, 각 이벤트를 사용할 시나리오를 고려합니다.
minwook-shin
4 years ago