보조 항목:React 디지털 디스플레이 - 섹션 1

생각해봐.너는 아르바이트를 하는 이유를 많이 찾을 수 있다. 예를 들어 학습, 오락, 혹은 다른 사람들이 사용하고 감상할 수 있는 것을 창조하는 것이다.그것은 대량의 창조력과 노력을 필요로 한다.
비록 어떤 사람들은 동의하지 않을 수도 있지만, 나는 이 일의 이익이 폐단보다 크다고 생각한다.이 시리즈에서, 우리는 함께 몇 가지 코드를 작성해서, 무엇을 실현할 수 있는지 볼 것이다.
우리의 첫 번째 항목은 React 디지털 디스플레이라고 한다.말 그대로 텍스트를 표시하는 React 구성 요소입니다.간단해 보이지만, 다양한 구성 요소를 디스플레이 모듈로 하고, 엔진 뚜껑 아래에서 사용할 수 있는 귀여운 기능을 추가할 것입니다.예를 들어, 그것은 7단 모듈이나 점진, 또는 네가 상상할 수 있는 모든 것일 수도 있다.그것은 심지어 LED처럼 보일 필요조차 없다.

우리의 구성 요소는 두 가지 버전으로 나뉘는데 그것이 바로 7단 모듈과 5x7 점진이다

메인 요리 전 몸풀기

우선 필요한 수요 목록을 준비하자.분명히 나는 아직도 많은 생각이 있지만, 우리는 기본적인 생각부터 시작할 것이다.내가 알기로는 사용자는 다음과 같은 작업을 수행할 수 있어야 합니다.

표시할 텍스트 정의

디스플레이 모듈 유형 선택

디스플레이 크기 설정

디스플레이 높이 설정

모듈에서 일부 문자를 지원하지 않는 경우 계속하는 방법 선택:

공백 표시

문자를 생략하고 다음 문자

를 표시합니다.
이제 우리는 첫 번째 인터페이스를 만들어서 구성 요소의 도구를 설명할 수 있다.다음과 같이 표시됩니다.

interface ReactDigitalDisplayProps {
  text: string | string[];
  module: DisplayModule<unknown>;
  size: number;
  height?: number;
  unknownCharacterMode?: UnknownCharacterMode;
}

만약 네가 이것을 보고 있다면, 너는 약간의 문제가 있을 것이다.설명 좀 할게요.
만약 한 줄만 있다면, 우리는 왜 string | string[]로 표시해야 합니까text?
답은 간단하다.모듈에 "문자"가 표시되지만 단일 ASCII 문자로 정의할 필요는 없습니다.예를 들어, 표시할 내용이 없음을 나타내려면 특수EMPTY 문자를 사용합니다.이것은 unknownCharacterMode에 매우 유용하다.UnknownCharacterMode란?
이것은 두 문자열의 간단한 병합집입니다. 이것은 우리가 지원하지 않는 문자를 처리하는 방법입니다.

type UnknownCharacterMode = 'omit' | 'empty';

그것은 일일이 열거할 수 있지만, 이 예에서 그것은 필수적이지 않다.DisplayModule란?
이 문제의 답안은 좀 복잡해야 한다.나는 본문 뒤에서 그것을 토론할 것이다.

모듈 정의 방법

디스플레이 모듈은 구성 요소입니다. 유일한 작업은 문자를 표시하는 것입니다.우리는 그것을 위해 간단한 인터페이스를 만들 수 있으며, 우리나 다른 사람이 만든 모듈은 모두 이 인터페이스를 실현해야 한다.

interface DisplayModuleProps {
  char: string;
}

각 모듈에는 지원되는 문자 목록과 문자를 표시하는 방법에 대한 정보가 필요합니다.우리는 그것을 문자 집합이라고 부른다. 이것도 그것의 인터페이스를 설명하는 이름이다.이제 빠르게 살펴보겠습니다.

interface Charset<DataType> {
  [SpecialChar.EMPTY]: DataType;
  [key: string | SpecialChar]: DataType;
}

서로 다른 모듈은 서로 다른 수요를 가진다. 이것이 바로 우리가 여기서 범주형을 사용해야 하는 이유다.예를 들어 7단 모듈은 7개의 브리 값으로 구성된 수조를 사용하고DataType 점진은 2차원 수조를 필요로 한다.유일하게 필요한 문자는 EMPTY입니다. 디스플레이 모듈의 빈 상태를 어떻게 표시해야 하는지 설명합니다.나는 또 다른 특수한 캐릭터를 정의할 가능성도 추가했지만, 이것은 현재 유일한 것이다.

DisplayModule은 도대체 무엇입니까?

우리의 주요 구성 부분은 두 가지 책임을 져야 한다.

지원되지 않는 문자 처리

주어진 높이

로 모듈 크기 조절
이를 위해서는 어떤 문자와 모듈의 사이즈를 지원하는지 알아야 한다.이 정보는 모듈 자체에서 제공해야 한다.여기서 어떻게 하는지 볼 수 있다.

export type DisplayModule<DataType> = React.ElementType<DisplayModuleProps> & {
  charset: Charset<DataType>;
  width: number;
  height: number;
};

기본적으로, 이것은 React.ElementType (함수와 클래스 구성 요소를 사용할 수 있음) 구성 요소에 필요한 메타데이터의 추가 정적 속성을 가지고 있다.
이제 우리는 실제 구성 요소를 작성하는 더 재미있는 부분으로 들어갈 수 있다.

제1모듈

주요 구성 요소를 작성하기 전에 첫 번째 모듈을 만듭니다.우리는 7단 디스플레이부터 시작할 것이다.말 그대로 일곱 부분으로 이루어져 있다.현실 생활에서, 이 모니터들도 하나의 점이 있지만, 우리는 당분간 이 문제를 토론하지 않을 것이다.세그먼트 이름은 ReactDigitalDisplay에서 a까지이며 다음과 같습니다.

자료 출처: Wikipedia
우선 모듈의g를 정의합니다.내가 전에 말한 바와 같이, 그것은 7개의 브리 값으로 구성된 그룹이 될 것이며, 우리는tuple을 사용할 수 있다.Tuple은 각 요소의 유형을 정의할 수 있는 고정 길이 배열입니다.그것들은 다를 수 있지만 사실은 그렇지 않다.우리는 또한 이 브리 값의 의미를 이해하는 데 도움을 줄 수 있도록 모든 요소에 라벨을 추가할 수 있다.너는 원조에 대한 더 많은 정보를 읽을 수 있다here.

type Module7SegmentsDataType = [
  a: boolean,
  b: boolean,
  c: boolean,
  d: boolean,
  e: boolean,
  f: boolean,
  g: boolean
];

데이터 형식이 생기면 모듈을 만들 수 있습니다.그것은 기본 표시가 있는 DataType 가 될 것이다.

export const Module7Segments: DisplayModule<Module7SegmentsDataType> = ({
  char,
}) => {
  return (
    <div>
      <h1>Welcome to Module7Segments!</h1>
    </div>
  );
};

전체 모듈을 실현하기 전에, 우리는 단일 구성 요소를 만들어야 한다.그것은 수평일 수도 있고 수직일 수도 있으니 우리는 그것의 활동 상태가 필요하다.마지막 부동산은 DisplayModule 포지셔닝에 사용될 것이다.
현재 나는 전면적으로 실시하는 세부 사항을 상세하게 토론하지 않을 것이다.요컨대 이 단락은 단일className 원소다.우리는 그것div과 :before의 위조 요소를 사용하여 두 부분을 만들었다.한 테두리에 색을 적용하고 투명도를 다른 두 테두리에 적용하면 절반이 사다리꼴처럼 보일 것입니다.우리는 그것을 적당한 부분처럼 보일 수 있도록 정확하게 포지셔닝하기만 하면 된다.
너는 this link에서 완전한 코드를 찾을 수 있다.

interface SegmentProps {
  type: 'horizontal' | 'vertical';
  isActive: boolean;
  className: string;
}

export const Segment = ({
  type,
  isActive = false,
  className = '',
}: SegmentProps) => {
  return (
    <div
      className={clsx(
        styles.segment,
        {
          [styles.active]: isActive,
          [styles.horizontal]: type === 'horizontal',
          [styles.vertical]: type === 'vertical',
        },
        className
      )}
    />
  );
};

우리는 단락이 있고, 우리는 빈 모듈 구성 요소가 있다.이것들을 함께 놓읍시다.우리는 키와 방향이 같은 세그먼트 목록에서 시작합니다.

const SEGMENTS: { key: string; type: SegmentProps['type'] }[] = [
  { key: 'a', type: 'horizontal' },
  { key: 'b', type: 'vertical' },
  { key: 'c', type: 'vertical' },
  { key: 'd', type: 'horizontal' },
  { key: 'e', type: 'vertical' },
  { key: 'f', type: 'vertical' },
  { key: 'g', type: 'horizontal' },
];

세션을 정의한 후 렌더링하고 CSS를 통해 위치를 추가할 수 있습니다.이제 구성 요소는 다음과 같습니다.

return (
  <div className={styles.module}>
    <div className={styles.inner}>
      {SEGMENTS.map((segment, index) => (
        <Segment
          key={segment.key}
          type={segment.type}
          isActive={Module7Segments.charset[char][index]}
          className={styles[`segment-${segment.key}`]}
        />
      ))}
    </div>
  </div>
);

마지막으로, 우리는 디스플레이 모듈을 위해 문자 집합을 정의해야 한다.현재는 0-9에 불과하지만, 장래에는 다른 문자로 확장할 수 있다.마지막으로, 우리는 모듈 :after 에서 사용할 수 있도록 문자 집합을 모듈에 추가해야 한다.

const Module7SegmentsCharset: Charset<Module7SegmentsDataType> = {
  [SpecialChar.EMPTY]: [false, false, false, false, false, false, false],
  '0': [true, true, true, true, true, true, false],
  '1': [false, true, true, false, false, false, false],
  '2': [true, true, false, true, true, false, true],
  '3': [true, true, true, true, false, false, true],
  '4': [false, true, true, false, false, true, true],
  '5': [true, false, true, true, false, true, true],
  '6': [true, false, true, true, true, true, true],
  '7': [true, true, true, false, false, false, false],
  '8': [true, true, true, true, true, true, true],
  '9': [true, true, true, true, false, true, true],
};

Module7Segments.charset = Module7SegmentsCharset;

일단 조형이 완성되면 우리는 모듈의 최종 사이즈(픽셀 단위)를 계산하고 이를 정적 속성으로 모듈에 분배할 수 있다.

Module7Segments.width = 164;
Module7Segments.height = 264;

아래에서 너는 우리의 모듈이 어떤 모양인지 볼 수 있다.

7단 모듈의 최종 보기

한마디로

오늘은 여기까지.우리는 이미 우리의 업무를 기획했고, 우리의 구성 요소를 위해 첫 번째 모듈을 만들었다.전체 코드는 this repository에서 제공됩니다.다음에 우리는 메인 구성 요소를 실현하고 새로 만든 모듈을 사용하여 텍스트를 표시할 것입니다.
다음에 또 만나요!
사진 작성자Donna Elliot가 Unsplash