🤔Cross Platform?

크로스플랫폼이란, 서로 다른 디바이스 또는 전혀 다른 OS에도

대응되어 어색함 없이 동일하게 작동될 수 있도록 프로그램( 어플리케이션 )을

개발하는 것을 의미한다.

앱개발로 유명한 두가지 프레임워크를 뽑자면 React Native와 Flutter를 꼽을 수 있다.

React-Native 일명 RN은 JS로 이뤄져있는 코드를 큰 번들러로 묶어

액션이 일어나면 브릿지로 JS코드를 전달하고 브릿지는 이를 해석하여

OS가 인식할 수 있는 코드로 재번역하여 전달하고 작동(렌더링)하게 된다.

즉, RN은 브릿지가 JS로 이루어진 코드를 Native하게 작동할 수 있도록 하는

아주 중요한 역할을 하는 셈이다.

그렇다면 Flutter는 어떻게 크로스플랫폼을 지원하고 있을까?

🛠️Flutter

플러터는 Google에서 개발된 Dart 언어 기반의 프레임워크이다.

Dart라는 새로운 언어를 배워야 활용이 가능한 부분에서 러닝커브가 있는 편이지만

React, Java, Python 등을 경험해본 입장에서는 크게 어렵지 않았다.

객체지향 방식의 패턴이 오히려 접근성이 좋아 러닝커브가 높다는 생각은 들지 않았던 것 같다.

플러터는 RN과 같이 직접적으로 OS와 소통 후 작동(렌더링)하는 방식이 아닌,

별도의 C++로 구성된 엔진위에서 어플리케이션을 그려낸 후 독립적인 형태로

동작하기 때문에 OS간 불일치율이 없다시피 개발이 가능한 것이 강점이다.

Create Project

flutter create your_project

Example Code

import 'package:flutter/material.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
        body: Column(
          children: [
            // 박스를 추가하여 간격을 만듦
            const SizedBox(
              height: 80,
            ),

            // 헤더 Row
            Row(
              // Row의 Align을 end로 설정 ( justify-content: end 와 유사 )
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Column(
                  // 해당 컬럼 item 내부 정렬을 end로 설정 ( justify-content: end 와 유사 )
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    const Text(
                      "안녕하세요, 홍길동님",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 38,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                    Text(
                      "복귀를 환영합니다.",
                      style: TextStyle(
                          color: Colors.white.withOpacity(0.8), fontSize: 22),
                    ),
                  ],
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

* 위 예제코드는 " /your_project/lib " 경로에 있는 main.dart 파일에서 활용된 소스코드입니다. 

✍️마치며...

새로운 언어, 새로운 프레임워크를 공부하고 개발할 때마다 역시 기술을 공부하며 개발하는 것은 개발자의 평생 숙제라는 것을 다시 한번 깨닫게 되는 계기였다. 여러 언어, 프레임워크를 경험하며 느껴지는 것들은 한가지만 고수하는 것도 분명 역량을 끌어올리기 좋을 수 있지만 다방면의 경험을 쌓는 것 또한 프로그래밍, 개발에 있어 전체적인 흐름을 이해하고 더 넓은 시야로 볼 수 있는 역량이 좋아지고 있는 것 같다. 다시금 느껴지는 것은 개발자라는 직업을 갖게되어 정말 다행이고 행복하다. 앞으로도 이 마음가짐을 잃어버리지 않도록 더욱이 노력해야겠다 ㅎㅎ

🎯Dart

Dart란 구글에서 만든 프로그래밍 언어로

객체지향 언어로 Flutter 개발에 특화된 언어이다.

Flutter는 멀티 플랫폼 대응이 뛰어난

프레임워크로 손꼽힌다.

JIT(Just-In-Time), AOT(Ahead-Of-Time)

컴파일 방식을 모두 사용하며

null safety를 지원한다.

개발중에는 JIT 컴파일방식으로 Hot-Reload가

가능하게 되어 빠른 속도로 변경사항을 확인 가능하고

배포할 때는 AOT 컴파일방식으로

실행이전에 컴파일을 완료하고 기계어를 전달하여

빠른 실행속도를 제공한다.

🤔Dart에 대한 견해

한국 서버구성 언어 점유율 1위 객체지향 프로그래밍인

JAVA와 유사하다는 느낌을 강하게 받았다.

최근에 공부하고 있던 JAVA언어와 생각보다

너무 유사해서 오히려 러닝커브가 덜 느껴진 것 같다.

같이 근무하고 있는 멋쟁이 JAVA 개발자가

Flutter를 공부할까 고민한 바 있었는데

적극 추천해도 무리가 없을 것 같다.

또한, 구글에서 만든 언어이기도 하고

Android, IOS 크로스플랫폼 일치율이 가장

높다고 언급되는 Flutter 개발도 기대가 된다.

• 예제코드

void main() {

  /** ------------------------------  타입과 선언  -------------------------------- */

  // 변수 선언 시 var로 선언하는 것은 관습적으로 함수, 메서드 등 내부의 지역변수로서 선언할 때 많이 사용됨
  var name = "zeriong";
  name = "제리옹";

  // class내부에서 변수나 property의 경우 아래 처럼 타입 명시 선언을 활용한다고 함.
  String realName = "????";

  // dynamic type 은 어떤한 타입이라도 넣을 수 있다.
  // typescript 에서 활용되는 any와 같은 타입으로 볼 수 있다.

  // dynamic을 타입 명시로 활용하는 예
  dynamic anyType = "sdf";
  anyType = 123;
  anyType = false;
  anyType = {};

  // 아무것도 할당하지 않고 선언만 한 경우 자동으로 dynamic으로 선언된다.
  var dynamicVar;
  dynamicVar = 123;
  dynamicVar = true;
  dynamicVar = [];
  dynamicVar = "하이";

  // 하지만 다이나믹 타입으로 지정되어 있으면 해당 변수에 대해 추론이 안되어
  // 아래처럼 조건문을 추가해준다면 해당 변수에서 접근가능한 dart에서 자체 제공하는 매서드, api들을 활용할 수 있다.
  if (dynamicVar is String) {
    print("dynamicVar length is " + dynamicVar.length.toString());
  }

  /** 이상적으로 dart에서 dynamic 사용을 지양하는 것이 좋다. */

  print("hello, my name is " + name);

  // Null albe 선언 (typescript의 ?를 사용하는 옵셔널 체이닝과 같음)
  String? alias; // string 또는 null이 가능한 형태
  alias = "potato";
  alias = null;
  // 위에서 활용한 dynamic 타입과 마찬가지로 if문을 통해서 타입을 가정할 수 있어야 제공 메서드, api 활용 가능하다.
  if (alias != null) {
    alias.isNotEmpty;
  }
  // 또는 아래 처럼 활용 가능
  // typescript에서 활용할 때 처럼 있다면 이어서 실행될 것이고, 아닌 경우 그대로 멈추게 된다.
  alias?.isNotEmpty;
  alias?.length;

  // final을 활용한 상수 지정 (java의 final과 같다.)
  final constants = "this is a const";
  // constants = "nope"; // 컴파일 에러 발생

  // late는 초기화를 늦춰주는 역할을 한다. (값 초기화 이전에 발생하는 컴파일 에러를 방지해줌)
  // 아래 예시는 통신을 통해 상수로 활용할 값을 기다렸다가 통신 성공 시 지정해줄 때 이와 같이 활용할 수 있다.
  late final awaitResponseConst;
  awaitResponseConst = "i'm not modify";
  /** 이외의 다양한 케이스에 의한 late를 사용할 수도 있는데 이는 lateEx.dart 파일에 예시를 작성했다. */

  // const는 반드시 하드코디 되어야 한다. 즉, JS에서 처럼 사용자가 입력한 값을 const에 담아서 처리한다거나
  // api를 통해 받은 값을 const에 저장한다던가 하는 방식은 허용되지 않는다.
  const maxLength = 100;
  // 위처럼 반드시 내부적으로만 상수값으로 활용 될 때 사용하고
  // 통신을 통해 받거나, 유저 입력으로 받는 상수값인 경우는 final 또는 var를 활용해야 한다.

  /** ------------------------------  ㅡㅡㅡㅡㅡㅡ  -------------------------------- */

}

위 예제코드는 필자가 운영중인 Github에서 dart학습용

repository인 dart-intro에서 variable.dart 파일을

그대로 복붙했습니다.

Github: https://github.com/zeriong/dart-intro/blob/main/variables.dart

⭐유의사항

Dart언어에서 코드가 하나의 역할을 마치고 나서

세미콜론은 필수이다.

javascript에서 처럼 세미콜론을 생략한다고 auto formatter가

자동으로 추가 해주지 않고 dart에서 세미콜론 유무로

다른 기능으로 프로그래밍이 가능하기 때문에

필요에 의해 작성하거나 작성하지 않을 수 있기 때문이다.

✍️마치며...

이제야 Flutter개발자들이 말 끝마다 땀표(;)를 붙이는 이유를 알게 되었다... dart는 auto formatter가 세미콜론을 붙여주지 않기 때문에 반드시 세미콜론을 붙여야 한다. 이제부터라도 습관들여야겠다; 하하;