쇼룸, 쇼핑 개발자를 부탁해

쇼룸, 쇼핑 개발자를 부탁해

계기

세션 요약

쇼핑검색 Java/JSP에서 Node.js/React 전환기

  • 김득중 님 발표

하는 일

  • 통합검색 및 쇼핑판 컨텐츠 노출
  • 사내 타 서비스 제공
  • 외부 제공

왜 바꿨나요?

  • jsp가 요구사항 반영이 어려웠다
    • 더이상의 DOM 조작은 싫었다
    • 타 팀의 영향으로 시작

그래서

공부
  • es6 배우기
  • react 배우기
  • typescript 배우기
    • 데이터 다루기가 편리
다른 사이트 참고
  • 사용 시나리오 작성
    • 클라이언트 / 서버사이드 / 공통 로직은 어디에 위치해야 하는가?
  • 컴포넌트 분리
  • redux store 설계
개발
  • 성능 문제 발생

    • 서버
      • 서버사이드 XML 파서의 문제
        • easysax를 사용한 유틸리티 제작
      • 서버에서 클라이언트에 내려지는 데이터 사이즈가 기존보다 3~4배
        • store 데이터 최소화
        • css 단축
    • 클라이언트
      • 불필요한 리렌더링 방지
        • 불필요한 스토어 데이터를 connect하고 있지 않은지
  • apm

    • es-apm

깨알 팁

  • 민감한 코드가 클라이언트 번들에 들어가지 않도록 주의
  • 민감한 데이터가 스토어에 들억지 않도록 주의
  • 가능한 store 줄이기
  • keep-ailve 활성화

  • pr로 시작하는 개발문화 바꾸기

node.js, typescript, react

브라우저 날개를 달자

  • 이병승 님 발표

브라우저를 가볍게 만드려면?

  • resource size
  • loop count
  • logic
네트워크 적으로 신경 써야 하는 것
  • dns
  • cdn
  • idc/switch
  • http protocol
    • request header
    • cookie
서버에서 신경 써야 하는 것
  • resource(io / cpu / memory)
  • cache
  • logic
  • non-blocking
  • 비동기 처리
DB에서 신경 써야 하는 것
  • lock, wait
  • internal process mechanism
  • SQL Tuning
  • Batch
브라우저
  • 비동기 처리

  • non-blocking

  • network
  • resource (img, javascript)
    • svg : gzip
    • png, jpg : webpack
  • connetion count
  • rendering
  • conclusion
  • 로드 시간에 집중할 것

UI 모듈화로 워라밸 지키기

  • 안정민 님 발표

공통 컴포넌트 미리 정의

장점
  • 리소스 간단
  • 유지보수 편리
단점
  • 영향 범위 파악이 어려움
    • storybook 활용
종류
마크업 같음 && stateful 로직 같음

컴포넌트 재활용이 간단

마크업 다름, stateful 로직 같음
  • 로직 공통화 필요
  • 커스텀 훅 활용
마크업 같음, stateful 로직 다름
  • 래퍼 컴포넌트 활용
    • props의 전달의 전달 문제 발생
      • 코드 가독성이 떨어짐
    • context 적용
      • 전역으로 관리할 수 있는 state를 넣는다
마크업 다름, stateful 로직 다름

공유할 수 없다

IaC를 어쭙잖게 맛본 썰

  • 최승호 님 발표

k8s위에 Node.js 앱 하나를 올리면서 고민한 것들

  • 정형식 님 발표

느낀점