DSC KR Solution Challenge hackathon

 

 

 

해커톤이 끝난 후에 슬랙의 스레드와 커밋 메세지, 깃헙의 여러 기록을 기반으로 회고해보려 한다.

flutter 에 firebase 를 연동하여 진행했다.

나는 서버를 위주로 개발했다.

github.com/qwa310/DSC-Hackathon

---

해커톤 정보

나는 DSC member 자격으로 이 해커톤에 참여하게 되었다.

결과물

단 일주일만에 2명이 개발에 참여한 어플의 시연 영상이다.

뭔가 이상한 광고 멘트같지만 앱 개발은 맹세코 난생 처음이고 사실 상 첫 개발 경험과 다르지 않았던 프로젝트

✨ 01.30: 주제 선정

전체 OT가 끝나고 팀 매칭 결과가 발표되었다.

서로 다 다른 학교의 사람들과 온라인(슬랙)으로 소통하며 진행했다.

4명이 한 팀이 되었는데 각 사람 당 2개의 아이디어를 제안하기로 했다.

SC Solution Challenge에서 공식 지정한 주제인 UN 지속가능발전목표 UN-SDGs (UN Sustainable Development Goals) 17가지 중 한 가지에 부합되면 되는데 사실상 자유 주제나 마찬가지처럼 느껴졌다. DSC ewha 멤버분들과 오프라인 회의를 하고 지하철 타고 집 오는 길에 2시간 동안 머리에 쥐날정도로 열심히 생각했다.평소에 많은 생각을 안하고 살아서 없는 아이디어를 뚝딱 내 놓으라고 하니 너무 어려웠다.

해커톤 기간 중에 제일 정신적으로 스트레스를 많이 받은 날이었다. 아이디어 노트를 하나 생성해서 축적해놓을 필요를 느꼈다. 나는 11번과 13번에 관련된 주제를 낼 수 있었고 투표를 통해 다른 사람의 아이디어가 채택되었다. (근데 내 아이디어도 구현할만 하다. 언젠가 되지 않을까?)

 

결론적으로, 본인이 소비하는 전기량을 인지하고 스스로 점검하면서 일상 속에서 문제를 개선해 나갈 수 있도록 도울 수 있는 어플을 주제로 정했다.

✨ 01.31: idea 회의, 개발 스택 선정

idea 회의

다음 날 이어서 아이디어를 구체화했다. 정민님의 지휘로 아이디어는 순조롭게 구체화되었다.

우리 어플의 이름으로 Saver 가 채택되었고 우리 팀 이름은 Power Rangers 가 되었다.

개발 스택 선정

이후 개발 스택에 대해 사전 조사를 했는데 위와 같은 결과가 나왔다.

사실상 내가 (주황색) 제일 문제였다.

한 분은 flutter로 앱 개발을 해보셨고

한 분은 개발자로 지원하셨지만 아직 개발을 한 번도 해보지 못했고 flutter도 사실상 잘 모른다고 하셨다.

나 같은 경우는, 지원서에 가능한 스택으로 당당하게 firebase 하나 썼던지라 내가 당연하게 맞춰드리는 게 맞았다.

아이디어는 앱을 개발하는 것으로 흘러갔고 앱 개발을 전혀 접해본 적이 없었던 나는 심각성을 느꼈다.

 

일단 앱 개발을 하는 주변 사람들에게 SOS를 청했다.

덕분에 아주 빠르게 안드로이드 스튜디오 사용법을 어렴풋이 볼 수 있었다.

불행 중 다행인 것은 기존에 스프링/스프링 부트를 intelliJ로 개발했는데 Android Studio 툴이 inteiiJ 기반 앱 개발 툴이라서 어렵지 않게 입문할 수 있었다.

 

개발 경험이 너무 없어서 불가능에 도전하는 기분이었다.

개발 스택은 flutter + firebase로 정하게 되었고 나는 너무너무 불안한 마음으로 잠에 들었다.

✨ 02.01: 개발 환경 구축

설치부터...

일어나서 일단 android studio, flutter 설치부터 했다. 어제 정민님께 repo 생성과 프로젝트 initial을 부탁드렸는데 해주셔서 clone 후 실행해보았다. 당연하지만 실행이 안됐다. 2시간 동안 검색해보면서 일단 실행은 되도록 만들었다.

마지막 기획 회의

이후 오후 1시에 같이 회의하면서 아이디어를 더욱 구체화했다. 우려했던 것에 비해 회의는 정말정말 빨리 끝났다.

책 빌리러 도서관 !

정말로 이젠 구현이 문제였다. 회의가 끝나고 바로 컴퓨터 앞에서 일어나서 도서관을 향했고 정직하게 flutter, 파이어베이스 키워드로 검색되는 두 책을 집어왔다.

집에 와서 일단 책을 펼쳐들었다.

flutter는 dart란 언어로 개발을 하는데 난생 처음 듣는 언어라서 일단 문법부터 봤다. 객체지향(java) + js 문법이 막 섞여서 정신이 없었다. 별 멋진 기능은 다 지원하는데 내가 흡수를 하나도 못하는 기분이었다. 또한  js 는 바닐라 수준 정도로 알고 있다가 es 문법을 알 필요성을 느껴 조금씩 익히고 있었는데 콜백 개념을 정확히 모르는 나에겐 쥐약이 따로 없었다. 그리고 언어가 indentation은 또 왜이래? 기본 4칸 정도는 시원시원하게 탭 되어야하는 건 아니냐고. 안드로이드 스튜디오는 엘리먼트로 접근하던데 dart는 코딩을 나열하는 식으로 하고 무슨 2칸씩 들여쓰기하는 형식이라 코드가 눈에 들어오지 않았다. 초반에는 너무 답답하다고 느꼈다.

PR #1 firebase 연동

anyway, 이 책을 통해 일단 프로젝트 구조부터 익혔고 Dart 언어, 간단한 실습으로 짧은 시간에 공부했다.

이후 firebase 프로젝트를 생성하고 생성된 firebase 프로젝트와 flutter 프로젝트 연동했다.

그리고 bigdata.kepco.co.kr/cmsmain.do?scode=S01&pcode=000171&redirect=Y 이 페이지의 데이터 가공해서 아래와 같이 db에 저장했다.

이렇게 하루가 끝났다.

✨ 02.02: 회원가입/로그인

PR #3 회원가입 기능 구현

회원가입을 하면 회원이 생성되고 db에 회원 정보가 저장되는 코드를 pr 했다.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MainPage());
}

firebase를 사용할 수 있도록 메인에서 initial 하는 코드를 쓰고

  void _createUser(User user) {
    auth.createUserWithEmailAndPassword(email: user.email, password: user.password)
        .then((cred) => {
          firestore
            .collection('user')
            .doc(cred.user.uid)
            .set({
              'uid': cred.user.uid,
              'name': user.name,
              'email': user.email,
              'region': user.region
            })

user 클래스에 사용자가 입력한 값을 담아 db에 이름, 이메일, 지역 정보를 저장했다.

회원 가입 시 생성된 계정 고유의 uid를 db 문서에 저장해 이후 로그인된 user를 더욱 찾기 쉽도록 구현했다.

PR #6 로그인 기능 구현, 회원가입/로그인 중 error catch

로그인 기능도 firebase authentication 기능을 활용하여 쉽게 코딩할 수 있었다.

하지만 에러를 캐치하는 과정에서 시간이 오래 걸렸다.

error catch 코드를 분명 썼는데 캐치를 못했다.

stackoverflow.com/questions/54687944/how-to-catch-exception-of-asynchronous-function-in-flutter

이 글을 통해 해결할 수 있었는데, 원하는 기능이 실행된 후 에러를 확인해야하는데 즉 비동기 함수의 예외를 체크해야하는데 고려하지 않고 코드를 짰기 때문이다.

catch (e) {
      if (e.code == 'email-already-in-use') {
        print('The account already exists for that email.');
      } else if (e.code == 'invalid-email') {
        print('The email address is badly formatted.');
      } else if (e.code == 'weak-password') {
        print('The password provided is too weak.');
      } else {
        print(e);
      }
    }

로그인 기능도

• id인 email을 등록된 회원 정보에서 찾을 수 없을 때는 e.code == user-not-found 코드로,
• 패스워드가 틀렸을 때는 e.code == wrong-password 코드로

에러를 핸들링할 수 있었다.

 

위와 같이 코드를 넘겨드렸고 에러가 발생한 이후 팝업 창을 통해 사용자에게 알려주는 창을 생성하는 부분을 정민님께서 바로 구현해주셨다. (PR #7)

 

실시간 회의

각자 가지고 있는 issue 에 대해서 이야기를 했다. 디자이너 분께서는 위와 같이 1차 와이어 프레임 완성 본을 건네주셨다. 전날 회의를 통해 이야기했던 모든 기능에 대해서 화면의 뼈대를 그려오셨다. 설명을 들으면서 무엇을 어떻게 구현해야 할지 더 확실히 와닿았다. 디자이너가 있는 개발과 없는 개발의 차이점에 대해서 많이 느낀 회의였다.

✨ 02.03: Create, welcome 페이지

PR #8 Create data

프론트 정민님이 구현해두신 전자기기 종류와 사용시간 정보 입력 페이지에서 submit 버튼을 누르면

아래와 같이 로그인 된 해당 유저의 고유 id에 정보가 저장되도록 기능을 구현했다.

하지만 이 db 구조는 다 바뀐다. firebase가 지원하는 db에는 firestore와 realtime database 두 종류가 있는데 둘 다 NoSQL 이다. 근데 나는 이 형태의 데이터 베이스를 전혀 이해하지 못한 상태에서 일단 '정보를 저장해보자'는 관점에만 주목했기 때문에 1차적인 목표는 달성해두어서 멈추었다.

PR #9 welcome page

이후 구현된 프론트 페이지가 없어서 어떤 작업을 계속해야할지 조금 방황했다. 그러다가 나도 그럼 프론트를 작업해봐야 겠다고 생각하곤 실행에 옮겼다. 보통 앱을 실행하면 앱이 로딩될 때 보여지는 시작 페이지가 있는데 제일 쉬워보여서 이 페이지를 건들였다. 이렇게 구현하는 게 맞나 싶었지만 임의로 지정한 4초가 지나면 계정 정보의 유무를 판단하여 로그인이 되어 있지 않다면 로그인 페이지로 넘어가고, 계정 정보가 있다면 마이페이지로 넘어가도록 구현했다.

실시간 회의

 

✨ 02.04: Read

PR #12 GET mypage data

그동안 CRUD 중 create 에 해당하는 작업만 해왔고 read 관련 작업을 처음 시도해보는 날이었다. 프론트 정민 님이 마이페이지를 구현하셔서 이 페이지에 로그인된 유저의 정보를 호출해 보여주는 작업을 했다. 가장 간단한 read 작업이기도 했다. 

firestore의 인스턴스를 생성해서 데이터를 가져와 코드를 작성했는데 정보를 가져오기도 전에 마이페이지가 그려졌다가 정보를 가져온 뒤 다시 마이페이지가 호출되는 것을 확인할 수 있었다. request/response 개념을 잘 몰라서 나타나는 오류이었다.

      body: StreamBuilder(
        stream: currentStream,
        builder: (context, AsyncSnapshot<DocumentSnapshot> snapshot) {
          if (!snapshot.hasData) {
            return CircularProgressIndicator();
          } return MyPageView(snapshot.data);
        },

나는 위의 문제를 해결하기 위해 StreamBuilder를 활용했다. (이에 대해 알 수 있는 1분 동영상인데 정말 도움이 많이 되었다. # ) 간단하게 데이터를 불러오는 로직을 설명하자면, 자동으로 실행되는 init 함수를 통해 데이터를 먼저 불러온다. 아직 데이터가 없는 경우 로딩 페이지 ( CircluarProgressIndicator() - 빙글빙글 도는 페이지)를 보여주다가 데이터를 잘 가져오면 마이페이지로 데이터를 넘긴다. 이후 MyPageView 에서 데이터값에 접근하여 렌더링된 페이지가 보이게 된다.

이 과정에서 데이터를 가지고 와 가공하는 부분과 view 페이지를 나누었다. 한 파일 내에서 코드가 길어지는 건 시간 문제였고 가독성 또한 많이 떨어져서 이렇게 작업했다. 정말 간단한 read 작업이지만 맨 땅에 구글링하면서 코드를 짜서 시간이 오래 걸렸던 기억이 난다.

실시간 회의

디자이너 민서님이 3차에 걸쳐서 최종적인 페이지 구성을 완료하셨다. 이 파일을 보면서 디자인의 의도를 설명 들으면서 디자인과 관련된 논의는 끝나게 되었다. 이어서 여름님께 부탁드렸던 `전자기기 별 평균적인 소비 전력 조사 파일`을 받고 관련 설명을 들었다. 프론트 정민님과 서버 파트를 맡은 나도 간단하게 이슈에 대해서 나누었다. 최종 발표 영상 제출과 관련해서 역할을 분담한 뒤 회의를 종료했다.

✨ 02.05: 기능 만들기

PR #17 add 60% process

프론트 구현 속도보다 백엔드 구현 속도가 더 빨랐다. 프론트와 백엔드가 많이 유기적으로 연동되는 프로젝트의 경우, 보통 프론트를 먼저 대충 구현한 뒤 데이터를 입히는 식으로  작업해왔다. 해당 프로젝트도 앞서 설명한 경우에 속했는데, 이번에는 디자이너분께서 제시해주신 페이지를 토대로 백엔드 로직을 먼저 작성할 수 있었다.

 

결과적으로 복잡하게 파일이 많아져버렸다. 이와 관련된 내용을 안내해드릴 필요를 느껴서 프론트 정민 님이 보기 쉽게 그림을 한 장 그려서 pr에 그림도 첨부했다.  이제 와서 생각하니 xd 라는 아주 똑똑한 툴을 쓰고 있는데 왜 손수 작성했나 싶다.

 

간단하게 작업한 내용을 리스트업 해보았다.

• /calendar 이동 시 현재 년도 함수로 불러오기
• user collection 의 db 모델링 하기
• /crud 바뀐 db 모델에 맞춰 create 문 수정하기
• /my_power  전 달의 소비 전력과 현재 소비 전력 
• /my_power2 페이지 생성하기
• /my_town 유저(유저의 도시) 불러오기
• /home 유저 정보 불러오고, 네비게이션 역할을 할 수 있도록 생성된 페이지 연결하기

db는 아래와 같이 바뀌었다.

user (collection) ㅡ uid (document) ㅡ 2021-02 (collection) ㅡ device (document) 형식으로 이어지고 있는 것을 볼 수 있다. 테스팅해보면서 이 모형이 데이터를 불러와 계산하는 작업을 할 때 편하다고 생각해서 이렇게 진행했다.  2~3번 정도 갈아엎었던 걸로 기억한다.

 

위 작업들 중 가장 시간이 오래 걸렸던 페이지는 /my_power 페이지이다.

나의 경우에, 데이터를 2번 읽어오는 작업을 하는데 StreamBuilder를 2번 쓰도록 작업했다. 기존에 한 번 데이터를 읽어올 때 StreamBuilder를 썼던 것을 변형해서 썼다. 구글링을 토대로 최대한 쉽게 쉽게 구현했고 일반적인 방법인지는 잘 모르겠다. 나는 이 문제로 꽤 고생을 했던 기억이 있어서 코드 전문을 첨부해둔다.

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'my_power_page_view.dart';

class MyPowerPage extends StatefulWidget {
  final String date;
  num total = 0;
  MyPowerPage (this.date);

  @override
  _MyPowerPageState createState() => _MyPowerPageState();
}

class _MyPowerPageState extends State<MyPowerPage> {
  FirebaseFirestore firestore = FirebaseFirestore.instance;
  FirebaseAuth auth = FirebaseAuth.instance;
  Stream<QuerySnapshot> currentStream;

  void initState() { // [1] 지난 달의 전력 소비량 불러오기
    super.initState();
    currentStream =
        firestore.collection('user').doc(auth.currentUser.uid).collection(widget.date).snapshots();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder(
        stream: currentStream,
        builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
          if (!snapshot.hasData) {
            return CircularProgressIndicator();
          }
          // [2] lastMonth의 total 계산하기
          snapshot.data.docs.forEach((element) {
            widget.total += element['calculate'];
          });
          return initCurrent(); // [3] initCurrent() 호출하기
        },
      ),
    );
  }
  
  initCurrent() { // [4] 현재 달의 전력 소비량을 order에 맞게 불러와 view에 데이터 넘겨주기
    Stream<QuerySnapshot> document =
    firestore.collection('user').doc(auth.currentUser.uid).collection(widget.date)
        .orderBy('calculate', descending: true).snapshots();

    return StreamBuilder(
      stream: document,
      builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (!snapshot.hasData) {
          return CircularProgressIndicator();
        } return MyPowerPageView(widget.date, snapshot.data.docs, widget.total);
      },
    );
  }
}

 

정말 많은 페이지를 생성해서 작업을 해두어서 나조차도 커밋 단위를 어떻게 쪼개서 어떤 메세지를 적어야 할 지 고민을 많이 하게 될 것 같아 무턱대고 한꺼번에 커밋해버렸는데 더 고민해보고 적을 걸 그랬다. 코드 작성했던 과정이 잘 드러나지 않아 아쉬움을 남는다.

실시간 회의

다음 날 구현 데모 영상을 제출해야 해서 영상 제작을 맡으신 민서님께서 진행 상황에 대해서 여쭤보셨었다. 금요일날 10시 20분부터 진행한 회의가 난 아직도 생생하다. 회의에서 내가 현재까지 구현된 어플 시연과 함께 진행 상황을 자세히 설명했다. 하지만 저 질문에는 나도 내가 어디까지 구현할 수 있을지 감이 안잡혀서 불안한 감정의 연속이었다. 그래서 다음 날 9시 정도까지 구현된 내용으로 기능 리스트 업 한 후 기능 관련 대본을 짠다고 하셨다.

✨ 02.06: 밤샘, 제출

이젠 더 이상 물러날 곳이 없었다. 완성 못한 기능은 수두룩인데 완성을 해야 했다. 열심히 달렸다 !

PR #19 add update, delete logic, calculate logic

위 페이지의 update 기능

firestore
          .collection('electronics').where("device", isEqualTo: device).get()
          .then((QuerySnapshot ds) {
        var defaultValue = ds.docs[0]['Wh'];
        firestore
            .collection('user')
            .doc(auth.currentUser.uid)
            .collection(_getCurrentYearAndMonth())
            .doc(device)
            .set({
          'device': device,
          'usage_time': double.parse(time),
          'calculate': double.parse(time) * double.parse(defaultValue)
        }).then((value) {
          Navigator.pushReplacementNamed(context, '/crud');

update의 경우 create를 실행하는 경우와 100% 코드가 동일하게 써도 작동을 한다. firebase의 똑똑한 부분을 느낄 수 있다. 하지만 이렇게 작성하는 바람에, created_date 와 modified_date 에 동일한 값이 저장된다. 하지만 우리의 서비스에서는 수정 시간을 보여주는 페이지도 없고, 중요하지 않아서 빼버렸다.

해당 코드를 조금 더 설명해보려 한다. 사용한 전자기기와 사용한 시간을 입력받아 저장 버튼을 누르면 위의 코드를 탄다. 1. 전자기기의 시간 당 평균적인 소비 전력량을 db에 저장해두었는데 그 값을 찾아온다. 2. 사용자가 입력한 정보와 함께 전자기기가 사용한 전력 소비량을 계산한 값을 db에 저장한다. 3. 업데이트된 정보로 해당 페이지의 데이터를 다시 불러온다.

 

위 페이지의 delete 기능

    firestore
        .collection('user')
        .doc(auth.currentUser.uid)
        .collection(_getCurrentYearAndMonth())
        .doc(device)
        .delete()
        .then((value) {
      Navigator.pushReplacementNamed(context, '/crud');

지우고 싶은 정보가 user collection의 uid로 된 doc 안에 전자 장비 이름으로 되어 있어서 어렵지 않게 삭제 기능을 추가했다. 이 코드도 간단하게 삭제한 후 삭제되었음을 바로 보여주기 위해 해당 데이터를 다시 불러올 수 있도록 Navigator.pushReplacementNamed() 를 사용했다.

 

소비 전력 계산 과정

날짜를 다루는 건 생각보다 까다롭다. 일단 제공해주는 라이브러리도 잘 활용해야 하고 변수 이름을 잘 지어야한다. 그래야 계산식을 쓰는 과정에서 내가 원하는 값을 제대로 실수없이 쓸 수 있고 후에 유지보수도 편할 것이다. 바로 직전 학기에 자바프로그래밍 및 실습 과목에서 기말이 자율 프로젝트로 대체되어서 나는 달력 기능이 있는 gui를 간단하게 개발했었는데 그 때 경험이 도움이 되어서 더 빠르게 작성할 수 있었다.

 

여기까지의 개발하고 오전 3시 정각에 Pull Request를 보냈다.

PR #20 give parameter clicked month info

이제 사용자가 호출한 년-달이 언제인지 파라미터로 받아오는 작업만 남았다. 근데 이 작업이 정말 만만치 않았다.

"2021-02"와 같이 String으로 클릭한 달의 값을 인자로 받기 위해서 onGenerateRoute 를 활용하는 것이 정석적인 방법이라고 해서 도입해봤다. parameter로 주는 것 자체는 어렵지 않았는데 데이터를 불러오기 위해서 initState에 값을 넘겨주어야 해서 너무 까다로웠다.
아래와 같이 코드를 쓰면 실행은 되는데 어플리케이션을 실행할 때마다 추상적인 에러 로그가 뜬다. 꼬박 3시간동안 이 작업을 하면서 stackoverflow를 정말 정독했는데 더 이상 시간을 지체할 수 없다고 생각해서 이 늪에서 일단 벗어나기로 했다. 나는 아래와 같이 구현했다.

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'my_page.dart';
import 'welcome.dart';
// ... 생략
import 'my_power_page.dart';
import 'my_power2_page.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MainPage());
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Main Page',
      debugShowCheckedModeBanner: false,
      initialRoute: '/welcome',
      routes: {
        '/welcome': (context) => Welcome(),
        '/my_page': (context) => MyPage(),
      },
      onGenerateRoute: (RouteSettings settings) {
        var routes = <String, WidgetBuilder>{
          'my_power': (context) => MyPowerPage(settings.arguments),
          'my_power2': (context) => MyPower2Page(settings.arguments),
          // ... 생략
        };
        WidgetBuilder builder = routes[settings.name];
        return MaterialPageRoute(builder: (ctx) => builder(ctx));
      },
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
    );
  }
}

class MyPowerPage extends StatefulWidget {
  final String date;

  MyPowerPage(this.date); // 생성자를 통해 인자를 받는다.

  num totalLast = 0;
  num totalCurrent = 0;

  @override
  _MyPowerPageState createState() => _MyPowerPageState();
}

class _MyPowerPageState extends State<MyPowerPage> {
  FirebaseFirestore firestore = FirebaseFirestore.instance;
  FirebaseAuth auth = FirebaseAuth.instance;
  Stream<QuerySnapshot> currentStream;

  // [1] lastMonth 불러오기
  void initState() {
    super.initState();
    DateInfo dateInfo = new DateInfo(widget.date); // widget.date 로 활용 가능
    currentStream = firestore
        .collection('user')
        .doc(auth.currentUser.uid)
        .collection(dateInfo.lastYear + "-" + dateInfo.lastMonth)
        .snapshots();
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder(
        stream: currentStream,
        builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
          print(snapshot);
          if (!snapshot.hasData) {
            return CircularProgressIndicator();
          }
          // [2] lastMonth의 total 계산하기
          snapshot.data.docs.forEach((element) {
            widget.totalLast += element['calculate'];
          });
          return initCurrent();
        },
      ),
    );
  }
  
  // [3] currentMonth, calculate order에 맞게 불러와 view에 넘겨주기
  initCurrent() {
    Stream<QuerySnapshot> document = firestore
        .collection('user')
        .doc(auth.currentUser.uid)
        .collection(widget.date)
        .orderBy('calculate', descending: true)
        .snapshots();

    return StreamBuilder(
      stream: document,
      builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (!snapshot.hasData) {
          return CircularProgressIndicator();
        }
        // [2] lastMonth의 total 계산하기
        snapshot.data.docs.forEach((element) {
          widget.totalCurrent += element['calculate'];
        });
        DateInfo dateInfo = new DateInfo(widget.date);
        if (DateFormat('yyyyMM').format(DateTime.now()) ==
            dateInfo.currentYear + dateInfo.currentMonth) {
          // 현재를 호출한 경우 -> 계산방식: 현재 사용량 - 전달동안사용량 * (현재 일 수/전 달의 일 수)
          var result = widget.totalCurrent -
              (widget.totalLast *
                  num.parse(dateInfo.currentDate) /
                  num.parse(dateInfo.lastMonthOfDay));
          return MyPowerPageView(widget.date, snapshot.data.docs, result);
        } else {
          // 과거의 달을 호출한 경우 -> 계산방식: 과거의 달 사용량 - 과거의 달의 직 전달 사용량
          var result = widget.totalCurrent - widget.totalLast;
          return MyPowerPageView(widget.date, snapshot.data.docs, result);
        }
      },
    );
  }
}

오전 6:46, PR 했다.

PR #21 fix bug

오전 8:02, 발표 대본을 써주시는 민서 님께 여기까지 구현된 기능을 리스트 업 해서 보내드렸다.

PR #23 fix bug

오전 11:42, Pull Request를 보냈고 여기까지로 기능 구현은 마무리했다.

PR #25~26 apply font, Style up

데모 영상을 찍으려고 하는데 기능은 잘 보이지만 프론트에서 거슬리는 부분이 많았다. 먼저 NanumSquare 폰트를 적용했는데 폰트를 적용하자마자 내가 했던 프로젝트가 맞나 싶을 정도로 너무 예뻐져서 가슴이 웅장해졌다 ㅠ_ㅠ 프론트는 거의 모르지만 지금까지 구현된 코드와 눈치껏 잘 활용해 화면 수정과 동시에 데모 영상을 부분적으로 찍어 드렸다. 다시 내역들을 보니 프론트도 생각보다 많이 고쳤다 !

PR #29 end of hackathon, 제출

• feat(crud): update dropdownbar to textfield - /crud 페이지에서 사용 시간을 사용자가 직접 입력받을 수 있도록 수정
• 이 외 코드 스타일 맞추기, 필요 없는 페이지 삭제

이로써 오후 4시 23으로 해커톤 마감 시간인 5시 이전으로 마지막 pr를 보냈다. 뭐 먹을 여유도 없었는데 밥 몇 숟가락 뜨고 바로 가서 잤던 기억이 난다.

✨ 02.07: 보완

PR #30 link calendar data and fix bugs

다음날 일어나 다시 어플을 실행해봤는데 아쉬운 부분들이 눈에 밟혔다. 그래서 다시 컴퓨터를 켜서 이어서 조금 작업했다.

• 캘린더에서 년도 이동 후 해당한 년도의 정보를 보여주지 않는 버그 수정
• crud 페이지에서 뒤로가기를 누르면 나오는 홈페이지에서의 정보가 올바르게 계산되지 않았던 버그 수정
  • 이 부분은 구글링해서 onWillPop을 도입해봤다.

    return new WillPopScope (// 뒤로가기 버튼 눌렀을 때
      onWillPop: () {  // 쌓인 위젯을 삭제하고 홈으로 이동(데이터새로불러와야해서)
        Navigator.pushNamedAndRemoveUntil(context, '/home', (route) => false);
        return;
      },

• 어떤 순서로 정렬된 페이지인지 알려주도록 타이핑 수정
  • 사용자가 어떤 정보를 보고 있는지 더 직관적으로 알 수 있도록 아래와 같이 고쳤다.

느낀 점

불가능하다고 매일 생각했는데 생각보다 너무 완성도 있게 마무리 되었다. (적어도 나는 그렇게 생각한다...!) 그래서 나도 내가 신기했다. 어라? 진짜 내가 개발을 하고 있네? 가 전체적인 후기이다. 그동안 개발 자체가 사실 무엇인지 잘 감도 안오고 배움의 끝이 보이지 않아서 지칠 즈음이었는데 성장 가능성을 느낄 수 있었던 소중한 시간이 되었다. 막중한 책임감으로 힘들었던 건 사실이지만 단 시간에 성장해버린 기분이다. 이 성장하는 느낌이 정말 짜릿하다. 정말 작은 로직부터 하나씩 구현했을 때 밀려오는 성취감이 다시 동력이 되는 걸 느꼈다. 이건 마치 무한 동력이 아닐까 싶은 기분이었다. 아... 이래서 개발자를 하나보다. 힘들지만 정말 매력 있는 직업이다.

 

그동안 너무 힘들게 삽질했던 아주 작은 경험 경험들이 확실히 도움이 되었다. db 보면 회원 가입 시 생성된 유저의 고유아이디(uid)를 user collection의 document 이름으로 매우 중요하게 쓰고 있는데, 이전에 프로젝트하면서 이거 저장하는데만 진짜로 24시간 삽질했었다. 꼬박 하루를 온전히! 쓰고 다음날 일어나서도 8시간은 저것만 찾아봤다. 그 때는 정말 저것 때문에 온갖 욕은 다 하고 미칠 뻔 했던... 기억이 매우 생생하다. 나중에 또 firebase 로 프로젝트를 하게 될지는 모르겠지만 이 때 개발했던 코드 조각조각이 필요해지는 날이 있을 것 같다.

 

평소 java로 개발을 하다가 dart란 새로운 언어를 접하게 되었는데, 언어가 달라도 사실 제공해주는 메서드들이 크게 다르지 않아서 눈치껏 오류 빨간줄 안뜨게 작성하면 돌아갔다. 이 부분도 사실 좀 신기했다. 그렇다고 당연한 말이지만 잘 다룬다는 건 아니다. 다시 flutter로 개발할 기회가 생기면 개념 훑어주는 책이나 강의를 다시 보는 시간을 가질 것이다.경험은 해봤으니 빠르게 익히고 더 올바른 방법으로 구현할 수 있을 것 같다. 그리고 js 의 es 문법들은 익히고 있어야 할 것 같다. 학기가 시작하고 시간이 나면 틈틈히 간단히 공부할 것이다. 

 

마지막으로 팀도 잘 만난 것 같다 ! 열정 가득하신 정민님 덕분에 지치지만 프론트 구현하고 계실 정민님 생각하면서 컴퓨터 앞에 앉아있을 수 있었던 것 같다. 매일 온라인으로 사진은 찍었는데 실제로 뵐 기회가 생겼으면 좋겠다 *-*