호호,,, 모든 api와의 연결을 끝냈습니다
버린 기능은 눈감아 주세요

어떤거 했냐면

• 메인화면
• 쪽지 화면, 쪽지 쓰기
• 마이페이지 (닉네임 변경, 로그아웃, 탈퇴)

를 완성해서, 모두 완성했습니다!

쪽지

어,,, 쪽지를 연결했는데 과거의 제가 싸둔 💩이 나왔어요

조금.. 어처구니 없어서 웃음만 나옴...
아무튼 이 💩을 치우기 위해서

{msg.is_mine ? (
  <p className="message-send">보낸 쪽지</p>
) : (
  <p className="message-get">받은 쪽지</p>
)}

이렇게 보낸메시지일 경우와 받은 메세지일 경우 색상을 다르게 처리했습니다.
아니 글쎄 이제 자연스럽게 ?:를 쓸 수 있게 되어서 내심 뿌듯..

짠 이렇게 발전하고, 내용 보여지게 했습니다,,

댓글 작성

저번주에 만든 댓글에 무슨 문제가 있었냐면

1. 댓글 작성시 페이지 새로고침은 너무 많은 비용이 든다
2. useEffect 사용 -> 데이터만 새로 받아오다보니, input 창에 내용 그대로 남아 있음

그래서,, 별건 아니고 그냥 댓글작성 버튼 누를때 setComment("")로 초기화 해줬습니다.

뒤로가기

TopNavigation에 수많은 뒤로가기들이 있었는데,
이걸 이전 페이지를 어떻게 알아내서 다 뒤로 잘 가게 처리해주는게 복잡 하던 참에
useHistory의 이름이 history인데 뒤로가기 기능은 당연히 있지 않을까? 하고 찾아보니 있었습니다.

let histroy = useHistory();

history.goBack();

을 이용해서 뒤로가기 해줬습니다.
그래서 막 작성한 글에서 뒤로가면 글쓰기 화면으로 가....난 몰라..

엔터로 댓글쓰기 & 로그인하기

아니 이게 없으면 진짜 귀찮은 기능..
매번 로그인 버튼 마우스로 눌러줘야하는 ㅜㅜㅜ

  const onEnterPress = (e) => {
    e.key === "Enter" && onClickLoginBtn();
  };

// return 안에서
<MainInput
  type="password"
  value={pw}
  onChange={onChangePw}
  handleFocus={handleFocus}
  placeholder="비밀번호"
  onKeyPress={onEnterPress} // 요기!!
/>

이렇게 해서 엔터를 치면, 로그인 버튼을 눌렀을 때와 같은 로직으로 처리하게 했습니다.
없으면 불편한데, 만들긴 조금 귀찮고, 이런 기능 하나하나 개발자의 노력이구나라는 생각이 드는 기능..

마무리

특별한건 이 정도였고, 나머지는 문제없이 백이랑 연결 잘 했습니다.
중간중간 백엔드 수정도 있었지만...
저는 백도 이제 배포 해둬서, 남은건 프론트 배포 뿐..ㅎㅎㅎㅎㅎㅎㅎ