[TIL] 내일배움캠프 React 과정 2022.12.26

Today I Learned

• 팀 프로젝트 진행

 

---

팀 프로젝트 진행 기록

form help text 수정

<CheckMsg ref={userName_msg} />

원래 CheckMsg라는 스타일 컴포넌트 기본값을 display: none;을 주고 "아이디를 입력해 주세요"등의 메시지가 뜰 때마다 display: block;으로 변경되도록 구현했었는데 생각해보니 CheckMsg의 기본값을 display: block;으로 설정해 놓고 태그 안에 텍스트를 입력하지 않은 상태에서 innerText만 넣어줘도 동일한 효과가 발생한다.

 

if (!idRegExp.test(userDi)) {
      userDi_msg.current.innerText =
        "4~12자의 영문 소문자, 숫자로 작성 가능합니다.";
      userDi_msg.current.style = "display:block";
      userDi_input.current.focus();
      return false;
    } else if (checkUserDi !== undefined) {
      userDi_msg.current.innerText =
        "이미 등록된 아이디입니다. 다시 입력해주세요.";
      userDi_msg.current.style = "display:block";
      userDi_input.current.focus();
      return false;
    } else {
      userDi_msg.current.innerText = "사용 가능한 아이디입니다.";
      userDi_msg.current.style = "display:block; color:green";
      return true;
    }

그럼 이런 식으로 경우의 수마다 매번 작성했던 userId_msg.current.style = "display:block" 코드를 줄일 수 있는 것이다. 그런데 이렇게 했더니 또다른  문제가 발생한다! "사용 가능한 아이디입니다"가 뜨면 원래 빨간색이던 메시지가 초록색으로 변하는데, 초록색으로 변한 이후에는 "이미 등록된 아이디입니다."가 빨간색으로 변경되지 않고 계속 초록색으로 뜬다. 그래서 다시 원래대로 기본값을 display: none;으로 하는 방법으로 돌아갔다.😓

 

회원가입 시 비밀번호 확인 기능 추가

const onChangeUserPwCheckHandler = () => {
    setCheckUserPw(checkUserPw_input.current.value);

    if (userPw !== checkUserPw) {
      checkUserPw_msg.current.innerText = "비밀번호가 일치하지 않습니다.";
      checkUserPw_msg.current.style = "display:block";
      checkUserPw_input.current.focus();
      return false;
    } else if (userPw === checkUserPw) {
      checkUserPw_msg.current.innerText = "비밀번호가 일치합니다.";
      checkUserPw_msg.current.style = "display:block; color:green";
      return true;
    }
};

갑자기 회원가입 할 때 비밀번호가 일치하는지 확인해주는 기능을 만들고 싶어서 후딱 만들었다. 기존에 있던 코드를 그대로 이용하면 되기 때문에 그렇게 오래 걸리지는 않았지만 중복되는 코드가 너무 많아져서 프로젝트가 끝나고 시간이 남으면 코드를 좀 정리해 보고 싶다.

 

posts나 comments를 삭제하면 users가 전부 비워지던 문제 (JSON-SERVER DELETE 문제)

본문이나 댓글을 삭제하면 전혀 건드리지 않은 users에 있던 유저들의 정보가 모두 비워지고 빈 배열로 변해버리는 문제가 발생했다. 처음엔 thunk 함수나 extrareducers 혹은 dispatch에 문제가 있는 거라 금방 찾을 수 있겠다 생각했지만 점점 큰 문제라는 생각이 들기 시작했다. 그래서 튜터님께도 질문드렸지만 해결하지 못하고 혼자서 일단 devtools를 보면서 어떤 구조로 삭제가 이루어지는지를 연구했다.

 

useEffect(() => {
    dispatch(__getComments());
    dispatch(__getPosts());
  }, [dispatch]);

본문 디테일 페이지에 useEffect로 comments와 posts만 불러오고 users는 필요가 없어서 불러오지 않았는데 이게 문제인 걸까 하는 생각이 들었다.

 

디테일 페이지에서는 useEffect로 서버의 users 정보를 불러오지 않기 때문에 디테일 페이지가 렌더링되었을 때 users는 빈 배열이 된다. 그래서 순간 이게 문제였던 걸까 생각이 들었지만 이 부분이 문제의 원인은 아니었다.

 

만약에 댓글을 삭제하면 서버에서는 user가 빈 배열로 변경되지만 콘솔로 state를 찍어봤을 때는 users안에 정보가 그대로 남아있는 것을 볼 수 있다. 근데 여기서 새로고침을 한번 하면 users를 서버에서 다시 불러오기 때문에 users가 또 빈 배열이 된다.

 

일단 devtools에서는 더 이상 찾을 수 있는 정보가 없는 거 같아서 구글링을 해보기로 했다. 처음에는 한글로 검색했다가 연관 검색어를 타고 영어로 검색했더니 실마리를 찾을 수 있었다.

 

구글링 검색 결과 발견한 깃헙 issue 스레드를 타고 내려가다가 너무 반가운 한국어 댓글을 만났다. 그런데 딱 우리가 겪고 있는 상황과 똑같았다! 그래서 DB의 key 값을 모두 수정했더니 드디어 users까지 삭제되던 문제가 해결되었다.

 

"users": [
    {
      "id": "4b9009fe-aa61-4be0-8133-4c48712d38bf",
      "userDi": "1111",
      "userPw": "1234qwer",
      "userName": "dfd"
    }
],
"posts": [
    {
      "id": "f94f264c-3037-43d9-97d6-12620eb8d888",
      "user": "4b9009fe-aa61-4be0-8133-4c48712d38bf",
      "title": "1",
      "categoryA": "1",
      "categoryB": "1",
      "like": []
    }
],
"comments": [
    {
      "id": "98bb8bb4-cc7d-4688-98b1-a5b7d4bf91fd",
      "postNumber": "f94f264c-3037-43d9-97d6-12620eb8d888",
      "user": "4b9009fe-aa61-4be0-8133-4c48712d38bf",
      "comment": " dff",
      "isA": "true",
      "date": "2022-12-26T09:22:49.324Z"
    }
]

모든 객체 안에 id는 그 객체의 고유한 uuid 하나만 남겨두고 그 외에 id가 들어가 있던 key를 수정했다. 예를 들면 users의 userId->userDi로, posts의 uid->user로, comments의 postId->postNumber로 수정했다. userId 뭐라고 수정할지 생각 안 나서 userDi가 되어버린 거 너무 웃기다 ㅋㅋㅋㅋ

문제를 해결할 수 있었던 링크😍
https://github.com/typicode/json-server/issues/885
https://github.com/roses16-dev/react-week-3/pull/18

 

로그인, 회원가입 페이지 CSS 수정

언제나 나의 CSS 목표는 깔끔하게 만들기. 미적 감각이 전혀 없기 때문에 깔끔하기한 하면 된다 ㅎㅎ

 

---

회고

이제 슬슬 프로젝트 마감이 다가오고 있기 때문에 이걸 다 끝낼 수 있을지 걱정이 된다. 그래고 필수 기능은 모두 구현해서 dev 브랜치에 합쳤기 때문에 모든 페이지에 기능이 구현되어서 진전이 있는 거 같다. 오늘 오후에는 본문이랑 댓글 삭제할 때 발생하는 에러 때문에 시간을 많이 잡아먹었지만 다행히 해결을 했다. 이거 해결 안 됐으면 진짜 큰일 날 뻔ㅠㅠ 그리고 css도 차근차근 진행되고 있고 발표 앞두고 자료 정리라든가 서버 배포, 발표자 등의 역할도 분담했다. 이제 마감까지 거의 하루가 남았는데 남은 기간 동안 최선을 다해서 좋은 결과물을 만들고 싶다! 근데 계속해서 자잘한 문제들이 자꾸 발견된다 이제 제발 그만해~~🤯