react-실서비스.md

React 실서비스 적용기

슬라이드

사용처

• facebook
• instagram
• twitter
• airbnb
• coupang 실시간 호텔예약

초기 DROP 개발시 문제점

• 이미 있던 프로젝트와 환경적인 문제
• 별도의 gulp watch를 실행해야하고 rebuild가 너무 오래 걸림
• deploy process 문제
• 가장 큰 문제는 IE7

Async Client Side Rendering

• 서비스 특성 상 외부 연동을 통한 API 호출이 많음
• 데이터 조회 속도 때문에 ajax를 통한 client side rendering이 필요해짐

With Webpack

• 의존성 추적이 되서 js 패키지 리팩토링을 겁없이 할 수 있었음

문서화

• jenkins의 빌드를 통해 esdoc사용

무엇이 좋아졌나?

• Client와 Server의 완전한 분리(MSA?)
• 실제 그리는 영역별로 Component가 쪼개져 있기 때문에 고쳐야 하는 부분이 명확해짐(Component Tree)
• propTypes으로 Type Safety
• 재사용 가능한 Component
• state와 props를 통해서만 Component 간의 데이터가 흐르므로 데이터 흐름 파악이 용이해서 좋았다.

아쉬운점

• 간단한 DOM 조작으로 해결될 문제도 복잡하게 처리해야 하는 경우가 생김
• input 처리
• build에 사용된 npm modules의 완성도가 떨어져 삽질을 했던 경우(어느날 갑자기 빌드 안됨)
• windows7 문제
• 우리의 숙적 Legacy IE

Tips

windows 7 개발 환경 문제

• npm 2.x.x를 쓸 경우 node_modules 의존성의 긴 경로명이 문제를 일으키기 때문에 반드시 npm 3.x.x를 써야함
• 그럼에도 불구하고 일부 module은 windows 7에서 정상동작을 안 하는 경우