Jaeilit

Apollo Client Apollo 란 GraphQL 의 클라이언트 라이브러리 중 하나로 GraphQL을 사용 한다면 거의 필수적으로 사용하는 상태 관리 플랫폼입니다. 소개 1. Query 및 Mutation 직접 전송 API 서버에 데이터를 가져오기 위해 번거로운 네트워크 단의 HTTP 요청을 신경 쓸 필요가 없어진다. (axios, fetch 사용 할 필요가 없다.) 2. 전송받은 데이터 캐싱 클라이언트의 반복요청을 줄이며 서버 부하를 줄일 수 있을 뿐만 아니라 서비스를 이용하는 사람들에게 더 나은 사용자 경험을 제공 할 수 있다. 3. Local state 관리 클라이언트만의 Local State 를 만들어 Query, Mutation, Resolver의 사용이 가능하다. 4. Overfetchi..

최근 리덕스 대체제로 많은 라이브러리들이 언급되고 있는데 React Query 와 SWR 에 대해서 비교 기본 개념 React Query React Query 는 리액트 애플리케이션에 서버 상태를 가져오고, 캐싱하고, 동기화, 업데이트 하는 것을 쉽게 해준다. SWR SWR 은 먼저 캐싱 된 데이터를 반환하고, 서버 데이터를 가져오는 요청을 보내고 마지막으로 최신 데이터를 제공하는 전략 1. Provider SWR은 별도의 Provider 없이 컴포넌트에서 바로 사용 할 수 있지만, React-Query 는 Provider로 컴포넌트를 감싸줘야한다. 2. Fetcher useSWR, useQuery 모두 두 번째 인자로 fetch 를 받는다. SWR 은 useSWR 의 첫번째 인자로 fetch url 을..

https://react-query.tanstack.com/overview Overview Overview React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze. Motivation Out of the box, React a react-query.tanstack.com 리액트 쿼리가 리덕스를 따라 잡은 모습(2022.02) React query 소개 대부분의 기존상태관리 라이브러리는 ..

SWR 이란? stable-while-revalidate 의 약자, 해석) 캐시가 가지고 있는 stable response 이 유효한지 백그라운드에서 재검증 하는 동안 해당 stable response를 즉시 리턴하여 네트워크 지연시간을 숨기는 전략 캐싱 된 데이터가 있으면 먼저 가져오고, 서버 데이터를 가져온 후 마지막으로 최신의 데이터를 리턴한다. SWR 의 특징 1. 전역상태 관리 기능 (리덕스 대체 가능) SWR 사용 예시로 리덕스 대체 가능성을 가장 많이 언급하고 있다. 이유는 기본적인 리덕스는 액션타입 정의부터 액션함수, 리듀서 그리고 비동기 로직에 필요한 미들웨어 thunk액션 또는 saga 함수 등 방대한 작업량과 다소 반복적인 작업이 있을 수 있다. 이런 문제를 SWR은 아래 코드로 줄여..

s3 업로드시 이미지 리사이징을 위해서 imageKit 라이브러리를 사용했다. 동작은 s3에서 업로드 된 이미지를 가져올 때 imagekit 라이브러리를 통해서 webp 확장자로 변환해주면서 이미지 사이징을 줄여줘서 로딩속도 향상 효과를 불러온다. 실제 사용 후기 이미지 확장자를 webp로 변경하고 이미지 용량을 90% 이상 줄임 응답속도 약 16% 향상 정리 확장자를 크롬에서는 webp, 사파리에서는 jpeg 로 자동으로 변경해준다. webp 란 웹피라고도 불리며 손실/비손실 압축 포맷이다. 현재 프로젝트에서 확인해보지 못했으나 예시 자료에서는 용량이 500kb -> 300kb 로 약 30% 줄었다고 볼 수 있다. 예시 자료 https://post.naver.com/viewer/postView.nhn?..

라이트 하우스에서 우리 프로젝트가 Performance 16점이 나왔다. 번들 용량이 많다.. spa 경우 이 번들 패키지를 한번에 다운로드받고 그게 완료되면서 렌더링을 하는데그렇기 때문에 초기 로딩속도가 느리다고 하는 것임.. 우리 번들은 용량이 꽤 되보인다. 구글링 이후 16점 짜리 퍼포먼스를 끌어올리려면 필요한 번들만 가져오게끔해야한다고 했다. 리액트 공식홈에도 있듯이 lazy를 사용하는 방법인데 사실 어젯 밤에 다 일일이 바꿔주었음에도 16점이 나왔다.. 그전에도 16점이였고 변화가 없었다.. 직접 번들패키지를 눈으로 보고싶어서 webpack-bundle-analyzer 를 사용했다. cra에서 웹팩을 수정하는 방법도 있지만 수정하려면 웹팩을 꺼내기위해서 eject를 해야해서 패키지 통일성?이 깨..

프로젝트 기간이 끝났다. 하지만 이 프로젝트에 대한 문제점은 계속 개선해 나가야했다. 성능을 위해서 지금 생각나는 부분은 크게 2가지 부분이였다. 1. 이미지 리사이징 (라이트하우스 성능) 2. 코드 컴플리트 여기는 이미지 리사이징을 글을 쓰겠음. 라이트 하우스를 돌려본 결과 이미지에 대한 문제가 많았다. 이유는 구글링을 열심히 해본 결과 110px 크기를 위해 1200px 크기를 불러온다? 라는 이유였다. AWS S3 현재는 프론트(내가) aws3에 업로드를 하고 거기서 버켓안에 이미지 객체 url을 따와서 렌더링 해준다. 렌더링 해줄 때에 위에도 말했듯이 110px크기를 위해 1200px을 불러와서 110px 크기로 css로 넣어준다. 원본 이미지 자체가 1200px 이라 용량이 큰 걸 불러와서 이미..

평소 작업하면서 의아했던 부분 시간이 없어서 나중에 리팩토링때 보자고 기억?해뒀던 부분들을 다시 보고 찾아보니 서서히 문제점이 발견되기 시작했다. 1. 로그인체크유무 axios 파일에 instance에 인터셉터와 기본헤더설정을 같이하고 있음 의아했음 인터셉터는 요청마다 가로채는 역할인데 여기에 토큰을 걸면 요청마다 헤더에 토큰유무를 알고 요청하지않을까? 근데 지금 기본헤더설정으로 토큰 값을 주고 있음, 결론은 둘중에 하나는 기능을 못하는 것임. console 로 인터셉터에 토큰이 들어오는지도 찍어보고 요청을 보내봤지만 토큰이 유지되지 않는 것, 해결 문제점... config.header.common 부분에 매개변수 config 를 받아와서 메서드를 써야하는데 이 전에는 instance.header로 작성..

1. 문제 내 정보 수정화면입니다. 수정 할 자기소개와 주소변경으로 주소를 변경했을 때 수정하기 버튼을 눌러야 수정이 됩니다. 하지만 구단변경을 누르면 본인이 응원하는 구단을 선택 할 수있는 새로운 페이지로 이동이 되는데 새로운 응원 구단을 선택한 뒤 다시 돌아오면 수정하려고 입력해놓은 자기소개와 주소변경이 초기화 되있습니다. (당연한이야기) 이거를 피드백을 통해서 수정 했던 자기소개와 주소는 사라지지 않게 해달라고 하셨습니다. 저는 웹저장소 중에 sessionStorage를 사용했습니다. 사용 한 이유는 수정하기 누르기전까지는 서버에 전송하지 않습니다. (Cookie 와 local, session의 차이) 현재 창에서만 유효해야하고, 브라우저를 껏다 켯을시에는 삭제 되어야한다. (local과 sessi..

배경설명 서버에서 받아온 이 데이터들을 가공해서 써야함 제가 원하는 데이터형태는 날짜를 큰 제목으로 그 안에 해당날짜 리스트들이 있는 것. 실제로 화면에도 그런식으로 뿌려줘야함 (밑에 실제화면) 실제코드 일단 서버에서 내려준 날짜와 같은 날짜들 경기들만 모아놔야하기 때문에 dayjs 라이브러리를 사용해서 서버와 날짜 형식을 같게 맞춰줌 사진에는 안나와있지만 dayjs를 day로 선언함. dayjs.add(14일 날짜 ++, "day).format() 서버와 형식을 맞춰줌 날짜를 date라는 ary에 담아두고 서버에서 내려준 데이터 play_list에 filter를 걸어 해당날짜가 포함된 경기들만 다시 list에 담아둠 이제 list에는 12월3일 경기가 3개가 될 수 있고 4개가 될 수 있고 많을 수 있..