프론트 엔드 웹 개발자를위한 플러터

프론트 엔드 웹 개발에서 플러터 개발로 전환합니까? 이 기사는 내 경험을 공유하여 전환을 쉽게 할 수 있도록 도와줍니다. 나는 플러터에서 배울 수있는 새로운 개념과 새로운 개념에 공통적 인 개념을 지적하므로 더 이상 어떤 생태계를 선택할 수 있는지 걱정할 필요가 없습니다.

일반적인 개념

이 섹션에는 프론트 엔드 웹 개발과 플러터의 유사성과 이미 가지고있는 기술이 더 빠르게 플러터로 시작하는 데 도움이 될 수 있습니다.

1. UI (User Interface) 구현

프론트 엔드 웹 개발에서는 HTML 요소를 사용하여 UI를 구축하고 CSS로 스타일링합니다. Flutter에서는 위젯을 사용하여 UI를 구축하고 속성 으로 스타일링합니다.

DART의 Color 클래스는 CSS와 같은 "RGBA"및 "16 진"색상 값을 지원합니다. Flutter는 또한 CSS와 같은 공간 및 크기 단위로 픽셀을 사용합니다.

Flut

• BorderRadius
• BoxShadow
• FontWeight
• Opacity
• Padding
• …

Flutter의 Column 및 Row 위젯은 CSS의 display: flex 와 같습니다. MainAxisAlignment 및 CrossAxisAlignment 속성은 justify-content 및 align-items 스타일에 해당합니다. flex-grow 스타일을 조정하려면 해당 하위 위젯을 Expanded Flexible 랩핑 할 수 있습니다.

복잡한 UI의 경우 Flutter는 웹 개발에서 Canvas API와 동일한 CustomPaint 클래스를 제공합니다. CustomPaint 사용하면 UI 그리기를 사용자 정의 할 수 있습니다. CustomPaint 는 일반적으로 매우 복잡한 UI 또는 위젯 조합으로 불가능한 효과를 구현해야 할 때 사용됩니다.

2. 멀티 스크린 해상도 적응

웹 사이트는 브라우저에서 실행되며 모바일 앱은 장치에서 실행됩니다. 개발 과정에서 플랫폼 차이를 고려해야합니다. 각 플랫폼은 다양한 방식으로 동일한 기능 (카메라, 위치, 알림 등)을 구현합니다.

웹 개발자는 웹 사이트 반응 형 디자인에 익숙하며 미디어 쿼리를 사용하여 다양한 화면 크기로 웹 사이트 디스플레이 효과를 처리합니다.

Flutter에서 MediaQuery 클래스는 유사한 기능을 제공합니다. 장치 방향 (조경 또는 초상화), 뷰포트 크기, devicePixelRatio 등과 같은 장치 정보를 얻을 수 있으므로 다양한 화면 크기에 따라 응용 프로그램의 UI를 조정할 수 있습니다.

3. 디버그 도구, 편집기 및 명령 줄 도구

데스크탑 브라우저에는 검사자, 콘솔, 네트워크 모니터링 등을 포함한 개발자 도구가있어 웹 개발의 효율성을 향상시킵니다. Flutter에는 위젯 검사관, 디버거, 네트워크 모니터링 및 기타 기능을 포함한 자체 DevTool이 있습니다.

IDE 지원은 비슷합니다. Visual Studio Code는 많은 웹 관련 확장 기능을 갖춘 인기있는 웹 개발 IDE입니다. Flutter는 또한 Android Studio뿐만 아니라 VS 코드도 지원합니다. 둘 다 Flutter DevTools를 지원하여 Flutter의 툴체인을 매우 완벽하게 만듭니다.

대부분의 프론트 엔드 JavaScript 프레임 워크에는 Angular CLI, React App 만들기, Vue CLI 등과 같은 CLI (Command Line Interface)가 있습니다. Flutter는 또한 코드 분석 및 테스트를 수행 할뿐만 아니라 플러터 프로젝트를 구축, 생성 및 개발하기위한 독점적 CLI를 보유하고 있습니다.

새로운 개념

이 섹션에서는 웹 개발에 존재하지 않거나 다른 방식으로 구현되는 Flutter에 고유 한 개념을 소개합니다.

1. 스크롤 처리

웹 개발에서 기본 스크롤 행동은 브라우저에서 처리되며 CSS (예 : overflow 특성)를 사용하여 스크롤링을 사용자 정의 할 수 있습니다.

그러나 Flutter에서는 위젯 그룹이 기본적으로 스크롤하지 않습니다. 위젯 그룹이 오버 플로우를 할 수있는 경우 스크롤을 적극적으로 구성해야합니다.

Flutter는 특수 위젯을 사용하여 ListView , SingleChildScrollView , CustomScrollView 등과 같은 스크롤을 구성합니다. 이러한 스크롤 가능한 위젯은 스크롤 동작에 대한 세분화 제어를 제공합니다. CustomScrollView 사용하면 복잡하고 전문적인 스크롤 메커니즘을 구성 할 수 있습니다.

Flutter에서는 ScrollView 사용하는 것이 불가피합니다. Android와 iOS에는 스크롤을 처리하기 위해 각각 ScrollView 와 UIScrollView 있습니다. ScrollView

사고 방식을 바꾸고 문서 구조의 흐름에 대해 생각하지 말고 응용 프로그램을 장치의 기본 드로잉 메커니즘의 열린 캔버스로 생각하십시오.

2. 개발 환경 구성

간단한 웹 사이트를 만들려면 .html 파일을 만들고 브라우저에서 열면됩니다. 플러터는 훨씬 더 복잡합니다. Flutter SDK를 설치하고 테스트 장치의 Flutter를 구성해야합니다. Android 용 Flutter Apps를 개발하려면 Android SDK를 설정하고 하나 이상의 Android 장치 (에뮬레이터 또는 물리적 장치)를 구성해야합니다.

iOS 장치 (iOS 및 MacOS)도 마찬가지입니다. Mac에 Flutter를 설치 한 후 Xcode도 설정해야합니다. 플러터 앱을 테스트하려면 최소한 하나의 iOS 시뮬레이터 또는 iPhone도 필요합니다. 데스크탑 플러터의 설정도 매우 복잡합니다. Windows에서는 Visual Studio (대 코드가 아닌)를 사용하여 Windows Development SDK를 설정해야합니다. Linux에서는 더 많은 패키지를 설치해야합니다.

플러터는 추가 설정에 의존하지 않고 브라우저에서 실행됩니다. 따라서 대상 장치의 추가 설정을 무시할 수 있습니다. 그러나 대부분의 경우 모바일 앱 개발에 Flutter를 사용하므로 Android 또는 iOS 환경을 설정해야합니다. Flutter는 flutter doctor 명령을 제공하여 개발 환경의 설정 상태를보고하여 어떤 설정을 만들어야하는지 이해하는 데 도움이됩니다.

그러나 이것이 플러터 개발이 느리다는 것을 의미하지는 않습니다. Flutter에는 강력한 엔진이 있으며 flutter run 명령은 인코딩 중에 테스트 장치에 핫로드를 허용합니다. 그러나 핫 재 장전을 수행하려면 R을 누르야합니다. Flutter의 VS Code Extension을 사용하면 파일이 변경 될 때 자동 핫로드가 가능합니다.

3. 포장 및 배포

웹 사이트 배포는 모바일 앱을 배포하는 것보다 저렴하고 쉽습니다. 웹 사이트를 배포 할 때는 웹 사이트를 통해 웹 사이트에 액세스 할 수 있습니다. 도메인 이름을 통해 액세스 할 수 있습니다. 도메인 이름은 일반적으로 연간 갱신이 필요하지만 필요하지 않습니다.

많은 플랫폼은 .ondigitalocean.com 과 같은 무료 호스팅 서비스를 무료로 제공합니다. 이러한 도메인 이름을 사용하여 브랜딩에 중점을 둔 문서 웹 사이트 또는 웹 사이트를 구축 할 수 있습니다.

Flutter의 모바일 애플리케이션 개발에서 일반적으로 응용 프로그램을 두 개의 플랫폼에 배포해야합니다.

• 앱 스토어 (iOS 장치)
• Google Play (Android 기기)

각 플랫폼에 개발자 계정을 등록해야하며, 일반적으로 수수료 또는 구독이 필요하고 인증이 필요합니다.

App Store는 Apple Developer 프로그램에 가입하고 연간 $ 99의 구독 요금을 지불해야합니다. Google Play의 일회성 등록 수수료는 $ 25가 필요합니다.

이 앱 스토어는 앱이 온라인으로 진행되기 전에 검토됩니다.

또한 사용자는 자동으로 앱 업데이트를 얻지 못하므로 설치된 앱을 수동으로 업데이트해야합니다. 웹의 사용자가 웹 사이트의 최신 버전을 자동으로 볼 수있는 웹과 다릅니다.

배포 된 애플리케이션 관리는 배포 된 사이트를 관리하는 것보다 비교적 힘들다. 그러나 결국이 상점에 수백만 개의 앱이 이미 배포되어 있지 않아야합니다.

플러터에 대한 추가적인 생각

Flutter는 데스크탑, 모바일 또는 웹 응용 프로그램을 구축하기위한 크로스 플랫폼 도구입니다. Flut

플러터는 효율적이며 다트의 기능을 구축하고 활용하기 때문에 잘 수행합니다.

많은 장점으로 Flutter는 많은 응용 프로그램에 이상적입니다. 크로스 플랫폼 응용 프로그램은 생산 및 유지 보수 중 비용과 시간을 절약합니다. 그러나 플러터 (및 크로스 플랫폼 솔루션)가 경우에 따라 최선의 선택이 아닐 수도 있습니다.

사용자가 플랫폼 개발자 도구를 사용하여 응용 프로그램과 상호 작용하려면 Flutter를 사용하지 않아야합니다. 여기에서 플랫폼 개발자 도구는 Android 개발자 옵션과 같은 장치 별 도구 및 브라우저 개발자 도구를 참조하십시오.

브라우저 확장이 웹 사이트와 상호 작용할 것으로 예상되는 경우 웹 개발에 Flutter를 사용해서는 안됩니다.

또한 컨텐츠가 풍부한 웹 사이트에는 플러터를 사용해서는 안됩니다.

결론적으로

이 기사는 프론트 엔드 웹 개발에서 플러터 개발로의 기술 전달과 배우는 새로운 응용 프로그램 개발 개념을 검토합니다.

Flutter는 UI 구현이 포함되므로 웹 개발자가 시작하기가 비교적 쉽습니다. Flutter를 사용해 보면 좋은 개발자 경험을 제공합니다. Flutter와 함께 모바일 앱을 구축하고 결과를 보여주십시오!

위 내용은 프론트 엔드 웹 개발자를위한 플러터의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!