본문 바로가기

개발로그

할 일 관리 앱/웹 만들기 - 기능 상세화

728x90

할 일 관리 앱/웹 프로젝트 시작

안녕하세요!

오늘부터 할 일 관리 사이트를 만들어 보려고 합니다.

앞으로 프로젝트도 많이 진행하고, 이 블로그에도 개발 일지를 작성할 예정인데요!

그 첫 시작으로 간단한 할 일 관리 사이트를 제작해보려고 합니다!

많이 부족하겠지만 조금이나마 도움이 되었으면 하는 마음으로 작성해봅니다!

 

먼저 어떻게 시작할까 생각하다가 소프트웨어 공학 시간에 배운 소프트웨어 개발 프로세스 6단계를 생각해봤습니다.

계획 분석 설계 구현 테스트 유지보수

...

간단한 프로젝트이니 간단하게 진행하도록 하였습니다 😂

 

1인으로 혼자 개발할 예정이고 로컬 환경에서 테스트를 완료한 후, 구글 플레이 스토어 및 웹에 배포까지 완료할 예정입니다.


기술스택

  • 백엔드: Spring Boot
  • 프론트엔드: React Native
  • 데이터베이스: MySQL
  • 웹서버/DB 서버: AWS 혹은 Google Cloud (무료 서버 이용)

개발 순서

기능 상세화 -> DB 구축 -> 백엔드 개발 -> 프론트엔드 개발 -> 배포

라고 써놓기는 했지만 저는 기능 단위로 만들 것 같습니다. 기능 상세화, DB 구축, 백엔드 개발을 같이 병행한 후 API가 완성되면 프론트엔드 개발을 진행하고 배포할 것 같습니다. 


할 일 관리 기능 상세화

먼저 기능을 구체화해보도록 하겠습니다.

 

위와 같이 간단하게 Figma를 이용하여 화면을 구상해보았는데요. 해당 페이지는 웹으로 되어 있지만 실제로는 앱에 초점을 맞춰 개발할 예정입니다. 그래서 기능 구체화를 완료한 후 다시 앱 화면도 구상할 예정입니다.

 

각 기능별로 소개 및 기능 구체화 및 DB 구상을 해보도록 하겠습니다.

 

기능 구체화 및  DB 구상

  • 배포 전에는 로컬 환경에 구축할 것이기 때문에 MySQL을 로컬에 설치합니다.
  • sqldbm이라는 사이트에서 구상해보도록 하겠습니다.
  • 삭제 방식은 물리 삭제/논리 삭제 중에서 물리 삭제 방식을 택하겠습니다. 저는 ON DELETE CASCADE가 너무 편하거든요,, ㅎ 물리 삭제의 단점인 복구를 위해 삭제된 데이터를 백업해두는 데이터베이스를 따로 만들도록 하겠습니다.
CREATE DATABASE todo_management default CHARACTER SET UTF8;

로그인/회원가입

  • 일반 회원가입 시 아이디, 비밀번호가 필요합니다.
    • 아이디/비밀번호를 잃어버렸을 경우를 대비해 핸드폰 인증도 넣도록 하겠습니다.
  • 저는 OAuth 로그인이 너무 편하더라고요. 그래서 구글 로그인 기능도 넣을 예정입니다.
    • OAuth 2는 회원가입이 필요 없습니다. 대신 OAuth 2를 위한 Refresh Token 필드가 필요할 것 같습니다.
  • 생일에 축하해주는 이벤트를 넣고 싶기 때문에 생년월일도 받겠습니다.

아이디, 비밀번호, 핸드폰번호, 생년월일, OAuth 여부, Refresh Token, 마지막 접속일, 마지막 수정일, 생성일 정도가 필요할 것 같습니다!

  • phone_num: 핸드폰 번호는 000-0000-0000 형태로 저장할 예정입니다.
  • refresh_token : refresh_token 의 정확한 사이즈를 모르기 때문에 일단 256으로 설정했습니다.
CREATE TABLE `user` (`id`               varchar(100) NOT NULL COMMENT '유저 아이디' ,
 `password`         varchar(100) NOT NULL COMMENT '비밀번호' ,
 `phone_num`        varchar(13) NOT NULL COMMENT '핸드폰번호' ,
 `birthday`         date NULL COMMENT '생년월일' ,
 `is_oauth`         boolean GENERATED ALWAYS AS (false) VIRTUAL COMMENT 'OAuth 여부' ,
 `refresh_token`    varchar(256) GENERATED ALWAYS AS (false) VIRTUAL ,
 `last_login_date`  datetime NOT NULL COMMENT '마지막 로그인 날짜' ,
 `last_update_date` datetime NOT NULL COMMENT '마지막 수정 날짜' ,
 `created_date`     datetime NOT NULL COMMENT '계정 생성 날짜' ,
 PRIMARY KEY (`id`));

할 일 목록

  • 해당 앱의 가장 핵심이죠? 
  • 시작 예정 날짜, 실제로 시작한 날짜, 완료 예정 날짜, 실제로 완료된 날짜
    • 상태는 진행중, 예정일 초과, 예정, 완료, 완료일초과, 완료일 이렇게 여섯 가지가 있습니다. 시작 예정 날짜와는 관계 없이 실제로 시작한 날이 존재할 경우 진행중, 실제로 시작한 날이 비어있고 시작 예정 날짜보다 현재 날짜가 클 경우 예정일초과, 오늘 날짜가 작거나 같을 경우 예정, 실제로 완료된 날짜가 비어 있지 않을 경우 완료, 실제로 완료된 날짜가 비어 있고 완료 예정 날짜가 현재 날짜를 초과한 경우 완료일초과, 현재 날짜와 같은 경우 완료일 로 구분합니다.
    • 사용자는 진행중, 예정, 완료 상태로 변경할 수 있으며 나머지 상태는 자동으로 표시됩니다.
    • 해당 상태는 DB에 저장된 데이터를 기준으로 표시해줄 수 있고, 프론트단에서 처리하면 될 것 같습니다.
  • 추가로 할 일 제목, 내용까지 저장하면 될 것 같습니다. 간단하네요.

시작 예정 날짜, 실제로 시작한 날짜, 완료 예정 날짜, 실제로 완료된 날짜, 제목, 내용, 사용자 ID, 마지막 수정일, 생성일 정도가 필요할 것 같습니다!

  • user_id: user_id는 user 테이블의 id 컬럼을 참조합니다.
CREATE TABLE `todo_list`
(
 `user_id`             varchar(100) NOT NULL,
 `schedule_start_date` datetime NOT NULL,
 `start_date`          datetime NULL,
 `schedule_end_date`   datetime NOT NULL,
 `end_date`            datetime NULL,
 `title`               varchar(256) NOT NULL,
 `content`             text NOT NULL,
 `last_update`         datetime NOT NULL,
 `created_date`        datetime NOT NULL,
 FOREIGN KEY(user_id) REFERENCES user(id) ON DELETE CASCADE
);

하루 끝, 마음 상담소

추가로 하루 끝, 마음 상담소라는 메뉴를 추가하고 싶더라고요. Figma로 화면 구상하려다가 말기는 했는데요.

 할 일 관리 하는 사람이라면 하루를 열심히 살아가고 있는 사람일 것이라고 생각하는데, 마음 상담을 해주는 공간이 있다면 매우 큰 도움이 될 것 같아서 해당 기능을 생각하게 되었습니다. 

 할 일 목록을 기반으로 미래 고민/목표 설정 관련 고민 상담을 해주는 챗봇을 개발하고 싶다고 생각을 하였는데 ChatGPT테스트를 진행해보니 제대로 답변해주지 않는 것 같네요 ㅠㅠ 뭔가 고민을 털어놨는데 제대로 답변해주지 않으면 약간 더 우울해질 것 같아서 이 기능을 추가한다면 어느 정도 제대로 된 답변이 가능했으면 하는데 기술적으로 검토가 더 필요할 것 같습니다. 일단 할 일 목록을 완성한 후 다시 검토해 볼 예정입니다.


간단한 기능 정리 및 DB 생성이 끝났습니다.

다음 시간에는 API를 구현해보겠습니다.

 

끝까지 읽어주셔서 감사합니다.

 

다음 글 -> 할 일 관리 앱/웹 만들기 - Spring Boot를 활용한 API 구현