[블로그 개발 프로젝트] Angularjs 장점
https://subicura.com/2016/06/20/server-side-rendering-with-react.html
개발속도가 빠름
특별한 추가 코드 없이 변수 할당만으로 양방향 데이터 바인딩 지원. get/set 함수 필요없음
별도의 템플릿 코드 분리 없이 뷰-데이터 연동. 기본 HTML이 곧 템플릿파일
DIDependency Injection 패턴사용. new같은 없고 그냥 인자로 넘기기만 하면됨
모듈화가 잘되어 있어 재사용이 용이함
플러그인이 엄청나게 많음
유지보수가 쉬움
Javascript 코드량이 적음
MVC 패턴이 잘 정리되어 있어 개발자간 코드가 비슷함
Controller, Directive, Filter, Service 모듈 구분이 명확
테스트 코드 작성 용이
모듈별 테스트 작성이 쉬움. 튜토리얼도 테스트코드부터 시작함
데이터 로딩 시점이 비동기인 경우 E2Eend-to-end 테스트가 까다로운 경우가 있는데 Protractor를 사용하면 간단함
프로젝트 분리
백엔드를 API서버로 사용하여 프론트엔드와 완전히 분리할 수 있음
템플릿을 스크립트 태그나 Javascript에서 관리하지 않고 HTML을 그대로 사용하여 퍼블리셔 협업도 좋음
구글이 관리함
오오, 구글에서 지메일, 캘린더 이런걸로 만드는건가??
망하진 않겠다!
장점이 어마어마 합니다. 그럼 단점을 알아볼까요?
AngularJS의 단점
속도가 느림. 특히 모바일
IE8지원안함 1
러닝커브가 높음. 특히 Directive는 공부할수록 헬
비표준 태그 사용의 찝찝함. (대부분의 브라우져가 잘 처리하긴 하지만서도..)
페이지 깜빡임 이슈(FOUCFlash of unstyled content) 2
묘한 애니메이션 적용. 컨텐츠가 그려지는 시점을 정확하게 제어하기 어려워 애니메이션 적용이 쉽지 않음
SEO 이슈. 크롤링 봇은 컨텐츠 로딩전 빈페이지만 바라봄. title, meta tag도 처음 페이지것만 바라봄 3
뒤로가기 하면 페이지 새로 로딩함. history API를 이용한 페이지 이동이 실제로는 페이지를 동적으로 로딩하는 구조. 스크롤도 최상단으로 이동 4
외부 서비스 콜백처리
외부(페이스북, 구글, …) 로그인 후 돌아오는 페이지는 어떻게 처리하나?
이메일 회원가입 확인 페이지는 어떻게 하나?
결제 페이지 이동은 어떻게 하나?
결국 백엔드쪽에 뷰 페이지를 만들어야 하나?
Angular 2와의 호환성
Angular 2는 완전히 다르다?!
기존 1버전은 곧 지원 중단?!
호환이 안된다? 업데이트가 안된다?!
TypeScript만 지원한다? 그게 뭔데 ㅠ
구글도 자기 서비스에 안씀
안쓰는 줄 알았는데 사용하고 있었네요 (강규현님 감사합니다)
https://www.madewithangular.com/#/categories/google
엄청난 장점만큼 단점을 같이 보았는데 사실 대부분의 단점은 AngularJS의 단점이라기 보다는 웹앱의 단점입니다. AngularJS는 앱용 웹에 적합한 프레임워크입니다. 가만보니 공식사이트 메인에 HTML enhanced for web apps! 라고 적혀있습니다.
이런 사실을 무시하고 일반적인 서비스에 쓴적이 있습니다. 속도가 느린건 핸드폰이 빠르게 발전하면서 해결될거라 믿었고 위에 나열한 단점은 열심히 꼼수(?)로 해결할 수 있을것 같았습니다.
하지만, 결국 Angular 2가 공개되고 업데이트를 포기하게 됩니다. 여러가지 꼼수를 다시 적용하고 테스트하고 관리하기가 너무 힘들고 이미 이전 프로젝트도 꼼수로 인해 너덜너덜해진 상태입니다. 기술적으로 안되는건 없겠지만(안되는 것도 있음) 결국 유지보수와 호환성에 문제가 생깁니다. 웹앱이 아니라면 브라우저가 알아서 해주는 것들을 웹앱이기 때문에 여러가지 추가적인 셋팅이 필요하게 됩니다.
AngularJS는 좋지만, 웹앱용에 한정이고 성능이 크게 중요치 않은 어드민이나 내부서비스에 적합하다고 결론을 내립니다.
개발속도가 빠름
특별한 추가 코드 없이 변수 할당만으로 양방향 데이터 바인딩 지원. get/set 함수 필요없음
별도의 템플릿 코드 분리 없이 뷰-데이터 연동. 기본 HTML이 곧 템플릿파일
DIDependency Injection 패턴사용. new같은 없고 그냥 인자로 넘기기만 하면됨
모듈화가 잘되어 있어 재사용이 용이함
플러그인이 엄청나게 많음
유지보수가 쉬움
Javascript 코드량이 적음
MVC 패턴이 잘 정리되어 있어 개발자간 코드가 비슷함
Controller, Directive, Filter, Service 모듈 구분이 명확
테스트 코드 작성 용이
모듈별 테스트 작성이 쉬움. 튜토리얼도 테스트코드부터 시작함
데이터 로딩 시점이 비동기인 경우 E2Eend-to-end 테스트가 까다로운 경우가 있는데 Protractor를 사용하면 간단함
프로젝트 분리
백엔드를 API서버로 사용하여 프론트엔드와 완전히 분리할 수 있음
템플릿을 스크립트 태그나 Javascript에서 관리하지 않고 HTML을 그대로 사용하여 퍼블리셔 협업도 좋음
구글이 관리함
오오, 구글에서 지메일, 캘린더 이런걸로 만드는건가??
망하진 않겠다!
장점이 어마어마 합니다. 그럼 단점을 알아볼까요?
AngularJS의 단점
속도가 느림. 특히 모바일
IE8지원안함 1
러닝커브가 높음. 특히 Directive는 공부할수록 헬
비표준 태그 사용의 찝찝함. (대부분의 브라우져가 잘 처리하긴 하지만서도..)
페이지 깜빡임 이슈(FOUCFlash of unstyled content) 2
묘한 애니메이션 적용. 컨텐츠가 그려지는 시점을 정확하게 제어하기 어려워 애니메이션 적용이 쉽지 않음
SEO 이슈. 크롤링 봇은 컨텐츠 로딩전 빈페이지만 바라봄. title, meta tag도 처음 페이지것만 바라봄 3
뒤로가기 하면 페이지 새로 로딩함. history API를 이용한 페이지 이동이 실제로는 페이지를 동적으로 로딩하는 구조. 스크롤도 최상단으로 이동 4
외부 서비스 콜백처리
외부(페이스북, 구글, …) 로그인 후 돌아오는 페이지는 어떻게 처리하나?
이메일 회원가입 확인 페이지는 어떻게 하나?
결제 페이지 이동은 어떻게 하나?
결국 백엔드쪽에 뷰 페이지를 만들어야 하나?
Angular 2와의 호환성
Angular 2는 완전히 다르다?!
기존 1버전은 곧 지원 중단?!
호환이 안된다? 업데이트가 안된다?!
TypeScript만 지원한다? 그게 뭔데 ㅠ
구글도 자기 서비스에 안씀
안쓰는 줄 알았는데 사용하고 있었네요 (강규현님 감사합니다)
https://www.madewithangular.com/#/categories/google
엄청난 장점만큼 단점을 같이 보았는데 사실 대부분의 단점은 AngularJS의 단점이라기 보다는 웹앱의 단점입니다. AngularJS는 앱용 웹에 적합한 프레임워크입니다. 가만보니 공식사이트 메인에 HTML enhanced for web apps! 라고 적혀있습니다.
이런 사실을 무시하고 일반적인 서비스에 쓴적이 있습니다. 속도가 느린건 핸드폰이 빠르게 발전하면서 해결될거라 믿었고 위에 나열한 단점은 열심히 꼼수(?)로 해결할 수 있을것 같았습니다.
하지만, 결국 Angular 2가 공개되고 업데이트를 포기하게 됩니다. 여러가지 꼼수를 다시 적용하고 테스트하고 관리하기가 너무 힘들고 이미 이전 프로젝트도 꼼수로 인해 너덜너덜해진 상태입니다. 기술적으로 안되는건 없겠지만(안되는 것도 있음) 결국 유지보수와 호환성에 문제가 생깁니다. 웹앱이 아니라면 브라우저가 알아서 해주는 것들을 웹앱이기 때문에 여러가지 추가적인 셋팅이 필요하게 됩니다.
AngularJS는 좋지만, 웹앱용에 한정이고 성능이 크게 중요치 않은 어드민이나 내부서비스에 적합하다고 결론을 내립니다.
댓글
댓글 쓰기