3. 데이터 모델.

Definition

Keyboard

Row

Key

keyboardData/en.js

Data source

Conclusion

정의

데이터 모델은 앱 내부의 모든 데이터를 설명하고 모든 논리를 다루는 JS 개체 집합입니다.

이전 장에서 우리는 앱의 HTML/CSS 목업을 만들었습니다.

명확한 HTML 요소 구조가 있는 목업은 데이터 모델을 설계하기 위한 기초입니다. 여기에서 볼 수 있기 때문입니다.

요소 중첩

반복 패턴

우리 모형이 반복되는 행으로 만들어지는 것을 볼 수 있습니다. 그리고 각 행 안에는 반복되는 키가 있습니다. 따라서 중첩된 반복 키가 있는 반복 행이 있는 데이터 구조가 필요합니다.

건반

키보드는 행의 배열1입니다.

const keyboard = [row1, row2, row3]

열

행은 키가 있는 배열입니다.

const row1 = [key1, key2, key3, ...]

열쇠

키는 다음 구조를 가진 객체2입니다.

const key = {
    code,
    label,
    main,
    shifted
}

code만 필요합니다. 다른 속성은 선택 사항입니다.
code는 실제 키보드의 키 위치를 식별합니다. 이 코드는 모든 언어의 키보드에서 동일합니다.
label는 main 또는 code와 일치하지 않는 경우 키의 텍스트입니다. "Escape"label의 경우 "Esc"이고 "Space"의 경우 빈 문자열입니다.
main는 키를 누른 후 반환되는 값입니다: 1 , 2 , q .
shifted는 shift 키 ! , @ , Q 를 누른 상태에서 키를 누른 후 반환되는 값입니다.

필요하지 않거나 다른 소품에서 가져올 수 있기 때문에 이러한 모든 소품을 항상 지정하지는 않습니다. 예를 들어 Tab는 반환 값 code 또는 main가 없고 레이블이 코드와 동일하기 때문에 shifted만 있습니다. Escape 는 label: Esc 를 가지고 있습니다. 키에 code: 'Escape' 보다 짧은 버전을 표시하고 싶기 때문입니다. 그리고 그것은 또한 main 및 shifted .

keyboardData/en.js

루트 프로젝트 폴더 안에 새 폴더keyboardData를 만들고 거기에 파일3en.js을 만듭니다.

keyboardData/en.js

const keyboard = [
    [
        { code: 'Escape', label: 'Esc' },
        { code: 'F1' },
        { code: 'F2' },
        { code: 'F3' },
        { code: 'F4' },
        { code: 'F5' }
    ],
    [
        {
            code: 'Backquote',
            main: '`',
            shifted: '~'
        },
        {
            code: 'Digit1',
            main: '1',
            shifted: '!'
        },
        {
            code: 'Digit2',
            main: '2',
            shifted: '@'
        },
        {
            code: 'Digit3',
            main: '3',
            shifted: '#'
        },
        {
            code: 'Digit4',
            main: '4',
            shifted: '$'
        },
        {
            code: 'Digit5',
            main: '5',
            shifted: '%'
        }
    ],
    [
        { code: 'Tab' },
        {
            code: 'KeyQ',
            main: 'q',
            shifted: 'Q'
        },
        {
            code: 'KeyW',
            main: 'w',
            shifted: 'W'
        },
        {
            code: 'KeyE',
            main: 'e',
            shifted: 'E'
        },
        {
            code: 'KeyR',
            main: 'r',
            shifted: 'R'
        }
    ]
]

export default keyboard

전체keyboard 데이터 모델은 2차원 배열입니다.

색인으로 키보드에서 모든 행을 가져올 수 있습니다.

const row = keyboard[rowIndex]
//rowIndex is 0, 1, ..., 6

2개의 인덱스로 키보드에서 모든 키를 얻을 수 있습니다.

const key = keyboard[rowIndex][keyIndex]
//keyIndex is 0, 1, .., 16

데이터 소스

어디에서 데이터를 얻을 수 있습니까?
main , shifted 및 label는 실제 키보드의 키에 쓰여 있습니다.
code를 얻는 방법은 8장: "keydown 이벤트 처리"에서 설명합니다.

결론

모듈 방식으로 앱을 디자인하려면 이 데이터 모델과 HTML/CSS 모형이 눈앞에 있어야 합니다. 우리는 앱의 각 논리적 부분을 담당하는 작은 구성 요소를 만들 것입니다. 그 전에 이러한 구성 요소에 어떤 데이터가 전달되는지 아는 것이 중요합니다.

Differences between old code and new code

Entire code after the chapter 3



배열은 유사한 데이터 요소의 모음입니다. ↩

객체는 실생활 객체의 코드 설명과 같습니다. employee = { age: 30, name: 'John Doe', position: 'driver' } . age는 속성입니다. 30는 재산age의 값입니다. 따라서 개체는 property-value 집합입니다. 점employee.age(30) 또는 대괄호employee["name"](John Doe)로 속성을 읽을 수 있습니다. ↩

확장자*.js와 키워드export가 있는 파일을 ES6 모듈 또는 모듈이라고 합니다. *.js 키워드를 사용하여 다른 import 파일에서 해당 코드를 가져올 수 있습니다. ↩