이런 저런 공부

[협업/Git/Jira 기초] #2 컴공 팀 프로젝트가 처음인 분들께... 🧡Pakage Convention(프론트 한정)

minWachya 2023. 3. 2. 22:33
반응형

~제가 작성한 노션을 블로그에도 옮긴 내용입니다!~

목차

  1. Pakage Convention
  2. file, folder name convention
    1. 폴더명
    2. 폴더명 예시

 

1. Pakage Convention

🍎 사용 목적 클린 아키텍처의 개념을 요약하면 아래와 같습니다.

  • 변경이 용이하고(유연) + 의존성을 줄이고 + 테스트 가능하고 + 유지 관리 쉽게 하기 위한 개념
  • 소스 코드를 보는 것만으로 프로그램이 수행하는 작업을 식별할 수 있는 소프트웨어 개발 방법

MVVM이란, (Model - View - View Model)으로 로직을 사용자 인터페이스 제어에서 분리하는 소프트웨어 설계 프레임워크입니다.

MVVM 패턴을 사용한 클린 아키텍처의 장점은 아래와 같습니다.

  • 표준 MVVM보다 테스트 쉬움
  • 완벽하게 큐레이션된 분리(가장 큰 장점)
  • 사용하기 쉬운 패키지 구조
  • 프로젝트를 쉽게 실행 가능
  • 새 기능 빠르게 구현 가능

위 장점을 위해 패키지 구조를 아래와 같이 지키고자 합니다.

 

이 부분은 어렵고 깊은 내용이기 때문에 아래 포스트들을 다 읽어보시길 추천드립니다!

아래는 MVVM 패턴과 클린 아키텍처를 적용한 패키지 구조입니다.

이런 구조는 다양하게 있을 수 있지만 큰 틀은 비슷합니다.

저희는 사람들이 많이 쓰는 구조를 사용할 예정입니다.

위 내용이 이해가 어렵다면, 지금은 기능/목적별로 패키지를 나누어 놓았다고 이해하셔도 됩니다.

아래는 저희가 사용할 패키지를 용도를 설명해 놓은 것입니다.

위 그림과 조금 다른 것을 확인할 수 있는데, 큰 틀은 같습니다.

(저도 플러터로는 패키징이 처음이라 개발하면서 달라질 수 있는데, 그럴 때마다 다시 공지하겠습니다. 저도 추가 공부가 필요한 부분이지만, 큰 변화는 없을 거 같고 빨리 보내는 거 좋을 거 같아 일단 보내드립니다.)

  • assets: 정적 파일(Static Contents)를 포함
    • fonts: 폰트
    • icons: 아이콘 모음
    • images: 이미지 모음
  • lib
    • src
      • constants : 앱의 전반적 구성요소들, 전역 정적 설정 정보
        • colors.dart: ui 제작 시 사용되는 색을 모아둔 곳
          • 시용할 컬러는 colors.dart에 있는지 확인하고, 없으면 추가하여 사용하기!
        • theme.dart: 앱에서 사용되는 Theme을 모아둔 곳
      • core : 앱에서 전역적으로 사용되는 요소들
        • params : API호출시 필요한 파라미터 모아둔 클래스
        • resources : API호출시 결과를 갖는 wrapper class. 통신 성공/실패 케이스를 쉽게 챙길수있다.
        • utils : 공용 Utility, Helper 성격의 파일
      • data : data layer 관련 요소들
        • datasources : api호출 클래스
          • local: 앱 내 DB에서 호출
          • remote: 서버 api 호출
        • models : Model 성격의 Data Class, api결과 데이터 관련 클래스(DTO)
        • repositories : api 클래스를 주입받아 사용하는 레포지토리 구현체
      • domain : domain layer 관련 요소들 < 저희 플젝에선 안 쓸 거 같지만 그냥 읽어만 보셔요.
        • entities : POJO (data폴더의 model과 달리 데이터 파싱, 변환에 영향을 받지않는 근본적인 데이터 구조를 나타내는 클래스)
        • repositories : api호출 인터페이스.
        • usecases : repository를 주입받아서 하나의 액션 수행하는 클래스
      • ui : ui layer 관련 요소들
        • blocs : BLOC
        • screens: 화면 파일
        • widgets: 각 화면을 구성하는 위젯 파일이 포함
          • providers : model과 ui의 상호작용을 처리
      • injector.dart
    • main.dart

2. flie, floder name convention

 🍎 사용이유: 가독성을 높이고, 서로의 코드를 잘 이해하기 위한 약속입니다. 이를 잘 지키면 파일, 폴더 이름만으로 특정 파일을 쉽게 찾을 수 있고, 해당 파일의 내용도 예측이 가능해집니다. 이는 리펙토링에도 도움이 되겠지요!

 

2-1. 폴더명

파일명은 snake_case로 작성합니다.

운영체제에 따라 대소문자 처리 규칙과 허용 특수문자가 다르기 때문에, 사전에 문제를 방지하기 위해 항상 소문자, 언더바만 사용합니다. 다른 특수문자(공백, 하이픈 등)은 사용하지 않습니다.

2-2. 폴더명 예시

  • [기능]_[뷰]: home_screen.dart
  • [피키지명][기능][뷰]: home_item_widget.dart
// ex
screens
	- auth
		- login_screen.dart
		- register_screen.dart
	- home
		- home_screen.dart
		- about_screen.dart
	- widgets
		- custom_loading_widget.dart
		- home_item_list_widget.dart
  • assets : 정적 파일(Static Contents)를 포함
    • icons: ic_로 시작합니다.
    • images: img로 시작합니다.
    • [ic/img][패키지명(여러 화면에서 쓰이는 경우 생략 가능)][역할]
// ex
assets
	-icons
		- ic_logo.png
	- images
		- img_home_banner.jpeg
	- fonts
		- customfont.ttf
		- fontawesome.ttf

관련 포스트:

~주저리~

두 번째로 안내한 건,

1. 패키지는 어떤 식으로 나누는지,

2. 파일을 만들 때 어떤 이름의 파일로 만들어야 하는지

3. 이런 파일은 어느 패키지 안에 들어가야 하는지

에 대해서 안내했다.

 

이러면 코드 통일성을 지킬 수 있지 않을까 + 서버 연결이나 크게 보면 프로젝트 관리에도 큰 도움이 될 거 같았다.

 

이 설명에서 아쉬운 거는 클린 아키텍처와 MVVM 패턴에 대한 설명을 짧은 설명으로 끝내버린 것이다.

사실 나는 위 두 개념이 프론트에서 가장 중요한 부분이라고 생각한다.

(이거에 대한 글도 따로 포스팅했을 정도)

그래서 팀원들도 이거에 대해 공부해줬으면 했는데,

프로젝트 시작일이 진짜 일주일??도 안 남은 거임..

그래서 이렇게 짧게밖에 설명할 수밖에 없었음,,너무 아쉽다.

클린 아키텍처와 MVVM 패턴은 저렇게 한줄 요약이 불가능할 정도로 많은 내용을 담고 있는데 ㅜ-ㅜ 아쉽,,,

담에,,, 졸프 시작 전에 시간 남으면 더 공부해보면 좋다고 재공지해야지.

 

플러터가 아닌 다른 툴 사용하시는 분들도 마찬가지로 클린 아키텍처, MVVM 패턴 검색해보시면 될 거 같다!

 

그리고 시간이 되면 하고싶었던 거는,,,

폴더링할 때

constants, ui이런 네이밍도 같이 정하고 싶었다.

내가 덧붙인 링크 보면은 이것도 팀마다 뭔가 네이밍이 비슷하지만 다르다.

나는 빠른 프로젝트 시작을 위해 위와 같이 내 맘대로 정했지만ㅋ

다음에 기회가 된다면

저희는 뭐가 좋을까요? 하고 같이 얘기해보는 것도 재밌을 거 같다.ㅎㅎ

 

 

반응형
저작자표시