[Side Project] 일정 관리 어플 개발 (1) : 시작

✨동기

미루고 미루던, 구상만 하고 있던 사이드 프로젝트를 앞으로 주말에 취미처럼 시작해 보기로 했다.

주말에도 취준에 정처기에 알고리즘에.. 너무 이론 공부만 하면 개발에 흥미가 떨어질 수 있을것 같았기 때문.

 

약 1년정도 꾸준히 사용중인 플래너

 

✨목표

• 기존에 아이패드로 작성중인 30분 단위 플래너를 웹앱으로 구현한다.
• 기록된 내용들 ( 집중한 시간, 메모, 기상시간 등 )을 DB에 저장하여 시각화한다.

 

---

🔍기존 플래너 분석

 

위의 동기와 목표를 바탕으로 피그잼을 통해 간단하게 기존 내가 사용 중이던 플래너를 분석해 보았다.

 

기능 요소

메인테이블 부분

• 오늘 날짜
• Plan - Do 영역 : am6 ~ am2 까지를 30분 단위로 쪼갠 블록들로 구성됨.
• 하루 목표, 다짐 적는 구역
• Memo 구역
• TO DO List

하루 요약 부분

• 목표 블록, 완료한 블럭 체크
• 기상 / 수면 시각
• 하루의 만족도

---

❔고민했던 지점

계획을 짜면서 오늘 계속 고민했던 부분은

"어떤 구현 툴 / 언어를 이용해 구현할 것인지"

이걸 가장 많이 고민했던 것 같다.

 

나름 포트폴리오로 쓰일 프로젝트이니 고려를 하지 않을 수가 없었다.

 

백앤드를 node.js로 사용해 볼까 하다가,

내 손에 익숙하기도 하고 취업시장서 수요도 많은 spring을 사용할 거고,

프론트와는 RESTful API를 이용해 통신할 예정이다.

 

추가로 내가 또 직접 쓸 서비스니까, 서버를 어떻게 구현할지도 고민이었는데,,, (컴터를 24시간 켜 둘 수는 없으니..)

AWS 가입했다가 구글 클라우드 가입했다가 삽질 한 시간이 너무 많다.

 

결국 결정한 건 로컬서 일단 도커에서 만들어두고,

어느 정도 골격이 잡히면 이미지 뽑아서 구글 클라우드 서버에 넣어두는 걸로.. 결정!

 

🖌️디자인

피그마 디자인 파일

난 아무래도.. 예쁜 게 좋다. 뭐든 이왕이면 예쁘고 깔끔한 게 사용하기도 좋고 기분도 좋으니까......

기능을 정리할 겸 페이지 레이아웃을 간단히 잡아봤다.

 

아무래도 너무 난해한 디자인을 적용하면 안 될 것 같아서,

가능하면 기존 쓰던 캘린더와 Notion, Google 캘린더의 UI의 강약을 참고하면서 작업했다.

기본 레이아웃

 

사용 시 레이아웃

일단 웹을 구현한 후, 어플에서의 디자인은 그때 가서 다시 하던지..

 

📚사용할 기술 및 추가 공부 기술

Front end : React , TypeScript

- React Query, Redux를 추가로 공부해서 써먹어보고 싶다.

- Javascript 중급 문법을 공부하면서 프로젝트를 진행하고,

  이후 어느 정도 진행이 되었다 하면 TypeScript로 리팩터링 해보고 싶다.

 

Back end :

Spring (Gradle, mybatis / Model, Controller 만 구현)

- Back end는 우선순위가 낮으니까.. 최대한 시간을 적게 써보자.

- 가능하면 Post로 정보를 주고받도록 하자. (보안을 신경 써 보자)

 

+ RESTful API

리엑트는 Spring의 View역할을 하는데, Spring 안의 JSP처럼 사용할 수는 없으니...

따로 분리해서 REST를 통해 정보를 주고받자. 공부도 할 겸!

 

마무리

일단 01/14 이 정도 계획 완료.

다음 게시물은,, 프론트 기본적인 틀을 잡는 걸 게시하는 걸 목표로 해야겠다.

 

만약 혹시라도 여기까지 보신 분이 계시다면, 언제든 조언과 피드백은 감사히 받도록 하겠습니다.

아무래도 혼자 하는 플젝이라 혼자서만 고민하는 시간이 많네요. 😥