GDG WebTech 발표자료

1. Angular
React
Vue
목적에 맞게

2. 이건희
다우기술
Angular2, React, Spring
목적에 맞게
Web

3. 다우기술
httpswww.facebook.com/gunhee.lee.3572
목적에 맞게
이건희
https://github.com/csk746
csk746@naver.com

4. 프론트 배경과 선택
각 기술 특징
개발 경험
목적에 맞게

5. 1. 프론트 배경과 선택
요즘 프론트
프론트 선택 요소

6. 어떠한 제품을 만들 때 기술을 선택하는 기준?

7. 진입장벽
언어 트렌드

8. 그 시대의 트렌드
jQuery Backbone Angular1 React Angular2 Vue

9. 요즘 프론트

10. 브라우저 성능 프론트엔드 로직

11. 통합개발 분리개발

12. 모놀리틱 마이크로 서비스

13. 프론트선택 요소

14. 클라이언트 / 서버 사이드 렌더링
프레임워크 / 라이브러리
언어
유지보수

15. 클라이언트 / 서버 사이드 렌더링

16. 클라이언트 사이드 서버 사이드
HTML 다운로드
JS 다운로드
JS 구동
Data Fetch
Content View
HTML 다운로드
JS 다운로드
JS 구동
Data Fetch
Content View

17. Google
Google 검색 또는 URL 입력

18. Google
GDG

20. 클라이언트 사이드 렌더링
네트워크 비용
빠른 인터렉션
느린 초기 로딩
SEO 어려움

21. 서버 사이드 렌더링
빠른 초기 로딩
SEO적용 수월
프론트, 백엔드 코드 통일
느린 인터렉션

22. 언어

23. TypeScriptJSX ES6

24. 2.각 기술 특징

25. 코드 구성

26. Angular

27. React

28. React

29. React

30. React

31. React

32. Vue

33. 정형화되지 않은 것을 정형화 하는 것

34. 커뮤니케이션 비용 증가

36. “컴포넌트 내부에서 템플릿, 로직 및 스타일이 본질적으로
결합되어 배치되며 컴포넌트의 응집력과 유지보수성이 향상됩니다.”

37. 타입체크

38. “.each is not a function”

42. React

43. 리엑트 컴포넌트
props 전달
props 전달

44. 리엑트 컴포넌트
리덕스
props 전달
props 전달
액션
구독

45. React-Native

46. Electron

47. ReactVR

48. React Web React Native Electron

49. 코드리뷰 or 업무전환 용이
React Web React Native Electron

50. Vue

51. Vue
Angular2
React
Virtual DOM
양방향 바인딩
코어와 컴페니언 분리
코드 구조
디렉티브

52. 3.개발 경험
백오피스
SNS

53. 이 발표의 원인이 된 프로젝트들

54. 백오피스
빌링 ( 결제, 정산, 환불, 매출), 통계, 정보관리

55. 백오피스
많은 데이터를 도표화

56. 백오피스
많은 데이터를 도표화
-> 렌더링 뿐만 아니라 모델에 대한 관리도 용이해야 함

57. 백오피스
많은 데이터를 도표화
-> 렌더링 뿐만 아니라 모델에 대한 관리도 용이해야 함
-> 렌더링을 주로 다루는 React, Vue 보다 Angular2

58. 백오피스
다양한 모델을 서버와 주고받음

59. 백오피스
다양한 모델을 서버와 주고받음
-> 타입체크를 상시로 해야함

60. 백오피스
다양한 모델을 서버와 주고받음
-> 타입체크를 상시로 해야함
-> 타입스크립트

61. 백오피스
주문페이지

62. 고객사 정보

63. 고객사 담당자 정보

64. 개설 인스턴스 정보

65. 주문 상품 정보

67. 판킹(정치플랫폼)
각 정치인에 대해 코멘트를 남길 수 있고 팔로우와 좋아요
기능이 있으며 통계정보에 따라 다른 순위정보를 시각화

68. SNS
버튼(좋아요, 팔로우, 공유)이 많다.

69. SNS
버튼(좋아요, 팔로우, 공유)이 많다.
-> 이벤트가 많이 일어난다.

70. SNS
버튼(좋아요, 팔로우, 공유)이 많다.
-> 이벤트가 많이 일어난다.
-> jQuery를 이용한다면 콜백헬…

71. SNS
안드로이드, IOS동시개발

72. SNS
안드로이드, IOS동시개발
-> 모바일 개발자가 한명도 없다…

73. SNS
안드로이드, IOS동시개발
-> 모바일 개발자가 한명도 없다…
-> 하나의 언어로 두개 플랫폼 개발

74. 공유하기 / 팔로우

75. 좋아요 / 분발요망

76. 정치성향

77. 코멘트, 좋아요,
답장, 필터

78. 좋아요, 분발요망,
코멘트, 공유하기

79. 목적에 맞는 기술을 정하기

80. 내가 만드려는 제품의 성격

81. 엔터프라이즈
SNS 쇼핑몰

82. 큰 기능별로 특징 명세

83. 차트
좋아요, 공유 단순 모델

84. 차트
좋아요, 공유
단순 모델

85. Angular2 React Vue
구조 프레임워크 라이브러리 라이브러리
언어 TypeScript JSX ES6
Virual DOM X O O
서버사이드렌더링 O O O
장점
구조화가 잘 돼있어 유지보수에 용이
구글의 지원
다양한 이벤트 핸들링에 용이
페이스북의 지원
다양한 플랫폼 개발 가능
낮은 진입장벽
Angular2, React의 장점 적용
단점 높은 러닝커브
Redux, Thunk등 많은 필수 라이브러리
렌더링, 로직이 한곳이엤는 JSX
신규 프레임웍이기 때문에
상대적으로 레퍼런스가 적음
적합한환경 엔터프라이즈 어플리케이션 많은 이벤트가 있는 웹앱(SNS)
빠른 개발속도가 필요하고
많은 교육이 어려울 때

86. 목적에 맞는 개발이 프론트만의 문제?

87. Spring Express Django

88. Angular
React
Vue
목적에 맞게

89. 목적에 적합한 기술을 이용하여
소프트웨어를 만들어야 하는 이유

90. QA와의 전투 회피?빠른 퇴근?
단골 버그 생산자 탈출?

91. 가치

92. 좋은 소프트웨어 더 나은 가치

93. 좋은 소프트웨어를 이용하는
사람들이 만들어내는 가치

94. END