이벤트 배열 로직 수정 - 전

개요

처음 세모이를 개발할 때 짰던 로직이 문제가 있는거같다.

로직은 아래와 같다

---

1. DB에 들어있는 배열을 리턴하는 함수 (종료된 이벤트가 들어있을 수도 있는 배열)

2. 웹크롤링한 배열을 리턴하는 함수 (새로운 이벤트가 들어있을 수도 있는 배열)

3. 두 함수의 배열을 가져온다

4. 각 배열의 타이틀(이벤트명)을 새로운 배열에 담아낸다.

5. 다시 한번 각 타이틀명이 들어있는 배열을 비교하여 new배열엔 없는 db배열을 반환

const db_Title = ['첫째', '둘째', '셋째', '넷째', '다섯째', 'haha'];
const new_Title = ['첫째', '둘째', '셋째', '넷째', '여섯째'];

const pareTitle = db_Title.filter((i) => !new_Title.includes(i));

console.log(pareTitle); //[ '다섯째', 'haha' ]

 

6. 반환된 배열의 길이가 0일 경우 종료된 이벤트가 없음으로 간주하여, 그대로 setState하여 렌더링

 

7. 반환된 배열의 길이가 1 이상일 경우 종료된 이벤트가 있는걸로 간주하여, 다음 로직을 실행하여

종료된 이벤트는 삭제하고, 새로운 이벤트는 들어있는 recent배열 생성

const tableDataTitle = ['첫째', '둘째', '셋째', '넷째', '다섯째', 'haha'];
const newData = ['첫째', '둘째', '셋째', '넷째', '여섯째'];

const compareNewData = newData.filter((i) => {
  const title = i;
  return !tableDataTitle.includes(title);
});
console.log(compareNewData); // [ '여섯째' ]

 

8. recent배열을 db에 전송하여 저장한다.

9. 7번과 반대로 종료된 이벤트들이 들어있는 배열을 생성한다.

const tableDataTitle = ['첫째', '둘째', '셋째', '넷째', '다섯째', 'haha'];
const newData = ['첫째', '둘째', '셋째', '넷째', '여섯째'];

const delData = tableDataTitle.filter((i) => {
  const title = i;
  return !newData.includes(title);
});

console.log(delData); // [ '다섯째', 'haha' ]

10. 종료된 이벤트배열을 db에 전송하여 삭제한다.

 

11. db의 배열을 다시 받아와서 최신배열을 렌더링해준다.

---

개발간에 느꼈던 문제점은 아래와 같다.

1. 페이지 첫 렌더링 시에는 꼭 새로고침을 해줘야만 이벤트가 나온다.

2. 매월 진행되는 이벤트는 날짜만 바뀌기때문에 타이틀명만 비교해서는 날짜 최신값 유지가 안되는 점

 

각 문제를 해결해보자

 

1번문제의 특이한 점은 첫 렌더링 시에는 올리브영 데이터를 크롤링 할 때

CORS정책으로 인한 오류가 뜨기때문에 무한로딩에 걸리지만

새로고침시에는 CORS오류없이 api통신을 주고받아 렌더링이 된다는 점이다...

 

CORS문제는 올리브영 서버에서 내 서버를 허용해주지않는 이상 뜨는게 당연하지만,

왜 새로고침을 하고나면 통신이 되는지 궁금했다.

 

우선 CORS위반 시 나오는 네트워크 헤더를 보자

이 후 새로고침 시 나오는 네트워크 헤더

 

응답 헤더의 원격 주소 유무의 차이가 있다.

원격 주소( remote address)는 클라이언트가 요청하는쪽의 주소를 표시해주는것인데

무한 로딩의 원인은 내가 요청하는곳에 주소가 누락되어있으니 데이터 또 한 받아오지 못한다고 본다.

이 상황은 너무 랜덤적이어서 문제에서 배제하였다

 

임시해결책

useEffect로 데이터를 불러올 때 try catch문으로 감싸주어

CORS ERROR가 났을 때 catch하여 화면을 새로고침해주는것으로 해결하였다.

홈페이지가 리플로우 된다는것은 걱정이다.