만다라트 프로젝트 - 개발일지 2

그 이후,

Redux 상태관리
Customized 모달창 구현
Firebase 호스팅

 

Redux를 이용하여 상태(데이터)관리와 커스텀 모달창 구현이 필요했었습니다. 1월 초에 두가지를 모두 완료하고, 상태에 따른 CSS 변화를 주는 등의 기능을 추가해보았습니다. 그 외에 전체적인 CSS 손질이 필요해서 삽질을 조금 했었구요. 현재는 호스팅을 통해 웹 어플리케이션 배포를 했으며, 컴포넌트 트리 등을 문서화해보려고 하고 있습니다. 보통 어떻게 프로젝트를 문서화하는지 몰라서 주먹구구식으로 하고있네요..

 

현재의 모습

MANDA LA ART.

현재는 다음과 같은 모습으로 완성되었습니다. 배포된 웹 어플리케이션은 이곳에서 확인가능하며, 코드는 깃허브에서 확인할 수 있습니다. 이전에 비해서는 (개인적으로) 완성도가 조금 더 높아진 느낌입니다. 하지만 아직까지도 완성도를 높이기엔 많이 부족합니다. 기능면이나 디자인, 최적화도 그렇구요.

 

이렇게 동작합니다

만다라트 계획표는 중심에 위치한 한개의 메인 목표와 8개의 서브목표로 구성됩니다. 그리고, 각 서브목표는 또다시 8개의 목표로 나뉘어집니다. 먼저, 홈에서 중심의 목표를 클릭하여 모달창을 오픈합니다.

그 후, 위의 예시처럼 각 서브목표를 클릭하여 계획표를 채워갑니다.

 

 메인 홈에서는 각 목표가 세워짐에 따라 타일의 색상이 변경됩니다. 

서브 목표를 모두 채우면 해당 목표 타일의 배경색상이 더욱 짙어집니다.

 

리액트 컴포넌트 트리

리액트 컴포넌트 트리는 위와 같습니다. 

• Top, Main, Footer의 영역으로 나누어지며, 핵심 부분은 Main입니다.
• 확장성을 고려하여 차후에 기능이 추가된다면 이용될 수 있는 Side부분을 Main내부에 구현 해두었습니다.
• 계획표가 동작하는 부분은 Article 컴포넌트이며, 음영으로 표시된 BoxContainer, Box는 Redux의 상태에 따라 변화됩니다.
• Modal, InputModal은 직접 제작한 모달창으로, 사용자와의 상호작용에 따라 열림/닫힘이 이루어집니다. 

 

서비스 배포

현재 Git을 이용하여 버전관리를 하고 있으며, Firebase Hosting을 통해 배포하고 있습니다.

 

더 나아간다면

• Firebase Authentication을 통한 회원관리
• Firebase Database를 통한 회원별 데이터 관리
• jspdf, html2canvas 라이브러리를 통한 pdf export기능 구현
• react router를 통한 모바일 버전 구현
• SNS 등을 통한 공유

가능하다면 위의 기능들을 모두 구현하면 완성도를 갖춘 서비스가 될 수 있을거라 생각합니다. 하지만, 애초에 이 프로젝트가 리액트와 친숙해지기 위해 시작된 프로젝트였기때문에 어느정도까지 더 구현을 할지 아직은 잘 모르겠네요. 

 

부족한 점

리액트 컴포넌트 사용의 장점 중 재사용성을 크게 살리지 못했다는 느낌이 큽니다. 모달창 같은 경우엔, 현재 제 프로젝트에서 2가지가 있는데, 이 모달창을 한개의 컴포너트로 제작한 후 용도에 따라 달리 사용해야하 하는것인지.. 지금의 제가 생각하기론 둘의 모달창이 서로 다른 목표와 기능을 갖고 있기에 별도의 컴포넌트로써 동작해야한다고 생각했습니다. 이 부분에 대해서는 조금 더 생각해보고 리팩토링을 해야할 것 같습니다.

 

불필요한 랜더링이 존재한다고 생각합니다. 특정 상태만 변경했을 뿐인데, 전체 타일이 재렌더링 되고 있는 것으로 파악했습니다. 특정 상태와 의존관계에 있는 컴포넌트들만 렌더링이 일어나는 것이 최적화가 된 것이라 생각합니다. 어떻게 하면 이 문제를 풀 수 있을지 찾아봐야할것 같네요.