모락모락 리팩토링 - 리팩토링 과정 기록 (디렉토리 구조, 아키텍처, 중복코드, 버그 픽스 등)

지난 달부터 매주 토요일, 모락모락 팀원들과 모여 리팩토링을 진행중이다.

뜯어 고치고 싶은 내용은 정말 많은데, 시간이 많이 없다보니 야금야금 고쳐가는 중이다.

저희 리팩토링 하시죠!! 하고 제안하고나서 프론트는 이런거 합시다~ 라고 정리했던 문서. 

원래 프론트가 3명이었는데, 한 분은 연락이 안되셔서 2명이서 작업중이다. 

 

본 프로젝트 진행 기간에는, 대화도 많이 없고 서로 무엇을 작업하는지 어려움은 없는지 이런 얘기를 잘 안했었는데 (너무 아쉽) 요즘은 만날 때마다 근황 토크도 하고, 어떤 코드가 더 나은지 서로 리뷰도 하면서 재미있게 진행중이다. 오히려 프로젝트 기간보다 지금이 더 스트레스 없고 길게 조금씩 개선한다는 생각이라 마음도 편하다. 

 

아무튼 지금까지 해온 작업은, 프로젝트 폴더 구조 뜯어 고치기. 정말 부끄럽게도 기존에 확장에 대한 생각 없이 개발자별로 폴더를 나눠 각자의 작업물을 분류했었다. 하지만 리팩토링을 시작하고 니꺼내꺼 구분이 없는데 그런 구조는 복잡성만 높이고 들여다보기 싫어지는 코드가 되는 원인이라고 생각해서, 뜯어고치자고 제안을 드렸다. 시간으로만 따지면 거의 6시간 정도 걸린 것 같다. 규모가 작으니 다행이지.... 

api 요청도 중복된 코드가 많아서 별도의 폴더에 분리하는 작업을 하고 있다. 사실 그대로 써도 돌아가기만 하면 괜찮을 수도 있는데, 왠지 그냥 다시 정리해버리고 싶다. 그러고나서 하나씩 업그레이드 하고싶다앍...

 

그리고 또 기존에 props 로 내려주고 있던 api 응답 데이터를, 각 컴포넌트에서 불러오는 방식으로 리팩토링 하고있다. swr을 제대로 활용하지 못했던 부분이, 어떤 컴포넌트에서 해당 데이터에 접근하던간에 먼저 캐시에 요청하기 때문에 결국은 같은 데이터를 받아보게 된다. 그래서 굳이 복잡하게 props로 내려주지 않고 여러 컴포넌트에서 같은 url 로 fetch 해도 괜찮다. 예를 들면 이런 식이다.

이 컴포넌트는 좋아요를 표시하고, 요청을 보낼 수 있는 버튼이다. 기존에는 isLiked, likes 처럼 렌더링에 필요한 데이터를 굳이 부모 컴포넌트에서 props로 내려주고 있었는데, 현재는 이 컴포넌트에서 바로 얻을 수 없는 데이터인 answerId 항목에 대해서만 내려주고 있다. (왜냐면 버튼이 article에 달린 경우가 있고, answer 에 달린 경우가 있어서 필요하다.) 

 

내가 작업했던 게시글 상세페이지의 대부분의 컴포넌트에서 props로 내려주면서, 한가지가 수정되면 타입도 바꿔주고 props 인자도 수정해주고 또 내려주는 부분도 수정해주고 일을 3중으로 한 경우가 많았었다. 별거없는데 왜이렇게 시간이 오래걸리지 싶었던 이유가 바로 이 쓰잘데기 없는 중복 작업때문에 그랬던 것 같다. 휴... 아무튼 이제 깨달아서 하나씩 고쳐나가고 있다. 막 코드가 깔끔해지고 그러면 일단 기분이 좋고 또 어느 부분을 고쳐야 더 빨라지고 개선될 수 있는지가 눈에 보여서 막 기분이 막 좋아짐. 

 

사실 지금 리팩토링을 하면서 성능을 개선하고 뭐 테스트를 돌리고 이런 것 보다는, 그전에 싸질렀던 지저분한 코드를 다듬고 정리해나간다는 느낌이 훨씬 강하다. 물론 메타태그를 추가해서 seo 점수도 10점이나 높였고 (70점에서 80점이 되었다.) 중복코드나 컴포넌트 복잡도를 줄여서 가독성이 높아졌고, 코드 양도 뭐 줄어든 것 같다. 근데 뭔가 저 유저를 위해서 이렇게 까지 했어요!! 라던가 겁나 빨라졌어요!! 라는 것은 음... 하나씩 개선하고 있으니까 ^^

 

아 그리고, 어제 게시글 상세 페이지를 SSR 방식에서 CSR 방식으로 변경했다. SSR 방식으로 했던 이유가 괜히 로딩 컴포넌트 돌아가게 하지 말고, 렌더링 딱! 페이지 딱! 보여주면 더 빠르게 느껴지지 않을까? 해서였는데, 모종의 이유로 서버 속도가 느려지니까 페이지 하나를 로딩하는데도 막 체감 3초는 걸리는 것 같은 느낌이 들었다. 성능 측정을 해보니 1.4초 라고는 하는데. 

아무튼 페이지가 렌더링 되기까지 아무런 피드백이 없으니 너무 답답해서, 그냥 csr 방식으로 변경했다. csr 방식이라고 하더라도 pre-rendering을 통해 seo 를 향상시킬 수 있기 때문에 큰 문제는 없다고 판단했다. 이 방식으로 변경한 뒤 로딩 컴포넌트가 생기면서 뭔가 아! 반응이 오는구나! 라는 느낌이 있었다.

좌측이 ssr 우측이 csr이다. 좌측은 클릭 후 반응이 오기까지 시간이 꽤 걸린다.

이런 자잘한 변화를 시작으로 앞으로는 빠른 성능! 쾌적한 유저 경험! 접근성!  반응형 디자인! 등을 주력으로 리팩토링을 진행하는게 좋지 않을까 싶다. 일단은 그 부분을 마무리 하는게 효과가 좋을 것 같다. 사실 커뮤니티라는게 어느정도 기존에 형성된 그런 분위기가 있어야 슥 녹아들고 그런건데~~ 그런 점에서 실제 서비스로는 메리트가 없을진 몰라도 그냥 막 좀 더 개선하고 싶다. 참 애정이 가는 프로젝트