Flutter Multi packages in a signle project

Uno·2024년 1월 26일

flutter

목록 보기

14/15

Multi packages in a signle project 필요성

제가 UI 퍼블칠게요. 그 동안 API 연동쪽 구성 부탁드려요.

홈화면 구현 중이거든요? 중복되는 부분이 없는 곳이 아마 상세페이지입니다. 그 부분부터 진행해주세요.

GUI를 개발을 했다면 + 다른 개발자와 협업을 한다면,
이런 이야기를 해본 경험이 있을 것이다.

이렇게 이야기하는 이유는 간단하다; git conflict

지금처럼, 구조적으로 나눠지지 않고 정성적으로 "대충 어디는 중복이 되고 어디는 안되었다." 로 커뮤니케이션하면 꼭 실수하게 된다. 애초에 시스템으로 나누든 구조적으로 나누면 실수를 예방할 수 있다.

그래서 내가 추천하는 방법은 기능단위로 Project 하위에 Package를 나눠서 관리하는 것이다. 이렇게 관리했을 때, 다음과 같이 커뮤니케이션하기 좋다.

제가 "presentation" 패키지 수정하겠습니다. 그 외 기능 개발은 무방합니다.

해당 테스트코드는 패키지 단위로 수행하겠습니다.

기존의 커뮤니케이션이 편할지 아래가 편할지 고민된다면, 기존 하던대로 해도 무방하다. 개발자가 많아지고, 커뮤니케이션이 제약이 있는 상황이 되면 될수록 패키지 단위로 관리하는 것이 용이하다고 느껴진다.
~~나도 말로만 이해하다가, 정말 필요한 순간을 온 몸으로 겪은 이후에 이 말이 이해가 되었다. 그 만큼 직접 불편함을 느끼는 것이 중요한 것 같다.~~

실습

Package를 나누는 기준: 레이어 vs 기능

아래 텍스트는 일반적인 프로젝트의 디렉토리 구조이다. 이 구조는 tree 라는 애플리케이션을 사용해서 본 것이다. 혹시, 이번 기회에 설치해보고 싶다면, 아래 링크에 따라서 진행하면 금방 설치할 것이다.
( Homebrew 설치 링크)

.
├── android
├── assets
├── ios
├── lib
├── pubspec.lock
└── pubspec.yaml

이렇게 구성되면 lib 폴더에 모든 기능이 들어갈 것이다.
이곳에 MVVM 패턴이라면, Model, ViewModel. View
MVC라면, Model View Controller 로 폴더를 나누기도 한다.

혹은, 기능을 기준으로 나눌 수도 있다.
Onboarding, Home, Search, Profile, Auth ...

첫 번째 방식은 "레이어를 기준으로 한 분류"이다.
두 번째 방식은 "기능을 기준으로 한 분류"이다.

어느 방식으로 분류를 하든 상관없다. 이 분류를 lib 하위에 두지 말고 패키지로 나누자는 것이 이번 실습의 목표이다.

Project 안에 Package 추가하기

Project안에 Package를 추가하는 방법으로 터미널 명령어를 사용하여 구현하려고 한다.

Terminal의 위치를 현재 프로젝트가 설치된 디렉토리로 이동한 뒤, 폴더를 하나 생성한다.

mkdir packages

Flutter Package를 생성한다.

flutter create --template=package presentation

UI에 관련된 코드를 넣을 예정이므로 presentation 이라고 지었다.
- 참고: 클린 아키텍쳐(Data-Domain-Presentation)

여기까지 작성한 상태에서 다시. tree 구조를 보면 아래와 같다.

.
├── android
├── ios
├── lib
│   └── main.dart
├── packages
│   └── presentation <----------
├── pubspec.lock
├── pubspec.yaml
└── windows

Package에 코드 작성
presentation 패키지에 가서 코드를 작성해보자. 여기도 동일하게 lib 폴더가 있다. 이곳에 바로 작성해도 무방하지만 src 라는 폴더를 만들고 그 하위에 다음 dart 파일과 코드를 작성하자.

아래 이미지는 폴더 구조이다.

소스코드는 원하는 것을 적어도 된다. 나는 다크모드 여부를 결정하는 코드를 사용하려고 한다.

enum DarkModePreference { 
	alwaysDark,
	alwaysLight,
	useSystemSettings 
}

그리고 기존 presentation.dart 코드에는 아래와 같이 코드를 작성한다.

export 'src/dark_mode_preference.dart';

프로젝트에서 패키지 추가하기

기존 프로젝트(방금 생성했던 presentation 말고) pubspec.yaml 에 아래 내용을 추가하자.

name: multipackage_single_project
description: "A new Flutter project."
publish_to: 'none'
version: 0.1.0

environment:
  sdk: '>=3.2.5 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
# 여기!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  presentation: 
    path: packages/presentation
# 여기!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true

이후 flutter pub get 을하면 끝이다.

확인
이제 main.dart 에서 정상적으로 import 되는지 확인해보자.

아래 코드를 작성해서 실행해보자.

import 'package:flutter/material.dart';
import 'package:presentation/presentation.dart';

main() {
	final _darkmode = DarkModePreference.alwaysDark;
	print(_darkmode);
}