[1차 협업프로젝트 TIL] 9일차 회고

 

9일차 진행상황 및 좋았던 점

 

오늘은 모달 리팩토링 작업을 하면서 코드를 좀 더 효율적으로 만들고 있다.

 

그리고 현재 모달에서 크레딧을 사용하면 크레딧 현황에 실시간으로 얼마 남았는지 업데이트하는 작업을 해보고 있는데 아무런 라이브러리를 쓰지 않고 하려니까 같은 탭에서는 업데이트가 안되고 다른 탭에서만 실시간 업데이트가 되고 있다.

 

요구사항에는 실시간 업데이트가 없었으나, 사용자 입장에서는 크레딧이 얼마 남았는지 바로바로 알아야 좋기 때문에 추가해보려고 하고 있다.

 

오늘 데일리스크럼 시간에는 다음과 같은 이야기를 나눴다.

• 작업상황 공유 및 개선점 도출
• 잦은 서버에러를 처리하기 위해 어떤 부분을 어떤 방식으로 에러처리를 해야하는지에 대한 의견 교환
• 데이터 요청 시 react-toastify 라이브러리 사용에 관한 의견 교환
• 신규 PR 코드리뷰 및 개선사항 공유
• 멘토링 때 받았던 개선사항을 프로젝트에 적용시킬 방법에 대한 의견 교환

react-toastify 라이브러리는 사용자에게 오류가 발생했을 때나 알릴 때 몇초동안 띄워놓고 자동으로 닫히게 하는 라이브러리인데, UI가 괜찮아서 특정 상황에서는 사용자경험을 끌어올릴 수 있을 것 같다.

 

그런데 현재는 에러처리에 사용해야 하는데, 이 라이브러리를 적용하면 사용자가 다른 것을 보다가 확인을 못해서 그냥 가만히 있을수도 있고, 새로고침 버튼을 둘 수 있는 공간도 애매하여, 화면의 고정적인 공간에 에러메세지와 함께 데이터를 다시 요청할 수 있는 버튼을 놓는 것이 더 나을 것 같다는 의견에 공감대가 형성되었다.

 

그래서 사용하지 않기로 했고, 멘토링 시간에 리액트의 Error Boundary를 좀 더 간편하게 사용할 수 있는 react-error-boundary 라이브러리를 사용하여 현재 에러처리가 되지 않은 곳에 적용해주기로 했다.

 

이렇게까지 하고나니까 정말 리팩토링만 남았다는 생각이 들어서 좋았던 것 같다.

 

9일차에 배운 점

 

💡 에러처리에 try-catch문 외에도 Error boundary를 사용할 수 있다.

Error boundary는 리액트에서 사용할 수 있는 에러처리 방법이다.

 

현재 프로젝트에서는 api를 통해 서버에 데이터를 요청했을 때 주기적으로 CORS 정책으로 인한 500 에러가 뜨고 있다.

 

예외처리 상황 훈련으로 어느정도는 일부러 에러를 발생시키고 있는 것 같다는 느낌이 들었는데, 프록시서버를 사용하면 원천(origin)과 현재 웹사이트를 데이터를 주고받을 수 있는 정상 웹사이트로 인식하게 할 수 있다.

 

그러나 프록시서버를 만들어보지 못했고, 현재로서는 에러처리밖에 할 수 없다.

 

그래서 어제까지 try-catch으로 데이터 요청과정에서 발생한 에러를 처리해주고 있고, 현재 다른 팀원님들도 각자의 데이터 요청 로직에서 에러처리를 해주고 있다.

 

Error boundary를 손쉽게 사용하기 위해 react-error-boundary 라이브러리를 설치했고, 나는 데이터 요청을 하는 모달 2 곳의 최상단에서 감싸주었다.

 

그리고 에러가 발생하면 fallback 속성에 지정한 알람모달이 뜨면서 서버에러를 알리는 모달이 뜨도록 했다.

return (
        <ErrorBoundary
            fallback={
                !alertModalClose && <AlarmModal setAlertModalClose={setAlertModalClose} setModalClose={setModalClose} title="server" />
            }
        >
            화면 표출내용
        </ErrorBoundary>
    );

 

위 코드가 모달에 적용한 Error boundary 코드이다.

 

현재도 잘 작동하는지 테스트하고 있는데, 고의로 에러를 일으키면 서버에러 모달까지 뜨고 있다.

 

진행하면서 부족하거나 개선이 필요한 점

 

💡 아무런 라이브러리없이 실시간 업데이트를 해보고 싶다.

개인프로젝트에서는 firebase의 subscription, useSWR을 사용하여 실시간 업데이트를 구현했었다.

 

물론, 이 프로젝트에 다른 라이브러리 사용이 금지되지는 않았지만, 멘토님도 그렇고 분위기가 라이브러리 도움없이 생으로 만들어보자는 분위기라, 간단한 방법이 있어도 어렵게 구현을 하는 작업들이 좀 있다.

 

하지만 만드는 데 성공하면 내 실력이 향상되는 것이어서 계속 해보고는 있는데, 리액트는 같은 탭에서는 바로 업데이트해주지 못하는 한계점이 있어서 수동으로 상태관리를 해가며 해보는데도 실시간으로 업데이트되지 않고 새로고침을 눌러야 업데이트가 되고 있다.

 

만약 내일까지 구현이 안된다면 다시 원래대로 돌리고 푸시하려고 한다. 시간은 정해져 있고 실시간 업데이트 구현은 요구사항이 아니기 때문이기도 하다.

 

향후 프로젝트에 대해 기대되는 점이나 바라는 점

 

에러처리만 되면 프로젝트작업은 끝내고 발표자료 준비로 넘어갈 것 같다.

 

서버에서 일어나는 에러발생은 막을 수 없겠지만, 새로 추가한 에러처리방식이 잘 먹혀서 사용자에게 에러가 발생했음을 잘 알려줬으면 좋겠다.