본문 바로가기

Web/Ionic

[Ionic] 프로젝트 폴더구조

src 폴더

프로그래밍 작업 폴더

페이지를 만드는 컴포넌트나 서비스, 파이프 등의 코드 등


app 폴더 -  앱을 어떻게 시작하고 초기화면을 어떻게 표시하는지 그리고 앱의 전반적인 정보를 보관

assets 폴더 - 앱에서 사용되는 이미지나 폰트와 같은 정보를 담는 폴더

pages 폴더 - 앱에서 표시하는 페이지들을 저장하는 곳. 일반적으로 pages 내에서 많은 소스 코드를 작성하게 된다

theme 폴더 - scss 소스 코딩을 하는 곳. scss파일을 꼭 theme폴더에 넣을 필요는 없음. pages폴더의 각 페이지 폴더 아래에 임의로 scss 파일을 만들어 넣으면 자동으로 사용된다

index.html - 웹 브라우저에서 처음으로 보여질 웹 페이지


www 폴더

ionic serve와 같이 앱을 실행하면 src 폴더의 모든 소스파일이 적절하게 HTML, CSS, 자바스크립트로 변경된 후 www폴더로 이동되고 www폴더가 웹 브라우저에서 보여지는 것

src폴더의 타입스크립트 파일과 템플릿 그리고 Ionic2에서 사용되는 모든 타입스크립트들이 하나로 합쳐져 자바스크립트로 변환되어 하나의 js파일에 저장된다

또한 src폴더의 모든 scss파일이 css로 변환되어 하나의 css파일에 저장된다

이렇게 여러 파일들이 하나의 파일로 합쳐져서 저장되는 것은 Webpack이 하는 일


이러한 파일이 변경되고 복사되는 과정을 이해 해야지만 이미지를 추가 할 때 URL 경로 설정이나 어떤 파일을 어디에 추가 할지 등을 알수 있다

'Web > Ionic' 카테고리의 다른 글

[Ionic] 디자인 컴포넌트와 변수의 연결 – ngModel, ngIf  (0) 2017.03.28
[Ionic] Components Cards  (0) 2017.03.28
[Ionic] Components Buttons  (0) 2017.03.28
[Ionic] Components Alerts  (0) 2017.03.27
[Ionic] Components Action Sheets  (0) 2017.03.23