[Day 30, 31, 32] 감정 일기 (20240805~0807)

순서대로 /, /diary/:id, /new, /edit/:id

1. 프로젝트 개요

• React로 만든 감정 일기 애플리케이션.
• 감정 일기 CRUD를 포함하고 있다.
• App.js에 의한 중앙 집중식 상태를 통해 처리.
• 일기 항목에 대한 여러 페이지 탐색 및 상태 관리가 포함됩니다.(routing)

2. 사용된 기술

• React Router: react-router-dom을 활용하여 라우팅을 처리.
• Home, New, Edit, Diary의 네 가지 기본 페이지로 구성.
• 페이지 네비게이션을 구현하기 위해 react-router-dom의 Routes와 Route 컴포넌트를 사용.
• 상태 관리
  • useReducer 후크를 사용하여 일기 항목의 Read, Update, Delete 합니다.
  • 상태는 App.js 내 최상위 수준에서 관리되어 다양한 페이지에 걸친 전역 액세스를 보장.

3. 특이사항

• react-router-dom의 Link 구성 요소를 사용하여 CSR을 구현
• 유지 관리를 위해 구성 요소를 별도의 폴더와 파일로 구성.

4. 개선 요소

• onCreate에서 onSubmit으로 제대로된 내용을 전달하고 있으나 새로운 요소가 생성되지 않고 있음 (해결됨)

• onDelete로 요소 삭제가 불가능함(해결됨)

const onCreate = (date, content, emotionId) => {
    console.log('onCreate called:', { date, content, emotionId });
    dispatch({
      type: 'CREATE',
      data: { id: idRef.current++, date: new Date(date).getTime(), content, emotionId },
    });
  }; // data: { id: idRef.current++, date, content, emotionId } text로 입력받던게 문제가 됨
  
  
  const { onCreate } = useContext(DiaryDispatchContext);// oncreate를 구조 분해하여 사용.

• 현재 수정 기능 사용시 console.log(data) 확인시 undefined로 정의되고 있음. 수정 필요.
• 로그인과 인증/인가 추가 -> 실제 서비스시 고려사항.