프론트엔드 개발자가 되기위한 여정 -34

이정우·2022년 10월 19일
0

frontend-bootcamp

목록 보기
36/60

밸~하!

밸로그 여러분 안녕하세요

벌써 34번째 글이네요!

그럼 오늘도 시작해볼까요!

오늘의 주제는 바로 optimistic-ui입니다! 추가로 scraping과 crawling에대해서 살짝 맛보기로 알아보겠습니다

optimistic-ui란 무엇일까요??

optimistic-ui란

쉽게말해 optimistic-ui란
컴퓨터를 속이는것이라고 할수있겠습니다
무슨말이냐고요?

기존의 컴퓨터의 작동방식에 대해서 보면서 이야기 드리겠습니다

먼저 브라우저에서 Event를 발생시켜서 백엔드 컴퓨터로 보내줍니다 이후에 백엔드 컴퓨터는
DB에 데이터를 보내고 DB는 그 값을 다시 백엔드 컴퓨터에 보내주게 됩니다
그런이후 백엔드 컴퓨터는 브라우저에 다시 값을 보내주게 되고 브라우저는 UI에 반영하게 됩니다

자! 이 로직 보기만 해도 오래걸리죠?

이번엔 optimistic-ui를 사용해서 해볼까요??

작동방식은 비슷합니다
먼저 브라우저에서 Event를 발생시켜서 백엔드 컴퓨터로 보내줍니다 이때 브라우저에도 같이 신호를 보내주게 되고 먼저 결과값을 반영한 이후에 백엔드 컴퓨터가 DB에서 받아온 데이터를 반영해주게됩니다
훨씬 빠르죠?

아직 살짝 어려운가요?
그럼 한줄로 요약을 해보겠습니다!
옵티미스틱 UI란 요청이 서버에 도달하기도 전에 화면의 값을 바꿔버리는 것 이라고 할수 있습니다!
이제 조금 이해 되셨나요??

그러면 항상 optimistic-ui를 쓰면좋을까요?
아닙니다!
복잡한 로직 예를들어 결제 시스템 같은경우에는 사용하면 위험해집니다

왜요?
optimistic자체는 결과값을 미리 보여주지만 DB또는 BE컴퓨터에서 검증을 실패하게 되면 모든 작동이 오작동하기 때문인데요

그렇다면 도대체 이 optimisticUI라는 것은
언제사용할까요??
바로

성공가능성이 99%이상이거나 실패하더라도 타격이 거의 없을때 사용합니다!

예를들어

좋아요 버튼을 누르고 카운트를 올린다던가
아니면 구독버튼을 누르면 카운트를 올린다던가
같은 것들이요!

이번에는 scraping과 Crawling에 대해서

scraping VS crawling

간단히만 알아보고 가겠습니다

먼저 Scraping과 crawling둘다 다른사이트에서 정보를 가져오는것이라고 할수 있겠습니다

그럼 두개의 차이점은 무엇일까요??

scraping은 한번만 가져오는것이고
crawling은 일정주기로 계속 가져오는것입니다

쉽게말해 crawling은 scraping을 일정주기로 반복한다고 할수 있겠습니다

그런데 이것들의 문제가있습니다
어떤것이 있는가 하면
바로

문제점

다른 사람들이 작업한것을 가져오기 때문에

1. 가지고온 데이터로 돈을 번다면 문제가 될 수 있습니다

그리고 지속적으로 데이터를 가져오기때문에

2. 너무 많은 접속으로 해당 회사 서버에 부하를 줄 수 있음

2번은 왜 문제가 될까요?
많은 접속으로 인해 공격으로 인식될수도 있기 때문입니다!

그러면 어떻게 가져올까요?

POST man을 사용하여 어떻게 올라가는지 방식을 찾은 이후에 알고리즘을 작성하여 가져오면 되는데
이것을 구현하기에는 살짝 어렵습니다

그래서 소개드릴 도구는

javascript에서 지원되는 cheerio라는 스크랩핑도구와 puppeteer라는 크롤링 도구입니다

이 도구들을 사용해서 크롤링과 스크랩핑을 할 수있게됩니다

오늘은 직접 구현하는 모습까지는 포스팅하지 않겠습니다
다만 다음에 기회가 된다면 크롤링과 스크랩핑을 하는 방법 또한도 같이 포스팅하겠습니당~

자 오늘의 포스팅은 여기까지!

오늘은 optimistic-ui에 대해서 알아보았는데
이 방식을 사용하면 즉각적으로 브라우저에 반영할수있어서
UX측면에서 훨씬 좋았었죠
하지만 복잡한 테이블이나 중요한 정보같은것들은 에러가 날 확률이 높기 때문에
성공률이 99퍼 이상이나 에러가 나도 시스템에 크게 영향을 주지 않는것들에 적용하는게 좋겠죠?

그리고 크롤링과 스크랩핑의 간단한 차이에 대해서 알아보았습니다

오늘도 적은 지식이나마 쌓아가봐요!

그럼 오늘도 이만
밸~바!

profile
주니어 프론트엔드 개발자

0개의 댓글