02 - 16 일지

오전 : 시험

특이사항

과제랑 같은 결과물을 내놓지만, 여기서 발생한 문제를 해결하라고 전달받았다. 처음에는 내가 했던 방식과 다른 구조라 꽤나 고생했지만 찬찬히 뜯어보니 확실히 문제가 있었다.

아래는 내가 쓴 문제와 답안들이다.

1. 추가하기 버튼을 클릭해도 추가한 아이템이 화면에 표시되지 않음.
파악한 문제점
1-1. todo.js파일 41번 줄의 initialState의 배열 범위 설정이 잘못되어 있었음.
1-2. Form.jsx파일에 dispatch가 설정되어있지 않았음.
1-3. Form.jsx파일 22번 줄에 onSubmitHandler가 값을 전달하지 않았음.
1-4. 

해답
1-1. todo.js파일 41번 줄의 initialState의 배열구조를 정리함. 이제 배열이 꼬이는 문제를 피할 수 있게 됨.
1-2. Form.jsx파일 9번 줄에 dispatch를 추가. 이제 todos.js에서 배열을 올바르게 가져올 수 있게 됨.
1-3. Form.jsx파일 22번 줄에 onSubmitHandler에 dispatch(addTodo())로 받아온 todo state에 할당된 데이터를 전달함.

-----------------------------------------------------------------------------------------

2. 추가하기 버튼 클릭 후 기존에 존재하던 아이템들이 사라짐.
파악한 문제점
2-1. todo.js파일 58번 줄의 switch case ADD_TODO: 가 payload로 받아온 값을 그대로 반환하려 함.

해답
2-2. todo.js파일 57번 줄의 switch case ADD_TODO: 가 payload로 받아온 값을 NewTodo배열에 집어넣어 새 객체를 만든다음 이를 반환함.

-----------------------------------------------------------------------------------------

3. 삭제 기능이 동작하지 않음.
파악한 문제점
3-1.  todo.js파일 58번 줄의 switch case에 DELETE_TODO가 존재하지 않음.

해답
3-2 todo.js파일 57번 줄의 switch case DELETE_TODO:를 추가함. 이 case에선 기존 todos에서 filter로 payload로 받은 ID값을 대조하여 삭제함.


-----------------------------------------------------------------------------------------

4. 상세 페이지에 진입하였을 때 데이터가 업데이트되지 않음.
파악한 문제점
4-1. Detail.jsx파일에서 ID, Title, Body를 useSelctor에서 바로 받아오려 함. 이렇게하면 전체 배열을 가져오게 됨.
4-2. useParams의 선언을 잘못된 방식으로 함.

해답
4-1. Detail.jsx파일 9번 줄의 todo를 UseSelctor로 받아온다음 .find(index => index.id == param.id)로 원하는 배열 객체 하나만 반환시킴
4-2. Detail.jsx파일 8번 줄의 const param = useParams()로 새로 선언함. 이를 ID 값에 반영함.

-----------------------------------------------------------------------------------------

5. 완료된 카드의 상세 페이지에 진입하였을 때 업데이트되지 않음.
파악한 문제점
5-1. List.jsx파일 57번 줄의 map이 올바르지 않은 구조로 되어 있음.
5-2. List.jsx파일 61번 줄의 link가 올바르게 설정되어 있지 않음.


해답
5-1. List.jsx파일 57번 줄의 map의 구조를 23번 줄의 map과 동일하게 수정함.
5-2. List.jsx파일 61번 줄의 link를 index에서 todo.id로 수정

-----------------------------------------------------------------------------------------

6. 취소 버튼 클릭시 기능이 작동하지 않음.
파악한 문제점
6-1. List.jsx파일 77번 줄의 onToggleStatusTodo가 올바르지 않은 구조로 되어있음.

해답
6-2. List.jsx파일 77번 줄의 onToggleStatusTodo(todo.id)로 수정함.

이렇게 해서 모든 문제는 해결했다만....이걸보고 기존 과제를 리팩토링해봐야겠다는 생각이 들었다.

 

리팩토링해야할 부분 (개인 판단)

1. 스타일드 CSS 사용

2. submit Form 활용

3. Detail에 쓰인 리덕스문 바꿔쓰기

 

이정도 되겠군