Pre Onboarding Assignment 2차 과제 후기 글입니다.
제출 시간에 쫓겨 제대로 검토를 하지 못해 많은 기능적 오류가 있습니다. 추후 리팩토링할 예정입니다.
레파지토리 : 🔗링크

Assignment 2 : 미스터 카멜 기업 과제

이번 과제는 4명이 한 팀을 이뤄 진행한 과제였습니다. 그만큼 과제 사이즈도 어느 정도 있었고 저와 제찬 님이 함께 recentList 페이지를 담당했습니다.

✔️ mock data를 위한 mock data

이번 주제가 mock data에 관한 내용이었지만, recentList 페이지 팀은 product 팀에서 건네받을 localStorage 데이터가 필요했습니다.
데이터 형식을 product 팀과 정의하고, 크롬 개발자 도구에서 바로 데이터를 집어넣는 방식으로 localStorage mock data를 구현했습니다.

✔️ data 분류와 정렬

제가 맡은 기능은 관심 없는 데이터를 필터링하고, 가격, 최근 조회 순으로 정렬하는 기능입니다.

관심 없는 기능 필터링

필터 하기 위해 filter 메소드를 사용했습니다. filter 메소드의 특징은 결과물이 새로운 배열을 반환한다는 것입니다. 따라서 필터 하기 전 데이터를 유지하기 위한 방법이 있어야 했습니다.

데이터 유지 방법

1. 필터를 제거하면 다시 localStorage.getItem으로 받아온다.
2. originData 변수를 생성해 필터 하기 전 원본 데이터를 저장한다

저는 매번 localStorage.getItem을 하는 것보단 원본 데이터를 저장하는 것이 옳다고 판단해 2번 방법을 선택했습니다.

  // checked는 checkbox의 체크 여부입니다.
  onFilterInterest(checked) {
    const { data, originData } = this.state;
    if (checked) {
      this.setState({
        ...this.state,
        // 원본 데이터를 저장하고, isNotInterested 변수를 이용해 filter
        originData: [...data],
        data: data.filter((v) => !v.isNotInterested),
      });
    } else {
      this.setState({
        ...this.state,
        data: [...originData],
      });
    }
  }

조건별 정렬 기능

sort 메소드를 이용해 정렬했습니다. 토글 변수를 이용해 오름 / 내림 차순 정렬을 구현했습니다. 관심별 filter 기능과 동시에 사용하기 위해 originData도 같이 정렬해 줬습니다.

가격별 정렬 기능

  onSortCheap() {
    const { data, originData, priceSortToggle } = this.state;

    if (priceSortToggle) {
      this.setState({
        ...this.state,
        priceSortToggle: !priceSortToggle,
        data: data.sort((a, b) => a.price - b.price),
        originData: originData.sort((a, b) => a.price - b.price),
      });
    } else {
      this.setState({
        ...this.state,
        priceSortToggle: !priceSortToggle,
        data: data.sort((a, b) => b.price - a.price),
        originData: originData.sort((a, b) => b.price - a.price),
      });
    }
  }

날짜별 정렬 기능

localStorage에 Date 객체가 들어오므로 Date 객체를 이용해 정렬해 줬습니다.

  onSortRecent() {
    const { data, originData, recentSortToggle } = this.state;

    if (recentSortToggle) {
      this.setState({
        ...this.state,
        recentSortToggle: !recentSortToggle,
        data: data.sort((a, b) => new Date(a.date) - new Date(b.date)),
        originData: originData.sort(
          (a, b) => new Date(a.date) - new Date(b.date)
        ),
      });
    } else {
      this.setState({
        ...this.state,
        recentSortToggle: !recentSortToggle,
        data: data.sort((a, b) => new Date(b.date) - new Date(a.date)),
        originData: originData.sort(
          (a, b) => new Date(b.date) - new Date(a.date)
        ),
      });
    }
  }

✔️ 조건 별 페이지 이동

상품 클릭 시 관심 없는 상품은 그 상품의 detail page로, 관심 없는 상품은 alert 메세지를 띄우도록 구현했습니다.
해당 상품의 id를 이용해 해당 상품의 detail로 가도록 구현했습니다.

  goShowDetail(isNotInterested, id) {
    // isNotInterested가 true면 관심 있는 것 -> 상세 페이지 이동
    if (!isNotInterested) {
      this.props.history.push(`/product/${id}`);
    } else {
      // isNotInterested가 false면 관심 없음 -> alert('접근금지')
      alert("관심없는 제품입니다.");
    }
  }

✔️ 일정 시간이 지난 후 로컬 스토리지 초기화

00 시 기준 localStorage가 초기화되는 기능입니다. 00시 기준, 즉 하루가 지나가면 localStorage를 초기화하는 방식으로 구현했습니다.

  componentDidMount() {
    const { data } = this.state;
    const today = new Date().getDate();

    if (data.length > 0) {
      const currentDate = new Date(data[0].date).getDate();

    //localStorage 데이터의 날짜와 오늘 날짜가 다른 경우 localStorage를 초기화 하는 방식으로 구현했습니다.
      if (today !== currentDate) {
        // localStorage.clear()
        clearStorage();
        this.setState({
          ...this.state,
          data: [],
        });
      }
    }
  }

🙏 과제 후기

• 개인적으로 조금 아쉬움이 남은 과제였습니다. 아무래도 같은 프론트엔드 개발자 끼리의 협업은 처음이라 기능을 분리하고 합치는데 많은 어려움을 느꼈습니다. 예를 들어 같은 로직으로 구현해야 하는 기능을 둘이서 다른 로직으로 나눠서 구현하다 보니 합칠 때 로직이 같지 않아 어려움을 느꼈고 구현 기능 분리를 신중하게 해야 하겠다고 생각했습니다.
• 컴포넌트 클래스 형으로 React를 구현하다 보니 굉장히 애를 먹었습니다. 하지만 라이프 사이클을 공부하며 함수형 컴포넌트 hook의 사용을 익히는 데 도움이 많이 됐습니다.
  • 라이프 사이클과 함수형 컴포넌트 hooks의 관계