벌써 이번 주 이틀이 지났다. 할 일은 산더미 같은데 오류를 한 번 만나면 내 멘탈 바사삭 되어 한동안은 더 이상 생산적인 사고가 불가능한 상태가 되어버린다. 기능을 더 탄탄하게 만들기 위해 필요한 추가적인 API가 아직 준비되지 않은 상황이라, 오늘은 프론트 팀원들과 함께 비교적 가벼운 목표들을 설정했고, 앞으로 더해볼 수 있을 만한 기능들을 탐색하는 데 시간을 보냈다.
그러면서 '로딩스피너나 붙여 볼까나 룰루' 했다가 큰 코 다쳤다... 의외의 복병이었다. 생각해보니 리덕스 모듈을 여러 개 쓰는 프로젝트에서 로딩스피너를 붙여본 적이 없었던 것이다(!!) 모듈이 하나이면 로딩 상태 여부에 대한 boolean 값을 리듀서에서도 설정해 줄 수 있는데, 모듈이 여러 개다 보니 결국 적어도 어느 하나의 모듈에서는 모듈 밖에 있는 로딩 상태를 건드려야 하는 꼴이었다. 이렇게 된 이상 모든 모듈들에게 공평하게, 로딩만 다루는 모듈을 새로 하나 팠다. 그리고 각 모듈 안에서 액션함수를 호출할 때마다 시작 지점쯤에 로딩 상태를 true로 바꿔주었다. 그런데!? 바로 여기서 문제가 있었다. 아무 생각 없이 모듈 한 개짜리 프로젝트에서 했던 것처럼 리듀서 안에서 다시 로딩 false로 바꿔주려니, 리듀서에서는 다른 동작을 불러 일으키는 짓을 할 수 없었던 것이다...! 모든 상태가 리듀서 안에서 깔끔하게 완결이 되어야 하지, 다른 모듈을 건드려서 또 다른 함수를 호출하면 안되는 것이었다. (stackoverflow에서 이걸 뭐라고 하던데 기억이 안 난다)
아무튼 매우 큰 실망을 안고 차선책을 찾아 헤맸다. 액션함수 앞에 넣은 로딩 true를 리듀서에 들어가기 전에 다시 바꿔주려면 결국 액션함수 말미쯤에나 로딩 false를 넣어야 한다는 건데, 그렇게 해서 스피너가 보이기는 할까 싶었다. (눈물을 머금고 해봤더니 보이긴 보이더라...) 원하던 그대로의 예쁜 코드는 아니었지만 트러블은 이렇게 일단락되었다.
그동안 나중에 봐야지 하고 미뤄놨던 자료들을 한 번 들춰보는 과정에서, 주특기를 리액트로 선택하기 이전에 진행되었던 주특기 Q&A 시간에 받아놨던 자료도 보게 되었다. 리액트를 "리액트스럽게" 사용하는 방법은, 컴포넌트를 재활용하고 서버에 대한 요청 횟수를 가급적 줄여서 리소스를 아끼는 것이라고 했다. 안 그래도 지금 우리 프로젝트 중 내가 짜 놓은 컴포넌트 일부가 API 콜을 필요 이상으로 많이 하는 것 같다는 생각을 하고 있던 와중에 접한 내용이었다. 이건 오늘이 날이다 싶었다. 마침 급하게 해결할 일도 없는 이 상황은 오늘이 마지막일 것이니 각 잡고 시작했다. 3개로 나눠진 페이지에 공통적으로 속해 있는 컴포넌트 하나를 완전히 위로 빼 버리고, 거꾸로 3개의 페이지는 하위 컴포넌트로 바꾸어 집어넣었다. 결론적으로 3개였던 페이지는 1개가 되고, 1개였던 하위 컴포넌트는 3개가 되었다. 그 3개의 페이지는 어차피 상단의 디자인은 같고 하단의 탭 간 이동만 발생하는 구조라 상식적으로도 하나의 상위 컴포넌트 밑에 3개가 함께 묶여 있는 게 맞다고 생각했다. (그 말인즉슨 지금까지는 비상식적...)
해결하는 과정에서 라우팅에도 변동이 생겨 에러란 에러는 다 만났지만 탭 간 이동을 할 때마다 API 콜을 하거나 useSelector를 쓰거나 history.state로 데이터를 넘겨줘야만 했던 문제가 해결되었다.
내일 할 일
오늘 찾아본 에디터 라이브러리를 적용해보자. 기껏 만들어 적용한 이미지 프리뷰와 업로드는 이 에디터에 묻혀버릴 것만 같지만...ㅠㅠ어쩔 수 없지.