Angular 1. 홈페이지 만들기 전 준비 및 개발 참고 사이트

소스 정리 이전에

    - 프로젝트 생성 후 localhost 페이지를 보면 이런 화면이 나옵니다.

    - 새로운 페이지를 만들어주기 위해 위 내용들은 모두 지울 텐데, 위 내용 중 Angular 개발에 참고할만한 내용을 봅시다.

 

    - Resources > Learn Angular

        > Learn Angular 클릭하면 Angular에 대한 정보를 볼 수 있는 공식 홈페이지가 나옵니다.(한글은 아래 URL 클릭)

        > Angular가 무엇인지, 기본 단위인 Component가 무엇인지, 개발 가이드 등의 정보가 있으니 활용해 보세요.

https://angular.kr/docs

Angular 가이드

 

    - Resources > Angular Material

        > Google에서 제공해주는 Component Design입니다.

 

        > checkbox를 예시로 보자면 위와 같이 미리보기가 가능합니다.

        > API 탭과 EXAMPLES 탭을 보면 사용 설명과 프로퍼티 등이 나와있으니 참고하면 됩니다.

        >    < >   을 클릭하면 HTML, TS, CSS 소스 모두 제공하고 있으니 참고해 개발하시면 됩니다.

        > Angular Material을 사용하려면 사전 설정이 필요하니 Getting started 부터 차근차근 따라 해 보세요.

https://material.angular.io/

Angular Material

 

 

    - 이외에 Visual Studio Code에서 제공해주는 간단 가이드 문서도 있으니 참고해보세요.

    - Angular 이외에 Vue, React, JAVA, Python 등의 사용할 수 있는 모든 언어들에 대한 가이드가 있으니 알아둡시다.

https://code.visualstudio.com/docs/nodejs/angular-tutorial

Angular TypeScript Tutorial in Visual Studio Code

 

 

 

---

1. 소스 정리해주기

    - 프로젝트 생성 시 기본으로 생성되는 소스들인데 이 중 필요 없는 소스들을 정리해봅시다.

 

 

    - 우선 localhost를 띄우게 되면 나타나는 화면은 index.html인데, index.html을 열어보면 별 내용이 없습니다.

    - app.component.html 파일을 열어보면 html 소스 내용이 모두 여기에 들어가 있습니다.

 

    - localhost 접속 시 보여지는 화면은 index.html인데 어떻게 app.component.html 내용이 보이는 걸까요?

    - 여기에서 Angular의 특징을 알아야 합니다.

    - Angular는 Component가 구성 기본 단위이며, Component 중심으로 구성됩니다.

 

    - body 부분의 app-root를 통해 app.component.ts를 호출해 app.component.html을 보여주고 있는 것입니다.

 

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

    - app.component.ts 파일을 열어보면 상단에 이런 소스 코드를 볼 수 있습니다.

    - app-root 로 selector가 선언된 걸 볼 수 있습니다.

    - @Component 에는 component 생성에 필요한 구성 요소들을 가지고 있습니다.

 

    - 그래서, index.html에서 app-root 선언을 통해 app.component.html이 보여지고 있는 것입니다.

 

 

<h1>app.component</h1>
<router-outlet></router-outlet>

    - 페이지를 재구성하기 위해 app.component.html 안에 위 내용만 남깁니다.

    - 하지만 고작 2줄로 html 파일이 있을 필요가 있을까요?

 

@Component({
  selector: 'app-root',
  template: `
    <h1>app.component</h1>
    <router-outlet></router-outlet>
  `,
  styles: [`
    h1 {
      color: red;
    }
  `]
})

    - Angular는 component로 구성이 된다고 했습니다.

    - html 파일과 css 파일을 지웁니다.

    - app.component.ts 파일에 위와 같이 html과 css 코드를 직접 입력해 적용할 수 있습니다.

    - 여러줄 입력할 경우 `` 을 사용하고, 한 줄일 경우 '' 으로 사용합니다.

 

 

    - html, css 파일 없이도 정상적으로 나타나는걸 볼 수 있습니다.

 

 

2. 새로운 component 생성

    - 새로운 component 생성하기 전에 화면을 어떻게 구성할지 생각하는 게 좋습니다.

 

    - UI 레이아웃에는 다양한 종류가 있지만, 저는 이렇게 헤더, 좌측 메뉴, 콘텐츠, 푸터 영역으로 구성했습니다.

    - 위 구성들을 하나의 html 파일로 관리하는 경우도 있지만, 영역에 따라 따로 관리하는 게 유지보수에 좋습니다.

 

 

    - header component 생성

 

ng generate component main/header

    - component 생성 명령어를 실행하게 되면 src/app/컴포넌트명 으로 폴더를 생성해 파일을 생성합니다.

    - main이라는 폴더 안에 header, left-menu 등을 관리해주기 위해 컴포넌트명 앞에 폴더명을 기재했습니다.

 

 

    - 그런데 create 4개, update 1개가 발생했습니다.

    - update 내용을 보니 app.module.ts 파일에 HeaderComponent 가 추가되어 있습니다.

 

    - component <-> component 간에 통신을 하기 위해서는 부모 component에 자식 component가 등록돼야 합니다.

 

 

    - 이어서 남은 것 모두 생성해주겠습니다.

 

ng generate component main/left-menu
ng generate component main/content
ng generate component main/footer

    - UI 구성 요소들을 모두 생성했습니다.

    - app.component.html 파일에 생성한 component들을 호출해줘야 하는데, html 파일이 없으니 app.component.ts에서 호출해줘야 합니다.

    - 그런데, component 파일에서 호출을 하게 되면 html 파일을 삭제한 의미가 없어지겠죠.

    - main component를 새로 생성해 main에서 호출해주겠습니다.(app component에서 호출해줘도 무관합니다.)

 

ng generate component main

 

 

3. UI 구성 요소들 호출해주기

    - app.component.ts파일에 app-main 추가

template: `
<h1>app.component</h1>
<app-main></app-main>
<router-outlet></router-outlet>
`,

 

 

 

4. main module 만들기

    - main component에서 left-menu... 등을 관리하기 위해서는 모듈이 필요하다.

    - module 생성

ng generate module main

 

 

    - main component가 있는 곳에 module이 생성됐다.

 

app.module.ts

 

    - 생성된 main module은 app module에 import 시켜줘야 한다.

    - 그리고, left-menu... 등의 component들은 모두 main에서 관리할 것이기 때문에 declarations에서 지워준다.

 

main.module.ts

    - main module declarations에 component 추가

    - main module exports 추가

    - exports : 다른 모듈의 구성요소를 모듈 외부로 공개할 때 사용된다.

@NgModule({
  declarations: [
    HeaderComponent,
    LeftMenuComponent,
    ContentComponent,
    FooterComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    HeaderComponent,
    LeftMenuComponent,
    ContentComponent,
    FooterComponent
  ]
})

 

 

    - main html에 selector 추가

<app-header></app-header>
<app-left-menu></app-left-menu>
<app-content></app-content>
<app-footer></app-footer>

 

 

5. localhost:4200 에서 확인

 

 

 

 

6. bootstrap 사용하기

    - bootstrap은 디자인적인 요소를 제공해준다.

    - 전문 웹 디자이너가 아니기 때문에 무료 템플릿을 이용해야할 때 자주 사용된다.

    - bootstrap 사이트는 다양하기 때문에 google에 검색하면 정리해둔 블로그가 많으니 참고하면 된다.

    - 무료 버전과 유료 버전이 있기 때문에 무료 버전을 사용하면 된다.

    - 상업적인 용도로 사용이 가능한 템플릿도 있지만, 상업용은 불가능하고 공부용으로만 가능한 것도 있으니 잘 살펴봐야 한다.

 

    - 무료 템플릿 소스 다운받기

https://startbootstrap.com/theme/sb-admin-2

SB Admin 2 - Free Bootstrap Admin Theme - Start Bootstrap

 

    - startbootstrap에서는 유료 버전과 무료 버전을 다루고 있기 때문에 사이트에서 무료 버전 중 마음에 드는 것을 골랐다.

 

startbootstrap

    - Free Download 버튼으로 zip 파일이 다운 가능하다.

    - 아래 MIT License 를 클릭하면, 해당 라이센스에 대한 설명이 있으니 참고하면 된다.

 

 

다음 게시물에서는 다운받은 소스로 홈페이지를 구성해 보겠다.