[Project] 모락모락 프로젝트 5주차 회고😸

💡WEEK 5 (2022-1128 ~ 2022-1204)

정말 쏜살같이 흘러간 5주간의 시간이었다. 오늘 (12월 4일)이 최종 제출일이기 때문에 개발 일정은 어느정도 마무리가 되었다고 봐야한다. 다만 여러가지 일들이 있었고 그 때문에 미처 마무리 하지 못한 아쉬운 부분들이 많이 있기 때문에 데모데이가 종료되어도 조금 더 보수를 하면서 퀄리티를 올려야 할 것 같다. 

 

이번 한 주는 1차적인 배포 이후 버그 픽스 그리고 남은 기능을 개발하는데 집중했다. 

axios interceptor 를 활용한 refresh token 갱신

이번 프로젝트에서는 리프레시 토큰을 도입하여 액세스 토큰 만료 이후에 갱신이 될 수 있도록 했다. http 통신 라이브러리로 axios 를 사용중인데, axios client 에 interceptor 기능을 활용하면 request, response 중간에 통신을 가로채 특정 기능을 수행하도록 할 수 있다. 액세스 토큰이 만료된 경우 서버에서 401 응답 코드를 주는데, 만약 응답에 해당 코드가 있다면 액세스토큰 갱신 api 에 리프레시 토큰과 함께 요청하여 새로운 토큰을 받고, 다시 요청을 보내도록 한다.

 

이 로직을 작성하면서 액세스 토큰 갱신 put 요청이 거의 동시에 두 번 가서 404가 뜨는데, 새로고침을 하면 다시 해결되는 이상한 현상이 있었다. 개발 단계의 react strictmode 에서 모든 요청을 2번씩 보내고 2번씩 실행하는 것 때문에 문제가 발생하는 것인지... 실제 배포 링크에서 테스트를 했을 때는 또 이상하게도 큰 문제점을 느끼지 못해서 정확한 원인을 아직 파악하지 못했다 ㅜ.ㅜ 내 코드가 구글링해서 나오는 다른 코드들과 크게 차이가 없고 로직 상 문제가 될만한 부분이 크게 없다고 생각해서 뭔가 자동으로 요청을 보내주는 SWR 문제라던가, 한 페이지에서 여러개의 요청을 한 번에 보내는 문제라던가 앞서 서술한 리액트 엄격모드의 문제라던가 이런 원인이 있을 것으로 생각된다.

페이지네이션 구현 (tailwind + SWR)

다른 팀원분이 구현하시던 질문글 리스트 페이지를 내가 맡게 되었다. 페이지네이션이 되어있지 않아서 급하게 진행하게 되었고, 처음에는 react-js-pagination 이라는 라이브러리를 사용하려고 했는데, 테일윈드로 스타일을 주는게 조금 복잡한 것 같아서 그냥 직접 구현하게 되었다. 

https://flowbite.com/docs/components/pagination/ 이 사이트에서 테일윈드로 작성된 페이지네이션 코드가 있어서 살짝 수정해서 사용했다. 페이지네이션을 리액트로 구현해본적이 없어서 생각보다 시간이 좀 걸렸다. 버튼을 누를 때마다 페이지 인덱스를 변경해서 요청하도록 하는 것은 성공했는데, 한 그룹에 5개의 번호가 보여지게 하고, 특정 버튼을 누르면 다음 그룹의 번호가 보여지도록 하는 부분이 생각보다 어려웠다. 그래서 결국 1부터 pageInfo 로 부터 응답을 받은 전체 페이지 갯수만큼 증가하는 배열을 만들어서 5개씩 분리하여 다시 배열을 만들었고, 이전 - 다음 버튼을 누르면 해당하는 번호의 그룹으로 이동하여 화면에 출력되도록 구현했다.

// 1,2,3,4,5 또 6,7,8,9,10 으로 끊어진 숫자 배열을 리턴하는 함수
const getTotalPagesArr = (totlaPageNum: number) => {
  const totalPagesArr = [];
  const totalPages = Array.from(
    { length: totlaPageNum },
    (_, idx: number) => idx + 1,
  );
  for (let i = 0; i < totalPages.length; i += 5) {
    totalPagesArr.push(totalPages.slice(i, i + 5));
  }
  return totalPagesArr;
};

// 해당 배열에서 현재 페이지위치가 어딘지 상태로 관리하고, 인덱스가 바뀔때마다 렌더링되도록 현재 번호 그룹을 다시 상태로 관리한다.
const [currPagesIndex, setCurrPagesIndex] =
useRecoilState(currPagesIndexAtom);
const totalPagesGroup = getTotalPagesArr(totalPage);
const currPagesGroup = totalPagesGroup[currPagesIndex];

// 이전, 다음 버튼을 누를 때마다 페이지 그룹이 이동하도록 한다.
const handleChangePageNum = (e: React.MouseEvent<HTMLElement>) => {
const text = (e.target as HTMLAnchorElement).text;
if (text === '이전' && pageIndex > 5) {
  setCurrPagesIndex(currPagesIndex - 1);
  setPageIndex(pageIndex - 1);
}
if (text === '다음' && pageIndex < totalPagesGroup.length) {
  setCurrPagesIndex(currPagesIndex + 1);
  setPageIndex(currPagesGroup[4] + 1);
}
};

그리고 페이지네이션 데이터 요청의 경우 https://swr.vercel.app/ko/docs/pagination 공식문서를 많이 참고했는데, 사이즈가 고정이라면 페이지 인덱스만 상태로 관리하여 요청하면 되기 때문에 편리하다.

그 외에 진행한 일들...

코멘트 작성 기능을 완성했고, 답변 등록시 에러가 생기는 부분들을 지속적으로 테스트하면서 찾아냈다. ui 적으로도 미처 신경을 쓰지 못했던 부분들이 많아서 계속 수정을 하면서 테스트를 했다. 생각보다 백엔드쪽 로직에서 오류가 발생하는 부분도 많아서 테스트하면서 해당 상황에 대해 에러코드와 함께 전달드리면서 소통했다. 새로운 api가 필요하거나 문의사항이 있을 경우에는 디스코드 스레드 기능을 적극 활용했다. (스레드 기능을 제안해주신 씨앗님께 무한감사...)

백엔드와 프론트의 소통과정

또 다른 일은... 메인 페이지에 캐러셀이 있는데, 이 캐러셀에 들어갈 메인 이미지를 간단하게 제작했다.

쫌 예쁜듯?

📝마무리

목표했던 기능을 다 끝내지 못했고, 아직 개발을 더 손봐야 하지만 어쨌든 5주간의 시간은 끝이 났다.

다음 최종 회고를 기대해주세요!