[Flutter] 39. 모노리스 구조의 개념과 특징

[Flutter] 39. 모노리스 구조의 개념과 특징

 

1. 모노리스 구조란?

• 하나의 코드 파일에 UI, 비즈니스 로직, 프레젠테이션 로직을 모두 넣는 형식을 모노리식 구조(Monolithic Architecture) 즉 모노리스 구조(Monolith)라고 부른다.
• (1) UI와 데이터 로직이 한 곳에 존재한다.
• (2) 구조가 간단하다. 작은 규모의 앱이나 간단한 기능을 가진 앱에 적합한 구조!

 

 

 

 

2. 시나리오 코드

(1) 화면에 input form 띄우기

import 'package:flutter/material.dart';

void main() => runApp(TodoApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TodoScreen(),
    );
  }
}

class TodoScreen extends StatefulWidget {
  const TodoScreen({super.key});

  @override
  State<TodoScreen> createState() => _TodoScreenState();
}

class _TodoScreenState extends State<TodoScreen> {
  // Todo기능을 개발 하기 위해 필요한 데이터는 뭘까?
  // UI 로직 : 프로젠테이션 로직
  final TextEditingController _controller = TextEditingController();

  // 데이터 : 할 일을 (목록을) 저장하는 리스트(저장 공간)
  List<String> todos = [];

  // 비즈니스 로직 : 할 일을 추가하는 기능
  void addTodo() {
    if(_controller.text.isNotEmpty) {
      todos.add(_controller.text);
      print("todos 확인 : ${todos.toString()}");

      _controller.clear();  // 프로젠테이션 로직
    }
  }

  // 비즈니스 로직 : 할 일을 삭제하는 기능
  void removeTodo(int index) {
    // 삭제 처리
    todos.removeAt(index);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Todo List'),
      ),
      body: Column(
        children: [
          // 입력 필드 만들기
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(labelText: '작업을 입력 하시오'),
                  ),
                ),
                IconButton(
                  onPressed: addTodo,
                  icon: Icon(Icons.add),
                )
              ],
            ),
          ),
          // 아래에 할 일 목록 표시 구성
          Expanded(
            child: ListView.builder(
              itemCount: todos.length,
                itemBuilder: (context,index) {
              return ListTile(
                title: Text('사용자가 자료구조에 저장해둔 데이터를 뿌려야 함'),
                trailing: IconButton(
                    icon: Icon(Icons.delete),
                    onPressed: (){
                      removeTodo(index);
                    }
                ),
              );
            }),
          ),
        ],
      ),
    );
  }
}

 

 

(2) 입출력 처리 + setState()

 

 

import 'package:flutter/material.dart';

void main() => runApp(TodoApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TodoScreen(),
    );
  }
}

class TodoScreen extends StatefulWidget {
  const TodoScreen({super.key});

  @override
  State<TodoScreen> createState() => _TodoScreenState();
}

class _TodoScreenState extends State<TodoScreen> {
  // Todo기능을 개발 하기 위해 필요한 데이터는 뭘까?
  // UI 로직 : 프로젠테이션 로직
  final TextEditingController _controller = TextEditingController();

  // 데이터 : 할 일을 (목록을) 저장하는 리스트(저장 공간)
  List<String> todos = [];

  // 비즈니스 로직 : 할 일을 추가하는 기능
  void addTodo() {
    if(_controller.text.isNotEmpty) {
      // 프로젠테이션 로직
      setState(() {
        todos.add(_controller.text);
        print("todos 확인 : ${todos.toString()}");

        _controller.clear();  // 프로젠테이션 로직
      });
    }
  }

  // 비즈니스 로직 : 할 일을 삭제하는 기능
  void removeTodo(int index) {
    // 삭제 처리
    setState(() {
      todos.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Todo List'),
      ),
      body: Column(
        children: [
          // 입력 필드 만들기
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(labelText: '작업을 입력 하시오'),
                  ),
                ),
                IconButton(
                  onPressed: addTodo,
                  icon: Icon(Icons.add),
                )
              ],
            ),
          ),
          // 아래에 할 일 목록 표시 구성
          Expanded(
            child: ListView.builder(
              itemCount: todos.length,
                itemBuilder: (context,index) {
              return ListTile(
                title: Text('사용자가 자료구조에 저장해둔 데이터를 뿌려야 함'),
                trailing: IconButton(
                    icon: Icon(Icons.delete),
                    onPressed: (){
                      removeTodo(index);
                    }
                ),
              );
            }),
          ),
        ],
      ),
    );
  }
}