Angular 파일 구조 간편정리(완전 기초)

 

Angular를 새롭게 공부하면서 가장 큰 문제는 무엇을 모르는지 이 파일은 무슨역할을하고 내가 작성한 이 파일은 무엇을 의미하는지에 대해 파악하는것이 첫번째 할일이라고 생각하게되어서 Angular CLI를 통해 프로젝트를 생성한 후 Default로 생기는 개발환경 파일들 프레임워크의 용도를 파악하며 공부하였습니다. 조금이라도 이해가지 않았던 부분들을 하나하나 따로 빼서 작성해놓았으니 단어가 생소하다 생각되는 단어들은 확인하면서 쭉 한번 읽어보시면 도움이 될 것 같습니다.

src 폴더 내부

---

 

 

파일명(폴더명)	설명
/app(폴더)	Angular의 모든 주요 구성요소가 위치하며 root 즉 애플리케이션의 최상위 폴더정도로 보면 될것같다.
/app/app.component. *	.ts, .html, .css, .spec.ts 등 모든 component들의 부모가되는 root component라고 지칭하는 요소들이다.
/app/app.module.ts	Angular의 구성요소를 등록하는 root module (최상위 모듈이다.)
assets(폴더)	모든 정적파일을 저장하는 폴더(이미지,폰트,css파일들)
/environments(폴더)	애플리케이션을 빌드할때 사용할 환경설정 파일을 여기에다가 넣는다.
index.html	웹애플리케이션이 실행될때 가장 처음 로딩되는 기초페이지
main.ts	프로젝트의 메인파일인데 위에 app.module을 사용해서 애플리케이션을 실행하게해준다.
polyfills.ts	***크로스 브라우징*** 을 위한 ***polyfill***들을 import하는 파일
styles.css	애플리케이션 전역에서 사용하는 Global css파일

• **크로스 브라우징**이란 : 모든 브라우저에 다른 기종의 OS나 HTML 렌더링 기술로 비슷하게 만들어 **어떤 환경에서도 이상없이 작동되게 하는 웹페이지를 제작하는 방법**론
• **polyfill**이란 : 브라우저에서 지원하지 않는 코드를 사용가능한 코드 조각이나 플러그인(추가기능)을 의미한다.

 

 

Src 말고 다른 기타 파일들

---

 

파일명	설명
angular.json	Angular 및 angular CLI를 위한 설정파일
package.json	***의존 모듈*** 관리를 위한 ***패키지 매니저***가 참조하는 파일
/e2e	e2e( end to end) 테스트 관련 파일들이 위치해 있다.
tsconfig.json	이름에서 보이듯이 TypeScript ***트랜스 파일*** 옵션 설정파일.
/node_modules	package.json에 등록된 의존 모듈이 패키지 매니저에 의해 설치되는 저장소

• **의존모듈** : 외부에서 끌어서 사용하는 모듈을 말한다.
• **패키지 매니저**란 : 패키지를 다루는 작업을 편리하고 안전하게 수행하기 위해 사용되는 툴.
• **트랜스파일**이란 : 어떤 특정 언어로 작성된 소스 코드를 다른 소스 코드로 변환하는 것

 

 

저랑 비슷하게 Angular를 처음 공부하시는 분들에게 꼭 도움이 되었으면 좋겠습니다