안녕하세요
면접을 보면 항상 공통적으로 그때 당시에 "왜 React로 가야 하는가?"에 대해서 팀내 발표를 진행하셨다고 하셨는데 왜 React로 가야 하는지 발표를 하셨나요? 에 대한 저의 생각을 다시 차근차근 적어보려고 합니다.
1. 레거시 시스템에 대한 문제(=내가 해결하고 싶었던 문제)
제가 관리하는 서비스는 페이지 구성이 굉장히 복잡한 서비스 였습니다.
얼마나 복잡한데요?
- admin에서 구성한 데이터로 UI를 구성하고, 구성한 UI를 클릭할때 마다 아래의 UI가 바뀌어야 하는 페이지 였습니다. 한마디로 데이터 의존성이 굉장히 높은 페이지 였습니다.
또, 페이지를 제어하는 javascsript 로직은 모두 하나의 객체에 담겨 있었고,
무엇인가를 수정해야 한다면, 그 컴포넌트를 건드리고, 참조하는 로직이 사방곳곳에 정의되어 있어 배포시 사이드 이펙트가 자주 발생하였습니다.
javascript도 수정이 어려웠지만, css구조도 인라인 스타일, html 내부의 css, css파일에 있는 디자인 정의가 혼합되어 있었습니다. 또 서로 관계없는 컴포넌트인데 UI가 비슷하다는 이유로 같은 클래스를 공유하여 디자인 수정도 쉽지 않았습니다.
2. 그러면 왜 React인데요?
위의 문제를 해결하기 위해서는 React의 코드 스타일과 동작방식, 저희 서비스의 적합성 부분에서 React가 더 이득이라고 생각했습니다.
1. React는 선언형 코드 스타일이기 때문에 가독성이 좋아집니다.
=> 기존에는 들여쓰기와 닫는 태그도 정상적으로 되어 있지 않는 html을 분석해야 했다면, React의 컴포넌트 설계와 선언형 스타일로 코드 파악에 유리하다고 생각합니다.
2. 컴포넌트를 재사용할 수 있습니다.
=> 그때 당시 같은 컴포넌트가 많았는데 이를 컴포넌트화 하고 싶었습니다.
3. DOM을 직접건드려야 하는 일이 줄어 듭니다.
=> 기존에는 직접 dom에 접근하여 변경해야 됬고, 이 로직이 사방 곳곳에 있었다면 이제는 데이터의 변경하는 곳을 한곳으로 정리할 수 있고, 변경하는 곳은 액션의 네이밍으로 쉽게 찾을 수 있습니다.
[React외의 추가적인 리펙토링 방향 및 추천사항]
4. typescript 사용
- javascript만 사용할 경우보다 타입을 강제하기 때문에, 타입때문에 발생하는 이슈사항들을 사전에 많이 잡을 수 있습니다.
5. css 작업방식 개선
- styled-component 라이브러리를 사용하여 컴포넌트자체에 css를 같이 정의하는 방향으로 기존의 다양한 css 선언방식을 통일하고 클래스가 겹치는 등에 대한 이슈사항이 없습니다.
6. 패키지 매니져 사용
- 기존에는 CDN방식으로 라이브러리를 가져다 사용하고 있었는데, 패키지 매니져를 사용함으로서 버전관리에 용이하고 안전성측면에서도 향상 됩니다.
7. 테스트 용이
- 기존에는 php, css, javascript가 모두 섞여 있어서 TEST가 필요한 결제 페이지에서 테스트를 돌리기가 어려웠습니다. 결제부분에 서비스 핵심로직이 모두 다 있기때문에 안정성을 향상 시키려면 개선이 필요했습니다.
8. 제가 서비스하는 모듈은 Client 모듈에 가까웠습니다.
- php에 javascript로 구성되어 있었지만,javasciprt는 AJAX로 자기에게 요청을하고 php는 실제 API 서버로 API요청하고 데이터를 넘겨주는 역할만 하고 있었습니다.
그때 당시, 제가 담당하고 있는 모듈은 추가 기능 개발이 필요했고, 고객을 더 받기 위해서는 서비스 안전성과 성능 개선이 필요하였습니다. (lighthouse 기준으로 PC가 평균 40점, Mobile이 평균 20점 정도 되는 성능을 가지고 있었습니다) 조금 더 안정적으로 서비스를 개선하기 위해서는 해당 개선 작업이 필요하다고 느껴 담당자로서 왜 필요한지에 대해서 리더분에게 PPT 발표를 진행하였습니다
이후, TF팀을 결성하여 1차와 2차로 나눠 리팩토링 작업과 프로토타입 개발을 진행했습니다. 그 결과, Lighthouse 기준으로 PC 평균 점수는 40점에서 88점으로 향상되어 48점 상승했으며, Mobile 평균 점수는 20점에서 78점으로 향상되어 58점 상승하는 개선 효과를 보였습니다. 또한, 제시된 개선 사항을 반영하여 최종적으로 모든 항목이 90점 이상으로 개선되었습니다.
