Day40

이번주는 전체적으로 사이트를 배포하는 과정에 브라우저의 안전성을 높히는 과정들을 하고있다.
메모이제이션(Memoization)에 이어서 2가지와 추가적으로 Graphql에 대한 실체도 알아보았다.

Graphql의 실체

axios.post 를 할때 특정 API에 원하는 key:value 형태로 내보낸다.

Rest-api 은
엔드 포인트가 각각의 엔드 포인트가 있고

graphql 은
엔드포인트가 하나고 안에서 여러개의 함수로 있다.
그래서 보통 엔드포인트가 하나인 Rest-api 라고 부른다.

Post는 데이터를 담아서 등록하게 하는것인데
Graphql은 fetch든 mutation이든 value를 문자열로 백엔드에 보내줘야 하기때문에 항상 Post로 해줘여한다.

graphql 사실은 rest-api를 응용해서 만든것 이기때문에 GraphQLClient 같은 경우도 Axios로 하면 됐음 하지만 깔끔하게 사용하기 위해서 도움을 받은것!

옵티미스틱UI

단어 그대로 낙관적으로 생각하는 UI입니다. 서버로부터 받는 응답이 대부분 오류가 나지 않을 것이다. 성공적일 것이다라고 가정하고 사용자에게 성공했을 때의 결과를 바로 보여주는 것

좋아요 버튼을 예를 들어보자
좋아요를 누르면 좋아요 1를 백엔드에서 받고 아폴로 캐쉬 스테이트에 넣어주고 다시 백엔드에서 거쳐서 화면에 보여주는 순서라서 딜레이가 있다.
옵티미스틱UI 는 일단 먼저 캐시를 올려서 업데이트하고 화면에 뿌려주고 그리고 나서 백엔드에 통신해서 업데이트 요청을하고 백엔드는 캐시에 있는 데이터와 맞는지 확인, 틀리다면 다시 되돌린다.

Cahe.writeQuery(어떤 쿼리의 패치를  직접 수정)

수정할 query의 fetch를 불러와서 캐시를 수정해준다.
여기까지는 기본적인 캐시수정..

optimissticResponse 를 값을 바디전에 임시로 넣어주는 역할을 하게 된다.

실패할 확률이 없을때 사용을 하고 혹시나 실패한다고 해서 큰 영향이 없을 경우 사용을 한다.

안전성 높이는 과정

게시물 등록 하는 페이지를 만들고 등록시 여러번 누르면 게시물이 등록이 되어버린다.
그런 상황을 막기 위해서는 버튼에 disabled를 걸어준다.

초기 값이 fals인 stat를 만들어주고..

button에disabled 속성에 넣고 ..

클릭과 동시에 true값으로 만들어서 버튼을 잠시 비활성화 한뒤 데이터 전송이 끝남과 함께 다시 false 값으로 만들어 주면 된다.
💎
useForm 은 usestae 없이 따로 기능이 있다!!
// const {handleSubmit,formState} =useForm()
// disabled={formState.isSubmitting}
로 가능하다.

어느 부분에서 에러가 발생했는지 쉽게 찾을 수 있게 사이트 에러 로그 수집 시스템 사이트
Sentry

마무리

사이트 하나가 만들어지기 까지 이런 세세한 부분까지 신경써서 배포 된다는 것이 그동안 내가 사용해오던 사이트에 문제가 있으면 아무것도 모르고 관리자 일 안하고 뭐하는거야! 라고 했던 그날을 반성 하며 마무리,,,