소개 LG 생활건강이 인수한 Avon의 2개의 사이트를 1개의 사이트로 통합하는 리뉴얼 프로젝트입니다. 미국 온라인 쇼핑몰이며, 한국의 쇼핑몰과는 굉장히 다른 많은 기능을 가지고 있는 통합형 쇼핑몰 사이트입니다. Avon, LG 생활건강, LG cns, 이퓨전아이, 골든 플래닛 등 많이 업체들의 참여한 대형 프로젝트입니다. 1년이상의 장기 프로젝트로 진행되었습니다.

프로젝트 진행하면서 했던 기술적인 고민 및 배운 점

기술적인 부분 1. SSR 프로젝트는 cra 프로젝트로써 SSR을 직접 구현하였습니다. redux, redux-saga, styled component, loadable 등을 고려하여 구현하였습니다. 제가 프로젝트에 투입하였을 때 어느 정도 구현이 되어있었고, SSR을 공부하면서 개선하였습니다. - SSR시 API 요청이 제대로 되지 않은 부분과 redux-saga에서의 action들이 SSR 전에 실행이 다 되지 않는 이슈가 있었고 개선하였습니다. - SSR시 성능측정을 한뒤에 API 요청이 성능에 제일 큰 영향을 끼치는 것을 파악하였습니다. 따라서 요청하는 api를 Promise 배열 및 Promise.all, Promise.allSettled method를 통해 병렬로 요청하고 에러처리를 하였습니다. 2. 동적으로 바뀌었으면 하는 다국어 처리 admin에서 다국어를 바꾸면 동적으로 처리되었으면 한다는 요구사항을 받았습니다. 따라서 react server에서 api를 요청하여 다국어 데이터를 받아야 했습니다. 이것은 데이터 양이 많았고, 매번 받아올 수는 없는 노릇이라 etag를 이용한 캐싱을 하였습니다. - (1) 해결된 줄 알았지만 SSR을 할 때 다국어 데이터를 기존의 redux state를 가져오는 객체 ( window.__REDUX_STATE__ ) 에 붙여오니 초기에 parsing 할 때 오래 걸리는 문제가 있었습니다. 따라서, 다국어 데이터를 window.__REDUX_STATE__에 붙이지 않고 hydrate 할 때 프론트에서 react server로 다국어 API를 다시 요청하도록 수정하였습니다. etag를 이용한 캐싱이 되어 있어서 성능상에 큰 이슈는 없었습니다. 사실 이것을 react server에 요청할 것이 아니라 CDN 같은 곳에 올려두고 CDN으로 요청하는 식으로 해야 성능이 더 개선될 거라고 생각했습니다. 3. magnolia CMS 처리 매그놀리아는 CMS로써 매그놀리아로 페이지를 만들어 놓으면 UI를 관리자가 손 쉽게 수정할 수 있습니다. react로 프로젝트가 진행되지만 client측에서는 몇몇 정적인 페이지를 매그놀리아로 관리했으면 좋다고 하였습니다. ( 심지어 Main 페이지에 있는 특정 컴포넌트들까지.. ) 그리고 해당 페이지를 CSR 뿐만 아니라 SSR도 하고 싶다고 했습니다. 처음에는 dangerouslySetInnerHTML을 사용하여 간단하게 그냥 넣어주면 되는걸까 생각했지만 당연히 안됐습니다. 결국 GET 요청을 통해 데이터를 가져와서 HTML parsing을 통해 적절하게 본 페이지에 script, link, html 등을 삽입시켜줘야 했습니다. 그렇지 않으면 정상적으로 동작하지 않았습니다. 또 하나의 이슈는 HTML을 parsing하는 로직을 하나의 코드로 관리하고 싶다는 것이었습니다. HTML parsing을 할 수 있는 다양한 라이브러리가 존재하지만, SSR, CSR을 전부 고려했어야 해서 browser와 node에서 동시에 사용할 수 있는 라이브러리를 찾아야 했습니다. 하지만 그 당시에는 찾지 못했기 때문에 node에서 jsdom 라이브러리를 이용하여 관리를 하고 CSR할 때는 react server에 요청하는 것으로 해결하였습니다. 그러고도 이슈가 남았습니다. HTML을 parsing할 때 script, link 태그 등을 파싱하고 해당 태그를 제외한 html 분리를 해야했습니다. 이는 string-strip-html 라이브러리를 이용하였습니다. 그리고 CSR을 할 때 문제가 생겼습니다. script, link, html 등을 동시에 삽입하다보니 css, js가 나중에 적용되면서 css가 깨졌다가 적절히 적용되는 현상이 있었습니다. 이를 해결하기 위해서 css, js가 onload될 때까지 html을 안보이게 했다가 loading뒤에 보여주는 것으로 해결하였습니다. ( html이 display:none이어서는 안됩니다. dom에 실제로 존재해야 js를 실행할 때 에러가 발생하지 않습니다. js에서 dom을 찾는 로직이 많기 때문에...! )

배운점 및 후회하는 점 1. 기획이 완전하지 않은 프로젝트를 진행할 때 잘 대응해야 한다. 기획이 완전하지 않은 프로젝트는 테스트코드 작성이 힘들다. 수도 없이 기획이 바뀌기 때문에 테스트 코드, 본 코드 둘 다 수정하려면 시간이 많이 소요된다. git commit을 제대로 남겨야한다. 기획이 제대로 정해지지도 않았기 때문에 언제든지 예전코드로 갈 수 있게 해야한다. 수정했던 이유를 상세하게 남기지 않으면 나중에 독박을 쓸 수도 있다. 바쁘고 정신 없을수록 notion 등을 이용하여 할일, 누가 요청했던 사항인지 등을 상세히 남겨야 한다. 2. 프로젝트 규모를 잘 판단하여 yarn workspace, lerna, yarn berry 등을 이용한 모노레포로 프로젝트 구조를 짜는 것이 좋다. 3. LG 생활건강, LG cns, 골든플래닛, 스프링웍스 등 다양한 업체와 직접 소통을 하였기 때문에 소통의 중요성을 깨달았다. 개발하는 것 뿐만 아니라 소통을 잘해야 한다. 소통을 잘하면 똑같은 일을 두번 안할 수도 있으며, 심지어 일을 안하는 쪽으로 될 수도 있다.