이벤트 배열 로직 수정 - 후

개요

세모이의 메인아이템인 브랜드 이벤트 데이터 수집을 리팩토링한다.

 

 

로직

기존에는 클라이언트에서 GET메서드로 이벤트 페이지를 받아왔지만

변화한 로직은 먼저 클라이언트는 서버에게 이벤트페이지 URL을 담아 POST 요청을 한다.

서버에서 GET메서드로 페이지 데이터를 받아와 가공한 뒤,

DB에 저장하거나, API주소에 따라 필요한 데이터를 반환해준다.

 

이를 통한 이점은 클라이언트에서 CORS오류로 앓던 문제를 해결할 수 있다.

 

 

구성

필요한 데이터는 아래와 같다.

---

DB

event_index

event_title

event_date

event_img

event_link

event_view

---

SERVER

- 현재 이벤트페이지에 진행중인 이벤트 정보가 담긴 A배열 (이벤트 제목, 이미지, 행사 기간, 이벤트 링크)

- DB에 담아놓은 이벤트 정보가 담긴 B배열

 

- 위 두개의 배열을 비교하여 최신값은 추가하고 레거시값은 제거한 C배열

- 추가된 최신값의 갯수

- 제거된 레거시값의 갯수

---

최신값 유지

접속 시.....(반복)

A배열을 B배열과 비교한다.

위에서 비교한 C배열을 생성한다.

C배열을 DB에 넣는다.

C배열을 상태값에 할당하여 렌더링한다. 

---

남은 기간

각 사이트마다 날짜를 출력하는 방법이 다르다.

그때 그때 맞춤코딩을 해줘야한다.

아래는 한 사이트를 두고 작성한 예시이다.

let event_date = '22.05.07 - 22.05.31';

let a = '20' + event_date.slice(10).replaceAll('.', '-')

console.log(a) // 2022-05-31

 

가공하고나면 Date()객체에 들어갈 수 있다.

가공한 날짜값과 현재 날짜값을 비교하여 남은 일수를 계산하여 출력해준다.