앵귤러 튜토리얼 (Angular tutorial) - 1

* 제가 다시 작성한 최신 튜토리얼 수정본 입니다. 아래 주소를 통해서 진행하시는 것을 권장 드립니다. ^^

lts0606.tistory.com/328

앵귤러 튜토리얼(Angular tutorial) - 1

 

---

 

아무생각 없이 "구글"에서 앵귤러를 사용한다고 하여 무턱대고 앵귤러를 익히기 위해 책을 한권 샀었다.

그냥 단순히 자바스크립트로 이루어진 Jquery처럼 쓰면 될 줄 알았는데, 왠걸..듣도보도 못한 Typescript?? 컴파일??

책을 한권 사 놓고 바로 환불해야 되는지 엄청 고민을 했었던 것 같았다.

아무튼 앵귤러는 버전에 따라서 2가지 스타일로 나뉘는데, 버전 2.0 이하와 2.0 이상에서의 코딩 방식이 아주 다르다.

2.0 이하의 1버전은 소위 말하는 Jquery처럼 자바스크립트를 활용한 규칙을 토대로 코딩하면된다.

그런데, 2.0 이상부터는 Typescript를 활용해서 코딩을 한 뒤에 Javascript로 컴파일(?)을 해 주어야 한다.

 

여기까지만 보더라도 앵귤러가 우리나라에서 유행을 잘 안타는 이유가 접근성이 어렵기 때문이라 할 수 있다. 왠 타입스크립트란 말인가.

아무튼 앵귤러를 설치하여 보자. 앵귤러를 편리하게 개발 하려면 node.js가 설치되어 있어야한다.

개발도구는 비쥬얼 스튜디오 코드를 사용하자. (무료다!!!)

 

설치순서이다.

1. Node.js 설치한다.

2. Node.js 설치 이후 타입스크립트와 앵귤러 빌드 툴을 설치한다.

   - cmd창에서 명령을 입력하자 : npm install -g typescript

   - cmd창에서 명령을 입력하자 : npm i @angular/cli -g

3. 비쥬얼 스튜디오 코드를 설치한다.

아래 단계에 따라서 천천히 진행하여 보도록하자.

   * 주의 : cmd 개발 환경과 자바스크립트의 기본을 전혀 알지 못하면 앵귤러는 사실 접근하기 매우 어렵다.

1. Node.js 설치한다.

Node.js를 다운받는다. 운영체제를 잘 보도록 하자.

받은다음에..설치하는 모습이다. Next버튼만 눌러서 기본세팅으로 해도 상관없다.

 

2. Node.js가 설치가 완료되면 cmd창에서 아래 명령어를 입력한다. cmd창은 window + R 키를 누른뒤에 cmd를 입력한다.

window + R 키를 눌러서 CMD를 입력하면 검은색 화면이 나온다.

위 2개의 명령어를 차례대로 입력하자. 지금화면은 이미 설치되어 있어서..업데이트 하는 화면이다..업데이트 무서운데..

* 첫번째 명령어 : npm install -g typescript

* 두번째 명령어 : npm i @angular/cli -g

 

위 2개의 명령어로 설치가 되면 개발도구를 설치하여보자.

 

 

3. 비쥬얼 스튜디오 코드를 다운받는다. 설치는 NEXT를 그냥 눌러도 된다.

개발툴인 vs코드를 받는 곳이다. 마찬가지로 설치는 Next, Next...

 

 

개발도구로는 VS Code(비쥬얼 스튜디오 코드)를 사용하겠다. 해당툴은 한글지원도 되고(한글팩 설치)

타입스크립트 및 앵귤러 언어지원 팩도 설치 할 수 있어서 자동완성 및 디버깅에 좋다.

 

VS코드를 설치하고 개발에 도움을 주는 확장팩(모듈)을 설치하자.

Angular 8 Snippets 를 설치하면 타입스크립트랑 앵귤러에 관한 지원팩이 설치된다.. (가운데 숫자는 버전)

코드 자동완성, 오류검사 등을 지원하여 주므로 꼭 설치하도록 하자.

 

4. 설치 완료 후 VS코드를 실행시킨 뒤 확장팩부터 설치하자.

아랫부분을 클릭후에 korean이라 입력하면 한글 확장팩을 설치 할 수 있다.

 

Angular를 입력하고 확장팩을 설치하자. 맨 처음 나온거를 설치하면 된다!! 자동완성, 문법검사 기능을 지원하여 준다.

 

 

방금 설치한 앵귤러를 살펴보자. 주로 사용하게 될 명령어는 2개 이다.

ng new 프로젝트 명

ng serve

첫번째 명령어는 프로젝트를 만드는 명령어이며 두번째 명령어는 만든 프로젝트를 임시 서버로 돌리는 역할을 한다.

그리고 나중에 살펴볼 ng build라는 명령어를 통해 코드를 javascirpt로 컴파일하여 일반 프로젝트에 추가 할 수 있다.

 

 

그러면 이제 한번 시작 해 보자. 앞선 앵귤러와 vs코드가 설치 되었다는 상황이다.

cmd를 다시 열도록 하자. 만들고자 하는 프로젝트가 위치 할 디렉토리를 정한 뒤에 아래 명령어를 입력하자.

명령어를 입력하면 입력과 선택해야되는 부분이 나오는데 사진처럼 입력하고 선택하자.

 

* 명렁어 : ng new study

* 디렉토리 : 여기서 사용한 디렉토리는 E드라이브에 04_NODE 폴더로 하였다. (E:/04_NODE)

N 입력 후 첫번째CSS 선택

 

해당 명령어를 입력하면 study라는 폴더도 같이 만들어 진다.

따라서 폴더를 굳이 안만들어주어도 된다.

해당 명령어를 입력하면 뭐라 묻는내용이 나오는데...

첫번째는 N 을 입력하고 두번째는 CSS를 선택하여주자!

E:/04_NODE 라는 디렉토리에 study라는 폴더가 생기면서 앵귤려와 관련된 기본 모듈이 설치된다.

설치하는데 시간이 좀 걸린다..뭐라뭐라 글씨도 엄청나오고..

 

vs코드를 선택해서 방금 만들어준 디렉토리를(study 디렉토리까지) 선택하여주자.

여기서는 E:/04_NODE/study 까지 선택해야 된다.

드라이브 및 디렉토리명이 다르더라도 study 까지만 선택하자.

폴더열기를 클릭해서 해당 디.렉.토.리(study) 까지만 선택하자.

 

이후에 엄청난 디렉토리가 생기는데 전부 이해하는 것은 불가능하다. 일단 src - app 디렉토리까지 이동하자.

src를 누른다음 app을 눌러보자!!

 

해당 디렉토리에서 app.component.ts를 클릭하자. app.component.ts파일을 줄여서 메인 컴포넌트라 하겠다.

메인 컴포넌트는 당분간 이해하기로는 Java에서의 메인메소드, Javascript에서는 <script></script>테그 정도로 생각하면 된다. 무언가 입력하면 실행되는 곳이라 보면 될 것 같다.

다음과 같이 입력하여 보자.

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

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

  constructor() { //생성자...?
    console.log('Working');  //콘솔.로그..?
  }
}

 

입력한 뒤에 ng serve명령어를 cmd창에서 입력하자.

추가로, CMD를 VS코드에서 사용 할 수 있다.

VS코드를 사용하면 단축키 Ctrl + ~ 를 누르면 아래 사진처럼 "터미널" 항목에 CMD창이 등장하게 된다.

단축키를 눌러서 터미널창이 나왔는데 아무것도 표시가 안되면 엔터키를 몇번 입력하면 CMD가 잘 나오게 된다.

cmd창을 열어서 사용하는 모습. cmd는 Ctrl + ~ 키를 누르면 나온다.

 

이제 http://localhost:4200 으로 접속하여 보자. 접속한 뒤에 개발도구를 켜 보면 반가운 문구가 보인다.

워킹이 보인다?

 

constructor로 입력을 한 뒤에 console.log가 실행이 되었다.

일단 여기까지 하였다면 1차목표는 성공 한 것이다. 그러면 아래 코드를 한번 입력하여보자.

 

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

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

  constructor() {
    console.log('Working');  
    var number = 1;  //자바스크립트에서 자주보던 var
    console.log('number -> ', number);  
    console.log(number * 10);  //연산..?
  }
}

저장버튼을 누르는 순간 4200번으로 동작하는 서버가 무언가 행동을 한다. 그리고선 아무짓도 안했는데 페이지가 새로고침되면서 입력한 값이 출력이 된다.

타입스크립트 파일이 변경되면 자동으로 재컴파일을 해 준다.

이 4200번으로 동작중인 서버는 앵귤러를 개발하기위한 임시 서버라고 생각하면 된다. 즉 사용자가 코딩을 하면 해당 소스코드의 변경사항을 감지하여 Javascript로 컴파일 해 준 뒤에 화면에 보여주는 역할을 한다.

 

 

동작 원리, 프로세스, 실제 서버와의 연동, 데이터베이스 사용 등등 궁금한 내용이 정말 많지만, 여기서는 이정도까지 만족하도록 하자.

정리하여보면,

1. Node.js 설치

2. Node.js 설치 이후 타입스크립트 설치, cmd창에서 명령을 입력하자 : npm install -g typescript

3. cmd창에서 명령을 입력하자 : npm i @angular/cli -g

4. VS코드(비쥬얼 스튜디오 코드)를 설치하자.

5. Angular 8 Snippets를 설치하자.

6. 프로젝트를 만들 디렉토리를 정한 뒤 ng new 프로젝트명(여기서는 study로하였다)을 입력하자.

7. 프로젝트명으로 디렉토리가 만들어지는데 해당 디렉토리로 이동해서 ng serve 명령어를 입력하자.

8. src/app 디렉토리에서 app.component.ts 파일을 클릭하자

9. 클릭한 파일에 constructor(){} 를 입력하고 console.log 등을 입력하여 보자.

 

다음장에서는 기초 부분인 자료형과 변수에 대해서 알아보자.

 

* 앵귤러 버전은 6.0기준으로 되어있습니다. 

* 상위 버전(9.0이상)에서는 동작과 관련하여 소소한 오류가 있을 수 있습니다.

* 가장 어려운 것이 초기 환경구성입니다.

* 기본 세팅이 어렵거나 이해되지 않으시면 언제든 연락주세요. ^-^

* 앞서 이야기드린바와 같이 CMD를 전혀 사용하지 못하거나 자바스크립트기초가 부족하면 이해하기가 불가능 합니다.