Angular 시작하기
- 타입스크립트의 개념과 특징
- HELLO, Angular!
타입스크립트
타입스크립트(TypeScript)는 마이크로소프트에서 개발 및 유지되는 자바스크립트 슈퍼셋이다. 타입스크립트는 자바스크립트로 대규모 애플리케이션 개발을 위해 개발되었다. 자바스크립트에서 자신이 원하는 타입을 정의하고 프로그래밍을 하면 자바스크립트로 컴파일되어 실행할 수 있다. - 위키백과 -
- 핵심은 안정적으로 어플리케이션을 개발하기 위해서 자바스크립트에 Something을 추가한 언어입니다.
- Sth 1. 자바스크립트 문법에 타입 정보 추가
- Sth 2. 코드를 안정적으로 수정하고 오류를 검사할 수 있는 기능 추가
즉, 타입스크립트는 자바스크립트를 포함하고 있다고 생각하시면 됩니다.
*'자바스크립트의 문법을 그대로 사용하고 있어 학습 부담이 적습니다.' 라는데 제발 그랬으면 좋겠습니다...*
타입정보란 무엇인가?
아주 쉽게 생각하면 변수를 명시적으로 선언해 주는 것입니다.
자바스크립트는 동적프로그래밍 언어 인 것은 모두 알고 있을 것입니다.
여기서 동적프로그래밍이라는 것은 변수를 선언할 때 타입이 결정되는 것이 아니라 실제 값이 입력될 때 타입이 결정되는 것 입니다.
즉, 자바스크립트는 명시적으로 타입이 선언이 되지 않기 때문에 대규모 프로젝트(코드량이 많은)에서 코드 수정 및 오류 검사가 힘들 수 있는데 이러한 문제점을 해결하기 위해 만든 것이 타입스크립트 입니다.
Angular와 TypeScript
- TypeScript는 높은 수준의 코드 자동생성, 코드 탐색과 리팩토링을 제공한다. 이러한 도구들은 일정 규모 이상의 프로젝트에서는 거의 필수적인 요소이다.
- TypeScript는 JavaScript를 포함하고 있기 때문에 어떻게 보면 JavaScript를 Angular를 사용하기위해 재작성할 필요가 없다.
- 설계단계에서 만든 인터페이스들과, 추상화된 개념들을 명시적으로 표현할 수 있다.
더 많은 이유들이 있겠지만 이러한 이유들 때문에 앵귤러는 프레임워크의 전체가 타입스크립트로 작성되었습니다.
( Victor Savkin의 Angular: Why TypeScript 참고 )
Hello, Angular!
Angular를 실습하기 전에 Angular CLI를 설치해야 합니다. 이 CLI는 프로젝트 생성, 테스트, 배포 등의 기능을 제공 해주는 개발 도구입니다.
Angular/cli 설치
cmd창을 열어서 아래의 명령어를 실행시켜서 전역환경에 설치합니다.
설치 명령어 : npm i @angular/cli -g
설치를 잘 되었는지 확인하시려면 커맨드창에 ng -v를 입력해줍니다.
C:\Users\kadam>ng -v
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \| '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
@angular/cli: 1.2.0
node: 6.9.5
os: win32 x64대충?(글자체가 얇아서 너무 이상하게뜨네요..~~) 이런식으로 뜨면 설치가 된 것 입니다.
프로젝트 생성
ng new hello-angular라는 명령어를 커맨드창에 입력하시면 프로젝트가 생성됩니다. 어플리케이션의 기본 설정파일뿐 아니라 바로 실행 가능한 수준의 기본 코드들까지 자동으로 설정해줍니다.
cd hello-angular을 입력하시고dir를 입력하시면 해당 프로젝트 폴더에 뭔가 많이 생긴 것을 확인하실 수 있습니다.
2017-07-07 오후 04:04 <DIR> .
2017-07-07 오후 04:04 <DIR> ..
2017-07-07 오후 04:03 1,131 .angular-cli.json
2017-07-07 오후 04:03 245 .editorconfig
2017-07-07 오후 04:03 516 .gitignore
2017-07-07 오후 04:03 <DIR> e2e
2017-07-07 오후 04:03 924 karma.conf.js
2017-07-07 오후 04:07 <DIR> node_modules
2017-07-07 오후 04:03 1,317 package.json
2017-07-07 오후 04:03 722 protractor.conf.js
2017-07-07 오후 04:03 1,082 README.md
2017-07-07 오후 04:03 <DIR> src
2017-07-07 오후 04:03 385 tsconfig.json
2017-07-07 오후 04:03 2,941 tslint.json+생성된 프로젝트 폴더내의 폴더및 파일들의 역할
- e2e폴더 : e2e는 End-to-End의 약자 입니다. protractor라는 툴을 사용하여 브라우저를 실제로 띄워서 애플리케이션을 통합 테스트할 테스트 코드가 있습니다.
- src폴더 : 실제 애플리케이션에 필요한 소스가 있습니다.
- .angular-cli.json : angular-cli에서 사용할 설정 정보가 있는 파일입니다.
- karma.conf.js : Karma라는 단위 테스트 도구의 설정 파일입니다.
- protractor.conf.js : e2e폴더에 선언된 통합 테스트를 실행하기기 위한 protractor 도구의 설정파일입니다.
- tslint.json : 타입스크립트용 구문 체크 설정 파일입니다.
- tsconfing.json : 타입스크립트 컴파일 설정 파일입니다.
- src/typings.d.ts : 타입스크립트에서 사용할 타입 선언 정보 파일입니다.
- Karma는 자바스크립트 테스트 러너라고 보시면 됩니다.
- protractor는 사용자와 상호작용을 위해 실제브라우저에서 실행중인 응용프로그램에 대한 테스트를 하는 것이라고 보시면 됩니다.
로컬에서 개발 환경으로 실행하기
생성한 프로젝트 위치를 기준으로 `ng serve`라는 명령어를 입력하시면 프로젝트를 로컬에서 개발 환경으로 실행할 수 있습니다.
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Hash: 0c4350475ccc2b39111b
Time: 25897ms
chunk {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 160 kB {4} [initial] [rendered]
chunk {1} main.bundle.js, main.bundle.js.map (main) 5.34 kB {3} [initial] [rendered]
chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.18 MB [initial] [rendered]
chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.
설치와 생성이 잘 이루어졌다면 ng serve를 입력하시면 이러한 문구가 cmd창에 뜰 것 입니다.
그리고 브라우저에 localhost:4200을 입력하시면 기본으로 만들어져있는 웹페이지가 열릴 것 입니다.
'Front_End > Angular' 카테고리의 다른 글
| 05. Angular로 개발하기 - 3 - 구조 지시자 (0) | 2017.08.19 |
|---|---|
| 04. Angular로 개발하기 - 2 - 서비스/의존성주입 (0) | 2017.07.29 |
| 03. Angular로 개발하기 - 1 - src/app, Component, Data Binding (0) | 2017.07.28 |
| 01. Angular 준비하기 (0) | 2017.07.07 |
| 00. Angular의 개념/구조 (0) | 2017.07.03 |