쇼핑검색 React 전환 경험 공유

쇼핑검색 React 전환 경험 공유
Node.js + TypeScript + React
쇼핑검색개발 김득중

쇼핑검색개발에서 하는 일
 다양 종류의 쿼리에 대응하는 검색서비스를 개발/운영 합니다.

쇼핑검색개발에서 하는 일(cont.)
 `카탈로그` 라고 부르는 가격비교 서비스도 개발/운영 합니다.

 물론 PC 서비스도 있습니다.

 API도 있습니다.
 통합검색 및 쇼핑판 컨텐츠 노출
 사내 타 서비스 제공
 외부 제공
2019. 09. 05 발표자료 작성 시간 기준 지난 24시간 동안 호출
횟수

시스템 구성은 이렇습니다.

왜? Node/React ← Java/JSP
 자바는 잘 쓰고 있습니다.(당연히^^)
 문제는 JSP!!

1
2 3
 코드의 순서는 1,2,3 으로 개발 되나 `검색결과 더보기`는 2 영역
의 데이터를 참조해야 합니다.
 2영역의 `선택된` 쿼리 데이터는 계속 바뀝니다.
 `검색결과 더보기 ` 클릭 이벤트에서 2번 영역의 데이터를 찾아서 처리 해야 합니다.

더이상 DOM조작은 싫어요 ㅠㅠ
비지니스 로직에 더 신경 쓰고 싶어요.집에도 좀 일찍 가고 싶구요.
그래! 우리도 React 한번 써보자!!!!

그래서... 바꿔 보기로 했습니다.
 ES6 문법을 열심히 익혔습니다.
 React도 열심히 배웠습니다.
 작업시작전 우리팀에 React 경험자는 없었습니다.
 TypeScript도 열심히 배웠습니다.

그런데... 생각보다 데이터 다루기가 괜찮네?
 ES6 문법은 유용한 것들이 많습니다.
 Arrows
 Template Strings
 Destructuring
 Default + Rest + Spread
 Property Shorthand
 Object Property Assignment

그런데... 서버 로직 구현도 괜찮네?
 기존 Spring으로 작성된 Controller, Service 메
소드에서 서로 연관성이 없는 데이터를 순차적
으로 호출하고 있었습니다.
 API, DB를 호출하는 메소드에서 걸리는 시간이 곧 서버 응답
시간이 됩니다.
 thread / future 등을 쓰기는 좀 그랬었나 봅니다..
 Promise.all 이라는 문법은 굉장히 쉽게 동시처
리를 가능케 합니다.

이제 ... 개발을 시작합니다.

그전에 ... 다음과 같은 고민을 미리 하면 좋습
니다.
 SPA / SSR / CSR ?
 사용자가 브라우저에 URI을 입력하는 행위가 어떤
경로를 통해 처리되는지 잘 파악해야 합니다.
 사용자가 마우스 클릭으로 요청한 페이지가 어떤 경
로를 통해 처리되는지 잘 파악해야 합니다.
 우리의 경우 다음과 같이 처리됩니다.
 SSR

그전에 ... 다음과 같은 고민을 미리 하면 좋습니다.
 컴포넌트는 어떻게 나눌까?
 실제 개발전에 정리를 해두면 좋습니다.
 컨테이너 컴포넌트와 프레젠테이션 컴포넌트를 잘
분리해야 합니다.
 컴포넌트 재사용성이 결정 됩니다.
 컴포넌트에서 사용하는 데이터는 무엇인지 고민 합
니다.
 props / state 를 고민 합니다.
 상태 관리를 위한 툴을 고민하게 됩니다.

드디어 ... 개발이 끝났는데...

성능이 안나오네요 ㅠㅠ

어디서 부터 성능을 확인해야 할까?
 API로 부터 검색 결과를 받는데 xml 포멧으로
되어 있습니다.
 서버사이드 성능의 주범은 xml 파서 였습니다.
 xml2js, xml2json, fast-xml-parser 도...느림
 심지어 빠르다고 자랑하는 node-expat도 느림
 원하는 타입으로 파싱이 안되고...
 문서의 일부만 파싱이 안되고...

어디서 부터 성능을 확인해야 할까
?
 XML 파서를 찾는 여정이 시작되었습니다.

?
 EASYSAX를 사용한 파서
 https://github.com/vflash/easysax
 엄청 빠릅니다.
 easysax를 사용한 파서 유틸을 제작 했습니다.

그래도 느립니다.
 서버에서 클라이언트에 전달되는 데이터 사이즈
가 JSP 보다 3~4배 많습니다.
 SSR시 서버에서 전달되는 데이터는 html + store(json) data
입니다.
 스토어 데이터를 최소화 합니다.
 CSS 클래스명 단축
 API나 DB에서 갖고온 데이터중 사용하지 않는 프로퍼티를 모
두 삭제해 줍니다.
?

여전히 느립니다.
 클릭을 했는데 한참후에 UI가 바뀝니다.
 불필요한 컴포넌트 리렌더링을 막아야 합니다.
 redux를 쓴다면 불필요한 스토어 데이터를 connect 하고 있는
지 살펴봐야 합니다.
?

이제 오픈을 하나 싶었는데..
 서버 프로세스 모니터링 툴에서 프로세스 알람은 왜 이렇게 많이
오지?
 프로세스가 갑자기 죽는 현상이 발생 합니다.
 알고보니 로그 전송중 발생한 이슈 였고 비동기 코드
exception handling 과 연관된 문제였습니다.
 그리고 Pinpoint 못쓰잖아?
 ES-APM을 통한 모니터링이 가능 합니다.

이제 오픈을 하나 싶었는데..
 클라이언트 로딩 속도가 느려요.
 클라이언트 로딩 속도 지표가 느려졌습니다.
 Onload 타이밍은 React 버전이 더 느릴수 있어요.
 FMP라는 지표를 보기로 했습니다.
 https://developers.google.com/web/tools/lighthouse/audits/first-
meaningful-paint

우여곡절 끝에 ... 오픈을 했습니다.
서버사이드, 서버-클라이언트, 클라언트 성능을 잘 살펴 봅시다.
기존 Java/JSP 보다 성능이 쪼~~끔 더 잘나오네요.

알아두면 좋은 깨알팁
 민감한 코드가 client 번들에 들어가지 않도록 주의하세요.
 Isomorphic javascript code 때문에 이런일이 생기기도 합니다.
 민감한 데이터가 client에 전달되지 않도록 주의하세요.
 API, DB로 부터 넘어온 Object는 유저에게 전달이 되어서는 안되는 property를 포
함할수도 있어요.
 그래서 graphql을 쓰는지도...
 gzip/keep-alive를 활성화 시켜 주세요.
 axios를 사용한 코드중에 생각보다 keep-alive를 활성화한 코드가 많지 않더라구
요.
 SSR시 BFF self call의 경우 TPS가 눈에 띄게 좋아 집니다.

플렛폼만 변경할 꺼니?
PR로 시작 하는 개발문화 바꾸기
 PR을 두려워 하지 마세요.
 자주자주 짧은 코드일수록 리뷰하기 좋습니다.
 PR로 배웁니다.
 내가 사용하지 않는 코드/구현방법이 눈에 띈다구요? 근데 누구나 다 알것 같아서
코멘트 안했다구요?
 생각보다 남들도 모르는 경우도 많습니다. 엄지척 해주세요.
 말로하는 리뷰 보다는 변경되는 코드가 더 명확합니다.
 개발은 말로 하지 않듯이 코드 리뷰도 내가 생각하는 코드를 직접 적어 주
시면 의견 전달이 더 명확 합니다.
 리뷰어의 의견을 존중해 주세요.

그럼... 앞으로는 뭘 할꺼니?
 k8s 기반으로 모든 서비스 이전해 보려고 합니다.
 API서비스를 이전했고 결과는 아주 만족 스럽습니다.
 물론 쇼핑 서비스도 더 발전 시켜야죠... 그래서...
우리와 더 많은 분들이 같이 개발 하면
좋겠습니다.

쇼핑검색 React 전환 경험 공유

More Related Content

Similar to 쇼핑검색 React 전환 경험 공유

쇼핑검색 React 전환 경험 공유