[수풀] 메인 프로젝트 리팩토링 시작..!!

메인 프로젝트를 진행하면서 리팩토링은 꼭 해야겠다고 다짐했었다.

원티드 프리온보딩을 진행하느라 한 달 정도 미뤄졌지만 이제부터라도 진행해야지...

 

내가 리팩토링을 하려고 한 이유는

1.  컴포넌트의 분리

• 최대한 기능 별로 컴포넌트와 폴더 구조를 나누고 싶었다.
• 기능 별로 나누면 어디에 뭐가 있는지 확실히 알게 되고 바로바로 찾아서 작업할 수 있기 때문이다.
• 한 달만에 다시 코드를 봤는데 내가 짠 코드였는데도 컴포넌트 명이 이상해서 바로바로 찾아가기 어려웠다.
• 따라서 폴더 명과 컴포넌트 명이 명확하면 유지 보수의 속도가 빨라질 거라 생각했다.

2. React-query의 도입

• react-query를 유튜브에서 처음 봤었는데 듣기만 했을 때는 뭐 이런 사기가 다 있어;;라고 생각했었다.
• 캐싱으로 인해 사용자의 입장에서는 항상 신선한 데이터를 바라볼 수 있다.
• 전에는 useEffect에서 서버에서 데이터를 받아와 state에 담았었는데 이젠 그럴 일이 없다..!! 
• useMutation을 쓰면 자동으로 refetching을 해주기 때문에 쓸 코드가 적어졌다.
• 또한 isLoading, isError의 존재로 로딩과 에러 관리도 react query에서 가능하다...!!
• 제일 좋은 건 서버와 클라이언트 데이터의 분리라고 하지만 나는 상태 관리를 안 썼기 때문에... 이 장점은 보지 못할 것 같다.

3. TypeScript 도입

• 처음 배울 때는 이 귀찮고 어려운걸 왜 해!!라고 생각했었는데 조금씩 적응이 되다 보니 이건 사라졌다.
• 타입 지정은 처음에만 하면 되는 것이고, 유지 보수를 하기 위해선 필수라 생각이 되었다.
• 한 달만에 코드를 다시 봤을 때 이게 어떻게 이뤄진 코드인지 한눈에 확 들어오진 않았다.
• 또한 코드를 수정할 때 어디서 에러가 났는지 이게 제대로 된 코드가 맞는지 확인하는 게 어려웠다.
• jsx 상태에서 로직을 수정하고 tsx로 바꿔 타입을 지정해주는 방식으로 리팩토링을 진행하고 있는데 정말 무슨 에러인지 모를 때는 tsx로 슬쩍 바꿔서 에러 확인하고 다시 jsx로 바꾸고 있다 ㅎㅎ;; (아직 타스가 좀 낯설긴 하다)
• 고작 사용을 한 달 정도만 했지만 타입스크립트가 없으면 굉장히 불편한 사람이 되어버린 기분이다. 

4. 재사용성을 늘리자

• 내 코드에는 반복되는 로직이 굉장히 많았는데, (특히 드롭다운) 이걸 하나하나 다 만들어서 썼었다.
• 당시에도 아 재사용해야 되는데... 이러면서 시간이 부족할까 봐하지 못했다. 그래서 굉장히 코드가 길어지고 꼴뵈기 싫은 형태로 되어버렸다.
• 2~3번 이상 쓰는 로직들은 함수 컴포넌트를 따로 만들어 사용하는 게 좋다고 들었다. 나도 그게 좋다고 생각하기에 그런 로직들은 컴포넌트를 따로 만들어 사용해 줄 예정이다.

 

결국 빨리만 구현하는 것은 결국 나중에 큰 수정을 불러올 수 있다.라는 큰 교훈을 얻었다.