기본 콘텐츠로 건너뛰기

[Angular Architecture] 애플리케이션 구조 설계 - 1

[Angular Architecture] 애플리케이션 구조 설계 - 1

Angular 프로젝트를 위한 구조 설계 요건에 대해 알아본다.

- 프레임워크 선택 고려 사항

- 개발 생산성과 유지 보수성을 높일 수 있는 방안

- 참조 문서와 소스

+ Angular Enterprise Architecture pattern 문서

+ 해당 문서의 예제 소스

프레임워크 선택 고려 사항

프레임워크는 잘 정돈된 놀이터와 같아 기구를 타고 놀면 된다. 하지만 라이브러리의 경우는 툴박스와 같아서 박스안에는 망치, 드라이버, 못같은 것만 있다. 그럼 놀 것을 어떻게 만들지는 도구를 사용하는 사용자의 몫이다. 현재 UI 프레임워크/라이브러리는 Angular, React, Vue 등이고 풀스택으로는 Meteor를 선택해서 사용하고 있다. Angular 프레임워크와 React UI 라이브러리 또는 Meteor 선택시 고려사항을 개인의견으로 간략히 정리한다.

Angular Framework

- 대규모 협업 팀에 유리: 대략 10명이상으로 HTML Publisher와 Javascript 개발자가 분리되어 있을 경우

- JQuery가 low level의 javascript로 개발해 오던 개발자들이 접근하기에 수월하다고 판단함

- Typescript, RxJS 반드시 알아야 한다.

React Library

- HTML Publisher와 Javascript 개발을 같이하는 스타트업 또는 프론앤드 개발자에게 유리

- 원하는 것들을 선택해 적용할 수 있다.

Meteor

- FullStack 으로서 javascript가지고 전부 개발하고 싶을 경우

- 아이디어를 빠르게 구현하고 검증 받고 싶을 경우

- UI는 Angular, React, Vue 등으로 선택해 사용할 수 있으나, React가 적합하다 판단

그러나 어떤 것을 선택하든 공통적으로 고려해야 하는 사항으로 애플리케이션 아키텍쳐이다. 이에 대한 좋은 영상이 있어 보기를 권한다.

애플리케이션 아키텍쳐

위의 영상을 정리해 보면 다음과 같다.

- Layered Architecture 구성

- 역할 분담

+ Module: 업무 최소 단위, 하나를 제거해도 다른 것에 영향을 주지 않는 단위, Module은 Sandbox만 알뿐이다.

+ Sandbox: Module은 Sandbox를 통해 Application Core나 Base Library를 접근한다.

- 일관성을 유지시킴

- 시큐리티 가드 역할

- 공통 Interface 역할

+ Application Core: Module을 관리(Control) 한다.

- Module의 Life Cycle을 담당한다.

- Module 간 통신을 담당한다 (inter-module communication)

- Module을 직접 가져다 쓰지 않고, Sandbox의 공통 API를 통해 명령을 내리고, 듣는다.

- General error handling

- Extension을 통해 Application core기능을 확장한다.

+ Extension 확장

- Error handling

- Ajax communication: 공통 Format (request/response) 통신, 서버 오류 관리

- New module capabilities

- General Utils

- What you want

+ Base Library

- 개발자들이 직접 base library를 건드리게 하지 말자. 나중에 바뀔 수 있다.

- Browser normalization

- General purpose utilities: Paser/serializer, Object / DOM manipulation, Ajax Communication

- low-level extension 제공: application extension처럼 base library를 확장한 것들을 제공한다.

정리

- Base Library만이 사용중인 브라우저를 알고 있다. 아키텍쳐의 다른 layer에서 알 필요가 없다.

- Application Core만이 사용중인 Base Library를 알고 있다. 아키텍쳐의 다른 layer에서 알 필요가 없다.

- Module은 Sandbox의 존재외에는 아무것도 모른다. 아키텍쳐의 나머지에 대해선 아무것도 모른다.

장점

- 하나의 프레임워크상에서 서로 다른 멀티 애플리케이션을 만들 수 있다. 즉, 기존의 컴포넌트를 재사용함으로서 시간을 줄일 수 있다.

- 느슨한 연결(loose coupling)으로 인해 모듈 단위 테스트가 가능해짐.

- 확장 가능한 자바스크립트 아키텍쳐는 하나의 블록을 교체한다고 해도 두려워 할 필요가 없는 상태가 되어야 한다. 즉, 이를 달성할 수 있다.

유지 보수성 높이기

유지보수가 좋은 코드는 다음의 특성을 갖는다.

- 직관적이다. Intuitive

- 코드 이해가 쉽다 Understable

- 적용하기 쉽다 Adaptable

- 확장하기 쉽다 Extendable

- 디버깅하기 쉽다 Debuggable

이를 위해 해야할 것들.

- Code Style, Code Convention 지키기

- Naming 잘 하기: 이름에 대한 길이에 대해 걱정하지 말자.

- Javascript에서 css 핸들링 하지 말자

- event object를 바로 다른 function의 argument로 넘기지 말고, 필요한 정보만을 준다.

- 사용전 object undefined 체크

- string 값들은 별도의 Config Data 객체에 담아서 사용한다.

- 빌드 자동화 하자

from http://mobicon.tistory.com/565 by ccl(A) rewrite - 2020-03-06 23:54:53

댓글

댓글 쓰기

이 블로그의 인기 게시물

(주)편두리 채용 정보: PYUNDOORI에서 핫한 개발자분들을 모십니다.

(주)편두리 채용 정보: PYUNDOORI에서 핫한 개발자분들을 모십니다. - 좋아요 아래와 같은 업무를 훌륭히 감당하실 분을 모십니다.서비스 관련 DB 모델링, DB 최적화 작업서버 & DB 관리Frontend & Backend 인터페이스의 최적화 작업 화합과 성장을 같이! - Angular JS의 경험 - Node.js - javascript 능숙자 - DRMS 사용 능숙자 더 많은 내용은 더 많은 내용은 더팀스 에서 확인하세요! from http://theteams.tistory.com/742 by ccl(A) rewrite - 2020-03-22 12:20:20
댓글 쓰기
자세한 내용 보기

[020] 파동함수를 쓰기

[020] 파동함수를 쓰기 [020] 파동함수를 쓰기 [020] 파동함수를 알면 우리가 원하는 뭔가를 알 수 있다고 했는데, 정작 파동을 함수로 쓰는 것은 아직 다루지 않았고, 양자역학 내용을 좀 더 진행하려면 왜 파동이 삼각함수로 써 지는지를 한번은 정리를 해야겠다. 수학이 많이 나올 예정이다. 앞에서 파동함수를 아래 형태로 쓸 수 있다고 했었는데, 왜 이런 형태가 되는지 알아보자. [020-01] 파동함수 사인파의 일반형은 코사인 (cos) 을 이용해 쓰지만, 사인 (sin) 과 코사인은 위상차이만 있는 함수들이고, 우리는 앞으로 사인을 이용해 문제를 풀 예정이라 사인을 이용하기로 한다. 파동함수는 양자역학에서 갑자기 나온 말이 아니고, 원래 파동을 함수의 형태로 쓴 것을 파동함수라고 부른다. 파동-입자 이중성을 가지니까 기존에 파동을 함수의 형태로 쓰던 그 모양을 가져다 쓴 것. 주교재의 16장에 있는 내용이다. [020-02] 펄스 - Pulse 아래와 같이 하나의 진동이 왼쪽에서 오른쪽으로 진행하는 상황을 생각해보자. 시간 t 일 때, 위치 x 의 밧줄의 높이를 y 라 하고, 셋의 관계를 기호로 쓰면, 그러면 아래의 관계가 성립한다. 이게 무슨말이냐면, 시간 t 일 때 위치 x 의 밧줄의 높이 와 시간 0 일 때 위치 x-vt 의 밧줄의 높이가 같다 는 말인데, 그림으로 보면, 왼쪽은 시간 0, 오른쪽은 시간 t 이고, t 일 때 P 의 높이와 0 일 때 높이가 같다는 것. [020-03] 파동을 식으로 써보자. 아래의 파동을 보자. 지금 내용부터는 사인이든 코사인이든 상관없는데, 위 그림이 사인이니까 아래의 식 으로 쓸 수 있다. A는 진폭이고, 주기, 진동수, 파장 같은 값을 아직 모르니까 a 는 아직 정해지지 않은 값 이다. 일반적으로 알고있는 삼각함수는 가로축이 각도 이지만, 우리는 공간을 진행하고 있는 파동을 다루니까 위의 형태로 써진다고 생각하자. x=0 에서 진폭이 ...
댓글 쓰기
자세한 내용 보기

[Angular] Router 라우터 정리

[Angular] Router 라우터 정리 Angular2 버전 이후를 기준으로 정리한 글입니다. 라우터는 URL을 사용하여 특정 영역에 어떤 뷰를 보여 줄지 결정하는 기능을 제공한다. 전통적인 서버사이드 렌더링을 하는 웹 사이트는 주소가 바뀔 때마다 서버에 전체 페이지를 요청하고 전체 페이지를 화면에 렌더링한다. 매 요청시 전체 페이지를 새로 랜더링하는 것은 비효율적이기 때문에 라우터를 이용하여 필요한 부분만 랜더링을 한다면 효율적일 것이다. 라우터는 URL에 해당하는 컴포넌트를 화면에 노출하고 네비게이션을 할 수 있는 기능을 가지고 있다. Router 구성 요소 Router – 라우터를 구현하는 객체이다. Navigate() 함수와 navigateByUrl() 함수를 사용하여 경로를 이동할 수 있다. RouterOulet – 라우터가 컴포넌트를 태그에 렌더링하는 영역을 구현하는 Directive이다. Routes – 특정 URL에 연결되는 컴포넌트를 지정하는 배열이다. RouterLink – HTML의 앵커 태그는 브라우저의 URL 주소를 변경하는 것이다. 앵귤러에서 RouterLink를 사용하면 라우터를 통해 렌더링할 컴포넌트를 변경할 수 있다. ActivatedRoute – 현재 동작하는 라우터 인스턴스 객체이다. Router 설정 라우터를 사용하기 위해서는 먼저 Router 모듈을 import 해야 한다. import { RouterModule, Routes } from '@angular/router'; 라우터에서 컴포넌트는 고유의 URL과 매칭된다. URL과 컴포넌트는 아래와 같이 Routes 객체를 설정하여 지정할 수 있다. 아래의 예에서는 디폴트 path에서는 MainComponent가 노출이 되고 product-list path에서는 ProductListComponent가 노출이 되도록 설정을 한 것을 볼 수 있다. const routes: Routes = [ { pa...
댓글 쓰기
자세한 내용 보기