[angular] angular 프로젝트 구조, 동작 흐름

출저 및 참고 사이트 :

https://freestrokes.tistory.com/95
https://alexband.tistory.com/41?category=687413

Angular

• 모바일 환경의 SPA(Single Page Application) 을 타겟으로 만들어진 프레임워크
• Angular는 자바스크립트로 만든 client 측 MVC/MVVM 프레임워크로 모던 단일 페이지 웹 애플리케이션(혹은 웹사이트) 개발의 정수이다.

Web service와 Spa 차이

Web service 동작 방식

• 사용자가 클라이언트, 즉 HTML 화면에서 해당 링크를 클릭하면 클라이언트 측에서 서버로 해당 데이터를 달라고 요청한다.
• 서버가 요청받은 데이터를 클라이언트에게 응답하면 클라이언트는 유저에게 결과를 보여준다.

SPA 동작 방식

• 초기 접속시에 필요한 데이터를 받아오고 난 뒤, 유저가 요청을 하게 되면 해당 HTML 페이지를 클라이언트에게 재조립하여 보여준다.

• 요청이 들어오면 서버는 현재 화면에서 바뀌어야 될 부분만 바꿔서 재조립을 한 뒤에 던져준다.

• 이 때 조립되는 부분을 컴포넌트라고 부른다.

SPA(Angulr 동작방식)

• 사용자가 새로운 페이지나 DOM이 변경되는 이벤트를 요청하면, AngularRoute 에서 명시된 요청을 따라가서 해당 컴포넌트를 만난뒤에 현재 DOM 에서 바뀌어야 될 부분만을 바꿔서 재조립 후 사용자에게 보여준다.

• 기본적인 개념은 요청 -> 라우트 -> 컴포넌트 조립 -> 결과 방식으로 동작된다.

Angular 프로젝트 디렉터리 구조

src 폴더

(모든 구성요소, css, image, font와 같은 정적 파일 및 설정 파일 등 애플리케이션에 필수로 필요한 파일을 담고 있다. 개발자가 작성하는 대부분의 파일은 이곳에 포함된다.)

• /app
  Angular 구성요소가 위치
• /app/app.component(.ts, .html, .css, .spec.ts)
  모든 component의 부모인 root component의 구성요소가 위치
• /app/app.module.ts
  Angular 구성요소를 등록하는 root module
• /assets
  image, font와 같은 정적 파일이 위치
• /environments
  빌드시 사용할 환경 설정 파일이 위치
• browserslist
  Autoprefixer, babel 과 같은 frontend 적용 대상 브라우저를 공유하는 라이브러리 설정 파일
• favicon.ico
  파비콘 파일
• index.html
  웹 애플리케이션 실행시 처음으로 로딩되는 기본 페이지.
  root component(/src/app/app.component.*) 의 셀렉터인 의 뷰가 로드되어 브라우저에 표시됨.
• karma.conf.js
  karma test runner 설정 파일. ng test 명령어 실행시 참조됨.
• main.ts
  프로젝트의 메인 파일.
  root module(AppModule) 을 사용하여 애플리케이션을 실행함.
• polyfills.ts
  크로스 브라우징을 위한 polyfill 들을 import 하는 파일
• style.css
  애플리케이션 전역에 사용되는 global css 파일
• test.ts
  unit test 를 위한 메인 파일.
• tsconfig(.app, .spec).json
  TypeScript 컴파일 옵션 설정 파일
• typings.d.ts
  TypeScript 타입 선언 파일

출처: https://freestrokes.tistory.com/95 [FREESTROKES DEVLOG]

기타 설정파일들

(src 폴더 외에 다른 파일들은 테스트, 빌드, 배포 등을 위한 설정파일이다.)

• /e2e
  e2e(end-to-end) 테스트 관련 파일들이 위치. ng e2e 명령어 실행시 참조.
• /node_modules
  package.json 에 등록된 의존 모듈이 패키지 매니저에 의해 설치되는 저장소
• .editorconfig
  코드 에디터 기본 설정 파일
• .gitignore
  Git 소스 관리를 제외할 대상에 대한 설정 파일
• angular.json
  Angular 및 Angular CLI를 위한 설정 파일.
• package.json
  의존 모듈 관리를 위한 패키지 매니저가 참조하는 파일
• README.md
  프로젝트의 개요를 기술한 파일. Angular CLI가 기본 내용을 생성함.
• tsconfig.json
  TypeScript 트랜스파일 옵션 설정 파일
• tslint.json
  TSlint가 사용하는 구문 체크 설정 파일. ng lint 명령어 실행시 참조.

출처: https://freestrokes.tistory.com/95 [FREESTROKES DEVLOG]

Angular 어플리케이션의 처리 흐름

• index.html
  • 브라우저에서 웹 어플리케이션 실행시 가장 먼저 로딩되는 파일.
  • angular.json 파일의 index 프로퍼티 설정에 의해 로드된다.
• main.ts
  • 프로젝트의 메인 진입포인트로 root module(/src/app/app.module.ts)을 부트스트랩하여 어플리케이션을 실행한다.
  • angular.json 파일의 main 프로퍼티 설정에 의해 로드된다.
• app.module.ts
  • @NgModule 데코레이터의 파라미터로 전달되는 메타데이터에 애플리케이션 전체 설정 정보를 저장한 root module root component(/src/app/app.component.ts) 를 부트스트랩하여 실행한다.
• app.component.ts
  • 모든 component 들의 부모 역할을 당당하는 root component이다.
  • /src/index.html 의 에 component view 가 로드되어 브라우저에 출력된다.

Anular의 구성요소

Angular 어플리케이션은 다음의 구성 요소를 조합하여 구축된다.

• 컴포넌트(Component)
  • 템플릿과 메타데이터, 컴포넌트 클래스로 구성되며 데이터 바인딩에 의해 연결된다.
  • 화면을 구성하는 뷰(View)를 생성하고 관리하는 것이 주된 역할이다. (화면은 1개 이상의 컴포넌트가 연동되어 구성된다.)
• 디렉티브(Directive)
  • 어플리케이션 전역에서 사용할 수 있는 공통 관심사를 컴포넌트에서 분리하여 구현한 것이다.
  • 컴포넌트의 복잡도를 낮추고 가독성을 높여준다.
  • Structural / Attribute Directive 로 구분하며, 넓은 관점에서 보면 컴포넌트 또한 디렉티브로 구분 할 수 있다.
• 서비스(Service)
  • 어플리케이션의 공통 로직을 담당한다.
  • 어플리케이션 전역의 공통 관심사를 컴포넌트에서 분리하기 위해 사용된다.
  • 의존성 주입(Dependency Injection)이 가능한 클래스로 작성한다.
• 라우터(Router)
  • 컴포넌트를 교체하는 방법으로 뷰를 전환하여 화면 이동을 구현한다.
• 모듈(NgModule)
  • 기능적으로 관련된 구성 요소를 하나의 단위로 묶는 메커니즘이다.
  • 모듈은 다른 모듈과 결합이 가능하고, Angular는 여러 모듈을 조합하여 어플리케이션을 구성한다.
  • 컴포넌트, 디렉티브, 파이프, 서비스 등의 Angular 구성요소는 모듈에 등록되어야 사용이 가능하다.

Angular 기본 포트

• port : 4200
• angular.json 파일에서 architect > serve > options 항목에 “port”: 포트번호(숫자)를 추가하면 실행 포트 변경가능