모바일앱코딩개념

플러터로 만드는 모바일 앱 – 코드 폴더 분류하기 by BLOC

오늘은 코딩을 시작하는데 있어 코드 폴더 즉 패키지의 분류부터 제안하려고 합니다. Base가 되는 Architecture는 BLOC 이고 앞으로 BLOC를 기반으로 앱 개발을 해나가겠습니다..

이 글은 첫 번째 작성했던 코딩 시작하기 다음으로 봐야 하는 글입니다.

앱 만들기를 연습만 해보다가 이제 배포 가능한 앱을 만들어볼까 생각했을 때 다음에 뭘 시작해야 할지 막연한 경우가 많습니다.

Flutter는 Bloc를 활용하는 것이 개발함에 있어 코드를 역할에 따라서 만들고 재사용 또는 수정에 용이하므로 BLOC를 적극 활용하는 방향으로 진행하겠습니다.

Bloc

BLOC architecture

자세한 내용은 Bloclibrary site에 한글로 잘 설명이 되어 있네요.

다음 글에서는 BLOC로 실제 코딩하는 예제들을 설명할 예정입니다.

역할을 구분하는 코드구조

오늘의 핵심 내용인 Code Package를 다음과 같이 분류해봅시다.

아래와 같이 lib folder아래에 bloc, model 그리고 ui 라는 package를 만들어주었습니다.

왜 이렇게 구현할까요?

이렇게 코드를 분리할 경우 ui를 변경해야 할 경우 또는 새로운 디자인으로 새로 만들어야 할 경우 bloc와 model 코드를 재사용할 수가 있게 됩니다.

코드구조 sample

model

model은 Data Provider나 Respository를 통해 Data를 처리하는 부분입니다.

ui

ui는 user interface를 의미하는 것으로 사람에게 보여지고 입력을 받는 역할을 하는 부분을 구성하는 코드들이 저장될 것입니다.

Flutter이니 Widget들을 작성하게 됩니다.

bloc

Business Logic Component의 약자로 이름을 비추어 보아 model과 ui 사이에서 중재자 역할을 함을 알 수 있고 관련된 Code를 작성합니다.

마치며

짧은 글이지만 개발을 연습이 아닌 실전으로 Flutter 개발을 시작하실 분들은 이렇게 BLOC에 따라 코드를 분류하도록 권장합니다.

다음 글은 실제 코딩하는 것에 대해서 작성합니다.

Firebase Auth를 통해 Google login을 하는 것을 설명할 예정입니다.

Leave a Reply