[이가빈] 10주차 과제 제출

[billy0904]

결과 소개

1. 로그인 / 회원가입
   

2. 전체 글 목록

3. 세부 게시글 편집 및 삭제 (좋아요 및 댓글 기능)

4. 게시글 작성

5. 좋아요 누른 글 목록

기능 설명

1. 회원가입 / 로그인
2. 게시글 등록 - 제목, 내용, 사진 등록 가능
3. 전체 게시글 조회
4. 상세 게시글 조회
5. 게시글 수정
6. 게시글 삭제
7. 댓글 등록
8. 게시글 댓글 조회
9. 댓글 삭제
10. 좋아요 등록
11. 좋아요 취소
12. 좋아요 개수 조회
13. 유저가 누른 좋아요 게시글 목록 조회

• 리드미 파일에서 상세 기능 설명을 확인할 수 있습니다!

어려웠던 점, 질문

1. 로그아웃할 경우에만 alert 창을 출력하도록 하려고 했었는데 처음 로그인 버튼을 클릭할 때도 "로그아웃 되었습니다" alert 창이 뜨는 문제가 있습니다. 분기를 나눌 수 있는 방법을 알려주시면 감사하겠습니다!

2. Failed to load resource: the server responded with a status of 500 () 문제

- 게시글을 등록할 때와 좋아요 누른 글 리스트를 확인하는 창에서 위와 같은 에러가 발생하는데 프론트에서 해결할 수 있는 문제인가요...?

[Ravende]

가빈님 안녕하세요, 가빈님의 10주차 코드 리뷰를 맡은 짝 리드 김민용입니다.
먼저 코드 리뷰가 늦어서 죄송하다는 말씀 드리고 싶습니다. 가빈님의 코드를 로컬로 가져와 실행해보았는데 기능이 전부 한눈에 들어오도록 디자인이 크게 개선된 점이 눈에 띄었습니다. 전체적으로 이번 과제를 잘 작업해주신 것 같습니다. 질문 주신 사항과 몇 가지 개선점에 대해 말씀드리겠습니다.

1. QnA

1. 로그인/회원가입 버튼 클릭 시에도 "로그아웃 되었습니다." 알림창이 뜨는 오류
   해당 에러는 App.jsx의 StyledLink 처리에서 로그인 여부에 따라 로그인/회원가입 or 로그아웃으로 상태가 변화하는 버튼 자체에 클릭 이벤트를 적용하였기 때문입니다. 해당 코드의 onClick={handleLogout} 부분을 수정하여 onClick 핸들러가 isLoggedIn이 true일 경우에만 handleLogout 함수를 호출하도록 만들어 주면 됩니다.

2. 500 에러
   게시글 등록과 좋아요 리스트 기능을 다루는 코드를 살펴봤을 때, 코드 자체에는 큰 문제가 없어 보입니다. 나타나는 에러가 서버 측에서 처리 중 발생하는 에러인 500(Internal Server Error) 오류이기 때문에 프론트 측 코드만으로 현재로서는 정확한 원인을 찾기 어렵습니다. 클라이언트 측에서 바로 수정하는 것이 불가능한 부분일 수도 있고요.

2. 그 외 개선점

1. App.js의 activeClassName -> className 수정

   • React Router DOM 버전 6에서는 v5와 달리, NavLink 컴포넌트에서 activeClassName prop 대신 className을 함수로 사용합니다.
   • isActive prop을 추가하여 링크가 활성화된 상태에서 active CSS 클래스가 적용되도록 설정합니다.

2. try ~ catch 문으로 예외 처리 강화
   api 호출에서 try ~ catch 문을 사용하여 에러를 처리하는 로직을 강화합니다.
   아래 코멘트의 예시는 로그인 기능에 try ~ catch문을 적용한 것이며, 다른 기능에도 유사하게 적용할 수 있습니다.

상세한 코드는 아래 코멘트로 달도록 하겠습니다. 10주차 과제 수고하셨습니다!

[Ravende]

• 2-1. App.js의 activeClassName -> className 수정

Suggested change

	return (
	<Container>
	<Navbar>
	<StyledLink to="/" activeClassName="active">글 목록</StyledLink>
	{isLoggedIn && <StyledLink to="/write" activeClassName="active">글쓰기</StyledLink>}
	<StyledLink to="/register" activeClassName="active" onClick={handleLogout}>
	{isLoggedIn ? '로그아웃' : '로그인/회원가입'}
	</StyledLink>
	{isLoggedIn && <StyledLink to="/heart" activeClassName="active">좋아요 누른 글</StyledLink>}
	</Navbar>
	{renderRoutes()}
	</Container>
	);
	}
	return (
	<Container>
	<Navbar>
	<StyledLink to="/" className={({ isActive }) => (isActive ? "active" : "")}>글 목록</StyledLink>
	{isLoggedIn && <StyledLink to="/write" className={({ isActive }) => (isActive ? "active" : "")}>글쓰기</StyledLink>}
	<StyledLink to="/register" className={({ isActive }) => (isActive ? "active" : "")} onClick={handleLogout}>
	{isLoggedIn ? '로그아웃' : '로그인/회원가입'}
	</StyledLink>
	{isLoggedIn && <StyledLink to="/heart" className={({ isActive }) => (isActive ? "active" : "")}>좋아요 누른 글</StyledLink>}
	</Navbar>
	{renderRoutes()}
	</Container>
	);
	}

[Ravende]

• 1-1. 로그인/회원가입 버튼 눌렀을 때도 "로그아웃 되었습니다." alert창이 뜨는 오류

<StyledLink
    to="/register"
    className={({ isActive }) => (isActive ? "active" : "")}
    onClick={isLoggedIn ? handleLogout : null}
>
    {isLoggedIn ? "로그아웃" : "로그인/회원가입"}
</StyledLink>

handleLogout이 적용되는 onClick 이벤트 부분을 수정해줍니다.

[Ravende]

• 2-2. try ~ catch 문으로 예외 처리 강화

Suggested change

	const handleLogin = async (e) => {
	e.preventDefault();
	const { id, pw } = login;
	const res = await postLogin(id, pw);
	if (res.status === 201) {
	alert(`로그인 성공! ${res.data.username}님 환영합니다.`);
	localStorage.setItem("efubtoken", res.data.token);
	client.defaults.headers.common["Authorization"] = res.data.token;
	navigate("/");
	window.location.reload();
	} else if (res.response.status === 400) {
	alert("아이디와 비밀번호가 맞는지 다시 확인해주세요!");
	}
	};
	const handleLogin = async (e) => {
	e.preventDefault();
	const { id, pw } = login;
	try {
	const res = await postLogin(id, pw);
	if (res.status === 201) {
	alert(`로그인 성공! ${res.data.username}님 환영합니다.`);
	localStorage.setItem("efubtoken", res.data.token);
	client.defaults.headers.common["Authorization"] = res.data.token;
	navigate("/");
	window.location.reload();
	} else if (res.response.status === 400) {
	alert("아이디와 비밀번호가 맞는지 다시 확인해주세요!");
	}
	} catch (error) {
	console.error("로그인 오류", error);
	}
	};

handleLogin에 적용한 예시입니다.