[WIL] 항해 99 12주차 실전 프로젝트 회고(1차 배포 & 2차 배포)

What I Learned

구현하고자 했던 기능과 함께 1차 배포를 진행한 후 user 테스트를 통해 여러가지 피드백을 받았다. 피드백을 받은 후 2차로 수정해야할 부분들을 정리하여 수정작업에 들어갔는데

본 사이트에는 크리에이터만을 볼 수 있는 페이지가 따로 없는 점, 크리에이터 신청란을 찾기 어렵다는 점, 북마크를 삭제할 때 삭제 알럿을 띄워줬으면 좋겠다 등 유저의 피드백을 반영하여 2차 수정작업을 진행했다.

2차 수정작업을 진행하며 기존 redux를 활용하여 상태관리를 하고 있던 부분을 SWR으로 교체하는 작업도 시도했다. 지금까지 리덕스를 이용하면서 비동기 처리를 위해 redux-thunk라는 미들웨어를 사용했는데 리덕스 흐름에 따른 View -> Dispatch -> Action -> Reducer -> Store -> State 코드를 작성하며 생각보다 많은 코드 양과 한번 가져왔던 정보라도 다시 get요청을 하면 요청을 할 때마다 새롭게 데이터를 불러와야하는 것이 비효율적이라는 생각이 들었다. 또한 지속적으로 리덕스 로컬 스토어의 상태를 서버 상태와 맞추기 위해 동기화해야하는 추가 작업에도 불편함을 느꼈다.

그래서 이를 대체할 수 있는 다른 라이브러리를 사용해보고자 SWR과 React-Query라는 것을 알게 되었는데, SWR을 먼저 공부해보고 싶어 이번 프로젝트에 적용을 시도해봤다.

SWR은 Next.js로 유명한 vercel에서 만든 원격데이터 fetch를 위한 커스텀 훅 npm 모듈로 원격 서버의 상태를 가져와 리액트 컴포넌트에 넘겨주는 기능을 제공한다.

SWR의 특징

useSWR은 첫번째 인자로 원격 상태에 대한 key를, 두번째 인자로 데이터 fetch 함수를 받는다. 여기서 첫번째 인자는 두번째 fetch 함수의 첫번째 인자로 전달되는데 fetch함수가 데이터를 로드하면 해당 응답이 data로 세팅되고 오류가 발생할 경우 해당 오려고 error에 세팅된다. 그렇기 때문에 컴포넌트에서는 data와 error 상태에 따라 알맞게 결과를 렌더링 해주면 된다.

SWR을 사용하니 코드를 직관적으로 짤 수 있었고 사용하기도 편리해서 get요청을 해오는데 큰 어려움이 없었다. 부분적으로 적용을 시도하며 리덕스를 조금씩 걷어내보는 연습을 시도했던건데 잘 사용하면 좀 더 효율적으로 이용해볼 수 있을 것 같다는 생각도 들었다.

그래서 SWR에 대한 설명은 아래 게시글에서 좀 더 꼼꼼하게 작성해보고자 한다.

[React] Redux에서 SWR로 (React SWR Data Fetching)

---

 

<항해 99 12주차 실전 프로젝트>

프로젝트 기간 : 2022.04.21.~2022.06.02 (총 6주간)

서비스명 : EYAGI(이야기)

<프론트엔드 깃허브>

GitHub - Team-EYAGI/Front: EYAGI 팀의 프론트엔드 작업공간

<팀 노션>

프로젝트 EYAGI(이야기)

12주차 공부시간 기록 : 137시간 57분