React vac pattern
2 likes2,129 views
React VAC Pattern - View 로직과 JSX의 의존성을 최소화 하자! React 협업이 어려운 점을 살펴보고 View 로직과 JSX를 격리해서 관리하는 것을 소개합니다. 목차 1. React 협업 - React 환경에서 Front-End 업무는 어떻게 분업화 되어 있나? 2. React 협업이 어려운 점 - React 협업에서 무엇이 우리를 괴롭히는가? 3. VAC Pattern - View 로직과 JSX를 격리해서 관리하자! 4. 구현 예제(with VAC Debugger) - VAC Debugger를 활용해 VAC Pattern을 구현해보자. 5. 서비스 적용 후기(네이버 게임) - 네이버 게임 서비스에서 VAC를 활용하여 개발한 회고
React vac pattern
- 1. React VAC Pattern View 로직과 JSX의 의존성을 최소화 하자! NTS 프론트엔드개발 박우영
- 2. Contents 1. React 협업 2. React 협업에서 어려운 점 3. VAC Pattern 4. 구현 예제(with VAC Debugger) 5. 서비스 적용 후기(네이버 게임)
- 3. 1. React 협업 React 환경에서 Front-End 업무는 어떻게 분업화 되어 있나?
- 4. 1. React 협업 React 환경에서 Front-End 업무는 어떻게 분업화 되어 있나?
- 5. 2. React 협업에서 어려운 점 React 협업에서 무엇이 우리를 괴롭히는가?
- 6. 2. React 협업에서 어려운 점 React 협업에서 무엇이 우리를 괴롭히는가?
- 7. 2. React 협업에서 어려운 점 React 협업에서 무엇이 우리를 괴롭히는가?
- 8. 2. React 협업에서 어려운 점 React 협업에서 무엇이 우리를 괴롭히는가?
- 9. 2. React 협업에서 어려운 점 React 협업에서 무엇이 우리를 괴롭히는가?
- 10. 2. React 협업에서 어려운 점 React 협업에서 무엇이 우리를 괴롭히는가?
- 11. 3. VAC Pattern View 로직과 JSX를 격리해서 관리하자!
- 12. 3. VAC Pattern View 로직과 JSX를 격리해서 관리하자! • 반복, 조건부 노출 등 스타일 제어 렌더링에 관련된 처리 만을 수행 • props를 통해서만 제어되며, 스스로의 상태를 관리하지 않는 stateless 컴포넌트 • 이벤트에 함수를 바인딩할 때 추가 처리 없이 적용
- 13. 3. VAC Pattern View 로직과 JSX를 격리해서 관리하자! UI Functionality Business Logic Props, State Normal Pattern JSX Style Child Components UI Functionality Business Logic Props, State VAC Pattern Props Object VAC
- 14. 3. VAC Pattern View 로직과 JSX를 격리해서 관리하자! Props Object
- 15. 3. VAC Pattern View 로직과 JSX를 격리해서 관리하자! VAC
- 16. 4. 구현 예제(with VAC Debugger) VAC Debugger를 활용해 VAC Pattern을 구현해보자.
- 17. Todo List 예제로 VAC Pattern 적용 시연 https://oss.navercorp.com/fedev/example-vac
- 18. 5. 서비스 적용 후기(네이버 게임) 네이버 게임 서비스에서 VAC를 활용하여 개발한 회고
- 19. 5. 서비스 적용 후기(네이버게임) 네이버 게임 서비스에서 VAC를 활용하여 개발한 회고 • 마크업 소스와 분리되어 있어서 QA할 때 수정하는게 좀 편하긴 했어요. • 비지니스 로직이 모여있어서 다른 개발자들이 봐도 파악하기가 편해요. • 처음 도입하는 경우에는 스펙이나 환경 이해도가 많이 필요할 것 같아요. • Props 드릴링 이런게 자주 있게 되어서 불편한 경우가 있긴 했어요. • 스펙변경 및 설계변경시에 커뮤니케이션 비용이 좀 있는거 같아요.
- 20. 5. 서비스 적용 후기(네이버게임) 네이버 게임 서비스에서 VAC를 활용하여 개발한 회고 • FE, UI개발 관심사가 분리되어 불필요한 코드 파악이 줄어들었어요. • UI를 재사용성하기 좋고 불필요한 마크업 개발이 줄어서 유지보수하기 좋습니다. • UI 개발자가 VAC를 잘 설계하기 위해서는 FE배경 지식이 많이 필요합니다. • 플리킹 같이 DOM을 직접 핸들링 하는 경우는 적용하기 쉽지 않습니다. • 렌더링에 영향을 받는 속성이 많은 경우는 하위 컴포넌트로 계속 값을 내려줘야하는 등 관리 가 어렵습니다.
- 21. Thanks! End of Documents.