본문 바로가기

Angular

Angular 개발환경 설정하기

1. Angular 설치를 위한 사전 준비

    - Angular를 로컬 환경에 설치하기 위해서는 Node.js, npm package manager 가 필요하다.

    - npm package manager 은 Node.js를 설치하면 같이 설치가 된다.

    - Node.js 설치 URL : nodejs.org

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

    - Node.js 설치 확인

node -v

 

 

    - npm 설치 확인

npm -v

 

 

 

2. Angular CLI 설치

    - 터미널 실행 (cmd)

    - 터미널에 아래 명령어 실행

npm install -g @angular/cli

    - 설치 확인

ng version

 

 

2-1. ? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics.

    - 버전 확인 명령어 실행시 위 메세지가 출력되는 경우가 있는데 사용 데이터를 Angular 팀과 공유하겠냐는 질문이니 y/N 선택해주시면 됩니다. 저는 N 선택했습니다.

 

 

3. Visual Studio Code(VSCode) 설치

    - 설치 URL : https://code.visualstudio.com/download

 

Download Visual Studio Code - Mac, Linux, Windows

Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.

code.visualstudio.com

    - Node.js 설치 이후에 VSCode를 실행해주세요. (설치 이전에 실행시켰다면 다시 껐다 켜주세요.)

 

 

4. VSCode에서 ng 명령어 사용할 수 있도록 권한 변경

    - VSCode에서 ng 명령어를 사용하려면 권한을 변경해줘야 합니다.(Windows)

    - VSCode 터미널 창에 ng 명령어를 사용했을 경우 권한 변경을 해주지 않았다면 아래 명령어가 출력됩니다.

ng : 이 시스템에서 스크립트를 실행할 수 없으므로..... ng.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=13
5170)를 참조하십시오.

    - Windows PowerShell을 관리자 권한으로 열어주세요. (cmd창 안됩니다.)

    - 현재 권한 확인

get-ExecutionPolicy

 

    - 현재는 권한이 제한되어 있다고 나옵니다.

    - 저희는 스크립트를 실행할 수 있는 RemoteSigned 권한으로 변경해줄 겁니다.

Set-ExecutionPolicy RemoteSigned
Y

 

 

    - get-ExecutionPolicy 명령어로 권한이 잘 변경됐는지 확인해주세요.

 

    - RemoteSigned 이외에 다른 권한 종류에 대해선 아래 링크에서 확인해 주세요.

https://learn.microsoft.com/ko-kr/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.3 

 

실행 정책 정보 - PowerShell

PowerShell 실행 정책을 설명하고 이를 관리하는 방법을 설명합니다.

learn.microsoft.com

 

 

5. Angular extensions 설치

    - Extensions 는 Visual Studio Code의 확장 기능으로 개발 시 편리한 기능들을 제공해준다.

    - Angular 개발에 필요한 Extensions 설치하기 위해 Extensions 탭 클릭 (단축키 : Ctrl + Shift + X)

    - Angular Language Service 설치해서 사용을 해 줄 텐데 해당 서비스가 제공해주는 기능은 자동완성, 문법 체크 등의 기능을 제공한다.

    - 이미 설치했기 때문에 Uninstall이 표기가 되는데, 설치되지 않은 서비스는 install 버튼이 있으니 install 누르면 된다.