g-noon/advanced-fan-mail-box

인증/인가 기능이 추가된 Fan-Mail-Box 제작 프로젝트(Current: Fail)

advanced-fan-mail-box's Issues

리액트 심화주차 개인과제 리뷰 - 김병연 튜터

안녕하세요, 진훈님 벌써 심화주차 리뷰를 하게 되었네요. 바로 시작해 볼게요. :)

성공/실패에 대한 처리

advanced-fan-mail-box/src/pages/Login.jsx

Lines 28 to 65 in 1d929e8

	const onSubmitHandler = async (e) => {
	e.preventDefault();
	const buttonType = e.nativeEvent.submitter.name;
	if (buttonType === "signUp") {
	// 회원가입
	try {
	const { data } = await axiosAPI.post("/register", {
	id,
	password,
	nickname,
	});
	console.log(data);
	setSignUpPage(false);
	toast.success(data.message);
	} catch (error) {
	console.log(error);
	toast.error(error.response.data.message);
	}
	resetForm();
	} else if (buttonType === "login") {
	// 로그인
	try {
	const { data } = await axiosAPI.post("/login?expiresIn=20m", {
	id,
	password,
	});
	console.log(data);
	const { accessToken, avatar, nickname, userId } = data;
	if (data.success) {
	dispatch(login({ accessToken, avatar, nickname, userId }));
	toast.success("로그인 되었습니다.");
	}
	} catch (error) {
	console.log(error);
	toast.error(error.response.data.message);
	}
	} else return;
	};

저는 진훈님이 작성하신 것처럼 사용하는 쪽에서 성공/에러에 대한 처리를 해주는 것을 좋아해요. 서버와의 통신에 대한 로직은 숨기고, 성공이나 실패 시 어떤 메시지를 띄울지는 최종 사용자에게 맡기는 거죠. 다만, 코드 가독성을 위해 회원가입과 로그인에 대한 로직을 함수로 따로 빼는 건 어떨까요?

곳곳에 있는 개발 흔적들

advanced-fan-mail-box/src/shared/redux/modules/mailListSlice.js

Lines 11 to 16 in 1d929e8

	// DB로부터 최신순으로 메일 리스트 가져오기
	const getMailListFromDB = async () => {
	const { data } = await letterDbApi.get("/letters?_sort=-createdAt");
	console.log(data);
	return data;
	};

깃헙 저장소에 최종으로 제출 시, console.log()가 있는지 꼭 확인하고 제출하시는 것을 추천드릴게요.(꼭 필요한 게 아닌 개발하면서 확인을 위해 사용한 console.log()) 나중에 기술 과제를 볼 때 감점 사유가 될 수 있어요.

mailList

advanced-fan-mail-box/src/pages/Detail.jsx

Lines 8 to 10 in 1d929e8

	const mailList = useSelector((state) => state.mailList);
	const id = useParams().id;
	const foundMail = mailList.find((mail) => mail.id === id);

mailList는 객체이기 때문에 배열 메서드인 find 사용 시 에러가 납니다! mailList의 letters를 의도하신 걸까요?

named export

advanced-fan-mail-box/src/api/axiosAPI.js

Lines 3 to 17 in 1d929e8

	const userAuthApi = axios.create({
	baseURL: "https://moneyfulpublicpolicy.co.kr",
	headers: {
	"Content-Type": "application/json",
	},
	});
	const letterDbApi = axios.create({
	baseURL: "http://localhost:5000",
	headers: {
	"Content-Type": "application/json",
	},
	});
	export { userAuthApi, letterDbApi };

advanced-fan-mail-box/src/pages/Login.jsx

Line 1 in 1d929e8

import axiosAPI from "api/axiosAPI";

axiosAPI를 named export 하셨는데, 불러오는 쪽에서는 그렇지 못한 것 같아요. 저 같은 경우에는 바로 에러가 떴는데 혹시 이상 없으셨을까요?

---

이렇게 피드백을 드려봤습니다. 저번 리뷰 때 디렉토리 구조에 대해서 얘기를 나눈 적이 있었죠. 고민의 흔적이 보이네요. 🧐 이번 아웃소싱 프로젝트도 화이팅입니다! 고생하셨습니다. 👏