Angular 개발환경 구축 및 앱 생성 시작하기(Terminal, WebStorm)

1. 사전 정보 습득하기

angular.kr/resources?category=개발

Angular 가이드

 

Angular IDE by Webclipse(뭔지 모르겠다), IntelliJ, VS Code, WebStorm을 지원한다.

 

angular.kr/docs : Document

Angular 가이드

 

2. Node, TypeScript는 설치되어 있어야 함.

brew install node typescript

 

3. angular-cli를 설치하자

angular.kr/guide/releases : Angular 버전 정책

Angular 가이드

 

github.com/angular/angular-cli/releases : Angular-cli 버전 정보

Releases · angular/angular-cli

 

최신 버전으로 설치 및 유지를 원하는 경우

// 방법 1. Homebrew를 이용해 설치하기
brew install angular-cli

// 방법 2. npm을 이용해 설치하기
sudo npm install -g 

 

특정 버전 LTS 설치를 원하는 경우

sudo npm install -g @angular/cli@9

뒤에 '@8', '@9' 등을 붙여주면 된다. 홈브루에서는 앵귤러는 과거 버전을 지원하지 않는다.

 

설치 확인

ng --version

 

4. 프로젝트 생성하기(=워크스페이스 생성하기 or 앱 생성하기)

// 원하는 프로젝트 디렉토리로 이동 및 생성
cd [path]

// 프로젝트 생성하기(워크스페이스 생성하기, 기본 앱 생성하기)
ng new StartUsingTerminal

'ng new StartUsingTerminal'을 실행하고 나면 앱 생성을 위해 몇 가지 정보를 추가로 요구하는데 그냥 return을 입력하면 기본값으로 생성한다. 우선 기본값으로 생성하자.

 

5. 앱 실행하기

// 워크스페이스 생성 확인하기
ll

// 워크스페이스 안으로 들어가기
cd ./StartUsingTerminal

// 앱 서버 실행하기
ng serve --open

참고 : ll을 해보면 알겠지만 'StartUsingTerminal'은 디렉토리다. 이 디렉토리가 앵귤러 앱의 워크스페이스고, 이 안으로 들어가서 서버를 실행해야한다.

 

메시지로 'http://localhost:4200/'으로 접속한다고 알려주며 웹 브라우저가 자동 실행된다.

 

 

WebStorm에서 띄울 수도 있다

우선... 플러그인 설치가 되어 있어야 한다.

해당 프로젝트를 불러오면

 

 

WebStorm을 이용한 Angular 시작하기

www.jetbrains.com/help/webstorm/angular.html#ws_angular_syntax_highlighting

Angular - Help | WebStorm

blog.jetbrains.com/webstorm/2020/02/using-angular-9-in-webstorm/

Using Angular 9 in WebStorm – WebStorm Blog | JetBrains

 

1. 프로젝트 생성 누르고 들어가서 버전 설정을 할 수 있다. Angular 버전 역시 node처럼 내장된 최신 버전과 npm을 통해 별도 설치한 버전 중에서 선택할 수 있다.

WebStorm에서 프로젝트 생성으로 시작하니까 Configurations도 잘 잡힌다. 나중에 프로젝트를 불러와 앵귤러 프로젝트로 인식 시키기 위해서 이 부분을 참고하면 좋을 것 같다.

2. Dependencies 다운로드

package.json 우클릭 하고 Run 'npm install'

 

3. 앱 서버 실행하기

 

또 다른 방법...

package.json 우클릭 하고 Show npm Scripts 그러면 아래와 같이 npm 창이 하나 더 생긴다.

그러면 이 npm 창에서 'start'명령을 찾아서 우클릭 하고 Run을 하면 된다.

 

 

터미널로 프로젝트 생성하든, WebStorm으로 생성하든 파일 생성은 역시 동일하게 된다.

 

그 다음은... 앵귤러 학습하기

angular.kr/start

Angular 가이드

 

 

Tag. 앵귤러 webstrom, webstorm 앵귤러, angular webstorm, webstorm angular, angular hello world, angular helloworld, 앵귤러 hello world, 앵귤러 helloworld