[Angular] angular 구조 정리

송현·2022년 6월 28일

목록 보기

1/1

node_modules(cordova)

npm install로 설치된 모듈 패키지들의 경로 (Library root)

platforms (cordova)

플랫폼 고유 프로젝트 파일이 생성되는 부분 (android / ios / bowser)

ionic cordova platform add android / ios 명령어로 추가

plugins (cordova)

cordova 플러그인들이 저장되는 장소

ionic cordova plugin add cordova-plugin-diagnostic 명령어로 추가

resources(cordova)

android / ios 필요한 자원을 관리하는 폴더

해당 앱의 아이콘이나 배경화면을 관리하는 폴더로 사용

network_security_config.xml : 네트워크 보안 구성 xml, 신뢰성 있는 홈페이지 도메인만 허용

src(angular)

실제 코드가 삽입되는 부분, 설정파일, 폰트, 이미지로 이루어져 있으며 애플리케이션에 필요한 파일을 담고 있다.
5-1. components HTML : HTML 기본 템플릿 파일
Scss : Scss 파일, 기본은 css 파일
spec.ts : 테스트 파일
Ts : 컴포넌트 파일, typescript 파일

Component 데코레이터에는 메타 데이터를 객체로 인자로 전달하며, 컴포넌트에 생성에 필요한 정보가 있다.
seletor : HTML 템플릿 이름, 다른 템플릿에서 로 import 할 수 있다.
templateUrl : 해당 컴포넌트의 html과 매핑한다.
styleUrls : 해당 컴포넌트의 스타일 파일과 매핑한다.
컴포넌트 클래스 영역은 해당 컴포넌트 뷰를 관리하기 위한 로직을 담은 클래스를 정의한다.
5-2. guards

url을 보호하기 위한 guard 폴더, 해당 프로젝트에 승인한 사람만 해당 url로 이동하게 정의
5-3. interfaces

공통으로 쓰는 vo interfaces
5-4. pages

프로젝트에서 사용되는 페이지 폴더모음
5-5. pipes

템플릿에서 사용되며, 화면에 표시하는 형식만 변경하고 싶을때 사용

날짜 외에도, 화폐, 대소문자, 소수점, 퍼센트, 비동기 등의 pipe가 존재
5-6. services

어느 컴포넌트에서든 사용할 수 있는 공통 로직

alert창을 공통 서비스로 선언해서 어느 컴포넌트에서든 해당 서비스를 import해서 사용가능하다.
5-7. assets

폰트나 이미지 같은 정적 파일을 모아두는 폴더