[AI 감성 일기장] 리액트 프로젝트 마이그레이션 계획

이전에 만들었던 리액트 프로젝트 Emotion Diary를 마이그레이션 하려고 한다.

 

기존의 프로젝트는 강의를 따라서 React와 CSS, LocalStorage를 이용해 만든 반응형 웹 애플리케이션이다.

일기는 날짜와 감정, 그날의 기록으로 구성되어 있고, 기본적인 CRUD 기능과 정렬 및 감정 필터링 기능을 구현했었다.

이 프로젝트에 최신 기술 스택을 반영하고 추가 기능을 구현해서 나만의 새로운 AI 감성 일기장을 만들어보려고 한다.

 

기술 스택 변경

빌드 도구

CRA(Create React APP)에서 Vite로 변경하려고 한다.

• Vite는 CRA보다 개발 서버 시작 시간과 빌드 시간이 훨씬 빠르다.
  (미리 번들링을 하지 않고 네이티브 ES 모듈을 활용하기 때문이다.)
• 소스 코드를 수정했을 때 변경 사항이 브라우저에 반영되는 핫 모듈 교체(HMR) 속도가 빠르다.
• 최신 JavaScript 표준을 사용하며, 다양한 최신 개발 기술과 호환성이 높다.

 

프로그래밍 언어

JavaScript에서 TypeScript로 변경하려고 한다.

• 정적 타이핑을 제공하여 런타임에 발생할 수 있는 오류를 줄이고 코드의 안정성과 예측 가능성이 높아진다.
• 개발 중에 자동 완성 및 인터페이스 확인 기능을 제공해 개발 속도와 편의성이 높아진다.
• 엄격한 타이핑 시스템을 통해 잠재적인 오류를 코드 실행 전에 미리 방지할 수 있다.
• 데이터 구조와 함수의 사용법이 명확해져 코드의 유지보수가 용이해진다.

 

스타일링

CSS에서 Tailwind CSS로 변경하려고 한다. 

• Tailwind CSS는 유틸리티 클래스를 중심으로 작동하여 CSS 파일을 따로 작성하지 않고도 class 속성만으로 디자인을 커스터마이징할 수 있다.
• 스타일코드 작성 시간이 줄어들고, 유틸리티를 조합하여 반응형 디자인을 쉽고 빠르게 구현할 수 있다.
• 클래스 기반 접근으로 코드의 일관성 및 재사용성이 증가하며, 유지보수가 간편해진다.

 

추가 구현 기능

토스트 알림

사용자의 편의성을 위해 CRUD 작업의 결과를 보여주는 토스트 알림을 적용해보려고 한다.

 

다크모드

사용자의 시각적 편안함을 위해 Tailwind CSS를 활용하여 다크모드 기능을 추가할 예정이다.

 

AI 답장

OpenAI의 GPT-3 API를 활용하여 사용자가 작성한 일기에 대한 감정을 분석하고, 그에 맞는 답장을 생성하여 보여주는 기능을 추가할 예정이다.