저는 프론트엔드 웹 개발자로 시작하여 설레다 개발자. Flutter를 더 쉽게 채택하는 데 도움이 되는 몇 가지 개념이 있었던 것 같습니다. 기존과는 다른 새로운 개념도 있었다.
이 기사에서 나는 내 경험을 공유하고 개념이 어떻게 이전되고 새로운 개념이 학습 가능한지를 보여줌으로써 한 생태계를 다른 생태계보다 선택하는 데 마비된 사람에게 영감을 주고 싶습니다.
이전된 개념
이 섹션에서는 프론트 엔드 웹 개발과 Flutter가 유사한 부분을 보여줍니다. Flutter를 시작하면 이미 가지고 있는 기술에 대해 설명합니다.
1. 사용자 인터페이스(UI) 구현
프론트엔드 웹에서 주어진 UI를 구현하려면 HTML 요소를 구성하고 CSS로 스타일을 지정합니다. Flutter에서 UI를 구현하려면 다음을 작성합니다. 위젯 로 스타일을 지정하십시오. 속성.
CSS와 마찬가지로 Color Dart의 클래스는 "rgba" 및 "hex"와 함께 작동합니다. 또한 CSS와 마찬가지로 Flutter는 공간 및 크기 단위에 픽셀을 사용합니다.
Flutter에는 거의 모든 CSS 속성과 해당 값에 대한 Dart 클래스와 열거형이 있습니다. 예를 들어:
Flutter는 또한 Column 와 Row 위젯. 이것은 Flutter에 해당합니다. display: flex CSS에서. 구성하려면 justify-content 와 align-items 스타일, 사용 MainAxisAlignment 와 CrossAxisAlignment 속성. 조정하려면 flex-grow 스타일, 영향을 받는 자식 위젯을 래핑합니다. Column/Row,에서 Expanded or Flexible.
고급 UI의 경우 Flutter는 CustomPaint 클래스 – Flutter가 무엇을 Canvas API 웹 개발입니다. CustomPaint 원하는 대로 UI를 그릴 수 있는 화가를 제공합니다. 당신은 일반적으로 사용할 것입니다 CustomPaint 정말 복잡한 것을 원할 때. 또한, CustomPaint 위젯 조합이 작동하지 않을 때 사용하는 방법입니다.
2. 다중 개발 화면 해상도
웹사이트는 브라우저에서 실행되고 모바일 앱은 장치에서 실행됩니다. 따라서 두 플랫폼 중 하나를 개발하는 동안 플랫폼을 염두에 두어야 합니다. 각 플랫폼은 동일한 기능(카메라, 위치, 알림 등)을 다른 방식으로 구현합니다.
웹 개발자는 웹사이트의 반응성에 대해 생각합니다. 미디어 쿼리를 사용하여 웹사이트가 더 작고 더 넓은 화면에서 어떻게 보이는지 처리합니다.
모바일 웹 개발에서 Flutter로 넘어가면 MediaQuery 도우미 수업. 그만큼 MediaQuery 클래스는 현재 장치를 제공합니다. orientation (가로 또는 세로). 또한 현재 뷰포트를 제공합니다. sizeWalk Through California 프로그램, devicePixelRatio, 다른 장치 정보 중에서. 이러한 값을 함께 사용하면 모바일 장치의 구성에 대한 통찰력을 얻을 수 있습니다. 이를 사용하여 다양한 화면 크기에서 모바일 앱이 어떻게 보이는지 변경할 수 있습니다.
3. 디버거, 편집기 및 명령줄 도구 작업
데스크톱 브라우저에는 개발자 도구가 있습니다. 이러한 도구에는 검사기, 콘솔, 네트워크 모니터 등이 포함됩니다. 이러한 도구는 웹 개발 프로세스를 개선합니다. Flutter에도 자체 기능이 있습니다. 개발자 도구. 위젯 검사기, 디버거, 네트워크 모니터 등이 있습니다.
IDE 지원도 비슷합니다. Visual Studio Code는 웹 개발을 위한 가장 인기 있는 IDE 중 하나입니다. VS Code에는 많은 웹 관련 확장이 있습니다. Flutter도 VS Code를 지원합니다. 따라서 전환하는 동안 IDE를 변경할 필요가 없습니다. VS Code용 Dart 및 Flutter 확장이 있습니다. Flutter는 Android Studio에서도 잘 작동합니다. Android Studio와 VS Code는 모두 Flutter DevTools를 지원합니다. 이러한 IDE 통합으로 Flutter 도구가 완성됩니다.
대부분의 프론트엔드 JavaScript 프레임워크에는 명령줄 인터페이스(CLI). 예를 들면 : 앵귤러 CLI, 반응 앱 만들기, 뷰 CLI, 등. Flutter는 또한 독점적인 CLI. Flutter CLI를 사용하면 Angular 프로젝트를 빌드, 생성 및 개발할 수 있습니다. Flutter 프로젝트를 분석하고 테스트하기 위한 명령이 있습니다.
새로운 개념
이 섹션에서는 웹 개발에서 더 쉽거나 존재하지 않는 Flutter 관련 개념에 대해 설명합니다. Flutter를 시작할 때 염두에 두어야 할 아이디어를 설명합니다.
스크롤 처리 방법
웹용으로 개발할 때 기본 스크롤 동작은 웹 브라우저에서 처리됩니다. 그러나 CSS로 스크롤을 자유롭게 사용자 정의할 수 있습니다(사용 overflow).
Flutter에서는 그렇지 않습니다. 위젯 그룹은 기본적으로 스크롤되지 않습니다. 위젯 그룹이 오버플로될 수 있음을 감지하면 스크롤을 사전에 구성해야 합니다.
Flutter에서는 스크롤을 허용하는 고유한 위젯을 사용하여 스크롤을 구성합니다. 예를 들어: ListView, SingleChildScrollView, CustomScrollView등. 이러한 스크롤 가능한 위젯을 사용하면 스크롤을 효과적으로 제어할 수 있습니다. 와 함께 CustomScrollView, 응용 프로그램 내에서 전문적이고 복잡한 스크롤 메커니즘을 구성할 수 있습니다.
Flutter 측에서 다음을 사용하여 ScrollViews 불가피하다. 안드로이드와 iOS는 ScrollView 와 UIScrollView 스크롤을 처리합니다. Flutter는 다음을 사용하여 렌더링과 개발자 경험을 통합할 방법이 필요합니다. ScrollViews, 도.
문서 구조의 흐름에 대한 생각을 멈추고 대신 애플리케이션을 장치의 기본 페인팅 메커니즘을 위한 열린 캔버스로 간주하는 것이 도움이 될 수 있습니다.
2. 개발 환경 설정
가장 간단한 웹 사이트를 만들려면 다음을 사용하여 파일을 만들 수 있습니다. .html 확장 프로그램을 열고 브라우저에서 엽니다. Flutter는 그렇게 간단하지 않습니다. Flutter를 사용하려면 Flutter SDK가 설치되어 있어야 합니다. 와 테스트 장치에 대해 Flutter를 구성했습니다. 따라서 Android용 Flutter를 코딩하려면 다음을 수행해야 합니다. 안드로이드 SDK 설정. 또한 하나 이상의 Android 장치(Android Emulator 또는 물리적 장치)를 구성해야 합니다.
이는 Apple 기기(iOS 및 macOS)에서도 마찬가지입니다. Mac에 Flutter를 설치한 후에도 계속 진행하기 전에 Xcode를 설정해야 합니다. 또한 iOS에서 Flutter를 테스트하려면 최소한 iOS 시뮬레이터나 iPhone이 필요합니다. 데스크탑용 Flutter도 상당한 설정입니다. Windows에서는 Visual Studio(VS Code 아님)로 Windows Development SDK를 설정해야 합니다. Linux에서는 더 많은 패키지를 설치합니다.
추가 설정 없이 Flutter는 브라우저에서 작동합니다. 결과적으로 대상 장치에 대한 추가 설정을 간과할 수 있습니다. 대부분의 경우 모바일 앱 개발에 Flutter를 사용합니다. 따라서 최소한 Android 또는 iOS를 설정하고 싶을 것입니다. Flutter는 flutter doctor 명령. 이 명령은 개발 설정의 상태를 보고합니다. 그렇게 하면 필요한 경우 설정에서 무엇을 작업해야 하는지 알 수 있습니다.
이것이 Flutter의 개발이 느리다는 것을 의미하지는 않습니다. Flutter는 강력한 엔진과 함께 제공됩니다. 그만큼 flutter run 명령은 코딩하는 동안 테스트 장치에 핫 리로딩을 허용합니다. 하지만 다음을 눌러야 합니다. R 실제로 핫 리로드합니다. 이것은 문제가 아닙니다. Flutter의 VS 코드 확장 파일 변경 시 자동 핫 리로드를 허용합니다.
3. 패키징 및 배포
웹사이트 배포는 모바일 애플리케이션 배포에 비해 저렴하고 쉽습니다. 웹 사이트를 배포할 때 도메인 이름을 통해 액세스합니다. 이러한 도메인 이름은 일반적으로 매년 갱신됩니다. 그러나 선택 사항입니다.
오늘날 많은 플랫폼에서 무료 호스팅을 제공합니다.
예 : DigitalOcean 당신에게 무료 하위 도메인을 제공합니다 .ondigitalocean.com.
문서 웹 사이트를 구축하는 경우 이러한 도메인을 사용할 수 있습니다. 브랜딩이 걱정되지 않을 때도 사용할 수 있습니다.
Flutter의 모바일 애플리케이션 세계에서는 일반적으로 대부분의 경우 앱을 두 위치에 배포합니다.
이러한 각 플랫폼에 개발자 계정을 등록해야 합니다. 개발자 계정을 등록하려면 수수료 또는 구독 및 신원 확인이 필요합니다.
App Store의 경우 Apple Developer 프로그램에 등록해야 합니다. 당신은 유지해야합니다 연간 구독 $99. Google Play의 경우 일회성 $25 지불 계정을 위해.
이러한 상점은 게시되기 전에 검토된 모든 앱을 검토합니다.
또한 사용자는 앱 업데이트를 쉽게 소비하지 않는다는 점을 명심하십시오. 사용자는 설치된 애플리케이션을 명시적으로 업데이트해야 합니다. 이것은 모든 사람이 웹 사이트의 최신 배포 버전을 볼 수 있는 웹과 대조됩니다.
배포된 응용 프로그램을 관리하는 것은 배포된 웹 사이트를 관리하는 것보다 상대적으로 더 까다롭습니다. 그러나 이것이 당신을 놀라게해서는 안됩니다. 결국 두 스토어에 수백만 개의 앱이 배포되어 있으므로 귀하의 앱도 추가할 수 있습니다.
Flutter에 대한 추가 생각
Flutter는 데스크톱, 모바일 또는 웹 애플리케이션을 구축하기 위한 크로스 플랫폼 도구입니다. Flutter 앱은 픽셀 단위로 완벽합니다. Flutter는 대상 플랫폼에 관계없이 각 앱에 동일한 UI를 그립니다. 각 Flutter 앱에는 Flutter 엔진이 포함되어 있기 때문입니다. 이 엔진은 Flutter UI 코드를 렌더링합니다. Flutter는 각 장치에 대한 캔버스를 제공하며 원하는 대로 페인팅할 수 있습니다. 엔진은 이벤트 및 상호 작용을 처리하기 위해 대상 플랫폼과 통신합니다.
Flutter는 효율적입니다. 고성능 수준이 있습니다. Dart로 구축되어 Dart의 기능을 활용하기 때문입니다.
이러한 많은 이점으로 인해 Flutter는 많은 응용 프로그램에 좋은 선택입니다. 크로스 플랫폼 앱은 생산 및 유지 관리 중에 비용과 시간을 절약합니다. 그러나 어떤 경우에는 Flutter(및 크로스 플랫폼 솔루션)가 최적의 선택이 아닐 수 있습니다.
사용자가 애플리케이션에서 플랫폼 개발자 도구를 사용하도록 하려면 Flutter를 사용하지 마세요. 여기서 플랫폼 개발자 도구는 Android 개발자 옵션과 같은 기기별 도구를 의미합니다. 여기에는 브라우저 개발자 도구도 포함됩니다.
브라우저 확장이 웹사이트와 상호 작용할 것으로 예상된다면 웹용 Flutter를 사용하지 마십시오.
또한 콘텐츠가 많은 웹사이트에는 Flutter를 사용하지 마세요.
결론
이것은 프론트 엔드 웹 개발에서 Flutter 작업으로 이어지는 기술에 대한 검토였습니다. 또한 웹 개발자로서 배워야 할 앱 개발 개념에 대해서도 논의했습니다.
Flutter는 모두 UI 구현을 포함하기 때문에 웹 개발자에게 더 간단합니다. Flutter를 시작하면 좋은 개발자 경험을 제공한다는 것을 알게 될 것입니다. Flutter를 사용해 보세요! 이를 사용하여 모바일 앱을 구축하고 구축한 내용을 선보일 수 있습니다.
건배!
