플루터의 장점/속도/편리함 - 이렇게 편하게(빠르게) 앱, 웹, 데스크탑 개발을 코드 하나로 할수 있다

Flutter 소개

구글
에서 2017년 5월 출시된 모바일/웹/데스크톱 크로스 플랫폼 GUI SDK이다. 하나의 코드 베이스로 
안드로이드, 리눅스, Windows, macOS, iOS 및 웹 브라우저에서 모두 동작되는 앱을 위해 출시되었다. 사용되는 언어는 역시 구글에 의해 제창된 Dart를 사용한다.

실제 개발 소감

정말 편합니다. 저는 주로 안드로이드와 iOS개발을 하고 있는데 배울수록 정말 편하다고 생각이듭니다. 이전에 주로 개발은 닷넷으로 개발을 했었는데 플루터를 해보니 닷넷을 다시 쓰기가 힘드네요 ㅠㅠ 

플루터 및 다트는 배우기도 엄청 쉽고 직관성이 대단합니다. 아무것도 몰라도 대충 다른언어 해본 경험이 있다면 어떤언어보다 금방 배울수 있다고 말씀드리고 싶네요 그에 따른 한가지 예를 들어 볼게요

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Container(
      color: appColor.background,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TimeWatch(
            millisecond: 5000,
          ),
          Row(
            children: [
              ElevatedButton(
                onPressed: () {
                  ref.read(stopwatchProvider.notifier).start();
                },
                child: Text("start"),
              ),
              ElevatedButton(
                onPressed: () {
                  ref.read(stopwatchProvider.notifier).stop(millisecond: 0);
                },
                child: Text("stop"),
              ),
            ],
          )
        ],
      ),
    );
  }

자 조금 복잡해 보일 수 있는데 일부러 현재 개발중인(실제 개발이 아닌 테스트 페이지)중 build함수를 가져왔지만

플루터에서 하나도 모르지만 문서를 잘 본다면 몇가지가 보일겁니다. 

 

1. build함수에서 위젯을 리턴한다. (앱을 개발해보신분이라면 어떤 의미인지 금방 알수 있습니다.)

2. child와 children에는 위젯의 자식 위젯을 넣는다.

3. ElevatedButton을 누를때 onPressed함수를 호출한다.

4. 디자인코드와 로직(cs)코드가 함께 있다.

    - 이부분이 가장 좋았는데 이렇게 디자인과 컨트롤코드를 함께 사용하여 코드 관리가 용이하고 직관적으로 코드 작성이 가능합니다.\

 

참 직관적이지 않나요? 

전 플루터를 공부할때 가장 마음에 들었던건 직관적인 코드와 자동정렬기능이었습니다.

 

잠깐! 자동정렬!?

네, 플루터는 모든 IDE에서 ,<= Comma를 기준으로 자동으로 줄바꿈이 됩니다.

예를 들어 

Container(child:Text("Test",),),

이와같은 코드를 자동으로 정렬시키면 (정렬은 저장 버튼[alt+s]를 누르면 자동으로 됩니다.)

Container(
	child: Text(
    	"Test",
    ),
),

이렇게 변합니다. 

정말 최고라고 생각됩니다. 

여려명이 코드 작업하면 모든 개발자가 코드 스타일이 다른데 이런식으로 코드 스타일을 맞춰주기 때문에 아주 편합니다.

 

앱 최적화 & 성능

플루터는 한번 렌더링 이후에 상태가 변경가능한 StatefulWidget, 한번 렌더링 이후 상태가 변경되지 않는 StatelessWidget이렇게 크게 두가지가 존재해서 개발자는 페이지를 작성할 때 페이지에서 둘중 하나의 클래스를 상속하여 코딩을 하게 됩니다.

 

아래 이미지는 안드로이드와 iOS에서 벤치를 한 그래프인데 낮을 수록 성능이 좋다는 이야기 입니다.

 

물론 해당 자료를 100% 신뢰할수는 없겠지만 직접 개발을 해보면 엄청 쾌적하고 빠릿빠릿한걸 알 수 있습니다.

앱에서의 구동속도도 빠를뿐 핫리로드 기능을 지원하여 코드를 수정하고 저장하면 연결되어 있는 스마트폰에서 수정한 부분이 바로 적용되는 모습을 볼 수 있습니다. 

 

기존 앱개발자는 빌드하는데만 시간을 엄청 할애하는데 정말 좋은 기능이라 생가됩니다. (아이폰, 안드로이드 둘다 적용)

하지만 개발중에 핫 리로드만 사용할수 있는건 아닙니다 새로운 플러그인이나 메인함수 변경등등에선 앱을 다시 빌드를 해야 하는데 앱을 빌드하는 속도조차 엄청 빠릅니다. 

 

상태관리가 아주쉽다

상태관리란 개발을 해본사람이라면 언제나 골칫거리이다. A라는 변수가 있는데 프로그램에서 A변수가 0에서 1로 값이 변경될때 어떤 함수를 실행해야 하는 조건이 있다. 하지만 이 조건만 있는것이 아니라 다른 비동기 로직, 리소스관리 등등과 맞물리면서 상태관리를 해주기가 개발을 할수록 힘들어지게 된다. (설계를 아주 잘하면 깔끔하게 나오지만 그렇지 않은 경우가 더 많다.)

하지만 플루터는 상태관리가 아주 편하도록 프레임워크 단에서 지원을 해주고 있다. 

이게 말로만 쉽다고 하지만 얼만큼 어떻게 쉬운지는 이번문서에서 자세히 다루지는 않겠지만 좀더 설명을 붙이자면, 플루터는 상태가 변경이 되면 화면을 처음부터 다시 그리게 된다. 화면을 다시 그리면서 어떠한 상태인지에 따라서 UI, 로직들을 변경할수 있게 되는것이다. 변경된 상태에 따라서 모든 화면을 다시 그리게 될 때 상태에 따라서 고정되는 UI들은 const를 붙여 최적화를 해주게 된다. 그래서 플루터 개발시 const와 final키워드는 아주 중요하게 사용하게 된다. (IDE에서도 const와 final사용을 권장해 준다.)

 

플루터로 만들어야 하는 앱

1. Android와 iOS 두 플랫폼사이 UI가 많이 다르지 않고 같은 비지니스 로직을 공유해야 할 때

2. 스마트폰 앱을 데스크톰, 웹등에서 그대로 사용할 가능성이 있을때

3. 빠르게 앱을 만들어야 할 때

 

 

최종 정리 - 우리가 플로터를 사용하고 배워야 하는 이유

1. 배우기 쉽고 개발하기 쉽다.

2. 코드가 직관적이고 지원하는 기능이 많다.

3. 한번의 개발로 Android, iOS, Web, Desktop App, Mac App들을 개발할 수있다.(최고장점)

4. 속도가 비교적 빠르다. 

5. 업데이트, 커뮤니티가 활발하게 이루어지고 있어 자료가 많다.

6. 구글이 만들었다.

 

배우기 쉬우니 앱쪽에 흥미가 있는 개발자는 취미로라도 꼭 ! 한번씩 배워보시길 바랍니다.!!