개발자간 환경 맞추기
추억
옛날에 친구가 개발하는 군돌이 앱의 개발을 같이 하자는 권유를 받았었을 때 처음 node 버전과 lint 환경을 맞췄던게 기억난다.
같은 프로젝트에서 작업을 하더라도 lint와 node 버전을 맞추지 않으면 같은 커밋을 해도 저장만 하면 파일 전체가 바뀌거나 실행이 되지 않을 수 있기 때문에 중요했던 것으로 기억한다.
이 생각을 가지고 볼 예정!!!!
내용
이런 문제를 dart_code_metrics 라이브러리로 해결한다..!!!
이 라이브러리를 사용하면 코드 컨벤션, 에러, 비효율적인 동작을 야기하는 코드를 미리 발견하고 수정할 수 있다고 한다.
일단 여기서는 코드 컨벤션, 에러가 나올 수 있는 부분을 타입스크립트처럼 알려주는 느낌.
한계
아까 추억에서 말한 것처럼 dart 버전은 이 라이브러리로는 해결이 안되는 것 같아서 직접 맞춰주는게 필요할 것 같다.
하지만 lint는 analysis_options.yaml에서 설정해줄 수 있어서 좋았다.
만약 쓴다면
만약에 실제 프로젝트에 적용한다면,
dart_code_metrics의 룰과 기존 lint 룰을 정리해서 문서화하고 팀 규칙으로 공유해야겠다.
CI/CD 파이프라인에 dart_code_metrics를 통합해서 일관된 코드로 푸시될 수 있게 해야겠다.
클린 아키텍쳐 프로젝트 구조 잡기
먼저
클린 아키텍처는 관련된 글만 50개는 읽지 않았나 싶은데 아직도 완전히 이해됐냐고하면 아닌 것 같다. 이번에도 이해 못할 것 같지만 일단 정리해보자.
구조
작동 원리
1.View에서 요청이 발생하면 2.Bloc에서 상태를 감지함 3.비즈니스 로직에 필요한 Usecase를 호출 4.usecase에서는 추상화된 클래스인 Repository를 통해서 Repository_impl를 호출 5.마지막으로 Data_source에서 데이터 통신(원격/로컬) 6.요청에 대한 결과값으로 DTO를 전달받음. 7.그리고 DTO는 비즈니스 로직에 사용할 수 있는 Model로 변환해주는 Mapper로 연결
그리고 클린 아키텍처 폴더 구조!
Splash Page
앱을 사용하다보면 Splash Page가 이상하게 구성된 경우가 잫다.
어떻게 하면 이런 이상함없이 깔끔하게 앱을 켜지게 할 수 있을까의 관점에서 보려한다.
flutter_svg
왜 svg를 쓰는데 그냥 넣으면 되는걸 flutter_svg 라이브러리에 의존해서 할까?
svg를 png로 변환해서 썼었을 때, 깨지는 경우가 있음.
실제로 그랬던 것 같음.
그래서 svg의 장점인 벡터 특성 사라짐 → 해상도 확대 시 깨짐이 발생.
그래서 라이브러리를 써서 우회해서 적용시키는 것 같음.
flutter_svg는 내부에서 SVG 파일을 파싱해서 Flutter의 그림 그리기 시스템(Canvas + CustomPainter) 으로 변환한다고함.
SVG는 XML 기반이고, Flutter에는 SVG 렌더러가 없기 때문에 우회해야한다고함.
Material3 ThemeData를 보면서..
이전 회사에서 저렇게 사용하려는 Theme을 미리 설정해두고 작업하는게 아닌 모든 컬러들을 직접 코드안에 넣어줬었다. 나중에 작업할 때는 그러면 안될 것 같다... 무조건 미리 설정해둔 Theme에서 고를 수 있는 방식으로 해줘야 일관성있게 만들 수 있을듯.....
Appbar를 구성하면서
이렇게 padding과 fontSize를 하드코딩하면 휴대폰 사이즈가 변경되었을 때 UI가 깨지지않을까?
그럼 어떻게 해야할까?
실제 모든 화면에 맞추기 위해서는 MediaQuery 또는 LayoutBuilder, Flexible, Expanded 같은 위젯으로 반응형으로 구성해야한다.!
