4-1 과제 To-do 리스트 Redux를 사용하여 리팩터링 하기 #121
Conversation
redux, react-redux를 설치했습니다
actions , reducer , store 를 생성해 redux 구조를 만들었습니다
APP을 Provider로 추가해준뒤 store를 넘겨주었습니다
app.jsx 쪽에 provider를 index쪽으로 셋팅했습니다
app test에서 provider를 사용하는대신 저렇게 셋팅을해주었습니다
input value를 업데이트하는 로직을 redux를 사용하여 분리했습니다
할일을 추가하는 로직을 redux를 사용하여 분리했습니다 테스트를 위해 mock 폴더의 seletor에게 tasks값을 넣어주었습니다
dispatch 함수를 그대로사용하였는데 addTask로 변경했습니다
app test에 useSelector 를 이용해 테스트를 했습니다
useSelector를 이용해 작성한후 확인할수있는 테스트 케이스를 추가했습니다
reducer test 에 updateTaskTitle을 테스트하는 테스트 케이스를 추가했습니다
reducer test에 addTask가 작동하는 테스트 케이스를 추가했습니다
reducer 테스트의 deleteTask 케이스를 추가했습니다
할일 추가후 input value 가 초기화 되는 테스트를 추가해보았습니다
|
taskTitle에 값이 있는경우와 없는경우를 context를 사용해 나눠주고 없는경우의 테스트 코드를 추가해주었습니다
리뷰 진행해주셔두 괜찮아요!!! |
|
addTask 실행후 id 가 undefined가 아니라는 테스트를 추가했습니다
반복적으로 수행하는 로직을 함수로 처리하였습니다
관심사 분리를 위해 listcontainer 테스트 코드를 작성하였습니다
listcontainer로 인해 app에 사용안하는 부분을 제거하고 page쪽에는 만들어준 listcontainer를 사용합니다
list를 분리해주며 나온 테스트 오류를 useseletor를 이용하여 수정해주었습니다
inputContainer의 테스트케이스를 작성했습니다
list의 prop명을 잘못입력해준 부분을 수정했습니다
inputContainer를 만들었습니다
app , page쪽의 안쓰는 코드를 정리했습니다
page쪽에서 큰 역할이없어서 app으로 병합했습니다
describe와 it을 이용하여 리팩토링해주었습니다
describe , it 을 이용하여 테스트 케이스를 분리해주었습니다
describe, it 을 이용해 구분해주었습니다
영어로 되어있던 설명을 통일감있게 수정해주었습니다
describe , it 을 이용해 수정해주었습니다
describe , it 을 이용해 수정했습니다
|
분리하는 부분에서 테스트 케이스들이 너무 헷갈려서 헤맸네요 ㅠㅠ |
inputContainer test change 이벤트 케이스 추가
it 설명부분을 수정했습니다
click 이벤트를 테스트하는 과정에서 type:'addTask' 넘겨주었는데 action에 있는 addTask 함수로 변경해주었습니다
listContainer의 완료버튼 눌렀을때를 테스트 하는 코드를 추가했습니다
|
npm test 돌렸더니 inputContainer , listContainer 에서 테스트 케이스가 빠져서 커버리지가 모자라더라구요..! 추가해주었습니다 |
src/ListContainer.test.jsx
Outdated
| const tasks = [ | ||
| { id: 1, title: '할일 1' }, { id: 2, title: '할일 2' }, | ||
| ]; |
There was a problem hiding this comment.
tasks 다른 테스트에서도 자주 사용하는데, fixtures 폴더 하나 만들어서 따로 관리해볼까요?
이렇게 여러 곳에서 사용되는 테스트 데이터를 fixture라고 이야기하거든용!
There was a problem hiding this comment.
수정했습니다!
아하 테스트에 있는 변수들을 줄일생각을 전혀안해봤었네요..!
폴더로 나눠서 관리하는 방법이 좋은거같습니다!!
src/Input.test.jsx
Outdated
| const { getByDisplayValue } = renderInput(); | ||
| expect(getByDisplayValue('기존 할 일')).not.toBeNull(); |
src/Input.test.jsx
Outdated
| const { getByLabelText } = renderInput(); | ||
| fireEvent.change(getByLabelText('할 일'), { |
src/inputContainer.test.jsx
Outdated
| import { useDispatch, useSelector } from 'react-redux'; | ||
| import { addTask } from './actions'; |
src/ListContainer.test.jsx
Outdated
| import { useDispatch, useSelector } from 'react-redux'; | ||
| import { deleteTask } from './actions'; |
src/reducer.test.js
Outdated
| import reducer from './reducer'; | ||
|
|
||
| describe('reducer', () => { | ||
| describe('taskTitle 변경을 시도한다', () => { |
There was a problem hiding this comment.
describe(updateTaskTitle, ~) 이렇게 간단하게 표현해도 좋을 것 같아요!
There was a problem hiding this comment.
아하 addTask 처럼 간결하게 통일해주는게 좋은거같네요!!
수정했습니다!
src/reducer.test.js
Outdated
| }); | ||
| }); | ||
|
|
||
| describe('tasks-title 지우기를 시도한다', () => { |
There was a problem hiding this comment.
describe(deleteTask, ~) 이렇게 간단하게 표현해도 좋을 것 같아요!
src/reducer.js
Outdated
| if (action.type === 'updateTaskTitle') { | ||
| return { | ||
| ...state, | ||
| taskTitle: action.payload.taskTitle, | ||
| }; | ||
| } | ||
|
|
||
| if (action.type === 'addTask') { | ||
| const { newId, taskTitle, tasks } = state; | ||
|
|
||
| if (!taskTitle) { | ||
| return state; | ||
| } | ||
|
|
||
| return { | ||
| ...state, | ||
| newId: newId + 1, | ||
| taskTitle: '', | ||
| tasks: [...tasks, { id: newId, title: taskTitle }], | ||
| }; | ||
| } | ||
|
|
||
| if (action.type === 'deleteTask') { | ||
| const { tasks } = state; | ||
|
|
||
| return { | ||
| ...state, | ||
| tasks: tasks.filter((task) => task.id !== action.payload.id), | ||
| }; | ||
| } |
There was a problem hiding this comment.
reducer 안에 if이 점점 많아지고 있어요~
점점 많아지게 되면, 읽기 어려울 것 같은데, if나 switch를 사용하지 않고, 어떻게 이 문제를 해결할 수 있을까요?
There was a problem hiding this comment.
수정했습니다
if문 대신에 코드숨 1주차 프로젝트에서 사용했던 object Literals 를 사용해보았습니다!!
맥락구분을 하기위해 띄어쓰기를 해주었습니다
더 간결한 설명으로 수정했습니다!
테스트중 자주사용하는 변수를 fixtures폴더를 만들어 관리해주었습니다
state가 있는경우 없는경우 context를 이용해 분리해준뒤 state가 없는경우의 테스트를 추가했습니다
가독성이 안좋은 if문을 대신하여 object Literals를 사용했습니다
수정했습니다!9시 거의 다되서 겨우 제출했네요..! 질문이있습니다현재 작업되어있는부분에는 reducer함수내에 type이 있는지를 체크해서 그에따른 상황을 반환해주고있었는데요 |
src/App.test.jsx
Outdated
| @@ -4,14 +4,14 @@ import { useSelector } from 'react-redux'; | |||
|
|
|||
| import App from './App'; | |||
|
|
|||
| import { tasksDummy } from './fixtures/task-dummy'; | |||
There was a problem hiding this comment.
수정했습니다!
dummy를 제거해서 바꿔줬는데 tasks 라는 변수명을 test코드안에 다른곳에서 쓰는 경우가있어서 그부분엔 다른 변수명들을 바꿔주었습니다!
src/reducer.js
Outdated
| taskTitle: action.payload.taskTitle, | ||
| }; | ||
| } | ||
| const reducerObject = { |
There was a problem hiding this comment.
수정했습니다!
이미 reducer쪽에서 reducer 네이밍은 사용중이어서 reducerAction 이라고 변경해봤는데 좀더 나은 네이밍이있을까요?!
src/fixtures/task-dummy.js
Outdated
| export const taskTitleDummy = '할일'; | ||
|
|
||
| export const tasksDummy = [ | ||
| { id: 1, title: '할일 1' }, { id: 2, title: '할일 2' }, | ||
| ]; |
src/reducer.js
Outdated
| export default function reducer(state = initialState, action) { | ||
| if (reducerObject[action.type]) { return reducerObject[action.type]?.(state, action); } | ||
|
|
||
| return state; | ||
| } |
There was a problem hiding this comment.
reducerObject[action.type]?.(state, action)이 아니라reducerObject[action.type](state, action)이 맞는 것 같아요! 함수이니까요!- reducer라는 함수가 본래는
reducerObject[action.type](state, action)을 리턴하고, 예외적인 상황에서 state를 반환하므로, 그 의도가 드러나도록 작성해주시는게 좋아요!
dummy 를 제거하여 taskTitle , tasks 로 변경해주었습니다
reducer를 그대로 쓰고싶은데 이미 reducer쪽에서 사용중이여서 reducerAction이라는 네이밍을 사용해봤습니다
|
수정사항 모두 수정했습니다!
생각해보면 예약어를 사용하는것은 생각지못한 버그들이 생길수있겠네요! |
안녕하세요 선생님..!
처음부터 커밋하면서 다시 진행했습니다!
아직 완성을 못했지만 제출하겠습니다
감사합니다!