호호,,, 모든 api와의 연결을 끝냈습니다
버린 기능은 눈감아 주세요
어떤거 했냐면
- 메인화면
- 쪽지 화면, 쪽지 쓰기
- 마이페이지 (닉네임 변경, 로그아웃, 탈퇴)
를 완성해서, 모두 완성했습니다!
쪽지
어,,, 쪽지를 연결했는데 과거의 제가 싸둔 💩이 나왔어요
조금.. 어처구니 없어서 웃음만 나옴...
아무튼 이 💩을 치우기 위해서
{msg.is_mine ? (
<p className="message-send">보낸 쪽지</p>
) : (
<p className="message-get">받은 쪽지</p>
)}이렇게 보낸메시지일 경우와 받은 메세지일 경우 색상을 다르게 처리했습니다.
아니 글쎄 이제 자연스럽게 ?:를 쓸 수 있게 되어서 내심 뿌듯..
짠 이렇게 발전하고, 내용 보여지게 했습니다,,
댓글 작성
저번주에 만든 댓글에 무슨 문제가 있었냐면
- 댓글 작성시 페이지 새로고침은 너무 많은 비용이 든다
- 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} // 요기!!
/>이렇게 해서 엔터를 치면, 로그인 버튼을 눌렀을 때와 같은 로직으로 처리하게 했습니다.
없으면 불편한데, 만들긴 조금 귀찮고, 이런 기능 하나하나 개발자의 노력이구나라는 생각이 드는 기능..
마무리
특별한건 이 정도였고, 나머지는 문제없이 백이랑 연결 잘 했습니다.
중간중간 백엔드 수정도 있었지만...
저는 백도 이제 배포 해둬서, 남은건 프론트 배포 뿐..ㅎㅎㅎㅎㅎㅎㅎ
