React에서 옮겨 오기

기존 React 인터페이스를 NoWayOS로 가져옵니다. Screen Compiler의 커버리지 보고서로 측정하고, 쓴 그대로 변환되는 것, 바꿀 것, 애플리케이션으로 옮길 것을 확인하며, 나올 수 있는 모든 오류를 읽는 법을 안내합니다.

처음부터 다시 시작하지 않습니다. React 화면의 대부분은 쓴 그대로 변환됩니다. 레이아웃, 텍스트, 버튼과 필드, 조건과 리스트, 화면의 작은 자체 컴포넌트까지입니다. 나머지는 짧게 고쳐 쓰거나 애플리케이션으로 옮길 일이며, 일이 하나뿐인 컴퓨터에서는 그곳이 제자리입니다.

먼저 측정하십시오

한 줄을 바꾸기 전에, 코드가 이미 어디까지 가는지 Screen Compiler에 물어보십시오. React로 만드는 화면의 두 저장소 옆에 애플리케이션을 클론해 개발 컨테이너가 볼 수 있게 한 다음, 소스에 커버리지 보고서를 실행합니다.

cd nowayos-work # holds nowayos and screen-compiler
git clone https://example.com/your-app.git my-app
cd screen-compiler
make run ARGS="audit ../my-app/src"

보고서는 그 폴더 아래의 모든 .tsx 파일을 읽고 찾은 구문을 셉니다. 요소, props, 스타일 속성, hooks, 리스트, 조건, 연산자, import입니다. 각 구문은 판정을 받습니다.

서브셋 안: 서브셋이 허용하는 방식으로 쓰였다면 변환됩니다.
로드맵 위: 아직 변환되지 않으며, 보고서가 이를 변환할 단계를 알려 줍니다.
설계상 제외: 앞으로도 변환되지 않으며, 보고서가 그 이유를 알려 줍니다.
알 수 없음: Screen Compiler가 인식하지 못합니다. 알 수 없는 것은 절대 변환된 것으로 세지 않습니다.

이어서 로드맵의 단계와 각 단계가 필요한 횟수, 그리고 파일별 결과가 나옵니다. 파일은 check를 통과할 때에만 "변환됨"이므로, 맨 위의 숫자가 실제 숫자입니다. 보고서는 구문의 이름만 밝히고 코드를 인용하지 않으므로 안심하고 공유할 수 있습니다. 컴파일러와 마찬가지로 신뢰하는 코드에만 실행하십시오.

무엇이 무엇에 대응하는가

React DOM에서는	서브셋에서는
flexbox로 배치한 `<div>`	`<Column>` 또는 `<Row>`, `gap`, `padding`, 선언된 `style`과 함께
`<h1>`, `<p>`, `<span>`, `<label>`	역할을 가진 `<Text>`: `title`, `heading`, `body`, `label`, `caption`, `display`
`<button onClick={…}>`	`<Button onClick={props.onSave}>`: 콜백 prop이 액션이 됩니다
`<input>`, 체크박스, 라디오 버튼, `<select>`	`<TextInput>`, `<Checkbox>`, `<RadioGroup>`, `<Select>`. 각각 `id`가 있으며, 애플리케이션은 이것으로 값을 읽고 설정합니다
`{ready && <X/>}`, `? :`, `!ready`, `step === "review"`	애플리케이션이 설정하는 그룹과 스위치
`items.map(…)`	행: 파일에 있는 리스트, 또는 최대 개수로 자른 prop의 리스트(`props.items.slice(0, 5)`)
`Hello, {name}!`	애플리케이션이 채우는 슬롯 앞뒤에 고정된 단어를 컴파일해 넣습니다
자체 컴포넌트와 프래그먼트(화면의 파일 안, 또는 그 옆의 파일)	빌드할 때 펼쳐져, 화면을 평평하게 쓴 것과 같아집니다
`style={{ padding: "16px" }}`, `color: "var(--text-muted)"`	선언된 스타일 속성, 길이는 레이아웃 단위, 색은 테마의 색

각 컴포넌트가 받는 것은 React로 만드는 화면의 표에 정확히 나와 있습니다. 이 표는 Screen Compiler 자체의 표에서 나오므로, 실제로 받는 것과 어긋날 수 없습니다.

애플리케이션으로 옮기는 것

기기에는 JavaScript가 없습니다. 화면은 고정된 트리이며, 애플리케이션이 번호가 붙은 액션, 필드, 슬롯, 그룹, 스위치로 움직입니다. 그래서 몇 가지는 설계상 제외되며, 각각 이유가 있습니다.

상태와 hooks(useState, useEffect, 컨텍스트). 상태는 애플리케이션이 갖고, 화면이 무엇을 보여 줄지 정합니다.
필드의 value, checked, onChange. 애플리케이션은 필드를 id로 읽고 설정합니다.
스프레드한 props. 무엇이 들어 있는지는 코드가 실행될 때에만 알 수 있습니다.
계산한 스타일, 색 값, 전역 스타일시트. 스타일은 정적이고, 색은 테마의 색이므로 큰 글자 테마가 모든 화면의 색을 바꿀 수 있고 대비도 검사됩니다. 캐스케이드는 없습니다.
애니메이션.
최대 개수가 없는 리스트. .slice(0, 5)로 잘라서, 화면이 몇 행을 보여 줄 수 있는지 알게 하십시오.
prop과 문자열의 === 외의 비교, 화면 함수 안의 if나 switch. 답은 애플리케이션에서 구하고 prop으로 넘기십시오.
패키지의 컴포넌트와 화면 폴더 밖의 파일. 화면은 자기 폴더와 그 안만 읽습니다. 컴포넌트는 화면 옆에 두십시오(./parts/header).
prop을 호출하는 것 이상을 하는 핸들러. onClick={() => props.onSave()}는 변환됩니다. 그 이상은 애플리케이션의 일입니다.

로드맵의 다음 단계

코드에 필요할 때 커버리지 보고서는 다음과 같은 계획된 단계를 알려 줍니다.

더 많은 CSS 레이아웃: flex 늘이기, alignSelf, 최소·최대 높이, 변마다의 padding, margin
흔히 쓰는 HTML 요소, 각각 하나의 고정 규칙으로
CSS 모듈, 요소마다 클래스 하나
레이어: 서로 겹쳐 놓는 요소
이미지와 마스킹된 입력

단계가 구현되기 전까지 그 구문은 추측하지 않고 거부합니다. 모든 단계는 같은 규칙을 지킵니다. 정확하게, 아니면 하지 않습니다.

오류 읽기

오류는 파일, 줄, 열, 코드, 무엇이 잘못되었는지, 그리고 한 줄의 도움말을 보여 줍니다.

web-search.tsx:16:28: error[unknown-name]: `query` is not a prop of the component
 help: text from the application must be a prop: take it as one, function Screen({ query }) { … }

오류가 하나라도 있으면 아무것도 쓰지 않습니다. 코드는 다음과 같습니다.

코드	의미	할 일
`syntax`	파일이 올바른 TSX가 아니거나, 모든 모듈이 지키는 규칙을 어깁니다.	표시된 위치의 코드를 고치십시오.
`unsupported`	서브셋 밖의 구문입니다.	도움말을 따라 서브셋으로 고쳐 쓰거나, 그 일을 애플리케이션으로 옮기십시오.
`unknown-element`	키트의 요소가 아니거나 import되지 않은 요소입니다.	`"nowayos:kit"`에서 import하거나 키트의 요소를 쓰십시오.
`unknown-prop`	요소가 받지 않는 prop이나 스타일 속성입니다.	표가 그 요소에 대해 나열한 것을 쓰십시오.
`invalid-value`	요소가 받는 prop에 받지 않는 값을 주었습니다.	표에 나온 종류의 값을 주십시오.
`missing-prop`	요소에 필요한 prop이 없습니다.	주십시오. 표에서 굵게 표시되어 있습니다.
`invalid-children`	요소가 가질 수 없는 것을 가졌습니다. 예를 들어 `<Screen>`의 자식 두 개, `<Column>` 안의 텍스트입니다.	묶거나, 텍스트를 `<Text>`에 넣으십시오.
`unknown-name`	prop도, 디자인 토큰도, import도 아닌 이름입니다.	prop으로 받거나 선언하십시오.
`duplicate-name`	생성된 코드에서 두 가지가 같은 이름을 갖게 됩니다. 예를 들어 `isReady`와 `is_ready`입니다.	하나의 이름을 바꾸십시오.
`reserved-name`	Rust나 생성된 코드가 예약한 이름입니다. 예를 들어 `type`입니다.	이름을 바꾸십시오.
`limit`	크기, 깊이, 개수의 한도를 넘었습니다.	줄이거나 컴포넌트로 나누십시오.
`no-screen`	파일에 화면 컴포넌트, 즉 `<Screen>`을 반환하는 함수가 없습니다.	하나를 export하십시오.
`internal`	Screen Compiler 자체의 결함입니다.	원인이 된 입력과 함께 보고하십시오.

필요한 구문이 로드맵에 있지만 아직 구현되지 않았다면, 보고서와 함께 알려 주십시오. 어떤 단계가 가장 중요한지 보여 줍니다.