프로젝트 피드백 - 작성자: 오창영 튜터

[yeongsbook]

• 커밋을 거의 남기지 않으셨으며, main 브랜치에서 바로 작업하신 것으로 보입니다. 팀프로젝트를 위해 개인프로젝트에서도 git을 많이 사용해보시는 걸 추천드립니다.
• 간결한 코드로 필수 구현사항을 전부 구현하셨습니다.
• css와 styled-components와 친해지기 위해 스타일링에도 도전해보시면 좋을 것 같습니다.
• console.log는 과제 제출시 삭제해주세요.

[yeongsbook]

todo.js

Ducks 패턴으로 잘 구현하셨습니다.

redux_todolist/src/redux/modules/todos.js

Lines 19 to 32 in 2fb92b4

	const initialState = [
	{
	id: 1,
	title: "리액트 강의보기",
	detail: "챕터 1부터 챕터 12까지 학습",
	isDone: false,
	},
	{
	id: 2,
	title: "점심 먹기",
	detail: "점심 뭐먹지..?",
	isDone: true,
	},
	];

Home.jsx에서 addTodo할 때 uuid를 사용하여 id를 추가하고 있습니다. initialState의 id도 uuid를 사용하는 것이 보다 일관성 있는 코드가 될 것 같습니다.

redux_todolist/src/redux/modules/todos.js

Lines 39 to 41 in 2fb92b4

	case DEL_TODO:
	const deletTodo = state.filter((todo) => todo.id !== action.payload);
	return [...deletTodo];

filter 메서드는 새로운 배열을 반환하기 때문에 return [...deletTodo]가 아닌 return deletTodo로 수정 가능합니다.

redux_todolist/src/redux/modules/todos.js

Lines 42 to 50 in 2fb92b4

	case DONE_TODO:
	const isDoneTodo = state.map((todo) => {
	if (todo.id === action.payload) {
	return { ...todo, isDone: !todo.isDone };
	} else {
	return todo;
	}
	});
	return [...isDoneTodo];

map 메서드도 새로운 배열을 반환하기 때문에 return [...isDoneTodo]가 아닌 return isDoneTodo로 수정 가능합니다.

[songhsb]

튜터님. 피드백 감사합니다. 피드백 확인하면서 공부해보겠습다. 2023년 6월 28일 (수) 오전 12:55, 오창영 ***@***.***>님이 작성:

…

todo.js Ducks 패턴으로 잘 구현하셨습니다. https://github.com/songhsb/redux_todolist/blob/2fb92b4f4b41a297e9fd41300e36101c0d16ee7b/src/redux/modules/todos.js#L19-L32 Home.jsx에서 addTodo할 때 uuid를 사용하여 id를 추가하고 있습니다. initialState의 id도 uuid를 사용하는 것이 보다 일관성 있는 코드가 될 것 같습니다. https://github.com/songhsb/redux_todolist/blob/2fb92b4f4b41a297e9fd41300e36101c0d16ee7b/src/redux/modules/todos.js#L39-L41 filter 메서드는 새로운 배열을 반환하기 때문에 return [...deletTodo]가 아닌 return deletTodo로 수정 가능합니다. https://github.com/songhsb/redux_todolist/blob/2fb92b4f4b41a297e9fd41300e36101c0d16ee7b/src/redux/modules/todos.js#L42-L50 map 메서드도 새로운 배열을 반환하기 때문에 return [...isDoneTodo]가 아닌 return isDoneTodo로 수정 가능합니다. — Reply to this email directly, view it on GitHub <#1 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A5YD4AQYQNBX3LY3WLMEXUTXNL67HANCNFSM6AAAAAAZVN6DGI> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[yeongsbook]

Router.js

redux_todolist/src/shared/Router.js

Line 15 in 2fb92b4

<Route path="detail" element={<Detaile />} />

/detail 페이지로 이동하면 빈페이지가 나오고, 개발자 도구 콘솔창에 에러 메세지가 많이 나옵니다.
해당 줄은 지워주세요.

[yeongsbook]

Detail.jsx

redux_todolist/src/pages/Detail.jsx

Lines 12 to 14 in 2fb92b4

	const todo = todos.find((t) => {
	return t.id == param.id;
	});

== 보단 ===로 비교해주세요.