팀프로젝트 6주차 + 리뷰 더보기 버튼 구현

zizi·2022년 12월 25일
0

팀프로젝트

목록 보기
6/7
post-thumbnail

202212

드디어 팀 프로젝트의 마지막 주차!
프로젝트 초반에는 나름 진도가 빨리빨리 나가서 생각보다 빨리 개발을 끝낼 수 있지 않을까 생각했는데 배포를 하고 나서도 마지막의 마지막까지 수정을 하고서야 팀 프로젝트 발표를 마칠 수 있었다.

첫번째 수업

이번 시간에는 배포와 관련한 수업이었다.
처음에 다른 걸 이용해서 배포했다가 CORS 오류가 생겨서 netlify를 이용하여 일단 develop 브랜치로 배포를 했다.
문제 없이 성공해서 다행이었다. 추후 main 브랜치로 변경하여 재배포하였다.
CI=false npm run build
https://www.netlify.com/

두번째 수업

두번째 수업 때는 마지막 수업이자 발표, 회고의 시간이었다.
우리 팀을 이끌어주셨던 다른 팀원분께서 배포된 사이트를 시연하며 발표를 했고 그 이후 6주간 어땠는 지 좋았던 점, 아쉬운 점, 앞으로의 방향성 등에 대해 서로 답변하며 마무리를 지었다. 비록 6주간의 멘토링은 끝이 났지만 팀원들 모두 생각이 비슷해서 아직 마무리되지 않은 남은 과제들도 마저 함께 끝내기로 결정했다.

  • 메인화면

진행한 일

  • 필터링 뷰 스크롤바 스타일 수정
  • 리뷰 더보기 버튼 구현
  • 오버레이에 별점/리뷰수 연결
  • 편의점 상세 페이지 직접 접속 시 상세 페이지 url에 해당 편의점 정보를 받아올 로직 추가
  • 메인에서 맵 기본 좌표를 서울역으로 변경

추후 과제

  • 반응형 구현
  • 메인 브랜치 코드 정리 (import 및 폴더)
  • 프로젝트 자잘한 이슈 해결
  • 이력서 및 포트폴리오 정리

공부한 점

  • 나를 괴롭혔던 리뷰 더보기 버튼 구현(10개씩 받아오기)

-계속 뜨는 key값 중복 오류에 난항을 겪다가 이미 받아온 리뷰 리스트가 있으면 처음에 일단 지워주도록 reducer를 추가하였지만 Strict mode 때문인지 두번씩 실행되는 것때문에 중복이 잡히지 않았다.
리뷰를 받아오는 extraReducer(thunk)의 경우 pending이 있어서 내가 생각한 실행 순서와 차이가 있었기 때문이었다.(두번씩 실행된다면 리뷰 초기화 -> 다시 받아오기-> 리뷰 초기화 -> 다시 받아오기 순서라고 생각했는데 실행은 그렇게 되도 thunk 결과 받아오는게 딜레이가 있어 초기화가 끝난 후에 다시 받아오기->다시 받아오기 이렇게 되어버려서 리뷰가 중복이 될 수 밖에 없었음)
두 번 실행되는 게 Strict mode 때문이라고 들어서 Strict mode를 지워야하나 고민했는데 멘토님께서 중복값을 제거하는 로직을 추가하라고 하셔서 이 부분을 다시 해결할 수 있었다.

마지막 시연때 혹시 더보기 버튼이 제대로 동작을 안할까봐 걱정이 이만저만이 아니었는데 오류를 고칠 수 있어서 다행이었다.

  • Encounterd two children with the same key ... 오류
  • 리뷰 리덕스 순서
    리뷰 초기화 -> 리뷰 가져오기(thunk) pending -> 리뷰 초기화 -> 리뷰 가져오기(thunk) pending -> 리뷰 가져오기(thunk) fulfilled -> 리뷰 가져오기(thunk) fulfilled
// 객체 배열의 중복값 제거 로직
  const newReviews = reviews.filter((review, idx) => {
    return (
      reviews.findIndex((review1, idx1) => {
        return review.reviewEntryNo === review1.reviewEntryNo
      }) === idx
    )
  })

느낀 점

처음 해보는 팀 프로젝트의 발표까지 모두 끝내고 나니 정말 감회가 새롭고 뿌듯하다.
멘토링을 신청하고 팀을 짤 때까지만 해도 큰 기대보다는 포트폴리오에 추가할 팀 프로젝트 하나 만드는 것에만 의의를 두었었는데 기획부터 배포까지 백엔드와 다른 프론트 팀원분과 협업하며 정말 처음부터 끝까지 프로젝트를 해봤던 경험은 가치가 있었고 왜 다른 이들이 팀 프로젝트 경험은 꼭 해보라고 하는지 조금은 알 수 있었다.

사실 팀 프로젝트 중간까지만 해도 내가 끝까지 잘 마칠 수 있을 지 다른 팀원 분들에게 민폐가 되진 않을지 내 능력으로는 할 수 없는 일을 하려고 하는 건 아닌지 막막하기만 해서 진지하게 포기하고 싶기도 했다.
하지만 어떻게 코드를 짜야할 지 몰라서 어려움을 겪을 때 마다 함께 방법을 고민해주는 팀원들과 내가 어려워하는 부분을 이미 겪고 여러가지 해결 방법을 잘 공유해준 다른 많은 개발자 분들 덕분에 어찌저찌 해낼 수 있었던 것 같다.

누군가는 우리 팀프로젝트를 보고 별거 아니라고 생각할 수도 있겠지만 6주동안 여러가지 일들을 겪고 배우고 부족한 부분을 채우며 조금은 성장했기 때문에 나는 그 어떤 프로젝트보다도 잘 만들었다고 생각한다😊


리뷰 더보기 버튼으로 10개씩 리뷰 가져오기

ReviewListContainer.tsx

const ReviewListContainer = () => {
  const { storeId } = useParams()
  const navigate = useNavigate()
  const dispatch = useAppDispatch()
  const reviews = useSelector((state: RootState) => state.review.reviews)

  const [page, setPage] = useState(0)
  const [pageCount, setPageCount] = useState(0)
  
  const reviewCount = selectedStore?.reviewCount ?? 0
  
  // 받아온 리뷰의 중복값을 제거해주는 로직
  const newReviews = reviews.filter((review, idx) => {
    return (
      reviews.findIndex((review1, idx1) => {
        return review.reviewEntryNo === review1.reviewEntryNo
      }) === idx
    )
  })


// 처음 마운트됐을 때 리뷰가 있으면 리뷰 초기화
  useEffect(() => {
    if (reviews.length > 0) dispatch(initReviews())
  }, [])

// 총 리뷰 수에서 페이지당 받는 리뷰 개수를 나누고 우리는 페이지가 0부터 시작하므로 -1을 해서 반올림한 값을 setPageCount에 넣어준다. 
(PageCount가 Page보다 작아지면 더보기 버튼을 숨기기 위함)
  useEffect(() => {
    if (reviewCount) setPageCount(Math.ceil(reviewCount / REVIEW_SIZE - 1))
  }, [reviewCount])

// page state가 바뀔 때마다 리뷰 받아오기
  useEffect(() => {
    if (storeId) dispatch(fetchAllReviews({ storeId, page }))
  }, [page, storeId, dispatch])
  
  
   return (
   ...생략...
     <ListContainer>
     
     // 중복 로직을 추가한 리뷰리스트에 map 메소드 사용 
        {newReviews.map((review) => (
          <ReviewList
            key={review.reviewEntryNo}
            reviewId={review.reviewEntryNo}
            starCount={review.starCount}
            createdDate={review.createdDate}
            keywords={review.keywords}
            reviewContent={review.reviewContent}
            userId={review.userEmail}
          />
        ))}

	// page state가 pageCount state보다 크면 더보기 버튼은 더이상 보이지 않음
        {page < pageCount && reviewCount > 0 && (
          <FunButton
            name={'더보기'}
            className="opposite"
            // 더보기 버튼 클릭 시 page state 숫자 +1
            onClick={() => {
              setPage(page + 1)
            }}
          />
        )}
        {reviewCount === 0 && (
          <p className="noReview">등록된 리뷰가 없습니다.</p>
        )}
      </ListContainer>
   

reviewSlice.ts

const reviewSlice = createSlice({
  name: 'review',
  initialState,
    // 리뷰 초기화 reducer
  reducers: {
    initReviews: (state) => {
      state.reviews = []
    },
  },
  // 리뷰 받아오는 extraReducer - fetchAllReviews(thunk)
  extraReducers(builder) {
    builder.addCase(fetchAllReviews.pending, (state) => {
      state.loading = true
    })
    builder.addCase(
      fetchAllReviews.fulfilled,
      (state, action: PayloadAction<ReviewType[]>) => {
        state.loading = false
        state.reviews = [...state.reviews, ...action.payload]
      }
    )
    builder.addCase(fetchAllReviews.rejected, (state, action) => {
      state.loading = false
      state.error = action.error.message ?? ''
    })
    ...생략...

0개의 댓글