TIL 220626 클론코딩 회고

기간 : 6/17 ~ 6/23
프론트 깃헙 : https://github.com/jeehye03/carrot_FE
유튜브 : https://www.youtube.com/watch?v=gpb6dWag9Uo

클론코딩이 끝났습니다!!!!
우리팀은 실시간채팅을 구현하고 싶어하시는 분 이 많이 계셔서 채팅이 들어간 사이트 들 중 당근마켓 을 선택하게 됐고 웹버전이 아닌 모바일 크기로 만들었다.!

• 로그인/회원가입
• 프로필 수정/지역 변경
• 메인 상품 리스트
• 디테일 상품 페이지 / 수정 / 삭제
• 마이페이지 -> 판매중/ 예약중/ 관심목록
• 채팅

이번엔 클론코딩이다보니 기능도 기능이지만 당근마켓 앱 과 똑같이 만들고 싶어서 스타일에 신경을 많이 썼다. 하지만 코드가 너무 길어지고 중복된 스타일들이 있었기 때문에 이걸 컴포넌트로 나눠서 불러서 썼다면 더 효율적으로 관리 할 수 있었겠다는 생각이 들었다.

🥯 멘토링 후 이마를 탁 친 일 🥯

input type에 number가 있어서 숫자만 입력 가능한 아주 멋진 타입이 있었다. if문으로 막았는데 이렇게 간단하고 멋진 input이 있는걸 알았더라면 코드가 더 간단해졌을거다 ..

그리고 트러블슈팅에서 내가 겪었던 일은 게시물 등록 후 메인으로 페이지가 이동하는데 서버에서 게시물 리스트를 가지고 오는 시점보다 페이지 이동이 먼저 되어서 새로고침을 눌러야만 리스트에 추가 되는게 보였다.

이걸 해결한 방법은 게시물 등록 onclick에 있던 navigate를 지우고
미들웨어 dispatch 밑에 navigate를 넣어 다 실행이 된 후 페이지 이동을 시키도록 했다.

기술매니저님께서 이 방법도 맞다고 했지만 다른 방법도 알려주셨는데
onclick 안에 있는 dispatch 에 await를 걸어서 기다리게 만들고 미들웨어가 다 끝난 후 디스패치 하도록 해 주는것 !!!!!

// 수정 전
const upload = () => {
    const newPost = {
      title: title_ref.current.value,
      postImg: img_ref.current.url,
      content: content_ref.current.value,
      category: category,
      price: numberPrice,
    };

    dispatch(carrotPost(newPost, navigate));
  };

// 수정 후
const upload = async () => {
    const newPost = {
      title: title_ref.current.value,
      postImg: img_ref.current.url,
      content: content_ref.current.value,
      category: category,
      price: numberPrice,
    };

   await dispatch(carrotPost(newPost));
   navigate("/main")
  };

느낀점

이번주는 잘하시는분들과 함께여서 많은걸 배웠다.
협업이란 이런것이다 ! 라는 것 도 배우고 기술적으로도 많은 도움을 받았다.
뭔가 많은걸 배운 것 같긴한데 성장 한거 맞지 .. ?
이제 마지막으로 실전 프로젝트만 남았다 .. 진짜 잘 해보자 !!!!