[IT] FE 레거시 코드 리팩토링 강의 정리

원티드 프리온보딩 챌린지 "레거시 유지보수와 데이터 모으기" 강의

 

• 스트랭글러 패턴을 이용한다. 레거시, 새로운 코드 2개를 두고 새로운 코드를 점차 늘려가는 방식. 모든 테스트가 완료되면 그 때 비로소 레거시를 삭제한다. 새로운 코드를 우선 적용해놓고 에러가 발생하면 catch 등을 이용하여 레거시로 fallback하여 처리하도록 하는 식.
• 위의 스트랭글러 패턴을 이용할 때는 Datadog, Centreon 등의 로그 모니터링 도구를 이용하여 1~2주 정도는 모니터링을 하여 새로운 코드가 오류를 뱉는지 확인한다.
• 기능 단위(feature-based)로 작업 스콥을 자르는 게 좋다. 방법론에는 FSD 패턴이 있다. 하지만 프로젝트가 작다면 굳이 패턴을 적용하지 않는 것이 좋다.
• 과거에는 사용자와의 상호작용이 많지 않아 SSR 방식인 ASP, JSP, PHP를 많이 사용했다. 이 방식의 장점은 뷰와 UI 로직의 분리가 쉽다는 것이다. 하지만 뷰의 일부분만 업데이트 시키기가 힘들었고 (script 태그 안에서 jQuery 등으로 뷰 변경시킴), 때문에 React 같은 것들이 나오게 되었다.
• React는 CSR 방식으로 사용자와의 상호작용을 쉽게 하지만 로직이 뷰코드에 녹아들기가 매우 쉬워서 코드 응집도가 낮아지고 결국 가독성이 좋지 않을 가능성이 높다.
• 리팩토링 원칙은 SOLID, DRY(반복x), KISS(간단히), GRASP(책임 할당), YAGNI(필요 없어질 것 고려) 등이 있다.

 

Q&A

• 어쩔 때 React 대신 Next.js를 써야 하는가?: SEO가 중요할 때, 규모가 크고 기능이 많을 때, 비용 걱정이 상대적으로 덜할 때
• 책 추천: 리팩토링 자바스크립트, 프로그래머를 위한 수학책, 엔터프라이즈 애플리케이션 아키텍쳐 패턴
• Next.js에서는 Cache invalidation을 사용한다. 예시) 0.3초 간격으로 연타하는 경우
• 공통으로 사용되는 컴포넌트의 개수가 너무 많아지면 패키지화해서 npm에 등록시키는 게 나을 수도 있다.
• Zustand는 UI 상태 관리용으로 많이 사용되며, React Query는 데이터 페칭을 쉽게 한다.

 

 

---

FSD에 대해서는 아래 글을 참고하자...

(번역) 기능 분할 설계 - 최고의 프런트엔드 아키텍처

 

 

(개인적인 생각) DRY 원칙은 때때로 해가 될 수 있을 것이다. 아래 글을 참고하자...

[번역] DRY - 잘못된 추상화의 일반적인 원인

 

 

Next.js와 캐싱에 대해서는 아래 글을 참고하자...

Next.js 캐시(Cache) 총정리: 효율적인 데이터 관리와 성능 최적화 완벽 가이드