React 코드 생성: 단계별 가이드

​최신 App Builder 릴리스는 로우 코드 앱 개발을 위한 수많은 흥미로운 개선 사항을 도입했지만 그 중 가장 기대되는 새로운 기능은 React 코드 생성 입니다! 마침내 오버헤드 없이 필요한 모든 데이터와 상호 작용을 사용하여 App Builder 프로젝트에서 직접 클릭 한 번으로 고품질 React 코드를 생성할 수 있습니다.

이 강력한 기능을 사용하면 ​아이디어나 완성 된 디자인에서 기본 React to HTML 변환기 또는 유사한 플랫폼에서 일반적으로 생성하는 유지 관리가 어려운 스파게티 코드와 관련이 없는 코드로 원활하게 전환할 수 Figma 있습니다.

새로운 React to HTML 기능이 개발 주기와 출시 시간을 획기적으로 단축합니까? 절대로. 이를 통해 React의 구성 요소 기반 아키텍처의 잠재력을 최대한 활용하여 애플리케이션의 효율성과 유지 관리 및 쉽게 확장할 수 있습니다.

따라서 귀하와 귀하의 팀에 충분한 리소스(시간, 기술, 프로그래머)가 없더라도​이 새로운 기능을 사용하면 생산성을 극대화 하고 엄격한 기간 내에 고품질 React 앱을 제공하는 동시에 수동 코딩 오류를 최소화하고 프로젝트 전반에 걸쳐 일관성을 유지할 수 있습니다. 

App Builder를 사용하여 React 코드를 생성하는 방법에 대한 자세한 지침을 보려면 여기를 클릭하여 전용 섹션으로 건너뛸 수 있습니다.

다음은 몇 가지 React 코드 예제와 React HTML로 변환하는 단계를 보기 전에 읽을 내용입니다.

오류가 발생하기 쉬운 코드의 끝? React 코드 생성의 이해

React 코드 생성은 코드 줄을 수동으로 작성하지 않고 React 프로젝트에 대한 상용구 코드를 자동으로 생성하는 프로세스입니다. 반복적인 코드 생성을 자동화하면 고유한 기능과 비즈니스 로직을 구현하는 데 집중할 수 있어 앱 개발 주기를 크게 단축할 수 있습니다.

App Builder의 React-to-code 기능을 통해 생성된 코드는 편집 및 재사용 및 프로덕션 준비가 가능합니다. 이를 통해 쉽게 수정할 수 있으므로 특정 프로젝트 요구 사항을 더 빠르게 충족할 수 있습니다. JavaScript 또는 HTML로 컴파일된 코드는 모든 웹 브라우저에서 원활하게 실행됩니다.

React 코드 생성 플랫폼의 이점은 무엇입니까?

App Builder를 포괄적인 React to HTML 변환기로 사용하면 다양한 이점이 있습니다. 가장 중요한 것 중 하나는 생산성 향상입니다. 기술 부채 감소, 시장 출시 시간 단축 및 실시간 피드백. 그것은 놀라운 일이 아닙니다. "글로벌 로우코드 애플리케이션 개발 플랫폼 시장 규모는 2023년 248억 3,000만 달러로 추정되었으며 2024년부터 2030년까지 22.5%의 연평균 성장률(CAGR)로 성장할 것으로 예상됩니다." 그랜드 뷰 리서치(Grand View Research)가 그들의 로우 코드 애플리케이션 개발 플랫폼 시장 규모, 점유율 및 동향 분석 보고서.

그러나 다음과 같은 다른 중요한 이점이 있습니다.

• 디자이너-개발자 핸드오프와 시간 소모적인 POC 없이 전체 설계-코드 스토리를 단순화하여 설계 및 기능을 빠르게 반복하고 개선할 수 있습니다.
• 화면 디자인, UX 흐름, 테마 및 브랜딩, 데이터 바인딩, 배포 및 GitHub 통합과 같은 영역에서 수동 및 오류가 발생하기 쉬운 코딩의 필요성을 줄이는 시각적 인터페이스와 사전 구축된 구성 요소를 제공합니다. 이러한 방식으로 다양한 전문 지식 수준을 가진 개발자가 애플리케이션을 쉽게 빌드할 수 있습니다.
• 즉각적인 React 코드 생성 및 코드 미리보기를 앱과 함께 제공하므로 빌드된 내용을 픽셀 단위로 완벽하게 표현하고, 변경 사항을 즉시 미리보고, 기능을 테스트하고, 이해 관계자로부터 실시간으로 피드백을 수집할 수 있습니다.
• 귀하와 귀하의 팀이 처음부터 코드를 작성할 필요가 없으므로 시간과 리소스를 절약할 수 있습니다. 또한 한 프레임워크에 대해 생성된 코드는 프레임워크에 구애받지 않으므로 클릭 한 번으로 다른 프레임워크로 용도를 변경할 수 있습니다. 이에 대한 자세한 내용은 Design-To-Code Solution Explained에서 확인할 수 있습니다.
• 생성된 코드는 모범 사례를 따르고 표준화를 촉진하므로 전체 프로젝트에서 일관성을 유지합니다.
• 시간이 지남에 따라 애플리케이션의 성장을 수용할 수 있는 확장 가능한 아키텍처이며, 코드 품질이나 앱 논리를 손상시키지 않고 새로운 기능을 추가하고 기존 기능을 확장할 수 있습니다. 이러한 방식으로 앱은 새로운 요구 사항 및 변경 사항에 따라 발전할 수 있습니다.
• 코드 생성 앱에서 플랫폼의 앱 요구 사항과 일치하도록 수정 및 사용자 지정을 적용할 수 있는 기능.
• 개발자부터 최고 경영진에 이르기까지 관련된 모든 사람을 위한 검증된 단일 솔루션입니다.

단계별 가이드: App Builder를 사용하여 HTML로 React

​App Builder 플랫폼을 통해 새 React 앱을 만드는 방법에는 세 가지가 있습니다.

1. 샘플 앱– 시작 앱은 App Builder를 사용하여 만든 애플리케이션을 탐색하고 자신의 사용자 공간에서 수정할 수 있도록 도와줍니다. 앱을 처음부터 만들 필요 없이 더 큰 애플리케이션에 대해 생성된 React 코드를 미리 볼 수 있는 좋은 소스입니다.

App Builder를 처음 사용하는 경우 샘플 앱 옵션을 시작점으로 사용하는 것이 좋습니다. 이것은 도구의 멋진 기능을 온보딩하고 프로젝트 구축을 시작하는 가장 빠른 방법입니다.

2. 앱 레이아웃– 미리 정의된 레이아웃을 활용하여 처음부터 새 앱을 시작합니다. 여기에서 빈 템플릿을 기반으로 앱을 만드는 옵션도 찾을 수 있습니다.

3. 디자인 가져오기– 이 옵션을 사용하면 재료용 Figma Indigo.Design UI 키트를 사용할 수 있으며 이는 아래 단계에서 시연할 내용입니다.

Figma에서 React 코드를 생성하는 방법

머티리얼용 Figma Indigo.Design UI 키트는 Ignite UI for React UI 툴셋에 매핑되어 React 코드 생성 프로세스를 간소화합니다. 이렇게 하면 모든 정적 디자인 파일을 실제 UI 구성 요소, 브랜딩 및 스타일링이 포함된 대화형 반응형 앱으로 쉽게 전환할 수 있습니다.

이 키트는 요금제에 관계없이 모든 Figma 사용자가 사용할 수 있다는 점을 명심하세요. 그러나 무료 사용자는 Pro 사용자에 비해 제한 사항이 있습니다 – 무료 계정 사용자는 자산 패널에서 직접 라이브러리의 구성 요소를 사용할 수 없습니다. 따라서 UI 키트 파일에서 필요한 모든 구성 요소를 복사하여 프로젝트 파일에 붙여넣어야 합니다.

1 단계 : Figma 플러그인 다운로드 및 설치 –자산 다운로드 페이지 또는 Figma UI 키트,   Figma 용 플러그인​ ​및 샘플 앱에 대한 직접 링크를 통해 수행할 수 있습니다

2 단계 : Figma 커뮤니티에서 UI 키트의 복제본을 만듭니다.

​Figma 커뮤니티로 이동하여 Indigo.Design UI Kit for Material을 검색합니다. 파일을 복제하면(Figma에서 열기 선택) 초안 폴더에 나타납니다.​

3 단계 : 파일을 팀 공간으로 이동

그런 다음 파일 이름 바로 옆에 있는 갈매기 모양 화살표를 사용하여 파일을 "초안"에서 팀 공간으로 이동합니다.

파일 이름 바로 아래에 파일을 이동한 팀의 프로젝트 이름(예: "테스트")이 표시됩니다. 

4 단계 : 라이브러리 게시 및 해당 자산 사용

파일이 이동되면 자산 패널로 이동합니다. 라이브러리 아이콘을 클릭하면 이 파일을 라이브러리로 게시할 수 있으며, 이 라이브러리는 모든 스타일, 타이포그래피 및 구성 요소를 나머지 팀원에게 배포합니다. 활성화는 Assets > Libraries 아이콘 > 게시 버튼에서 이루어집니다.

그런 다음 UI 키트 라이브러리의 구성 요소를 사용할 Figma 디자인 파일을 엽니다. 자산 패널로 이동하여 라이브러리 아이콘을 클릭하고 팀으로 이동하여 원하는 라이브러리를 선택하고 파일에 추가를 클릭하고 구성 요소 사용을 시작합니다.

5 단계 : App Builder에서 애플리케이션 만들기

6 단계 : 테마 및 색상 선택 – 10가지 색상 변형이 있는 5가지 팔레트 사용 가능
7 단계 : 자산 처리 및 App Builder 전송(이미지 또는 일러스트레이션)

단계에 대한 자세한 개요를 보려면 전체 디자인에서 코드로의 프로세스를 안내하는 전용 Figma 플러그인 도움말 페이지를 확인할 수 있습니다. 

React 구성 요소를 HTML로 변환하는 방법

App Builder 항상 디자인 화면과 React 코드가 있는 미리 보기 창에 라이브 실행 웹 응용 프로그램을 표시합니다. 기본 React 코드 및 응용 프로그램 모델은 디자인 화면에서 응용 프로그램을 변경할 때마다 실시간으로 업데이트됩니다.

생성된 애플리케이션 코드는 미리보기 창에서 언제든지 볼 수 있으며, 생성된 애플리케이션을 언제든지 완전한 애플리케이션 코드 리포지토리로 다운로드할 수 있으며, 그런 다음 선택한 코드 편집기에서 열거나 GitHub에 직접 게시할 수 있습니다. 컴퓨터에서 로컬로 App Builder를 사용하여 설계한 애플리케이션을 빌드하고 실행하며 생성된 React 코드를 추가로 수정할 수 있습니다.

React 앱 예시

App Builder 모양과 느낌으로 구축된 몇 가지 예제 앱을 살펴보겠습니다. 그들 모두는 100% React로 내보낼 수 있음을 명심하십시오.

재고 관리

이 앱은 재고 수준을 관리하고 재고가 있는 제품을 검토하는 데 사용됩니다. 이를 구축하기 위해 라우팅 및 범주 차트에 대한 사용자 지정 측면 탐색을 활성화하여 성능을 보고할 수 있도록 했습니다. 다른 구성 요소로는 아바타, 버튼, 카드, 체크박스, 데이터 그리드, 드롭다운, 아이콘, 입력 그룹, 목록 및 선택이 있습니다.

게스트 액세스를 사용하여 코드를 미리 보 거나 앱의 전체 기능을 경험할 수 있습니다.

고객 관계 관리(CRM)

이를 위해 Accordion, Avatar, Button, Icon Button, Checkbox, Dialog Window, Dropdown, Expansion Panel, Data Grid, Icon, Input Group, List, Navigation Bar, Navigation Drawer, Select, Tab Layout과 같은 구성 요소와 함께 여러 탭이 있는 개요 대시보드 및 고객 세부 정보를 사용했습니다.

게스트 액세스를 사용하여 코드를 미리 보 거나 앱의 전체 기능을 경험할 수 있습니다.

HR 대시보드

React 앱의 또 다른 예로는 HR 대시보드가 있습니다. Ignite UI 도구 세트를 아바타, 카테고리 차트, 아이콘 버튼, 아이콘, 목록, 카드 및 데이터 그리드와 같은 구성 요소와 함께 사용하여 성능이 뛰어나고 시각적으로 매력적으로 만들었습니다.

게스트 액세스를 사용하여 코드를 미리 보 거나 앱의 전체 기능을 경험할 수 있습니다.

마무리…

새 React 앱을 만들고 App Builder를 사용하여 즉각적인 React 코드 생성의 이점을 누리려면 샘플 앱으로 시작할 수 있습니다. 사전 구축된 애플리케이션을 탐색하고 수정하려면 사전 정의된 앱 레이아웃 또는 빈 템플릿을 사용하거나 원활한 통합을 위해 Figma UI 키트를 사용하여 기존 디자인 파일을 가져옵니다. App Builder React 코드 및 애플리케이션 모델을 실시간으로 업데이트할 수 있으므로 필요에 따라 생성된 코드를 보고, 다운로드하고, 수정하고 GitHub에 직접 게시할 수 있습니다. 이 플랫폼은 원활한 온보딩 프로세스와 효율적인 앱 개발을 보장하며, 모든 샘플 앱을 React로 완전히 내보낼 수 있습니다.