크롤러 새로고침 기능 추가

현재 링크를 저장하면 크롤러는 1회만 수행되어 최신데이터를 받아올 수 없다.

그래서 새로고침기능을 추가하여 버튼클릭시 기존 데이터를 삭제하고 새로운 데이터를 insert하도록 할 것이다.

순서는 다음과 같이 진행될 것이다.

1. 새로고침버튼 클릭
2. back으로 링크카드의 id를 전송하며 크롤링요청
3. back에선 해당 링크카드 id로 title을 조회, 이를 가지고 크롤링 수행
4. 크롤링 완료 후 링크카드 id로 crawl 테이블의 카드데이터 삭제
5. 크롤링데이터 insert
6. 완료되었다는 상태코드 반환
7. 반환받은 front서버는 성공시 reload 값 true로 변경
8. useEffect는 reload보고 있다가 변경시 리랜더링하도록 함

  const handleReload = e => {
    e.preventDefault();
    
    // console.log(e.currentTarget.firstChild.innerText); //현재 item 타이틀
    dispatch({
      type: "RELOAD_REQUEST",
      isReloaded: false,
      linkTitle: e.currentTarget.firstChild.innerText,
    });
  };

새로고침버튼을 클릭했을 때 호출되는 함수.

dispatch로 현재 클릭된 링크박스의 제목과 함께 RELOAD_REQUEST를 진행한다.

backServer로 요청을 전송하고 수행되어야할 내용은 다음과 같다.

app.post("/reload", cors(accecptURL), verifyToken, (req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "http://addyour.link:3000");
  const title = req.body.linkTitle;
  const userId = res.locals.userNickname;
  const linkCardId = `select id from links where users_id =
  (select id from users where nickname = '${userId}'
  and title ='${title}'
  )`;
  db.query(linkCardId, (dbErr, dbResult) => {
    console.log("findID : ", dbResult[0].id);
    db.query(`delete from crawl where links_id = ${dbResult[0].id}`, (error, result)=>{
      const crawlers = [
        ssgCrawler(title, dbResult[0].id),
        coupangCrawler(title, dbResult[0].id),
        naverCrawler(title, dbResult[0].id),
      ];
      Promise.all(crawlers).then((result) => {
        console.log(result);
        return res.status(200).json({ message: "성공" });
      });
    });
  });
});

3개의 크롤러를 수행하고 setHeader로 요청한 곳의 컨텐츠공유를 허락한다.

개인사용자를 식별해야하므로 사용자가 localStorage에 저장한 쿠키 내용을 받아 verifyToken에서 확인하는 작업을 진행한다.

확인이 완료되면 기존의 데이터들을 삭제하고 다시 재 크롤링해온다.

CORS JWT

너무 헤맨 부분이다.

따지고보면 front에서 back으로 토큰을 던지는 부분을 구현하지 않았다.

front에서 보내는 요청마다 token을 넣어두어 verifyToken을 제대로 수행할 수 있게 변경했다.

도중에 401에러가 계속 발생하길래 쿠키가 유효하지 않은가보다라고 다른 자료를 하면서 코드를 계속 고쳐갔지만 원래의 문제에서 점점 멀어지게 되었다 ㅎㅎ;

SameSite

CSRF(교차사이트 요청위조) 공격을 방지하기 위해 쿠키에 설정할 수 있는 속성

• Lax 로 설정되면 동일 사이트, 다른 사이트의 GET요청에서 쿠키가 전송됨.
• Strict 이면 동일 사이트 요청에서만 전송됨

기본적으로 설정되지 않으므로 전송되는 쿠키에 제한이 없음

나는 괜히 이걸 계속 건드림,, 쿠키도 없었으면서;;

서버에서 쿠키를 발급하면 프론트에서 응답을 받고 이를 localStorage.set or Get 으로 저장 및 가져올 수 있다.

프론트에서 응답받은 쿠키를 로컬스토리지에 저장하고 이를 다시 다른 요청을 보내면 서버에서는 verify작업을 하고 유효한 토큰인지 확인해서 다음 사항들을 진행할 수 있다.

다수의 사용자가 왔을 때 res.locals는 마지막 요청에 따라 바뀌지 않나??

back

pm2 start app.js

front

pm2 start npm -- start