일기를 작성하면 일기의 단어와 문장을 매칭하여 AI의 쪽지(한마디)를 받을 수 있는 일기 앱입니다.
riverpod 상태관리 패키지를 사용하며 클린 아키텍쳐 패턴중 하나인 mvvm 디자인 패턴을 채택하여 프로젝트를 구성 할 계획입니다.
- Flutter version 3.22.2
- Dart version 3.4.3
- DevTools version 2.34.3
- Android SDK version 34.0.0
flutter doctor -v 로 현재 사용중인 프로젝트의 개발환경 확인이 가능합니다.
https://github.com/beside04/frontend
해당 프로젝트 clone 후,
flutter pub get로 플러그인들을 사용할 수 있게 프로젝트로 가져와서 사용 하시면 됩니다.
flutter build apk를 통해 apk를 추출 할 수 있습니다.- 추출 후
build/app/outputs/apk/release에서 추출된 apk 확인이 가능합니다.
flutter build appbundle를 통해 appbundle를 추출 할 수 있습니다.- 추출 후
build/app/outputs/bundle/release에서 추출된 appbundle 확인이 가능합니다.
- 기능/이니션-개발내용을 develop branch 기준으로 분기합니다.
- ex ) feature/jgw-login-screen
- 한번 커밋은 하나의 기능 개발을 목표로 합니다.
- 상대방에게 코드리뷰를 부탁하고 develop branch 로 merge 합니다.
- 개인 branch 에서 develop branch 로는 squash merge
- develop branch 에서 master branch 는 create merge 를 합니다.
Flutter에서는 코딩에 대한 구체적인 표준이나 규범을 정의하지 않고 있습니다. 하지만 Flutter는 Dart 언어를 사용하기에 되도록이면Dart의 Coding Standard를 준수하여 작성하려고 합니다.
플러터 린트가 적용되어 있어 주로 자주 사용 하거나 주의해야할 부분만 추려 간단하게 정리했습니다. 자세한 내용은 https://dart.dev/guides/language/effective-dart/style 해당 페이지에서 확인 가능합니다.
- 식별자 (Identifiers)
Dart에서는 UppderCamelCase, lowerCamelCase, lowercase_with_underscores 네이밍 규칙을 사용합니다.
| UppderCamelCase (PascalCase) | 모든 단어에서 첫 단어를 대문자로 시작하는 표기법입니다. 주로 클래스 이름에 사용합니다. |
|---|---|
| lowerCamelCase (camelCase) | 소문자로 시작하며, 각 단어의 시작 문자를 대문자로 합니다. 주로 함수나 변수에 사용합니다. |
| lowercase_with_underscores (snake case) | 소문자만 사용하며 단어의 구분은 언더스코어(_)를 사용합니다. 대문자나 다른 구분자는 사용하지 않습니다. 주로 폴더명과 파일명에 사용합니다. |
Class, Enum, Typedef, Type 매개변수는 UpperCamelCase를 사용합니다.
class SliderMenu {
...
}
class HttpRequest {
...
}
typedef Predicate<T> = bool Function(T value);
...
class Foo {
const Foo([arg]);
}library peg_parser.source_scanner;
import 'package:flutter/material.dart';
import 'file_system.dart';
import 'slider_menu.dart';- enum 값을 포함하여 상수에는 lowerCamelCase를 사용해주세요.
//Good
const pi = 3.14;
const defaultTimeout = 1000;
final urlScheme = RegExp('^([a-z]+):');
class Dice {
static final numberGenerator = Random();
}
//Bad
const PI = 3.14;
const DefaultTimeout = 1000;
final URL_SCHEME = RegExp('^([a-z]+):');
class Dice {
static final NUMBER_GENERATOR = Random();
}- 닫는 괄호마다 콤마를 추가하여 들여쓰기를 해준다면 가독성이 올라갑니다.
- 주석을 넣더라도 위젯의 주석이나 바로 알 수 있는 함수의 주석은 넣을 필요는 없습니다. 오히려 코드의 가독성만 떨어지게 하는 원인이 될 수 있습니다.
- 주석은 최대한 줄이고 코드가 길어지거나 복잡도가 오를때, 코드의 의존성이 강해졌을때 사용하는 편이 좋을것 같습니다.
- 주석을 추가하면 해당 코드가 변경되는 순간 주석도 같이 관리해야하는 불편함과 코드보다 주석을 우선시 하게 보려는 심리 때문에 되도록 주석 없이도 알 수 있는 코드를 작성하는게 좋을것 같습니다.
- 코드가 길어질때(파라미터의 갯수가 많을때)들여쓰기를 넣으면 한 줄로 있을때보다 가독성이 좋습니다.
- 상대 경로와 절대 경로의 각자 취향이 있고 장단점이 존재하지만, 절대경로를 사용하면 직관적으로 어디서 사용하는지 알기가 쉽고, 수정이 용이하여 저는 대부분 절대 경로를 사용하는 편입니다.
📌 그외 여러가지 있지만, 제일 중요한 두가지만 지키면 좋을 것 같습니다!
- 일관성을 최대한 유지
- 가독성을 높이며 최대한 간단하게
- 폴더명과 파일명은 snake_case를 쓸 것
- 클래스명은 PascalCase를 쓸 것
- 변수명, 함수명은 camelCase를 쓸 것
- 클래스를 하나의 파일로 정리한다면 파일명과 클래스명은 동일하게 작성할 것ex) 파일명: login_screen.dart , 클래스명: LoginScreen
- 폴더명과 내부 파일의 역할이 정확한 분류라면 파일의 이름에 폴더명을 추가할 것(굳이 적지 않아도 명확히 특정 폴더 소속임이 명확하다면 파일 이름에 폴더명을 생략해도 좋다.)ex) 폴더명: screens, 파일명: login_screen.dart
- 폴더명은 복수형으로, 파일명은 단수형으로 작성할 것ex) 폴더명: screens, 파일명: login_screen.dart
해당 디렉토리 구조는 클린 아키텍쳐 패턴중 하나인 MVVM 패턴의 사용되는 여러 구조의 자료를 찾아 적용했습니다.
- api : API서버와 통신에 필요한 모든 함수들이 구현되어 있다.
- config : 앱의 전반적 구성요소들입니다.
- theme : theme 요소 및 theme 관리 데이터
- route : 라우팅 소스
- assets : images, logo 등의 앱에서 사용할 design asset
- data : data layer 관련 요소들
- data_source : api 호출 클래스
- local: 로컬에 저장된 정보를 가져오는 모든 함수들이 구현되어 있다.
- models : api 결과 데이터 관련 클래스(DTO)
- repositories : api 클래스를 주입받아 사용하는 레포지토리 구현체
- data_source : api 호출 클래스
- di : 의존성 주입 초기화
- domain : domain layer 관련 요소들
- model : data폴더의 model과 달리 데이터 파싱, 변환에 영향을 받지않는 근본적인 데이터 구조를 나타내는 클래스
- repositories : api호출 인터페이스.
- use_case : repository를 주입받아서 하나의 액션 수행하는 클래스 (비지니스 로직)
- ui : presentation layer 관련 요소들
- components : 공통된 위젯 컴포넌트
- screen : View 페이지
- providers : 상태관리 요소들
- model : provider의 모델 클래스
- providers : View 상태의 상태관리를 유지/관리하는 곳