on
[Team Project] 지피지기 - 생애 첫 팀 프로젝트이자, 이어드림 중간...
[Team Project] 지피지기 - 생애 첫 팀 프로젝트이자, 이어드림 중간...
<프로젝트 개요>
기간: 2021년 11월 8일(월) ~ 2021년 12월 3일(금) (약 4주)
인원: 6명(프론트엔드 2명, 백엔드 2명, 데이터 분석 2명)
역할: 프론트엔드 담당
동기: '지피지기면 백전불태'. 적을 알고 나를 알면 백 번 싸워도 위태롭지 않다는 뜻으로, COVID-19를 알고 우리에게 끼친 영향을 알면 우리가 더 나은 가치 판단을 할 수 있을 것이라는 아이디어에서 프로젝트와 그 이름을 떠올렸습니다.
내용: 교통(서울 주요 지하철역), 문화(영화, 공연), 소비(온오프라인 매출), 생활(유명 포털 사이트 검색 키워드) 등에 걸친 데이터를 시각화 및 분석하여 정보를 제공하는 서비스 프로젝트입니다.
<프로젝트 특징>
프론트엔드
메인 페이지의 두 화면은 서로 위 또는 아래 드래그 한 번만으로 매끄럽게 애니메이션 효과를 보여주며 이동됩니다. 리액트의 axios 라이브러리와 API URL을 통해 데이터를 받아옵니다. 받아온 데이터를 React ApexCharts.js를 통해 그래프로써 시각화합니다. 각각의 그래프와 분석 페이지를 리액트의 Component로 만들어두고, 각각의 버튼으로 useState, 임의의 function 등을 통해 화면에서 변경될 부분반 매끄럽게 전환되도록 구현했습니다.
백엔드
Flask를 통한 서버 구축 AWS의 RDS에 관계형 데이터베이스인 MySQL을 이용하여 저장된 데이터를 프론트엔드와 데이터 분석팀에게 제공 Flask의 SQL-Alchemy와 Data serialization을 통해 데이터를 질의하고, JSON 형태로 반환하여 프론트엔드에서 원하는 형태로 데이터 제공
데이터 분석
수집된 데이터를 모두 전처리하여 로우(Row)와 컬럼(Column) 스타일 통일화 다중 회귀 분석을 통해 데이터에 대한 분석 결과 도출 및 결과 해석
<기여한 부분>
React UI Framework, React Bootstrap, React Material UI 등을 적극 이용하여, 팀원의 의견들에 부합하는 UI를 최대한 구현했습니다. React의 useState, 임의로 생성한 function 등을 통해 사용자가 보고 싶은 그래프 페이지, 분석 페이지 등을 선택할 수 있는 버튼을 구현했습니다. 각 그래프 페이지, 분석 페이지 등을 리액트의 특성인 Component 요소로써 미리 작성해두고, 3-2에서 언급한 버튼 선택에 따라 해당 요소만 매끄럽게 전환될 수 있도록 구현했습니다. 그 외에 데이터 일부 수집 및 회의록 작성, 관리를 진행했습니다.
<아쉬웠던 점 및 배운 점>
1. 프로젝트를 진행함에 있어서 팀원과의 애자일(agile)한 협의 끝에 빠르게 올바른 툴과 라이브러리를 선택하는 것이 중요하다는 것을 배웠습니다.
아쉬웠던 점 중 하나는 총 4주 동안 진행된 프로젝트라는 점, 특히 리액트를 사용하기로 결정했을 때 남은 기한이 약 2주였다는 점이었습니다. 해당 프로젝트에서 데이터의 시각화는 중요한 요소였고, 팀원 모두 최대한 동적인, 인터렉티브한 그래프 시각화를 우선으로 하는 것에 동의했습니다. 그래서 이에 적합한 툴을 정하기 위해 파이썬의 Plotly와 Dash, JavaScript와 Chart.js 등을 조사해보면서 프로젝트의 초반 일주일을 보냈습니다.(어떻게 보면 팀원 모두 프로젝트가 처음이었고, 데이터 수집부터 시각화까지 모든 과정을 팀원 모두가 경험해보자는 취지에서 진행했기 때문에 속도 또한 빠르지 못했습니다.) 그렇게 각자 알아보고 공부해보며 1주차를 큰 성과 없이 보내고, 2주차에서야 각자 역할을 나누고 담당하여 진행하기로 했습니다.
그리고 2주차가 끝날 즈음에서는 파이썬의 Plotly나 JS의 Chart.js보다는 SPA(Single Page Application), Component 특성을 통해 그래프 뿐만 아니라 웹 페이지 자체도 매끄럽게 전환되며 좋은 UX를 줄 수 있다고 판단되는 '리액트(React)'를 사용하기로 결정했습니다. 프론트엔드 2명 모두가 기존에 HTML, CSS, JavaScript 등에 대해 아주 기초적인 지식만 있는 상태에서 리액트를 새로 학습하고 적용하기란 쉽지 않았습니다. 그래서 3주차에는 마감 기한을 맞추는 것이 최우선이라 판단하고 구현에 초점을 맞추어 진행했습니다. 그 과정에서 아래에 언급되는 부분들처럼 리액트에서 추구하는, 보편적인, 바람직한 사용 방식과는 다르게 사용됐을 것이라 판단되는 부분들이 아쉬웠습니다.
2. 리액트의 Material UI, Bootstrap, UI Framework와 useState, Component 특성 외에도 존재하는 유용한 특성과 라이브러리(useEffect, hook, Redux, Axios 등)를 익히거나 올바르게 사용해보지 못한 점이 아쉬웠습니다.
기존에 틀이 이미 거의 구현된 UI Framework의 코드에 Material UI, Bootstrap 등을 통해 요소를 추가함으로써 프로젝트에 필요한 대부분의 UI는 구현할 수 있었습니다. 추가로 useState와 간단한 JS 문법의 함수를 통해 Component를 변경하는 버튼도 구현할 수 있었습니다. 하지만 이 UI를 모두 직접 이해하고 구성한 것이 아니라, 기존의 틀 덕분에 구성할 수 있었다는 점이 아쉬웠습니다.
또한, Axios를 통해 데이터를 API로부터 직접 받아오고 이를 그래프로써 시각화하기 위해 데이터를 처리하는 것을 직접 구현해보지 못한 점도 많이 아쉬웠습니다. 대부분의 서비스에서 프론트엔드는 필수적으로 백엔드 혹은 API로부터 데이터를 주고 받고, 이를 이용할 줄 알아야 한다고 생각합니다. 하지만 이번 프로젝트 기간 동안 useEffect나 Axios 등을 응용할 수 있을 정도로 이해하지는 못하면서 아쉬움을 많이 느꼈고, 추후에 리액트를 다시 본격적으로 공부해야겠다고 다짐하게 됐습니다.
3. 위에서 아쉬웠던 점이 누적되면서 결국 리액트의 Component 속성을 제대로 응용하지 못했고, 리액트 영역의 용량이 커지는 아쉬움을 남겼습니다.
리액트에서는 같거나 비슷한 양식의 페이지들을 Component라는 일종의 틀로써 구현하고, 각 상황에 따라, 받는 데이터에 따라 보여지는 부분만이 변경되는 유연함을 갖고 있습니다. 이 부분은 리액트의 장점인데, 데이터를 처리에 미흡했던 저는 같은 양식의 페이지라도 일일이 해당되는 내용을 포함한 컴포넌트 파일로 생성했습니다. 그리고 그저 경우에 따라 조건문을 통해 보여지는 컴포넌트 파일 자체가 변경되는 방식을 취했습니다. 다행히 변경되는 컴포넌트의 개수가 기한 내에 반복 제작해낼 수 있는 양이었고, 내용 또한 실시간으로 변경되는 것이 아니었기 때문에 프로젝트를 의도대로 구현하는 것에는 문제가 없었습니다. 하지만 만약 이 프로젝트에서 제가 맡은 부분이 실시간 데이터를 받아서 보여주는 부분을 구현하는 것이고, 그 양이 정말 방대한 양이었다면 올바르게 구현해내지 못했을 것이라는 걱정과 의심을 느꼈습니다. 그리고 그렇게 됐다면 결국 팀에게도 피해를 끼쳤을 것입니다. 이런 부분에서 제가 선택한 툴과 라이브러리를 올바르게 이해하고, 기한 내에 구현할 줄 아는 개발자가 좋은 개발자일 것이라고도 생각했습니다.
<프로젝트 결과, UI 및 React 코드>
https://github.com/sjan137/Jipi-jigi
from http://as-j.tistory.com/119 by ccl(A) rewrite - 2021-12-07 19:00:53