Angular
React
Vue
목적에 맞게
이건희
다우기술
Angular2, React, Spring
목적에 맞게
Web
다우기술
httpswww.facebook.com/gunhee.lee.3572
목적에 맞게
이건희
https://github.com/csk746
csk746@naver.com
프론트 배경과 선택
각 기술 특징
개발 경험
목적에 맞게
1. 프론트 배경과 선택
요즘 프론트
프론트 선택 요소
어떠한 제품을 만들 때 기술을 선택하는 기준?
진입장벽
언어 트렌드
그 시대의 트렌드
jQuery Backbone Angular1 React Angular2 Vue
요즘 프론트
브라우저 성능 프론트엔드 로직
통합개발 분리개발
모놀리틱 마이크로 서비스
프론트선택 요소
클라이언트 / 서버 사이드 렌더링
프레임워크 / 라이브러리
언어
유지보수
클라이언트 / 서버 사이드 렌더링
클라이언트 사이드 서버 사이드
HTML 다운로드
JS 다운로드
JS 구동
Data Fetch
Content View
HTML 다운로드
JS 다운로드
JS 구동
Data Fetch
Content View
Google
Google 검색 또는 URL 입력
Google
GDG
클라이언트 사이드 렌더링
네트워크 비용
빠른 인터렉션
느린 초기 로딩
SEO 어려움
서버 사이드 렌더링
빠른 초기 로딩
SEO적용 수월
프론트, 백엔드 코드 통일
느린 인터렉션
언어
TypeScriptJSX ES6
2.각 기술 특징
코드 구성
Angular
React
React
React
React
React
Vue
정형화되지 않은 것을 정형화 하는 것
커뮤니케이션 비용 증가
“컴포넌트 내부에서 템플릿, 로직 및 스타일이 본질적으로
결합되어 배치되며 컴포넌트의 응집력과 유지보수성이 향상됩니다.”
타입체크
“.each is not a function”
React
리엑트 컴포넌트
props 전달
props 전달
리엑트 컴포넌트
리덕스
props 전달
props 전달
액션
구독
React-Native
Electron
ReactVR
React Web React Native Electron
코드리뷰 or 업무전환 용이
React Web React Native Electron
Vue
Vue
Angular2
React
Virtual DOM
양방향 바인딩
코어와 컴페니언 분리
코드 구조
디렉티브
3.개발 경험
백오피스
SNS
이 발표의 원인이 된 프로젝트들
백오피스
빌링 ( 결제, 정산, 환불, 매출), 통계, 정보관리
백오피스
많은 데이터를 도표화
백오피스
많은 데이터를 도표화
-> 렌더링 뿐만 아니라 모델에 대한 관리도 용이해야 함
백오피스
많은 데이터를 도표화
-> 렌더링 뿐만 아니라 모델에 대한 관리도 용이해야 함
-> 렌더링을 주로 다루는 React, Vue 보다 Angular2
백오피스
다양한 모델을 서버와 주고받음
백오피스
다양한 모델을 서버와 주고받음
-> 타입체크를 상시로 해야함
백오피스
다양한 모델을 서버와 주고받음
-> 타입체크를 상시로 해야함
-> 타입스크립트
백오피스
주문페이지
고객사 정보
고객사 담당자 정보
개설 인스턴스 정보
주문 상품 정보
판킹(정치플랫폼)
각 정치인에 대해 코멘트를 남길 수 있고 팔로우와 좋아요
기능이 있으며 통계정보에 따라 다른 순위정보를 시각화
SNS
버튼(좋아요, 팔로우, 공유)이 많다.
SNS
버튼(좋아요, 팔로우, 공유)이 많다.
-> 이벤트가 많이 일어난다.
SNS
버튼(좋아요, 팔로우, 공유)이 많다.
-> 이벤트가 많이 일어난다.
-> jQuery를 이용한다면 콜백헬…
SNS
안드로이드, IOS동시개발
SNS
안드로이드, IOS동시개발
-> 모바일 개발자가 한명도 없다…
SNS
안드로이드, IOS동시개발
-> 모바일 개발자가 한명도 없다…
-> 하나의 언어로 두개 플랫폼 개발
공유하기 / 팔로우
좋아요 / 분발요망
정치성향
코멘트, 좋아요,
답장, 필터
좋아요, 분발요망,
코멘트, 공유하기
목적에 맞는 기술을 정하기
내가 만드려는 제품의 성격
엔터프라이즈
SNS 쇼핑몰
큰 기능별로 특징 명세
차트
좋아요, 공유 단순 모델
차트
좋아요, 공유
단순 모델
Angular2 React Vue
구조 프레임워크 라이브러리 라이브러리
언어 TypeScript JSX ES6
Virual DOM X O O
서버사이드렌더링 O O O
장점
구조화가 잘 돼있어 유지보수에 용이
구글의 지...
목적에 맞는 개발이 프론트만의 문제?
Spring Express Django
Angular
React
Vue
목적에 맞게
목적에 적합한 기술을 이용하여
소프트웨어를 만들어야 하는 이유
QA와의 전투 회피?빠른 퇴근?
단골 버그 생산자 탈출?
가치
좋은 소프트웨어 더 나은 가치
좋은 소프트웨어를 이용하는
사람들이 만들어내는 가치
END
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue
Upcoming SlideShare
Loading in …5
×

목적에 맞게 Angular, React, Vue

6,521 views

Published on

GDG WebTech 발표자료

Published in: Software

목적에 맞게 Angular, React, Vue

  1. 1. Angular React Vue 목적에 맞게
  2. 2. 이건희 다우기술 Angular2, React, Spring 목적에 맞게 Web
  3. 3. 다우기술 httpswww.facebook.com/gunhee.lee.3572 목적에 맞게 이건희 https://github.com/csk746 csk746@naver.com
  4. 4. 프론트 배경과 선택 각 기술 특징 개발 경험 목적에 맞게
  5. 5. 1. 프론트 배경과 선택 요즘 프론트 프론트 선택 요소
  6. 6. 어떠한 제품을 만들 때 기술을 선택하는 기준?
  7. 7. 진입장벽 언어 트렌드
  8. 8. 그 시대의 트렌드 jQuery Backbone Angular1 React Angular2 Vue
  9. 9. 요즘 프론트
  10. 10. 브라우저 성능 프론트엔드 로직
  11. 11. 통합개발 분리개발
  12. 12. 모놀리틱 마이크로 서비스
  13. 13. 프론트선택 요소
  14. 14. 클라이언트 / 서버 사이드 렌더링 프레임워크 / 라이브러리 언어 유지보수
  15. 15. 클라이언트 / 서버 사이드 렌더링
  16. 16. 클라이언트 사이드 서버 사이드 HTML 다운로드 JS 다운로드 JS 구동 Data Fetch Content View HTML 다운로드 JS 다운로드 JS 구동 Data Fetch Content View
  17. 17. Google Google 검색 또는 URL 입력
  18. 18. Google GDG
  19. 19. 클라이언트 사이드 렌더링 네트워크 비용 빠른 인터렉션 느린 초기 로딩 SEO 어려움
  20. 20. 서버 사이드 렌더링 빠른 초기 로딩 SEO적용 수월 프론트, 백엔드 코드 통일 느린 인터렉션
  21. 21. 언어
  22. 22. TypeScriptJSX ES6
  23. 23. 2.각 기술 특징
  24. 24. 코드 구성
  25. 25. Angular
  26. 26. React
  27. 27. React
  28. 28. React
  29. 29. React
  30. 30. React
  31. 31. Vue
  32. 32. 정형화되지 않은 것을 정형화 하는 것
  33. 33. 커뮤니케이션 비용 증가
  34. 34. “컴포넌트 내부에서 템플릿, 로직 및 스타일이 본질적으로 결합되어 배치되며 컴포넌트의 응집력과 유지보수성이 향상됩니다.”
  35. 35. 타입체크
  36. 36. “.each is not a function”
  37. 37. React
  38. 38. 리엑트 컴포넌트 props 전달 props 전달
  39. 39. 리엑트 컴포넌트 리덕스 props 전달 props 전달 액션 구독
  40. 40. React-Native
  41. 41. Electron
  42. 42. ReactVR
  43. 43. React Web React Native Electron
  44. 44. 코드리뷰 or 업무전환 용이 React Web React Native Electron
  45. 45. Vue
  46. 46. Vue Angular2 React Virtual DOM 양방향 바인딩 코어와 컴페니언 분리 코드 구조 디렉티브
  47. 47. 3.개발 경험 백오피스 SNS
  48. 48. 이 발표의 원인이 된 프로젝트들
  49. 49. 백오피스 빌링 ( 결제, 정산, 환불, 매출), 통계, 정보관리
  50. 50. 백오피스 많은 데이터를 도표화
  51. 51. 백오피스 많은 데이터를 도표화 -> 렌더링 뿐만 아니라 모델에 대한 관리도 용이해야 함
  52. 52. 백오피스 많은 데이터를 도표화 -> 렌더링 뿐만 아니라 모델에 대한 관리도 용이해야 함 -> 렌더링을 주로 다루는 React, Vue 보다 Angular2
  53. 53. 백오피스 다양한 모델을 서버와 주고받음
  54. 54. 백오피스 다양한 모델을 서버와 주고받음 -> 타입체크를 상시로 해야함
  55. 55. 백오피스 다양한 모델을 서버와 주고받음 -> 타입체크를 상시로 해야함 -> 타입스크립트
  56. 56. 백오피스 주문페이지
  57. 57. 고객사 정보
  58. 58. 고객사 담당자 정보
  59. 59. 개설 인스턴스 정보
  60. 60. 주문 상품 정보
  61. 61. 판킹(정치플랫폼) 각 정치인에 대해 코멘트를 남길 수 있고 팔로우와 좋아요 기능이 있으며 통계정보에 따라 다른 순위정보를 시각화
  62. 62. SNS 버튼(좋아요, 팔로우, 공유)이 많다.
  63. 63. SNS 버튼(좋아요, 팔로우, 공유)이 많다. -> 이벤트가 많이 일어난다.
  64. 64. SNS 버튼(좋아요, 팔로우, 공유)이 많다. -> 이벤트가 많이 일어난다. -> jQuery를 이용한다면 콜백헬…
  65. 65. SNS 안드로이드, IOS동시개발
  66. 66. SNS 안드로이드, IOS동시개발 -> 모바일 개발자가 한명도 없다…
  67. 67. SNS 안드로이드, IOS동시개발 -> 모바일 개발자가 한명도 없다… -> 하나의 언어로 두개 플랫폼 개발
  68. 68. 공유하기 / 팔로우
  69. 69. 좋아요 / 분발요망
  70. 70. 정치성향
  71. 71. 코멘트, 좋아요, 답장, 필터
  72. 72. 좋아요, 분발요망, 코멘트, 공유하기
  73. 73. 목적에 맞는 기술을 정하기
  74. 74. 내가 만드려는 제품의 성격
  75. 75. 엔터프라이즈 SNS 쇼핑몰
  76. 76. 큰 기능별로 특징 명세
  77. 77. 차트 좋아요, 공유 단순 모델
  78. 78. 차트 좋아요, 공유 단순 모델
  79. 79. Angular2 React Vue 구조 프레임워크 라이브러리 라이브러리 언어 TypeScript JSX ES6 Virual DOM X O O 서버사이드렌더링 O O O 장점 구조화가 잘 돼있어 유지보수에 용이 구글의 지원 다양한 이벤트 핸들링에 용이 페이스북의 지원 다양한 플랫폼 개발 가능 낮은 진입장벽 Angular2, React의 장점 적용 단점 높은 러닝커브 Redux, Thunk등 많은 필수 라이브러리 렌더링, 로직이 한곳이엤는 JSX 신규 프레임웍이기 때문에 상대적으로 레퍼런스가 적음 적합한환경 엔터프라이즈 어플리케이션 많은 이벤트가 있는 웹앱(SNS) 빠른 개발속도가 필요하고 많은 교육이 어려울 때
  80. 80. 목적에 맞는 개발이 프론트만의 문제?
  81. 81. Spring Express Django
  82. 82. Angular React Vue 목적에 맞게
  83. 83. 목적에 적합한 기술을 이용하여 소프트웨어를 만들어야 하는 이유
  84. 84. QA와의 전투 회피?빠른 퇴근? 단골 버그 생산자 탈출?
  85. 85. 가치
  86. 86. 좋은 소프트웨어 더 나은 가치
  87. 87. 좋은 소프트웨어를 이용하는 사람들이 만들어내는 가치
  88. 88. END

×