listplz 데이터 상호작용

 

listplz의 데이터 관련해서 2~3일정도 소모한 것 같습니다.
원치 않게 데이터가 저장되거나 원하는 데이터만 가져오지 못해 더욱 시간이 걸렸던 것 같습니다.

 

1. 사용자 인터페이스(UI)에서의 동작

 

MainPage에서 ADD버튼을 클릭하여 새로운 일(task)을 추가할 수 있는 모달을 엽니다.
TaskCreationForm 모달이 표시되고 사용자가 폼(form)을 제출하면, 폼의 데이터는 handleSubmit 함수로 전달됩니다.

 

 

2. 애플리케이션 상태 관리(Redux)

 

handleSubmit 함수 내에서, 입력된 데이터를 바탕으로 새로운 일(task) 객체를 생성합니다. 
적절한 Redux 액션(addNewTask 또는 addNewDailyTask)이 디스패치됩니다.

이 액션은 비동기적으로 IndexedDB에 데이터를 저장하는 함수를 호출합니다.
데이터가 성공적으로 저장되면, Redux 스토어는 새로운 상태로 업데이트됩니다. 이는 일반적으로 일 목록에 새로운 일이 추가되는 것을 의미합니다.

 

(Redux 액션 : 애플리케이션에 무엇이 일어나야 하는지 설명하는 객체)

(Redux 스토어 : 애플리케이션의 상태를 저장하는 곳입니다. 액션을 통해 스토어에 변화가 요청되면, 스토어는 그에 따라 상태를 업데이트합니다)
(디스패치 : Redux에서 액션을 스토어에 전달하는 과정입니다. )

3. 데이터베이스 상호작용(IndexedDB)

 

addNewTask 또는 addNewDailyTask 액션에서 호출된 함수는 IndexedDB의 addData 함수를 사용하여 데이터베이스에 새로운 일을 저장합니다.
addData 함수는 비동기적으로 IndexedDB 트랜잭션을 열고, 적절한 오브젝트 스토어에 데이터를 추가합니다.
데이터가 성공적으로 추가되면, Promise가 해결되고, 새로운 일의 ID 또는 기타 메타데이터가 반환됩니다

 

 

(IndexedDB 트랜잭션 : 데이터베이스에 대한 일련의 작업을 안전하게 실행하는 방법입니다. 트랜잭션은 모든 작업이 성공하거나 실패하도록 보장하여 데이터의 일관성을 유지합니다.)

 

(Promise : 비동기 작업이 끝난 후의 결과값이나 실패 이유를 처리하는 방법을 제공합니다)

 

(메타데이터 : 다른 데이터를 설명하는 데이터입니다. 파일의 생성 날짜, 저자, 크기 등 파일에 대한 정보나 데이터베이스의 구조 등을 예로 들 수 있습니다.)

 

4. 상태 업데이트 반영

 

Redux 스토어가 업데이트되면, 관련된 컴포넌트(TodoListSection, DailyListPage 등)는 새로운 상태를 반영하여 리렌더링됩니다. 

 

 

indexedDB에 대해 알아보다가 아래의 블로그에서 도움을 얻었습니다.
https://jodu.tistory.com/48