Pre Onboarding Assignment 2차 과제 후기 글입니다.
제출 시간에 쫓겨 제대로 검토를 하지 못해 많은 기능적 오류가 있습니다. 추후 리팩토링할 예정입니다.
레파지토리 : 🔗링크
이번 과제는 4명이 한 팀을 이뤄 진행한 과제였습니다. 그만큼 과제 사이즈도 어느 정도 있었고 저와 제찬 님이 함께 recentList 페이지를 담당했습니다.
이번 주제가 mock data
에 관한 내용이었지만, recentList 페이지 팀은 product 팀에서 건네받을 localStorage
데이터가 필요했습니다.
데이터 형식을 product 팀과 정의하고, 크롬 개발자 도구에서 바로 데이터를 집어넣는 방식으로 localStorage
mock data
를 구현했습니다.
제가 맡은 기능은 관심 없는 데이터를 필터링하고, 가격, 최근 조회 순으로 정렬하는 기능입니다.
필터 하기 위해 filter 메소드
를 사용했습니다. filter 메소드
의 특징은 결과물이 새로운 배열을 반환한다는 것입니다. 따라서 필터 하기 전 데이터를 유지하기 위한 방법이 있어야 했습니다.
localStorage.getItem
으로 받아온다.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: [],
});
}
}
}