[Flutter] 실무 v0.1.0

6.1.1-2)

- Agile 개발 방법론 정의. 빠르게 변화하는 비즈니스 환경에서 시장의 요구사항을 기민하게 대처하기 위함.

- scrum은 agile 방법론을 구체화한 여러 프로세스 중 한가지임.

6.1.3)

- Jira로 스크럼 운영 가능.

- atlassian을 사용하여 jira 프로젝트 생성하고 작업 단위별 관리함.

- 백로그는 할일을 모아두는 공간. 백로그에 에픽을 할당해줄 수 있음.

- 이외 전반적으로 쓰이는 기능들 대충 보여줌.

 

6.1.4-5)

- 개발 기획은 보통 두 가지 형태로 전달됨: 와이어프레임 형태의 개발 기능 명세가 포함된 문서 or 디자인 툴(어도비XD, 피그마)로 만들어진 프로토타입 형태 --> 어도비랑 피그마 선호되는 이유는 플로우를 프로토타이핑 할 수 있어서임.

- 개발자로서 간단히 피그마 사용하는 법 보여줌.

 

6.2.1)

- Commerce Style UI란 사용자가 상품을 쉽게 찾고, 정보를 파악하고, 구매과정을 진행할 수 있도록 설계된 사용자 인터페이스를 일컬음.

- 구좌란 프로모션 진행 시 상품과 상품 정보가 노출되는 영역임. 그래서 기능, 기획에 맞춰 재사용되는 경우가 많아서 컴포넌트화하여 동적으로 관리해야 함.

- 이런 컴포넌트화 된 구좌를 View_module이라 명명하여 관리할 예정 (종류 여러개).

- 부트페이 연동해서 결제 기능 개발할거래.

6.2.2) 피그마 기획 샘플 파일 제공해줌.

 

6.2.3)

- Server Driven UI란 클라이언트와 서버간의 상호 작용으로 UI를 동적으로 생성, 업데이트 및 조작하게 함. 서버 측에서 UI의 내용들을 결정하고 클라이언트는 해당 정보를 기반으로 UI 렌더링을 하게 만듦.

- 이게 대세인 듯 함.

 

6.2.4)

- 클린아키텍처 설명.

 

6.2.5)

프로젝트 구조

- Core는 프로젝트 전체에서 공통적으로 쓰이는 디렉토리임.

 -- 이 안에 테마는 프로젝트 전체를 아우르는 디자인이 포함됨.

 -- utils는 앱 전체에서 사용될 에러나 예외처리, http 통신 관련 모듈인 rest client 포함.

- Data_layer는 시스템의 데이터 엑세스와 관련된 부분을 담당함.

 -- data source module은 injectible package를 통해 의존성 주입을 하게 되는데 써드파티 타입의 클래스들을 위한 모듈임.

 -- 로컬스토리지는 하이브라는 패키지 활용 예정.

 -- 리모트는 api 통신 관련 내용 포함.

 -- dto는 data source로 부터 받은 리스폰스의 객체 형식.

 -- entity는 database와 1:1로 매핑되는 객체 영역.

 -- mapper는 해당 객체를 필요에 맞게 매핑해주는 파일. 예를 들어 dto를 모델로 변경하거나 entity를 모델로 변경하는 역할.

 -- repository_impl는 domain layer에 존재하는 repository 추상화 클래스에 대한 구현 부분.

- Domain_layer는 시스템의 로직을 구현하고 유지관리함.

 -- usecase가 비즈니스 로직을 담당함. 특별히 다른 계층에 의존성을 가지면 안되는 영역임.

 -- model은 dto에서 모델로 변환된 것을 직접 앱에서 사용될 모델 클래스를 담고 있음.

- Presentation_layer는 사용자 인터페이스와 상호작용하는 부분임.

 -- 화면 이동에 대한 라우터 존재.

 -- 앱 전체 영역에 해당하는 메인스크린을 기준으로 페이지별 ui가 구성되어 있음.

 -- 상태관리 패키지 (bloc)도 여기에 들어가 있음.

 --- 상태관리 패키지로 Bloc 사용 예정 (팀 협업이 좋다함. 대규모 아니면 잘 적용 안한다 함).

 

6.2.6)

- 개발 계획에 따른 JIRA 작업 및 스프린트 설정.

 

6.3.1)

- 개발자간 개발 환경 맞추는 방식 설명.

- 코딩 컨벤션이란 코딩 형식을 맞추는 일.

- dart code metrics 패키지를 사용하면 비효율적인 동작을 야기할 수 있는 코드를 미리 감지하고 수정할 수 있게해줌.

- 강의에서 analysis_options를 제공해주는데 dart analysis 열면 전체 코드 분석 현황을 보여줌.

 

6.3.2)

- 클린아키텍처에 의거하여 폴더/파일 생성.

 

6.3.3)

- go router 패키지로 라우팅 개발.

- 플러터에서는 Navigator 클래스를 사용한 페이지간의 이동을 관리함. 페이지를 스택으로 관리해서 push, pop하는 방식으로 작동함.

- 별도의 라우터 파일에 go router 변수를 할당해서 관리함.

- 자주 사용되는 path들 역시 const 선언을 해서 관리해주면 편함.

 

6.3.4)

- 실무에선 스플래시 페이지가 노출되는 동안 로그인 체크, 루팅 체크, 네트워크 체크 등 다양한 행동을 한다고 함 (더 알아봐야 할 듯).

 

6.3.5)

- 스플래시 페이지 구현.

- svg 파일을 피그마에서 내려받고 플러터 패키지 추가하여 적용함.

- 피그마 활용 같이하면서 개발해나감.

- 향후 스플래시페이지 띄울 때 이 강의에선 bloc를 통해 로그인 체크만 구현할 예정.

Go router 작동 방식

 

6.4.1)

- 메인 화면 기획, 디자인 분석

global navigation bar = gnb

6.4.2)

- typography랑 color는 꼼꼼하게 리뷰 후 source code를 테마에 옮겨야 함.

- themedata 설정.

 

6.4.3-4)

- main화면 scaffold 구조 추가, 라우팅 작업.

- 피그마 기획에 따라 app bar 작업 (패딩 같은 값이 이미 다 정의되어 있음).

- cubit을 이용하여 bottom navigation bar 작업.

- 바뀐 네비게이션에 따라 앱바가 바뀌도록 조정.

 

6.4.5)

- cubit을 이용하여 메인화면 개발.

 

6.4.6)

- 메인화면 app bar UI 개발.

 

6.4.7)

- Gnb개발.

- DTO는 계층간 데이터 교환을 위한 객체로, 비즈니스 로직을 가지지 않는 순수한 객체를 의미함.

- view module list가 컨텐츠들임. 여기서 메뉴 dto는 title과 tabid를 속성으로 가지게 됨.

- 1~2까지 자동 생성해줌.

- bloc를 freezed와 같이 사용하게 될텐데, 상태를 복사해서 원하는 값만 교체하도록 해주는 copyWith method를 bloc에서 state 값 변경시 자주 사용하게 될 예정.

- API Interface는 retrofit과 dio를 사용하여 구현할 예정.

 

6.4.8)

- response wrapper 적용:

6.4.9)

- 도메인 레이어 개발(repository랑 mapper).

 

6.4.10)

- GNB영역/Domain layer/Usecase 작업.

- Usecase는 bloc에서 최대한 뷰를 그리는 로직에만 집중할 수 있도록 비즈니스 로직만 처리함.

- error response부터 작성 후 usecase를 결과를 return하는 result 파일 생성(freezed이용).

- 전체적인 구조 정도 잡아준 것.

 

6.4.11)

- Service Locator pattern이란 앱 내의 서비스를 중앙화된 위치에서 관리하고 검색하는 디자인 패턴임:

- 서비스를 서비스 로케이터에 등록하고, 서비스를 검색하면 로케이터가 인스턴스를 반환하는 방식.

- Get_it package 사용하여 개발함.

- "데이터 레이어의 인스턴스는 한번만 생성되면 돼서 싱글톤으로 개발함"

 

6.4.12)

- Exception 공통화 & Logger 설정, 예외처리 내용 정리:

6.4.13)

- mocktail 패키지를 활용하여 repository, usecase의 유닛 테스트코드 작성.

- 예전에 제스트로 테스트코드 작성했을 때 참고하면 좋을 듯(https://soulball.tistory.com/32)

 

6.4.14)

- 메인화면 구조 잡기 --- gnb bloc개발.

- 개발 편의성을 위해 클래스다이어그램 참고하여 소스코드 작업 시작함.

- bloc는 state와 event를 필요로 하는데, MenuEvent는 추상화 클래스로, MenuBloc에서 가지는 모든 이벤트를 MenuEvent로 상속받아 구현하게 됨.

- state는 freezed annotation을 이용해서 구현함.

 

6.4.15)

- gnb UI 개발. 꽤 무난함.

 

6.5.1)

- data layer/ViewModule List 개발.

- 메뉴의 tabid에 따라 어떤 뷰모듈리스트가 그려지게 될 지 결정됨.

- 뷰모듈은 타입에 따라 어떤 위젯이 그려지게 될 지 결정됨.

 

6.5.2)

- 뷰모듈의 도메인 레이어 개발.

 

6.5.3)

- ViewModule list Bloc 개발.

- 위에 의거하여 작업함.

 

6.5.4)

- String형식으로 전달 받은 view module을 widget의 형태로 변환해주는 converter 개발(=ViewModule Factory).

개념도

- string을 snake case로 변환해주는 정규표현식 제공해줌.

- 이제 모델이 아닌 위젯이 전달되게 되는 것.

 

6.5.5)

- ViewModule List Pagination 개발. 스크롤 끝에 추가되는 메커니즘도 작업해줌.

- droppable & throttling 적용.

- bloc event procedure:

6.5.6)

- 메인 매장 화면 개발 with injectable package : Get It의 의존성 등록 기능을 Annotation 기반 Code Generation을 통해 자동화 시켜주는 패키지임. 추상화 클래스랑 구현 클래스를 연결해줌.

- Page refresh 개발 (bloc 간단 수정).

 

6.5.7-8)

- Carousel형 상품 기획 및 디자인 분석 후 UI 개발.

 

6.5.9)

- 광고 배너 추가 작업.

 

6.5.10-11)

- 상품 카드 디자인 분석 후 UI 개발 (상품 카드 위젯 개발).

- 좀 더 자세히 말하자면, 상품 카드에 공통적인 스타일인 1) 타이틀, 가격, 할인율, 할인 가격 등에 공통 Text Style은 extension을 활용하고, 2) 슬라이드, 카테고리, 타임 특가 ViewModule의 상품 카드는 공통의 상품 카드 컴포넌트, 위젯 구현하셈. 타임 특가 ViewModule의 경우 별도로 구현해야 함.

 

6.5.12)

- 상품 카드 컴포넌트 개발.

 

6.5.13-16)

- 슬라이드 형 추천 상품, 타임특가 상품 기획 및 개발.

 

6.5.17-18)

- 카테고리형 상품 기획 분석 후 UI 개발.

- 크기 조정 위에 참고. 유념할 것.

 

6.5.19-20)

- 브랜드 상품 기획 분석 후 UI 개발.

- 가변적인지 고정인지 확인 필요하고, 가변이면 aspect ratio 사용.

 

6.5.21)***

- Footer 개발 (회사소개, 이용약관 등 다 나옴). wrap 사용해야 자연스레 줄바꿈 해줌.

 

6.6) 장바구니 기능 개발임. 살짝 건너뜀.

 

6.7) 스프린트 리뷰 방법.

- 1차적으론, 클린아키텍처 기반의 앱 구조를 구현하고, 메인 매장, 장바구니 페이지의 UI와 기능을 Mock Data를 기반으로 구현함.

 

6.8.1)

- 로컬에 직접 서버 구성함. (shelf package 사용)

- 데이터는 하드코딩 되어 전달해줘서 별로임...

 

6.8.2)

- Swagger 설명.

 

6.8.3)

- 로컬 서버를 앱에 연동함.

 

6.8은 전체적으로 파이어베이스로 적용할 수 있을 것만 같음. 이해도의 문제일 듯.

 

6.9) 카카오 로그인 구현.

- OAuth 2.0은 사용자의 데이터에 접근하기 위해 접근 권한을 위임 받을 수 있는 프로토콜임. 많이 다뤄본 개념임.

- access token과 refresh token 개념도 설명해줌.

- 자동 로그인 구현.

6.9.4-5) Firebase Authentication에 카카오로그인 sdk 직접 생성해서 연동. Postman 활용하여 확인도 사용자 정보 잘 들어왔는지 함.

 

6.10.1)

- cached_network_image package를 활용하여 관리가 어려운 이미지 소스를 공통 모듈을 생성하도록 함.

- 해당 패키지 사용하면 일정 시간동안 사용하는 이미지 캐싱하여 저장해두고, 애니메이션도 제공해줌.

 

6.10.2)

- 비슷한 맥락으로, 앱이 켜진 후 탭 이동하거나 할 때 로딩 속도를 개선하기 위해 Hive package를 사용해서 캐싱을 할 수 있음.

- 요구사항은, 탭 이동시 구좌 리스트에 대해서 캐시를 적용하고, 이미 레이지 로딩 완료된 구좌리스트에 대해서도 캐시 적용함. 하단으로 끌어당겨 리프레시 하는 경우 캐시를 비움. 이런 느낌인 것:

- 이거 진짜 괜찮은 기능인 듯.

 

6.10.3)

- 캐러셀 자동 넘김 부분 사용자 터치 시 멈추도록 gesture detector함.

- gesture recognizer 설명. 특정 제스처의 승자/패자를 가림.

 

6.10.4)

- Skeleton UI: 데이터가 로드되고, 화면에 보여지기 전까지 사용자의 지루함을 덜어줄 목적으로 대략적인 컨텐츠의 모양을 나타내는 UI

- Shimmer package 활용하여 구현함.

 

6.11.1)

- 앱 성능 최적화 4가지 방법:

1) Const widget과 repaint boundary 사용 (컴파일타임에 생성돼서 런타임에 코스트 없음, 불필요한 렌더링 최소화)

2) 위젯의 깊이 최소화 (깊어질수록 계산이 많아짐)

3) build method 내부에 연산을 넣지마 (빌드는 굉장히 여러번 호출될 수 있기 때문에 연산 관련 내용 넣으면 성능 저하 야기함)

4) List view 대신 ListView.builder 사용 (리스트뷰와 달리 후자는 화면에서 보여지지 않는 부분은 빌드하지 않음)

- 4번을 실습으로 바꿔주는 작업 보여줌.

 

6.11.2)

- server selector 사용법. target api 설정.

 

6.11.3)

- flavor를 이용하여 개발버전과 운영버전 앱이 따로 빌드될 수 있도록 설정함.

- 3단계로 분리할거고, 진행 순서는 1) firebase 프로젝트 분리 2) OS별 flavor설정 3) IDE configuration 설정 및 main 함수 분리

6.11.4-5) 안드로이드와 ios 각각 Flavor 설정.

6.11.6) 안드로이드 스튜디오 configuration 및 entry 분리. (VSCode도 알려줌)

 

6.11.7-8) ios & android 앱 배포

- ios는 개발자 등록을 해줘야 하고 등록비용이 1년에 10만원이 넘는다 함.

- 아이콘은 appicon.co에서 만듦.

 

6.11.9-10) ios & android 테스트앱 배포

- Firebase app distribution을 통해 정식 배포 전 테스트앱 배포 실습 (adhoc배포).

 

6.11.11-12) ios & android Fastlane 배포

- fastlane은 각 플랫폼의 빌드 및 배포 자동화 오픈소스 라이브러리로 빌드와 배포 과정에서 반복되는 거 자동으로 수행해줌.

- 기존 ios 배포 과정: 앱 아카이빙 - 앱스토어 커넥트에 업로드 - 앱 정보 업데이트 - 테스트 플라이트 대기 - 심사 올림

- 위의 과정을 커맨드라인 한줄로 ㅆㄱㄴ.

 

6.11.13) 릴리즈노트 작성 요령

6.11.14) QA 시나리오 대응 요령 (PrimaryScrollController 예시)

 

6.12.1-2) Firebase Crashlytics 사용법 설명

 

 

Q)

- dto, entity 모델로 매핑한다의 의미?

- retrofit, dio, freezed 등 data부분 정확한 원리들

- repository, mapper 등 이해

- 6.4.14 감도 안옴.

- Cubit이란?

- annotation이란?

- 분기처리란?

- config 파일 역할

- Gradle이란?

 

 

출처: 패스트캠퍼스