FRONT

플러터 개쩐다

뚜따따 2025. 1. 19. 19:36
더보기

- 목차

1. 왜 플러터를 배우려고 했어?

2. 리엑트 네이티브 vs 플러터

3. Dart는 어때

4. Flutter

5. 플러터로 지금까지 한 것들 (노마드코더 니콜라스)

 

 

1. 왜 플러터를 배우려고 했어?

첫번째 이유는 창업 준비중인 프로젝트가 플러터여서였다. 

10월부터 준비하고 있는 프로젝트가 플러터를 이용한 프로젝트였는데, 우리 서비스의 코드에 대한 개발자로서의 호기심이 생겼다.

 

두번째 이유는 글또에서 얻은 인사이트 덕분이다.

최근 글또 [앱만들어또 모임]에서 앱을 만든 분(과 만드려는 분)들과 얘기를 나누었는데, 그 때 많은 인사이트를 얻었다. 각자 개발자로서의 자아와 프로덕트 레벨에서 생길 수 있는 고충, 마케팅이나 사업 전반에 대한 이야기를 들을 수 있었는데, 거기서 은찬님의 1인 개발자로 진로를 정한 부분에 많은 감명을 받았다.

은찬님이 추천해준 영상에서 내가 할 수 있는 것과 내가 할 수 없는 것에 대해 인식할 수 있는 기회가 되었다.

https://www.youtube.com/watch?v=xWSwohmOrzQ&feature=youtu.be

개발자가 돈을 버는 방법에 대한 정리

영상에서 정리해준 개발을 통한 경제적 자유 실현 방법은 다음과 같다.

 

영상에서 말한취업은 '대기업 / 중견기업' 을 제외한 입장이다. 그럼에도 취업과 컨텐츠 크리에이션에 대해서는 내 생각과 조금 다르긴 하다.

 

이 표와 영상을 통해 나에게 인디해커(1인 개발)에 대한 열망이 있다는 것을 알게 되었다.

2. 리엑트 네이티브 vs 플러터

그럼 어째서 같은 크로스플랫폼인 리액트 네이티브를 선택하지 않았는가?
리액트 경험이 있으니 리액트 네이티브를 시작하는 것에 더 유리했을텐데!

 

사실 이유는 리액트가 지긋지긋해서일 수도..

 

그 이유는 플러터가 예쁘기 때문이다. 리엑트 네이티브와 달리 Flutter는 자체적인 렌더링 엔진을 활용해 모든 UI를 완벽히 제어하기 떄문에 다른 프레임워크와 비교해 더욱 세련되고 아름다운 앱을 만들 수 있다.  마치 Unity처럼!

물론 리엑트 네이티브가 네이티브적인 느낌(서비스가 아이폰 앱처럼 보이거나 안드로이드 앱처럼 보이는 것 같은 느낌) 은 더 띄어나다는 장점이 있지만, 그건 아이폰의 기능이나 안드로이드의 기능을 리엑트 네이티브가 사용하기 때문이라, 장점이라고 보기엔 어렵다고 나느 생각한다.

냅킨이 쪄줬다

React Native

  1. 운영체제 별 순정 UI를 사용한 앱을 만들기 쉽다.
  2. 프로젝트 버전을 업데이트하기 매우 어렵다.
  3. 범용적인 개발언어를 사용한다.

Flutter

  1. 자체 디자인 언어를 가진 커스텀 UI를 사용한 앱을 만들기 쉽다.
  2. 프로젝트 버전을 업데이트하기 쉽다. => 큰 사이드이펙트가 없는 것으로 알고 있음.
  3. 전용 개발 언어를 사용한다.

3. Dart는 어때?

다트는 개쩐다.

일단 배열 안에 if 문과 for 문이 들어간다.

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
var a = ['오', '이게되나?', for (int number in numbers) if (number % 2 == 0) number];

print(a); // ['오', '이게되나?', 2, 4, 6, 8, 10]

 

위처럼 배열 안에서 for 문과 if 문이 들어갈 수 있는데, 와 개쩐다! 라고 생각했다.

하지만 개쩔긴 하는데 그렇게 가독성이 좋아 보이진 않는다. 그럼 이걸 언제 어떻게 쓸까? 꼭 필요한 기능일까 생각하며 강의를 계속 듣다 알게 되었다.

 

(플러터 코드)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('ListView 예제')),
        body: DynamicListView(),
      ),
    );
  }
}

class DynamicListView extends StatelessWidget {
  final List<int> numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        for (var number in numbers)
          ListTile(
            title: Text('아이템 $number'),
            subtitle: Text('이 숫자는 ${number % 2 == 0 ? '짝수' : '홀수'}입니다.'),
          )
      ],
    );
  }
}

이건 플러터로 짝수와 홀수를 찍는 코드인다.

 

주목할 부분은 children: [ ] 부분이다. 배열 안에 for 문으로 List 에 있는 아이템을 뽑을 수 있다. 이걸 리액트에서 하려면 다음처럼 해야 한다.

 

(리액트 코드)

import React from "react";

const App = () => {
  const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  return (
    <div>
      <h1>리스트 예제</h1>
      <ul>
        {numbers.map((number) => (
          <li key={number} style={{ display: "flex", alignItems: "center" }}>
            <div>
              <strong>아이템 {number}</strong>
              <div>이 숫자는 {number % 2 === 0 ? "짝수" : "홀수"}입니다.</div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

이렇게 리액트는 중괄호와 소괄호를 사용해서 화면을 그려야 하는 반면 Dart 는 배열 안에 뚝딱 집어넣으면 되니 훨씬 편했다.

4. Flutter는?

Flutter의 철학은 효율적이고 일관되며 아름다운 사용자 경험(UI/UX)을 다양한 플랫폼에서 구현할 수 있는 개발 환경을 제공하는 데 중점을 둔다고 한다.

진짜 그래서인지 개발 경험이 쩐-다. 함수 모듈화 노가다를 알아서 해주는 것 보고 감동했다. Flutter 의 개발 경험을 좋게 하는 몇 가지를 알아보려고 쳇지피티한테 물어봤다. 다음과 같은 기능 떄문이란다.

1. Hot Reload: 실시간 코드 반영

Flutter는 Hot Reload 기능을 통해 개발자가 코드를 수정하면 앱이 즉시 변경 사항을 반영합니다.

  • 장점:
    • 화면을 새로 고치거나 다시 실행할 필요 없이, UI와 기능을 실시간으로 확인 가능.
    • 개발 속도가 대폭 향상되며, 디버깅과 UI 수정이 즐거운 경험이 됩니다.
  • 예: 버튼 색상이나 레이아웃 위치를 바꾸고 저장하면, 화면이 바로 업데이트됩니다.

2. 강력한 위젯 시스템

Flutter는 모든 것이 위젯으로 구성되어 있으며, 직관적이고 재사용 가능한 UI 설계를 지원합니다.

  • 장점:
    • 기존 위젯을 조합해 새로운 위젯을 생성하거나, 원하는 대로 커스터마이징할 수 있습니다.
    • Material Design과 Cupertino 디자인을 기본 지원하여, 플랫폼에 맞는 아름다운 UI를 쉽게 구현할 수 있습니다.
  • 예:
    dart
    CopyEdit
    ElevatedButton( onPressed: () {}, child: Text('클릭하세요'), );
    단순한 버튼부터 복잡한 UI까지 일관된 방식으로 개발할 수 있습니다.

3. 일관된 UI와 성능

Flutter는 자체 렌더링 엔진을 사용하여 iOS와 Android에서 동일한 UI를 제공합니다.

  • 장점:
    • 네이티브처럼 보이는 일관된 UI를 제공하면서도, 성능 저하 없이 동작합니다.
    • 애니메이션이나 화면 전환이 매우 부드럽고 자연스럽게 동작합니다.

 

라고 한다. 말 그대로인 것 같다.

추가로 내가 감동했던 건 아이콘 기능인데 구글의 Material 디자인 시스템을 기반으로 한 다양한 아이콘을  1,000개 이상 그냥 사용 가능하다! Icon.favorite_outlined 하면 좋아요 표시가 그냥 나온다!
디자인 에셋에서 찾을 필요 없어! 너무 좋아!

 

5. 플러터로 지금까지 한 것들

My Wallet

플러터에서 어떻게 디자인 요소를 다루는지 배움

Pomodoros

사용자 인터렉션을 어떻게 활용하는지 배움

Webtoon 클론

API 활용과 페이지네이션, 비동기 처리, 라우팅 애니메이션, 기기별 로컬 데이터 저장, 을 배움

역대급 영지 설계사 유치한데 재밌습니다 나이가 드니까 사람이 유치한 거를 더 선호하게 되는 것 같아요. 머리 안 쓰고 얻는 도파민이 세상에는 참 많은 것 같아요. 주절주절

 

 

이상, 노마드 코더 강의를 통해 플러터를 찜쪄 먹어봤다. 재밌었다. 사실 약간 스크래치 코딩 하는 느낌이 들었다. 이거 하면서, 좀 그런 생각이 들었는데,, 이렇게 개발이 쉬워지면 아무나 개발자가 되는 세상이 와 버리지 않을까?
내 밥그릇 지키려면 진짜 뭐라도 더 열심히 해야겠다.

 

 

도움 받은 것들

 
노마드코더 다트 강의
저작자표시 (새창열림)

'FRONT' 카테고리의 다른 글

깊은 복사와 얕은 복사  (0) 2025.01.31
내가 셋을 세면 시작하는 거야...!! 원!!!!! 투!!! 쓰리.js  (2) 2024.11.01

'FRONT'의 다른글

  • 현재글플러터 개쩐다

관련글

티스토리툴바