패스트캠퍼스 환급챌린지 23일차 미션(2월 23일): 15개 프로젝트로 실무까지 끝내는 Dart & Flutter 앱 개발 강의 후기

오늘은 혜택 탭과 주식 탭의 일부를 완성했다.

혜택 탭의 경우 일반적인 수직 스크롤뷰 형태의 단순한 레이아웃 구조였지만, 주식 탭의 경우는 탭뷰와 아코디언이 포함된 새로운 형태의 레이아웃이었다. 새삼 토스 앱의 UI를 클론해보는 것만으로도 많은 공부가 되는 것 같다고 느꼈다.

 

위젯을 만드는 것은 웹 FE 개발에서 컴포넌트를 개발하는 방법과 거의 동일하다.

다른 점이 있다면 객체에 대한 필드 정보를 정의하기 위해 vo를 따로 만들어주는 정도? 그렇지만 TypeScript에서 타입을 정의하는 것도 같은 맥락의 작업이라서 뭔가 크게 어색하지는 않았다.

 

뷰(View) 스케일에서의 위젯을 나누고, 세부 위젯을 이루는 요소를 파악하고, 요소를 구현하기 위한 위젯과 vo를 작성하고, 각 요소를 적절한 위치에 배치하기 위한 레이아웃을 설계하고, padding 또는 margin, 정렬 등을 수행해서 레이아웃에 요소를 맞춰 배치한 다음에 디테일(폰트 모양, 크기, 색상 등)을 잡아주면 된다. 이 작업의 반복인 것 같다.

조금 더 엔지니어링한 관점에서 신경쓸 부분은, 역시나 위젯이 빌드될 때 필요한 데이터가 혹시 상태가 초기화되는 시점에 할당되지는 않는지, 즉 컴파일(빌드) 타임과 초기화 타임의 시기를 잘 고려해서 데이터를 프로퍼티에 할당해주는 것.

또는 적절한 late 키워드의 사용, 변화하지 않는 위젯의 경우 const로 잘 선언해주기 등이 있다.

 

위젯과 상수의 네이밍은 항상 타인이 이걸 읽었을 때에도 의미가 잘 파악되거나 추론되는지를 기준으로 수행해야한다. 이건 기본이다.

똑같은 색상을 다른 목적으로 정의하게 된다면, 꼭 목적이 잘 드러나는 이름을 고려해서 네이밍하자.

그리고 velocity_x 패키지는 정말 효자다... 자잘한 위젯들을 단순히 메서드 체이닝을 통해 스타일을 적용해서 만들어준다.

특히 많은 텍스트(레이블)을 구현할 때 빛을 발한다. 많이많이 사용해서 빨리 익숙해지도록 하자.

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://bit.ly/48sS29N