안녕하세요, WEB개발팀 이혜진입니다. 지난 1월말 신세계백화점 PC 메인 React 전환작업을 성공적으로 마치게 되었는데, 그 과정을 글로 풀어가보자 합니다.
저희팀 소개를 간략하게 드리자면 ssg.com의 프론트엔드개발 업무를 담당하고 있으며, 신규 기능 및 서비스 출시에 필요한 화면 구현, 그리고 Spring 기반의 기존 레거시 페이지들을 React로 전환하는 작업을 하고 있습니다. 모바일 웹은 어느정도 전환이 이루어졌지만 아직 레거시가 많이 남아있기 때문에 모든 페이지를 전환할수는 없어서 PC와 같이 여전히 spring 기반으로 운영되는 페이지들도 많지만 새로운 프로젝트는 상황에 따라 대부분 React로 신규개발되고 있습니다.
프론트서비스 리액트 전환기 읽어보기: https://medium.com/@yukseondo/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%A0%84%ED%99%98%EA%B8%B0-e9667959cb9b
전환 배경
24년도에 개편된 모바일웹 메인페이지에 맞춰 PC 메인페이지도 일관성있는 디자인을 가져가려는 기획/디자인의 결정에 따라 기존 신세계 백화점 메인 페이지는 Spring 기반이었지만, 유지보수성과 사용자 경험 개선을 위해 페이지 리뉴얼은 React로의 전환이 결정되었습니다.
잘 운영중인 페이지를 React로 전환하는 이유
페이지를 React로 전환하게되면 여러모로 유리합니다. 코드를 관리하는 공수가 줄어들기 때문에 온전히 저희팀에서 프론트 요소를 관리할 수 있다는게 가장 큰 장점이죠!
기존에는 저희팀에서 Spring에서 jsp로 페이지를 그리기 위한 html 마크업 코드를 제공하면, 서버개발팀에서 view를 jsp로 그리고 logic을 연결하는 방식이었습니다. 작은 수정사항 하나라도 생기기라도 하면 기획자나 디자이너는 저희팀에 수정 요청을 하고, 저희 팀에서는 또 수정사항을 서버개발쪽에 요청하는 상당히 비효율적인 방식이었죠 (상황에 따라 마크업 코드 수정이 필요 없을경우 저희쪽에서 css만 수정하기도 합니다). 또한 마크업 소스는 저희는 nunjucks라는 문법을 쓰고 있고 css dependency가 상당하기 때문에 처음에 소스코드를 파악하는데 아주 오랜시간이 걸린다는 불편한 점들이 많았습니다.
하지만 React로 전환하게 되면서 서버개발에서는 저희팀에서 받아서 사용할 수 있는 api만 내려주면 되었기에 view 관련된 모든 수정사항은 저희팀이 전적으로 가져가게 되면서 관리가 상당히 용이해졌다고 볼 수 있습니다. 부가적으로 SSR, CSR 코드 사용을 적절하게 조정하면서 초기 페이지 로딩시간을 단축시킨다던지 사용자 경험 개선에도 아주 좋다고 할 수 있죠.