Flutter 맛보기 1

직방 기술지원팀 기술공유 세미나 중 플러터를 소개한 내용입니다

Flutter

Dart 기반. typescript와 문법적으로 유사.
크로스 플랫폼 프레임워크 (데스크탑 앱, 웹, 모바일 앱)

다른 크로스 플랫폼과 뭐가 다른가?

렌더링 방식이 가벼움

웹뷰, RN 같은 자바스크립트 기반 크로스 플랫폼들은 자바스크립트 브릿지를 사용.

플러터는 자체 렌더링 엔진 Skia(C, C++)를 통해 중간과정 없이 캔버스를 렌더링. 자바스크립트 브릿지 필요 없다

실제 웹의 경우 개발자 도구로 보면 canvas 태그 하나 있다고 함.

컴파일 방식 : JIT 와 AOT 모두 지원

환경에 따라 유연하게 컴파일 가능.

JIT(just-in-time) 컴파일과 AOT(ahead-of-time)컴파일을 모두 지원

개발모드는 JIT 컴파일
- 핫 리로드(hot reload)를 지원
프로덕션 모드는 AOT 컴파일
- 다트 코드를 그에 맞는 네이티브 코드로 바꿔줘서 플러터가 모두에게 빠르게 동작하며 플러터 전체 프레임워크의 대부분을 다트로 구현 가능. 자바스크립트 브릿지를 피할 수 있게 함.
그 밖에도 다트는 js로 컴파일되어 브라우저에서도 실행 가능하다고 함.

언어 개발팀과 프레임워크 개발팀이 협업

다 구글 꺼.

Dart(Language) 개발팀과 Flutter(framework) 개발팀이 긴밀히 협업

RN - ts 아무 협업이 없음 😭

Flutter에서 언어적으로 필요한 것이 있을 때 Dart가 도와줄 수 있음. 반대도 성립한다고 함.

→ 그만큼 언어, 플랫폼의 지원이 빠를 수 있다고 함.

자체 그래픽엔진

Skia 라는 그래픽 엔진으로 렌더링

OS 고유의 UI를 사용할 수 없다.

그래픽 엔진위에서 돌아가기 때문에 모든 픽셀을 수정할 수 있다고 함.

애니메이션, 커스텀 UI를 이용하여 브랜드만의 UI를 만들 수 있다고 함. - TikTalk

OS 고유의 스타일을 카피한 라이브러리가 있긴 함.(cupertino - ios style widget)

기본 설정은 materialize UI. 커스터마이징에 시간이 좀 든다고 함.

Icon, UI 컴포넌트, 이미지 등 모든 것이 위젯으로 제공됨.

위젯을 조합하여 화면을 만듦.

680개 이상의 위젯들이 있음.

UI 배치(레이아웃), 애니메이션, 스타일 또한 위젯으로 개발. 이미 만들어진 위젯들을 잘 찾아 쓰는것이 중요.

디자인 관련 라이브러리들(Material design, cupertino design(iOS))도 많음.

class AddCartButton extends StatelessWidget{
 //...클래스 멤버
 // Button을 다른 위젯으로 감싸서, 즉 위젯을 조합해 커스텀 위젯을 만든다.
 @override
 build() {
  return Center( // AddToCartButton을 중앙으로 정렬하는 위젯
   child: Button( // 텍스트를 전달하는 새 커스텀 컴포넌트를 만든다.
    child: Text('Add to Cart'),
   )
  );
 }
}

build() 매서드처럼 라이프 사이클 매서드들이 존재.

Stateful 위젯과 Stateless 위젯을 조합하여 화면을 제작.

위젯 트리

부모 위젯의 상태가 바뀌면 그 위젯과 하위 위젯들 모두 다시 그리는 방식. 복잡한 위젯은 상태 변화에 따라 퍼포먼스 이슈가 있을수도…?

그 밖의 장점에 대한 경험자의 글

2021.11에 작성한 지식iN 앱을 Flutter로 개발하는 이유 중에서….

빌드 : 빠르다.
렌더링 : 속도 괜찮고, 부드럽게 잘 실행된다
개발툴 : 디버깅, 리팩터링, 가독성 향상 등의 유용한 기능이 기본으로 탑재되어 있어서 편리하게 작업할 수 있었다.
테스트 : 유닛 테스트, 위젯 테스트, 융합 테스트(intergation test) 3단계로 나눠서 테스트할 수 있게 되어 있어서 괜찮았다.

자세한 내용은 위 링크에서…

체감

좋은 개발경험 : vscode extiontion이 잘되어 있음. vscode에 디버깅 패널, 프로파일 패널등을 제공. 앱도 vscode GUI로 실행 가능. 자동완성 기능 역시 좋음.
dart가 typescript와 유사하여 실제로 금방 익힐 수 있음. 오랜만에 함수형 프로그래밍(React hooks)만 하다가 클래스형 프로그래밍 하니까 뭔가 새로움.
다트, 플러터 모두 공식문서들이 너무 잘 되어 있음. 특히 다트는 구몬 푸는 수준으로 잘 되어 있음.
lint 규칙 설정이 너무 간단. esconfig, prettier 등의 작업들로 빡치는 일이 없음. 프로젝트 세팅이 간편.
xcode GUI로 개발하면 볼 수 있는 형태의 코드들이 많았다. 앱 개발자들은 쉽게 할듯…?
위젯안에 엄청나게 많은 속성, 매서드들이 있어서 익숙해지려면 많이 써봐야할 것 같음. onTap등의 인터렉션에 대한 속성들도 이미 다 제공함.

플러터 역시 lock 파일로 라이브러리 패키지들을 관리. 라이브러리의 호환되는 버전의 range를 설정할 수 있다는 것이 있지만 나머지는 npm의 호환 문제와 비슷해 보임. 잘 모름

앞으로

전역 상태 관리, 위젯간의 상태 공유 등은 모름. → 플러터 아키텍처 공부하면 알 수 있을 것 같음.

앱의 MVVM 구조를 제대로 맛볼 수 있지 않을까…

2023

Flutter 맛보기 1

3 분 소요

직방 기술지원팀 기술공유 세미나 중 플러터를 소개한 내용입니다

2022

D3.js 차트 개발 Hands on lab

5 분 소요

직방 기술지원팀 기술공유 세미나 중 D3.js를 소개한 내용입니다

직방이 사용자 행동 로그를 관리하는 방법. ZAMS

최대 1 분 소요

직방에서 작성했던 블로그 글을 공유합니다.

2019

[Tutorial] Storybook과 Bit을 활용한 UI 컴포넌트 관리(Workflow)

1 분 소요

회사에서 프론트엔드 개발원칙을 SFC(Single File Component)에서 UI 컴포넌트를 기준으로 CDD(Component Driven Development)를 진행하려고 한다. 그래서 체계적으로 관리하기위해 Storybook과 Bit을 도입해보고자 한다. 각각의 역할은 ...

[Scaffold] Scaffold Module 개발

최대 1 분 소요

도입 이유

[Workflow] 프론트엔드 개발조직을 위한 워크플로 설계

2 분 소요

작성 배경 회사의 작업구조를 페이지 중심 개발에서 UI 컴포넌트 중심 개발로 변경하면서 Workflow를 개선할만한 환경을 구성해야했다. 폐쇄망 기반에서 개발자간 UI 명세서 역할을 할 수 있는 Storybook과 그것을 공유할 Verdaccio라는 구축형 NPM Pri...

[Git] Git Command 정리

3 분 소요

Git 시스템 이해하기

[Design Pattern] Monorepo 공부

2 분 소요

결론

[Methodology] CDD(Component Driven Development) - 테스트(2/2)

1 분 소요

Intro

[Methodology] CDD(Component Driven Development) - 계획(1/2)

1 분 소요

CDD(Component Driven Development)란?

GraphQL, Prisma, Apollo 공부

2 분 소요

GraphQL? RESTful?

[CodingTest] Combination(조합) 문제풀이 2

최대 1 분 소요

문제

[CodingTest] Combination(조합) 문제풀이 1

1 분 소요

문제

[ESlint & Prettier] 개발 관습 설정 in Visual Studio

1 분 소요

회사 프로젝트를 작업하기 전 프론트엔드 개발자들 간의 코드 규칙을 Eslint와 Prettier 설정을 맞춰 관리해가는 방향을 정했다. 아직 협업을 할 경우는 없지만 미래에 인수인계 받거나 협업을 진행할 경우 코드관습이 달라 고생할 경우를 대비하기로 했다. 설정은 작업을 진행하며 ...