preproject ~ 04/27

1. 개요

 Preproject가 끝났다. 처음으로 해보는 팀 프로젝트라 처음 겪어 보는 상황이 많았다. 그렇지만 프로젝트 완료 후 결과물을 보니 솔직히 기분이 좋았다. 뿌듯했다. 물론 생각했던 것보다는 완성도가 높지는 않지만, 프로젝트 시작부터 지금까지의 상황을 돌이켜보면 만족할만한 결과인 것 같다. 그리고 성공도 실패도 나의 경험치가 될 것이라 생각하니 뭔가 레벨업을 한 기분이다. 아, 4월 22일부터 기록을 하지 못했는데, 이번 주는 전체적으로 에러나 버그를 수정한다고 너무 바빠서 기록하는 것일 잊어버렸다.

 

2. 목표

https://stackoverflow.com/

Stack Overflow - Where Developers Learn, Share, & Build Careers

 스택오버플로우를 구현하는 것이 목표였다. 하지만 스택오버플로우의 모든 기능을 초보들이 2주 만에 구현하는 것은 현실적으로 힘들기에, 구현 난이도에 따른 기능들이 정리되어 있었다.

Level 0, Level 1

그래서 우리 팀은 레벨 1까지 구현하는 것을 목표로 했다.

 

3. 결과물 사진

1. 홈(로그아웃 상황)

2. 회원가입

3. 로그인 성공

4. 모든 질문

5. 질문 상세

6. 질문 올리기

7-1. 답변

7-2. 답변에 달린 댓글

캡쳐할 부분이 더 있는데, 아무래도 AWS를 이용해 서버를 열어주신 분이 서버를 곧 닫는다고 하셨다. 그래서 급하게 캡쳐한다고 모든 부분을 담지는 못했다. 

 

4. 내가 맡은 부분

• Home 디자인 구현
• All Questions 디자인 구현
• 질문 올리는 페이지 디자인 구현
• 질문 상세 페이지 디자인 구현
• 질문 CRUD
• 답변 CRUD
• 댓글 CRUD

 

5. 느낀 점

 팀프로젝트를 하면서 정말 많은 것을 느꼈다. 이 중에서도 가장 기억에 남는 부분은 아무래도 에러 등의 어려웠던 부분일 것이다. 몇 가지를 적어보자면 다음과 같다.

 

5-1. json-server와 실제 서버의 차이

export default function Answer({ answer }) {
	...

  const navigate = useNavigate();

	// 답변에 달린 댓글을 삭제
  const handleDeleteComment = async (commentId) => {
    await removeComment(commentId);
    window.location.replace(`/questions/${answer.questionId}`);
  };

	// 답변에 달린 댓글 수정
  const handleEditComment = async (comment) => {
    let edited = { commentId: comment.commentId, comment: editedComment };
    await updateComment(edited);

    setEditCommentId((prev) => -1);
	window.location.replace(`/questions/${answer.questionId}`);
  };

	// 답변 삭제
  const handleDeletaAnswer = async (answerId) => {
    await removeAnswer(answerId);
    window.location.replace(`/questions/${answer.questionId}`);
  };

	...
}

 백엔드 분들의 결과물이 완성되기 전까지 json-server를 이용하여 구현을 진행했었다. json-server를 이용했을 때는 질문 CRUD, 답변 CRUD, 댓글 CRUD는 전부 리렌더링이 알아서 되었었는데 실제 서버를 이용할 때는 useNavigator도 동작하지 않고 리렌더링이 이루어지지 않는는 부분이 있었다. 이를 해결하기 위해 팀원들끼리 고군분투했지만 해결할 수 없었다. 그래서 수정 등을 할 때마다 새로고침을 하면 리렌더링이 되는 듯한 느낌을 줄 수 있을 것이라 생각했다. 그래서 리렌더링이 안되는 부분에 window.location.replace를 이용하였다. 그래서 local에서는 문제를 해결할 수는 있었다.

 

5-2. 배포된 결과물에서 주소창에 URI를 직접 입력하거나 새로고침을 하면 에러가 발생

새로고침할 때 생기는 에러

 방금 리렌더링이 안될 때, 새로고침(같은 페이지로 이동)으로 해결했었다. 하지만 배포된 결과물에서는 이게 제대로 되지 않았었다. 정확히는 '배포된주소/ '를 주소창에 입력하거나 새로고침할 때는 문제가 없었다. 하지만 '배포된주소/questions'와 같이 뒤에 url-path가 더 붙은 경우, 주소창에 입력하거나 새로고침하면 위의 사진과 같은 에러가 발생하였다. 처음에 이 에러를 봤을 때 정말 당황해서 손을 놓고 싶었다. 그러던 중, 팀원분 중 한 분이 비슷한 에러를 겪었을 때, 참고했던 글을 알려주셔서 적용해봤지만 해결할 수 없었다.(참고의 1) 그 후, useNavigator의 인자에 replace가 있었다는 것이 떠올라 위의 window.location.replace를 navigate("/이동할주소", { replace: true }) 로 바꿨더니 에러는 발생하지 않았다. 다만, 리렌더링이 좀 느리게 일어났다.

// navigate로 수정
export default function Answer({ answer }) {
	...

  const navigate = useNavigate();

	// 답변에 달린 댓글을 삭제
  const handleDeleteComment = async (commentId) => {
    await removeComment(commentId);
    navigate(`/questions/${answer.questionId}`, { replace: true });
  };

	// 답변에 달린 댓글 수정
  const handleEditComment = async (comment) => {
    let edited = { commentId: comment.commentId, comment: editedComment };
    await updateComment(edited);

    setEditCommentId((prev) => -1);
	navigate(`/questions/${answer.questionId}`, { replace: true });
  };

	// 답변 삭제
  const handleDeletaAnswer = async (answerId) => {
    await removeAnswer(answerId);
    navigate(`/questions/${answer.questionId}`, { replace: true });
  };

	...
}

 로컬에서 구현했던 것만큼의 퍼포먼스가 나오지는 않았지만, 일단 에러가 발생하지 않았기에 너무 행복했다. 그리고 이 에러를 통해 두 가지를 알게 되었다. 우선은 useNavigate의 replace 옵션이다. useNavigate는 같은 페이지로는 이동할 수 없다. 예를 들어, 현재 localhost:3000이라면 navigate("/")는 동작하지 않는다. 하지만 replace 옵션을 true로 준다면 같은 페이지로 이동하는 것이 가능하기는 하다. 왜냐하면  이는 브라우저 히스토리에 새로운 항목을 추가하지 않고, 현재 페이지를 새로운 페이지로 교체할 수 있다. 그렇기에 현재 경로와 동일한 경로로 이동하지 않으면서, 현재 페이지를 새로운 페이지로 교체한다. 그런데 이는 리렌더링이 일어나지 않기에 실천한 방법이었다. 그래서 useQuery가 아닌 useMutation을 이용했다면 리렌더링이 자연스럽게 일어날 수 있었을지 모르지만, 이는 이 프로젝트가 끝날 때 쯤에 알게 되었다. 너무 안타깝다.

 그리고 두 번째는 위의 whitelabel error이다. 이 에러를 처음 보았을 때, 지금까지 공부하면서 처음 본 에러라 너무 당황했었다. 그래서 구글링을 해 보니 이 에러는 스프링부트에서 제공되는 에러이고, 이는 index.html이 없거나 없는 파일을 경로로 지정할 경우 발생하는 에러 라고 한다. 그래서 프론트엔드 쪽 에러가 아닌 것 같아 백엔드 분들에게 여쭤봤더니 백엔드 분들도 모르겠다고 하였다. 그렇기에 어쩔 수 없이 위와 같은 방식으로 이 에러를 우회했다.

 

 이 외에도 나의 거름이 되었던 경험들이 있지만, 너무 길어질 것 같기도 하고 글솜씨가 좋지 못하기에 여기서 마무리할 것이다. 처음에는 많이 두렵긴 했다. 하지만 역시 뭐든 도전해봐야 하는 법이다. 이번 preproject를 통해 팀 프로젝트에서 일어날 수 있는 상황들, 에러가 발생했을 때 팀원들끼리 조율하여 해결하는 법, 팀원들과 소통하는 법, 협력하는 법들을 배울 수 있었다. 이 기회가 아니었다면 알 수 없었던 것들이다. 이 경험들을 잊지 말아야 겠다. 그리고 지금까지 겪었던 에러는 복습해서 다시는 안 볼 수 있게 연습해야 할 것이다. 그리고 시간이 된다면 json-server를 이용하든, 별도의 더미데이터 파일을 만들든 하여 구현한 것들을 개인적으로도 볼 수 있게 할 것이다.

 

 

---

참고

1. [react] netlify 프로젝트 배포 후 새로고침시 NotFound 에러

https://velog.io/@dngur9801/react-netlify-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%B0%B0%ED%8F%AC-%ED%9B%84-%EC%83%88%EB%A1%9C%EA%B3%A0%EC%B9%A8%EC%8B%9C-NotFound-%EC%97%90%EB%9F%AC