플러터로 앱 만들기 플러터로 앱 만들기

go_router란?go_router는 Flutter 앱에서 화면을 이동(라우팅)하는 걸 쉽게 만들어주는 패키지입니다.Flutter 공식 팀이 직접 만들었고, 현재 가장 많이 쓰이는 방식 중 하나입니다.왜 필요한가요?Flutter는 원래 Navigator라는 클래스를 사용해서 화면을 이동합니다:Navigator.push( context, MaterialPageRoute(builder: (context) => DetailScreen()),);하지만 앱이 점점 커지고, URL도 관리해야 하고, **조건부 라우팅(로그인 여부 등)**도 해야 하면…코드가 복잡해지고, 유지보수가 어려워집니다.go_router의 장점go_router는 이런 문제를 깔끔하게 해결해 줍니다!경로(/home, /login) 기반으로..

의존성 주입이란?쉽게 말해, 필요한 것을 직접 만들지 말고 “가져다 쓰자”는 개념입니다.비유로 이해해 보기햄버거 가게 주방장이 직접 고기, 빵, 야채를 생산한다고 상상해 보세요.→ 요리도 바쁜데, 이것저것 다 하려니 너무 복잡하고 실수도 많겠죠?대신, 필요한 재료를 미리 받아서 요리만 한다면?→ 훨씬 간단하고 효율적이겠죠!이처럼, 필요한 재료(의존성)를 외부에서 주입받는 방식이 바로 “의존성 주입”입니다.Flutter에서 예제로 보기나쁜 예: 직접 생성해서 쓰는 경우class UserViewModel { final UserService _service = UserService(); // 직접 생성 void loadUser() { _service.getUser(); }}UserService를 내..

API 모델이란?API 모델은 앱이 외부 시스템(API, 서버, 외부 SDK 등)과 데이터를 주고받을 때 사용하는 구조입니다.보통은 서버와 통신할 때 JSON 데이터를 주고받는 경우가 많기 때문에, 대부분 JSON을 다루지만, 꼭 JSON이어야 하는 것은 아닙니다.예: 서버에서 사용자 정보를 받아올 때{ "user_name": "홍길동", "user_age": 25}class ApiUser { final String userName; final int userAge; ApiUser({required this.userName, required this.userAge}); factory ApiUser.fromJson(Map json) { return ApiUser( userName:..

불변(immutable) 데이터란?불변 데이터는 한 번 만들면 값을 바꿀 수 없는 데이터를 말합니다.데이터를 바꾸고 싶으면 기존 데이터를 수정하는 대신, 새로운 데이터를 만들어야 합니다.왜 불변 데이터를 사용할까요?앱을 만들다 보면 데이터를 자주 바꿔야 할 일이 생깁니다. 예를 들어:버튼을 눌러 숫자를 증가시킨다사용자의 이름을 수정한다체크박스를 체크하거나 해제한다이럴 때 기존 데이터를 직접 수정하면:어느 코드에서 바꿨는지 추적하기 어렵고실수로 데이터를 잘못 바꿔서 버그가 생기기 쉽습니다그래서 불변 데이터를 사용하면 아래와 같은 장점이 생깁니다.불변 데이터의 장점장점 설명장점설명예측 가능한 코드데이터가 바뀌지 않으니, 상태 추적이 쉬움UI가 자동으로 갱신됨값이 바뀌면 새 객체가 생성되니까, 상태 변화가 명..

Command 패턴이란?플러터에서 Command 패턴은 UI(버튼 등)에서 발생한 사용자 동작을 ViewModel이 미리 준비해 둔 명령(Command)으로 연결시켜서 처리하는 방법입니다. 즉, UI에서 직접 로직을 처리하지 않고, “어떤 명령을 실행할지 ViewModel에게 시키는 구조”입니다.왜 Command가 필요할까요?간단한 앱에서는 버튼 클릭 시 ViewModel의 메서드를 직접 호출해도 괜찮습니다.하지만 앱이 점점 커지면, 이런 구조에는 몇 가지 문제점이 생깁니다:문제설명UI에서 직접 로직 실행코드가 뒤섞여 유지보수가 어렵습니다.실행 중 상태를 알 수 없음로딩 중인지, 성공했는지, 실패했는지를 UI가 알기 어렵습니다.버튼 중복 클릭 방지 어려움네트워크 요청 중 다시 누르면 문제가 생길 수 있습..

단방향 데이터 흐름이란?단방향 데이터 흐름은 데이터가 한 방향으로만 흐르게 만드는 구조입니다.즉, 데이터는 항상 "데이터 레이어"에서 "UI 레이어"로만 흐르고,UI에서 데이터 레이어로는 흐르지 않는 방식이에요.왜 단방향 데이터 흐름이 중요할까요?단방향 데이터 흐름을 사용하면 앱의 상태 관리가 간단하고 예측 가능해집니다.어떤 일이 발생했을 때, 데이터가 어떻게 변화할지 명확하게 알 수 있기 때문에 유지보수나 디버깅이 훨씬 쉬워집니다.장점데이터가 한 곳에서만 관리되므로, 어디에서 변경되었는지 추적하기 쉽습니다.예측 가능성이 높아지고, 버그가 적어집니다.앱의 구조가 명확해지고, 복잡도를 줄여줍니다.예시로 이해해 볼게요잘못된 예: 데이터가 양방향으로 흐르는 경우// UI에서 데이터가 직접 변경됨class Co..

도메인 레이어란 무엇인가요?도메인 레이어는 애플리케이션의 핵심 비즈니스 로직을 담당하는 계층입니다.간단히 말하면, 앱이 실제로 무엇을 해야 하는지 처리하는 공간이라고 생각하시면 됩니다.왜 도메인 레이어가 필요할까요?작은 앱에서는 ViewModel 안에서 모든 로직을 처리해도 큰 문제가 없습니다.하지만 앱의 규모가 커지거나, 처리해야 할 로직이 복잡해지면 ViewModel이 너무 복잡해질 수 있습니다.그럴 때는 비즈니스 로직을 도메인 레이어로 분리해서 관리하는 것이 좋습니다.예시로 쉽게 이해해 볼게요작은 앱 (도메인 레이어 없이도 괜찮은 경우)class LoginViewModel extends ChangeNotifier { Future login(String id, String pw) async { ..

왜 로직을 위젯에 넣지 말라고 할까요?위젯은 화면에 뭐가 보일지만 신경 써야 해요."무엇을 보여줄까?"만 생각하고,"언제, 왜, 어떻게 바뀔까?"는 ViewModel에게 맡겨야 해요.비유:위젯은 배우, ViewModel은 감독배우는 연기만 하고, 상황 판단은 감독이 하죠!나쁜 예 (이런 식은 안 좋아요)ElevatedButton( onPressed: () { // 서버에 요청 보내기 final response = await http.get(...); if (response.statusCode == 200) { // 데이터 처리 final data = jsonDecode(response.body); // 상태 업데이트 } }, child: Text('불..