사이드 프로젝트 :: 모의투자 서비스 기본 설정

1. 서론

본 글은 개인적인 이야기를 많이 담고 있습니다.

 

학생들을 대상으로 하는 모의투자 서비스에 flutter 개발자로 합류하게 된지 어느덧 4개월이 훌쩍 넘었다.

그동안 회의에만 가끔 참여하고 가끔 figma에서 진척도를 엿보곤 했었는데, 드디어 디자인 작업이 얼추 마무리되어 프론트쪽도 개발을 착수하기로 했다.

요즘 백엔드 교육을 듣고 있어서 시간이 부족한 건 사실이지만, 주말에 쉴 때 드라이브 할 겸 카페도 들리고 또 내가 잘하는 거(그나마) 하면서 힐링을 하려고 한다.

 

디자인이 너무나도 내 취향이라 아주 행복하게 개발할 수 있을 것 같다.

회사 다닐 때는 언젠가 디자인도 공부해보고 싶었는데 갑자기 백엔드 공부라니.. 사람 일 정말 어떻게 될지 모른다.

한가지 걱정되는 것은 교사 플랫폼을 데스크탑 앱이나 태블릿 앱이 아니라 웹으로 개발해야 한다는 것이다.

flutter web에 대해 개인적으로 아직 불신이 크긴 하지만 내가 좀 더 공부하면서 잘해봐야겠다.

 

2. 기본 설정

Tool

VS Code 1.91.1

지금은 빠른 개발이 목표이기 때문에 공부할 때도, 회사에서도 사용했던 익숙한 VS Code를 선택했다. android studio는 나중에 시간적 여유가 있을 때 사용해 보는 걸로.

 

Framework & Language

flutter version 3.22.2

dart SDK version 3.4.3

 

Design

figma

참고로 피그마는 이제 dev mode를 유료 버전에서만 사용할 수 있는데, 학생 계정으로 로그인시 무료로 이용할 수 있다.

회사 다닐 때는 몰랐지만, 이렇게 flutter 코드로 보여주는 기능도 있다.

미리 알았으면 생산성 1.5배는 좋았을듯..

 

fonts - pretendard

이유는 모르겠지만 디자이너들이 가장 애정하는 폰트인 것 같다.

 

아래 블로그에서 무료로 다운받을 수 있다.

https://cactus.tistory.com/306

Pretendard

 

Pretendard 소개글

 

Packages

flutter는 좋은 패키지가 참 많다. 좋은 건 공유하려고 하는 개발자들의 문화에 얼마나 많은 덕을 보았는지. 내가 블로그에 글을 올리는 이유도 그 문화에 동참하고 싶기 때문이다. 아직은 좋은 글을 보여주지 못해 아쉽지만 쓰다보면 늘 것이라는 멘토님의 조언을 믿고 있다.

 

pub.dev에 접속하면 비슷한 기능을 가진 패키지가 꽤 많이 존재하는데, 내가 패키지를 선택하는 기준은 다음과 같다.

1. 내가 개발하려는 플랫폼을 지원하는가?

2. 내가 사용하려는 flutter, dart 버전을 지원하는가?

3. 사용자수가 많은가? 

4. 버전이 계속 업데이트 되고 있는가?

+ 리드미가 보기 좋게 작성되어 있는가?

 

때로는 패키지를 사용하기 위해 열심히 영어와 코드를 분석하는 것보다 직접 만드는 것이 더 빠르고 입맛대로 만들 수 있다. 

 

qr_code_scanner 1.0.1

https://pub.dev/packages/qr_code_scanner

qr_code_scanner | Flutter package

 

modal_bottom_sheet 3.0.0

https://pub.dev/packages/modal_bottom_sheet

modal_bottom_sheet | Flutter package

 

flutter_svg 2.0.10+1

https://pub.dev/packages/flutter_svg

flutter_svg | Flutter package

 

riverpod 2.5.1

https://pub.dev/packages/riverpod

riverpod | Dart package

 

+ riverpod hooks 사용도 조금 고민중

 

animations 2.0.11

https://pub.dev/packages/animations

animations | Flutter package

 

freezed 2.5.7

https://pub.dev/packages/freezed

freezed | Dart package

 

flutter_spinkit 5.2.1

https://pub.dev/packages/flutter_spinkit

flutter_spinkit | Flutter package

 

http 1.2.2

https://pub.dev/packages/http

http | Dart package

 

dio 5.5.0+1

https://pub.dev/packages/dio

dio | Dart package

 

spider 4.2.2

https://pub.dev/packages/spider

spider | Dart package

 

 

당장 눈에 보이고 사용할 것 같은 건 이정도이다.

상태관리는 riverpod으로 할 예정이고, riverpod hooks는 공부가 필요하여 일단 보류하겠다.

riverpod으로 하는 이유는 익숙하고, 참고 자료가 많기 때문이다. 앞서 말했듯 빠른 완성이 목표인 나에게는 익숙함이 중요하다.

name: stock_learn
description: "for students"
publish_to: 'none' 

version: 1.0.0+1

environment:
  sdk: '>=3.4.3 <4.0.0'

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.6
  qr_code_scanner: ^1.0.1
  modal_bottom_sheet: ^3.0.0
  flutter_svg: ^2.0.10+1
  riverpod: ^2.5.1
  animations: ^2.0.11
  freezed: ^2.5.2
  flutter_spinkit: ^5.2.1
  http: ^1.2.2
  dio: ^5.5.0+1

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^3.0.0

flutter:

  uses-material-design: true

  assets:
    - assets/fonts/
    - assets/images/
    - assets/svgs/

  fonts:
    - family: Pretendard
      fonts:
        - asset: Pretendard-Bold.ttf
          weight: 700
        - asset: Pretendard-SemiBold.ttf
          weight: 600
        - asset: Pretendard-Regular.ttf
          weight: 400

 

3. Architecture

MVVM

쓸 줄은 아는데 설명은 못 해서 부끄러운 MVVM 패턴..

View, ViewModel, Repository, DataSource, Model의 구조로 진행할 것이다.

 

개발을 진행하기 위한 기본 설정은 이로써 마치겠다.

백엔드 교육을 들으며 넓어진 시야만큼 더 좋은 코드를 작성하고, 더 좋은 방법을 찾으며 진행해보겠다.

1차 완성은 8월 4일을 목표로 하고 있다.