앵귤러란?

앵귤러란?

앵귤러는 웹 화면을 구성하는 데 사용되는 프레임워크입니다.

Javascript, Jquery 처럼 각종 명령어와 규칙을 통해서 웹 화면이 이벤트와 기능을 부여하고, 사용자가 원하는 행동을 하기 위해 만들어 졌습니다.

앵귤러는 타입스크립트 기반으로 앵귤러의 문법대로 개발하는 언어 라고 생각하면 될 것 같습니다.

기본 개발 환경구성

1. Node.js를 설치해야한다. - https://nodejs.org/ko/
2. 개발 도구를 설치 해야 한다. - https://code.visualstudio.com/ or 인텔리제이
3. 타입스크립트를 Node.js의 라이브러리 설치명령어의 도움을 받아 설치한다.
   • vs코드를 실행 시키고 Extensions 탭에서 Angular Snippets를 설치한다. → 코드 문법검사, 자동완성 기능을 제공
   • vs코드의 파일 탭에서 프로젝트를 담을 폴더를 만든 후 선택하여 줍니다.
    
4. 앵귤러를 Node.js 라이브러리 설치 명령어의 도움을 받아 설치한다.

키보드 Ctrl + ~ 를 이용해서 cmd에 명령어를 입력합니다.

• 타입 스크립트 언어를 설치

npm install -g typescript

• 앵귤러 프레임워크 설치

npm i @angular/cli -g

프로젝트 생성 및 실행

angularPractice라는 프로젝트를 생성하기 위해 명령어 입력

ng new angularPractice

라우팅을 할것인지 묻는데, N를 입력합니다

그 후에, CSS를 선택하고, 엔터를 눌러줍니다.

설치 되고 난 후에는

src/app 폴더안의 app.component.ts 파일을 더블클릭하여 봅니다.

해당 파일의 내용을 아래와 같이 수정합니다.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'firstStudy';

  constructor (){  //constructor 라는 함수를 추가
    console.log('동작');
  }
}

constructor 라는 함수를 추가하였습니다.

constructor는 생성자의 의미로 최초 단 1번만 동작하는 함수입니다.

cmd에서 새로 생성된 angularPractice 폴더로 이동 한 후에 서버를 실행시켜 줍니다.

cd .\angularPractice\
ng serve

컴파일 성공 시, 브라우저에서 http://localhost:4200/ 로 접속합니다.

constructor 함수에 있던 console.log('동작')이 잘 실행되는 것을 볼 수 있습니다.

 

참고

https://lts0606.tistory.com/328