본문 바로가기
개발자 : devZucca;/Flutter

Flutter 플러터 파일 구조(디렉터리 구분, 폴더 작명)

by ZUCCA 2020. 6. 3.
반응형

플러터로 앱 개발하고 있습니다.

플러터 내부의 파일 구조의 명칭을 구글링 해보다가 좋은 글이 있어서 번역해서 공유합니다.

물론, 의역과 오역 투성이지만 너그러이 이해해주실 거라 생각합니다.

(영어에 불편함이 없으신 분은 직접 방문하셔서 읽어보시길 권해드립니다)

 

플러터의 파일구조 원문보기

 

 


Flutter File Structure

 

대규모 프로젝트를 진행하며, 코드를 체계적으로 유지하는 것은 매우 중요합니다. 규모가 크지 않은 소규모 프로젝트라도, 프로젝트를 오래 쉴 경우에 대비해서 체계적인 코드를 유지하는 것이 좋습니다.

 

함께 살펴볼 파일 구조는 대부분의 앱에서 사용하는 구조입니다. 당연히 프로젝트에 따라 수정해야 할 수도 있습니다.

 

Root Directory of App

/assets
/fonts
/function
pubspec.yaml

루트 디렉터리에는Assets, Fonts, Function 같은 세 개의 폴더가 있습니다. 이는 프로젝트 생성 시 만들어지는 기본 폴더가 아닙니다. 플러터에서 제공하는 기본 글꼴(Roboto)을 사용하려는 경우에는 Fonts 폴더가 필요하지 않습니다.

 

Assets 폴더는 거의 대부분의 앱에서 반드시 사용해야 합니다. Assets 폴더에는 로고나 사용자 지정 아이콘 및 앱 전체에서 사용되는 정적 이미지와 같은 항목이 포함되어야 합니다. 일단 이러한 요소들이 Assets 폴더에 저장되면, pubspec.yaml에 등록해주세요.

 

개인적으로 Firebase Cloud Functions에만 사용했던 Functions 폴더입니다. Firebase가 아닌 다른 데이터베이스를 사용하는 경우 별도의 설정이 필요할 수 있습니다. 저는 주로 Firebase를 사용하기 때문에 해당 함수는 모두 Functions폴더에 저장되어 있습니다. 그래서 실제 앱을 구동하는 코드와 구분할 수 있습니다.

 

lib Directory

/lib
  /models
  /screens
  /service
  /utils
  /widgets

 

코드의 주요한 골자를 포함하는 lib 디렉터리에서는 models, screens, service, utils, widgets 폴더로 나눌 수 있습니다. 

 

models 폴더는 앱 전체에서 사용되는 데이터들을 저장하는 데 사용됩니다. 만약 여러분이 다른 언어를 사용해 본 적이 있다면, global 구조로 생각할 수 있습니다. 저의 경우에는 models폴더에 사용자 데이터나 우편 정보 등을 저장했습니다.

 

screens 폴더는 보이는 그 자체를 의미합니다. 앱의 모든 화면에는 고유한 화면을 표현하는 코드가 있어야 합니다. 간단한 화면인 경우 해당 폴더 안에 하나의 파일만 있으면 됩니다. 좀 더 복잡한 화면이라면 더 큰 위젯에 사용할 local_widgets 폴더도 포함시켜 코드를 깔끔하게 유지할 수 있습니다.

 

모든 화면(위젯으로 이해해도 좋을듯합니다)은 각각의 로컬 위젯 폴더에 위치해 있으므로 앱 전체에서 사용되는 위젯이 있으면 widgets 폴더에 배치합니다. 저는 코드의 중복은 좋지 않은 구조라 생각합니다. 따라서 같은 코드를 사용하는 화면이 여러 개일 경우 "widgets" 폴더에 넣는 것이 좋습니다.

 

그리고 UI를 그려주는 코드(widget)를 다시 쓰는 것을 좋아하지 않는 것처럼 어떤 기능을 포함하는 코드(비즈니스 로직)도 다시 쓰는 것을 좋아하지 않습니다. 따라서 앱 전체에서 사용되는 모든 기능은 "utils" 폴더에 저장합니다. 여기에 넣은 예로는 검증에 대한 폼, 시간과 관련한 함수, 이미지 캡처 로직 등이 있습니다.

 

그리고 마지막으로 마지막 폴더는 service입니다. 이 폴더는 응용 프로그램의 외부에서 인터페이스 하는 모든 용도로 사용됩니다. 저는 주로 파이어베이스에 사용했어요. 하지만 당신이 특정 API를 사용하신다면 service폴더에 저장하겠습니다.

 

이러한 디렉터리 구조를 통해 코드를 깨끗하게 유지하고 관리할 수 있으며 사용하기 쉽습니다. 자유롭게 사용해 보시고, 코딩 스타일과 니즈에 맞도록 조정해 보시고, 어떤 새로운 방법이 있는지 알려주세요.

 

읽어주셔서 감사합니다.


개발, 영어 모두 이해가 많이 부족합니다. 좀 더 개선해보겠습니다.

 

반응형