전대위키 리팩토링

이번에 두번째로 진행한 프로젝트가 끝났다. 부스와 발표를 준비하며 느낀점을 KPT방식으로 회고해보려고 한다.Keep 이번에 처음으로 프론트엔드끼리 협업을 했는데, 조금 후에 시작했지만 Pr 보내고 서로 연락한 것이 좋았다. 사실 연락하지 않고 슬랙에 깃허브 알림 연동을

해당 페이지를 만들기 위해서는 수정 전 정보와 수정 후 정보를 불러와야 한다. 그런데 useQuery를 이렇게 썼더니 해당 페이지를 두번째에 들어가야 정보가 불러와지는 에러가 발생했다. 이처럼 병렬적인 여러개의 api 요청이 필요한 경우 useQueries 라는 훅을

관리자 페이지에서 정보 수정요청과 새 장소 신청 요청 각각 무한스크롤로 정보를 받아와야 했다. react-query로 비동기 관리를 했기 때문에 useInfiniteQuery를 이용하기로 했다. 무한스크롤 필요한 용어 IntersectionObserver로 바닥

프로젝트에서 role, access token, 사용자 정보 등을 리덕스로 저장하여 사용을 했다. 하지만 리덕스는 새로고침을 했을때 데이터가 날아간다는 단점이 있었다. 그래서 redux-persist 를 이용해서 새로고침 해도 데이터가 남아있게 구현해줬다.storage

관리자 페이지에서 요청이 하나 남았을 때 수락 혹은 취소를 하면 약 3초간 요청이 남아있었다.네트워크창을 열어보니 404 에러가 뜨고 요청을 3번 더 보내는 것을 확인할 수 있었다.react-query 는 요청 실패 시 기본 3번 재요청을 보낸다. 따라서 값이 없을 때

admin의 구조는 AdminForm > Title + AdminBox > RequestContainerBox 2개 > 컨테이너 css 구조 ... 로 되어있다. 따라서 2개의 컨테이너를 나눠서 무한스크롤을 적용하려면 각각 useRef로 bottom 을 지정해주

Vue나 React같이 SPA로 된 프로젝트의 경우는 자바스크립트만 동작하면 돼서 서버가 필요없다고 한다. 따라서 간편하게 s3를 이용해 배포를 진행했다.생성된 lAM 계정이 있어서 계정 생성은 생략~지역은 서울로 설정하고 버킷 이름을 적어준다.(만약 전에 만든 버킷이

이번에 전대위키에 refresh token 처리 로직을 추가했다.초기 기본 로직은 로그인 시 헤더로 받은 엑세스 토큰을 로컬에 넣고 요청마다 로컬에 있는 엑세스 토큰을 헤더에 보내주었다. 로그인 시 헤더에서 access token을 받고 바디에서 각 토큰의 만료시간을