GTDList 개발 로그 12 - 28 시작

 이게 나의 첫 번째 앱 개발 일지가 될 듯하다. 이전까지는 앱 단위로 일지를 관리해 본 적은 없는데 누군가에게 좀 자극을 받아서 이렇게도 한번 성장을 시도해보려고 한다.  정확히는 어제 한 일들이지만 제때제때 글을 적어서 제대로 포트폴리오를 만들고 싶다. 이것 말고도 다른 아는 사람이랑 같이 하기로 한 프로젝트도 있는데, 아직도 뭔가 배움이 부족한 듯싶어서 여기서 경험 좀 쌓고 가고 싶은 것도 있고...

- 계기 / 목표

 다만 바로 본론으로 들어가기 전에, 첫번째 개발 일지이므로 배경설명을 하는 게 좋겠다. "GTD(Getting Things Done)" List라는 개념은 내가 만든 것은 아니고 TODO List의 개량된 버전이다. 30분 ~ 1시간 단위로 플랜을 짜기보다는 당장 앞에 놓인 일들을 보면서 무엇을 할지 볼 수 있는 그런 생산성을 위한 리스트라고 생각하면 된다. 물론 이미 시중에 나와 있는 앱들도 있을 것이고 그냥 종이에다가 리스트를 작성해도 된다. 하지만, 최근 들어서 또다시 나태해지기 시작한 내가 보여서 채직질 겸 나만의 생산성 시스템을 만들고자 이걸 react + express 앱으로써 개발하기로 했다. (실제로 이것 때문에 웹 생태계에 대한 지식이 조금은 늘어났다.)

- 초기 기획

 우선은 이 앱으로 뭘 이루고 싶은가? 를 Readme.md에 적었는데 다음과 같다.

readme.md

 

 이게 내가 원하는 기본적인 기능들이다. 당장은 중요하지 않은 확장들은 아래의 future expansion에 적어두었다. 그래서 제일 중심이 될 페이지의 레이아웃을 정했는데, 일단은 이렇게 대충... 그림판으로 작성해 두었다.

UX 디자인등은 아직 해본 적도 없다...

 

 1 - 로고

 2- 메뉴 버튼

 3- 프로필 버튼

 아래의 Action + <- 는 task의 카테고리 표시, 카테고리에 task 추가, 카테고리 접기 등의 기능을 가진 ui 버튼과 아래의 데이터 테이블이다.

 못 미더운가? 나도 그렇다... 일단 UX 기획까지 하려고 들면 배가 배꼽보다 커질 것이므로 이 정도로 기획은 정해두고 개발을 시작했다.

- 오늘의 개발

2023 - 12 - 27 커밋리스트

 

 이전에도 좀 만들어 둔게 있지만 거의 라이브러리 / 기초 앱 세팅 정도여서 그렇게 중요하지 않았기에 넘어가도록 하겠다.

 

 이번 개발의 중점은 "자유롭게 수정 가능한 데이터 테이블"이다. 뭔지 잘 감이 안 온다면 구글 스프레드시트를 떠올리면 된다. 셀을 클릭하고 키보드에 바로 입력하는 것만으로도 바로 셀을 수정할 수 있고, 다른 곳을 클릭하면 알아서 저장되는 그런 종류의 앱을 생각했다. 

 

 다만 위쪽의 레이아웃을 완성하는게 먼저였다. border나 background-color 등 이용해서 레이아웃이 제대로 작동하고 있는지 확인하는 용도로도 이용하기로 했고, 중간중간 컴포넌트를 분리해 나가며 여기까지 완성되도록 하였다.

 

 

 처음 만들어진 형태는 위와 같았다. 이 과정에서 material-ui라는 라이브러리를 깔아서 넣어봤는데 위와 같이 테이블이 자동으로 스타일이 딸려와서 만들어 졌다. 근데 정작 코딩을 하다보니 material-ui를 이용해서 테이블을 수정가능하게 만든게 아니라 결국 내가 만든 코드베이스가 수정 가능하게 material-ui를 조작하는 방식에 가깝다고 느꼈다. 그래서 그냥 라이브러리는 빼버리고 기본 html 테이블을 이용해서 만들기로 했고, 그게 아래의 최종 결과이다.

 

아주 간단한 시연 영상

 일단 여기까지가 12-27일에 작업한 내용이다. 코딩의 확장성을 고려하면서 만들어야 했기 때문에 컨트롤하기 쉽게끔 만드는게 중요해서, UI를 바로 작업하는게 쉽지 많은 않다는 것을 알았다. 현재는 고치기는 쉽게 가능하지만 당연히 내가 원하는 편집성과는 거리가 멀다. 현재로써는 각각의 타입에 따라서 다른 input을 넣어야하는 일도 고려해야하고, 새로운 task를 추가하는 것도 그렇고, 해야할게 많다. 이런 것들을 오늘 더 작업할 예정이다.