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

안녕하세요.
앵귤러에 대해서 알아보기위해 이곳을 찾아주신 분 들께 감사의 말씀 드립니다.^^
천천히, 초심자도 조금 더 쉽게 접근할 수 있도록 내용을 구성하여 보겠습니다.
어려운 부분이나 이해가 가지 않는 부분은 언제든 연락주세요.

* 기본적으로 CLI(커멘드 라인 인터페이스)를 전혀 모르시거나, 자바스크립트를 최소한 1년이상 하지 않으셨다면 접근하기는 매우 어렵습니다.

* 난이도를 위해 ES6(ECMA6) 이상의 문법을 최대한 사용하지 않고 소개하고 있습니다.  : )

앵귤러는 웹 화면을 구성하는 데 사용되는 프레임워크 입니다.
Javascript, Jquery 처럼 각종 명령어와 규칙을 통해서 웹 화면에 이벤트와 기능을 부여하고, 사용자가 원하는 행동을 하기 위해 만들어졌습니다.
이와 비슷한 유형의 프레임워크, 라이브러리 형태가 바로 리엑트, 뷰js 등이 있습니다.
html의 내용과 기능을 만들기 위해서 사용하는 프레임워크(JS) 라고 단순하게 생각하시면 될 것 같습니다.

 

앵귤러은 2020년 5월 기준 버전 9까지 나왔습니다.
앵귤러 버전1은 소위 말하는 Jquery처럼 라이브러리를 등록해서 사용하는 방식 이였다면, 
앵귤러 버전2 부터는 타입스크립트를 활용하여 개발한 뒤에 컴파일 하여 주는 방식으로 변경이 되었습니다.

타입스크립트는 사실 아직까지는 웹 개발자들이 많이 사용하지 않는 언어입니다.
타입스크립트는 자바스크립트를 조금 더 엄격하게, 규칙있게 사용하기 위해서 만들어진 언어입니다.

여기까지 소개했는데..무언가 어렵고 복잡하여 보입니다.
간단하게 압축해서 설명드리면,
앵귤러는 "타입스크립트 기반으로 앵귤러의 문법대로 개발하는 언어" 라고 생각하시면 될 것 같습니다. ^^
사실 타입스크립트는 자바스크립트와 거의 동일한 구조입니다. 
그러므로 굳이 걱정하지 않으셔도 됩니다!

 

가끔 이런 이야기를 들어본 것 같습니다.

"앵귤러가 리엑트, 뷰js보다 익히기 어렵다."

솔직히 전부 해 보았지만 개인적 취향차이 일 뿐 전~부 어렵습니다..^-^;

 

이번시간에는 기본 개발 환경구성에 대해서 살펴보겠습니다.

환경 구성에 필요한 내용으로는,
1. Node.js를 설치 해야 합니다.

2. 개발 도구를 설치 해야 합니다.
3. 타입스크립트를 Node.js의 라이브러리 설치명령어의 도움을 받아 설치합니다.

4. 앵귤러를 Node.js의 라이브러리 설치명령어의 도움을 받아 설치합니다.

Node.js를 설치하는 이유는 앵귤러를 개발하는데 필요한 라이브러리 설치와, 작업에 필요한 테스트서버를 사용하기 위해서 입니다.
npm이라는 라이브러리를 관리하는 명령어를 통해서 우리는 앞으로 각종 앵귤러에 필요한 라브러리를 일일이 다운로드 받지 않고 몇번의 명령어를 통해서 쉽게 받도록 할 것 입니다.
여기서 개발도구는 비주얼 스튜디오코드를 사용하겠습니다. 다른 개발도구를 사용해도 상관 없습니다.

먼저 Node.js를 다운받은 뒤에 자신의 운영체제에 맞는 버전을 설치하도록 합니다.

https://nodejs.org/ko/

Node.js

다음으로, 개발에 필요한 개발도구인 비주얼 스튜디오 코드를받습니다.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

* 설치방법은 매우 쉬우므로 생략하겠습니다.

비주얼 스튜디오 코드를 받게 되면 앵귤러 개발에 필요한 확장팩을 설치하여 코드 문법검사, 자동완성 등을 사용 할 수 있습니다.
또한 한글도 지원합니다!

아래처럼 필요한 기능을 추가하여 설치하도록 합니다.

원하는 각종 기능을 검색해서 추가 할 수 있습니다. korean이라고 검색하면 비쥬얼 스튜디오코드를 한글로 바꾸어줍니다.

angular 라고 검색하면 최 상단에 검색되는 프로그램을 추가하여 코드 문법검사, 자동완성 기능을 제공받도록 합니다.

비쥬얼 스튜디오 코드를 실행하여봅니다.

맨 위의 상단에 파일(F) 탭을 눌러 앞으로 프로젝트를 담을 폴더를 만든 뒤 선택하여줍니다.

* 여기서는 E 디렉토리에 ANG_TUTO 를 선택하였습니다.

ANG_TUTO 라는 디렉토리를 만든뒤에 비주얼 스튜디오코드로 폴더를 선택하였습니다.

 

키보드 Ctrl + ~ 를 활용해서 cmd 를 실행하도록 합니다.  

키보드 Ctrl + ~ 를 활용해서 cmd 가 실행되었는데 사진처럼 커서가 보이지 않는다면 엔터키를 몇번 입력하면 위 모습처럼 깜빡이는 커서가 나타나게 됩니다.

Node.js를 설치하였으므로 우리는 앵귤러에 필요한 라이브러리를 이제 npm 명령어를 통해서 쉽게 사용할 수 있습니다.
만약 npm 명령어를 쓰지 않고 앵귤러에 필요한 라이브러리를 일일이 다운받는다면 그것은 무척 힘든 일이 될 것 입니다.
cmd 내부에 아래 명령어를 입력하여 앵귤러 개발에 필요한 라이브러리를 설치합니다.

 

타입스크립트를 사용하기 위해서 관련된 라이브러리를 npm 명령어를 통해 설치 합니다.

npm install -g typescript
 

타입스크립트 언어를 설치합니다.

 

다음으로 앵귤러를 사용하기 위해서 아래 명령어를 입력합니다.

npm i @angular/cli -g
 

앵귤러 프레임워크를 설치합니다.

 

npm 명령어를 통해 타입스크립트와 앵귤러에 관련한 라이브러리를 전부 설치하였습니다!
이제 그러면 기본 연습을 위해 프로젝트를 만들어 보겠습니다.
아래 명령어를 입력합니다.

ng new firstStudy
 

라우팅 할껀지 물어봅니다..

 

무언가 물어보는데 여기서는 N을 눌러주도록 합니다.
그리고나서 선택하는 모양이 나오는데, 사진처럼 css를 선택하여줍니다.

css라고 보이는 탭을 선택한 뒤에 엔터!

뭔가 설치되고있는 모습입니다.
시간이 좀 걸리므로 느긋하게 기다려줍니다.

시간이 좀 걸립니다..5분?

 

설치가 완료되고 나면 firstStudy라는 디렉토리가 만들어 진 것을 볼 수 있습니다.
ng 라는 명령어는 앵귤러에서 사용하는 명령어입니다.
ng new "대상" 을 입력하면 새로운 앵귤러 프로젝트를 만드는데, "대상" 이름으로 만들어 달라는 내용 입니다.
프로젝트를 새로 만들기위한 명령어 입니다.

아직 전부 알 수는 없지만 많은 내용의 목록이 보입니다. 
여기서 src의 app 탭까지 이동하여 app.component.ts 파일을 더블클릭하여 봅니다.

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번만 동작하는 함수라고 일단 이해하시면 될 것 같습니다.

firstStudy 디렉토리로 이동 한 뒤에 아래 명령어를 입력하여봅니다.

반드시 새로 만들어진 디렉토리로 이동한 뒤에 명령어를 입력해야 합니다!

ng serve
 

무언가 물어보네요~

 

해당 프로젝트에 대한 내용을 공유할껀지 물어보는데..원하는 데로 입력합니다.
여기서는 n을 입력하였습니다. ^^;

아래 사진과 같은 모양이나왔다면 성공입니다!

맨 아래 문구에 컴파일 성공이라고 하는 내용이 보입니다.

 

친절하게도 콘솔에서 http://localhost:4200/ 로 접속하라고 안내해주고 있습니다.
브라우저에 http://localhost:4200/ 로 접속하여봅니다.
개발도구를 실행하여보면 constructor에 입력하였던 "동작" 이라는 내용이 출력되고있음을 볼 수 있습니다.

"동작" 이라는 문구가 잘 보입니다. 해당 문구는 constructor 라는 함수에 있었던 console.log 명령어입니다.

여기까지가 앵귤러를 개발하기 위한 환경구성입니다.
많이 복잡하고 어려운 내용이 나온 것 같습니다.
정리하여보겠습니다!

1. 앵귤러는 타입스크립트 기반으로 구성된 프레임 워크 입니다.
2. 앵귤러를 개발하기 위해서는 Node.js를 반드시 설치하여야합니다.
 * 각종 라이브러리를 다운받기 위해서는 npm 명령어가 매우 쉽고 편리하기 때문 입니다.
 * 또한 앵귤러 테스트 서버를 동작시키기 위해서도 필요 합니다.
3. Node.js가 설치되면 타입스크립트 언어를 설치하고, 앵귤러 프레임워크를 설치합니다.
 * npm install -g typescript
 * npm i @angular/cli -g
4. ng new "대상" 을 입력하면 해당 디렉토리에 "대상" 이름으로 새로운 앵귤러 프로젝트를 만들어 줍니다.
5. 해당 디렉토리에서 ng serve라는 명령어를 실행하면 테스트 서버가 4200번 포트를 활용하여 동작 합니다.
 * 만약 4200번 포트가 사용중이라면 --port 라는 옵션을 주어 실행하도록 합니다. "ng serve --port 포트"

이번시간에는 각 파일이 어떤것을 의미하는지, 어떠한 내용인지 알 필요가 없습니다.
"동작" 이라는 내용이 4200번 포트에서 정확하게 출력되기만 한다면 성공입니다!
다음시간에는 왜 앵귤러를 사용하는지, 앵귤러를 통해서 어떠한 방식으로 개발하는지 등에 대해서 살펴보겠습니다!

 

 

* 추가

앵귤러, 리엑트, 뷰js 등 프론트 프레임워크(라이브러리)는 대체적으로 버전이 자주 올라갑니다.

이에 따라 기존에 사용되었던 기능이 버전업에 따라 동작을 하지 않을수도 있습니다.

만약 동작을 원활하게 되지 않는다면 아래 package.json 내용에서의 의존성(dependencies) 버전을 맞추어 주세요.

{
  "dependencies": {
    "@angular/animations": "~9.1.4",
    "@angular/common": "~9.1.4",
    "@angular/compiler": "~9.1.4",
    "@angular/core": "~9.1.4",
    "@angular/forms": "~9.1.4",
    "@angular/platform-browser": "~9.1.4",
    "@angular/platform-browser-dynamic": "~9.1.4",
    "@angular/router": "~9.1.4",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.4",
    "@angular/cli": "~9.1.4",
    "@angular/compiler-cli": "~9.1.4",
    "@angular/language-service": "~9.1.4",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }
}