[#angular] 프로젝트 생성, 실행하기

 

 

1. Angular란?

Angular는 구글에서 개발한 SPA(Single Page Application) 자바스크립트 프레임워크이다. 웹, 모바일 웹, 하이브리드 앱, 데스크탑까지 프론트 개발에 필요한 거의 모든 기능을 갖추고 있다. Angular에서는 typescript 언어로 컴포넌트 단위로 개발이 가능하며, 이를 통해 재사용성을 극대화 시킨 대규모 어플리케이션 개발에 최적화된 프레임워크이다.

 

참고로 브라우저에서 typescript를 직접 지원하진 않아 빌드 후 js, css, html 파일을 만들고 이를 서빙 하는 형태이다. 그리고 첫 로딩에는 웹/앱 구동에 필요한 웹팩으로 묶여진 js, css 파일을 받아야 하므로 속도가 느리지만 로딩이 된 이후부턴 속도가 빠른 특징을 가지고 있다.

 

자세한 Features는 공식 홈페이지에서 확인해보자

https://angular.io/features

Angular

 

2. 환경 세팅

프로젝트 생성 전, 우선 환경 세팅이 필요하다.

 

2-1) npm 명령어를 사용해야하므로 아래 링크에서 node를 설치해주자

https://nodejs.org/en

Node.js

 

혹은 mac 이면 brew -y install node

centos 이면 yum install -y node

와 같이 패키지 매니저를 사용해 편하게 설치해도 무방하다.

 

 

2-2) angular-cli 설치

angular/cli 를 통해 컴포넌트를 생성하고, 로컬 서버를 실행하는 등의 제어가 가능하다.

npm install -g @angular/cli

 

3. 프로젝트 생성

아래 명령어를 통해 손쉽게 스켈레톤 코드를 생성할 수 있다.

ng new app

 

4. 프로젝트 실행

3. 프로젝트 생성이 완료되면 app 폴더가 생성된다. app 디렉토리로 들어가 ng serve를 입력하면 localhost:4200 으로 로컬 서버가 실행된다. 만약 포트를 바꾸고 싶다면 ng serve --port <원하는 포트> 를 입력해주면 된다.

cd app

ng serve

 

 

서버를 띄우고 브라우저에서 접속해보면 아래와 같은 인트로 화면이 나오게 된다.

 

앵귤러 첫 화면(angular first app)