앵귤러 개발에 필요한 환경 구축을 해보겠습니다.
이번 포스트에서는 아래 내용을 다루고 있습니다.
- 코드 편집기(VS Code) 설치
- npm설치 및 npm 이해하기
- Angular CLI를 이용한 앵귤러 애플리케이션 작성 및 실행
코드 편집기 설치 하기
타입스크립트를 지원하거나 플러그인을 통해 지원하는 많은 편집기가 있습니다.
많은 웹 개발자와 앵귤러 개발자들이 많이 사용하는 Visual Studio Code(이하 VS Code)를 선택하기로 하겠습니다.
다른 편집기를 사용해도 상관없지만, 타입스크립트를 지원하는 편집기를 고르면 앵귤러 코딩이 더욱 편하고 즐거워집니다.
VS Code란 무엇일까요?
마이크로소프트에서 만든 코드 편집기입니다.
Mac에서 Linux, Windows 및 OS X에서 실행됩니다. 자동 완성, 인텔리센스, 구문 검사, 리팩터링과 같은 TypeScript 코딩을 지원하는 훌륭한 기능을 갖추고 있습니다.
또한 깃허브와 같은 소스 제어와도 잘 통합되어 있습니다.
가장 중요한 점은 무료라는 것입니다.
VS Code가 설치되어 있지 않으면 구글에서 VS code를 검색하세요.
다운로드 페이지로 간 후 OS에 맞는 버전을 다운로드 후 설치해 주세요.
설치가 완료되면 vscode가 실행됩니다.
코드 편집기 이외에 더 필요한게 있습니다.
바로 NPM입니다.
NPM 설치하기
Angular환경을 갖추기 위해서 Node Package Manager인 npm을 설치해야 합니다.
설치하기에 앞서 npm에 대해서 알아보도록 하겠습니다.
npm이란 무엇일까요?
npm의 역할은 두 가지로 볼 수 있습니다.
- 첫째, 오픈소스 라이브러리 패키지의 온라인 저장소입니다.
- 둘째, npm은 해당 리포지토리와 상호 작용하기 위한 커맨드 라인 유틸리티입니다.
npm 온라인 저장소에는 Angular, Typescript, 부트스트랩 같은 많은 자바스크립트 패키지를 저장하고 있습니다.
개발자들은 npm을 이용하여 npm install 같은 커맨드라인 명령어를 사용할수 있습니다.
그렇게 함으로 npm은 저장소에서 지정된 라이브러리를 찾아 mode_modules라는 현재 폴더의 하위 폴더에 해당 라이브러리를 로컬 시스템에 설치 합니다.
아래 그림에서 현재 c:/study/angular-beginner폴더에 있으며 아무런 파일이 존재 하지않는 빈 폴더 입니다.
여기에 연습삼에 이곳에 typescript를 npm을 이용하여 설치해 보겠습니다. 가볍게 보고 넘어가 주세요.
npm install typescript
설치 후 아래 그림과 같이 node_modules폴더에 typescript패키지가 설치된걸 확인해 볼 수 있습니다.
이와 같이 install 명령을 실행한후 npm은 저장소에서 typescript패키지를 찾고 node_modules하위 폴더를 생성한 다음 지정된 라이브러리와 종속성을 해당 하위 폴더에 설치 합니다.
즉, npm은 javascript 애플리케이션의 패키지 관리자입니다. npm을 사용하여 라이브러리, 패키지 및 응용 프로그램을 설치 할 수 있습니다.
Angular를 위한 라이브러리를 설치 하기위해서도 역시 npm이 필요합니다.
라이브러리의 설치 이외에도 npm 커맨드라인 유틸리티는 스크립트를 실행하여 애플리케이션의 실행을 할 수 있습니다.
이제 npm을 설치해 봅시다.
구글에서 node라고 검색해 보세요.
node는 javascript런타임 환경으로 node를 인스톨 함으로 npm도 같이 인스톨 됩니다.
인스톨 후 커맨드 콘솔을 열어 npm -v라고 입력해 버전정보가 표시 된다면 설치완료입니다.
npm -v
npm설치까지 완료했으니, 우리가 앵귤러에서 필요한 모든 것을 설치 할 수 있습니다.
뭐가 더 필요할까요? 당연히 Angular 프레임워크를 구성하는 Angular라이브러리가 필요합니다.
그리고 Angular에서 사용하는 언어인 TypeScript가 필요합니다.
테스트 도구,및 기타 지원 라이브러리도 필요하겠네요.
우리에겐 npm이 있으니 각각 npm으로 인스톨 하면 될까요?
물론 가능하지만 더 일반적인 방법이 있습니다.
그것은 package.json란 json형식의 패키지 파일에 angular애플리케이션에 필요한 패키지 및 버전을 정의한 후 이용하는 방법입니다.
npm init이라는이라는 명령어로 간단히 package.json파일을 만들수 있습니다.
예시이니 가볍게 보고 넘어가 주세요.
npm init
npm init 후 package 파일이 생성됨을 학인해 볼수 있습니다.
일반적으로 프로젝트에서는 환경을 구축하는 담당자에 제일 먼저 프로젝트에 필요한 패키지를 정의하고 개발자 팀원은 package.json에 정의된 패키지를 npm install 함으로서 환경구축을 하게 됩니다.
뭔가 복잡해 보이지만 쉬운방법이 남았습니다.
앵귤러를 쉽고 빠르게 시작하는 다른방법은 Angular CLI를 이용하는 것입니다.
Angular CLI를 이용하여 시작하기
Angular는 커맨드라인인터페이스인 Angular CLI를 지원합니다.
Angular CLI를 통해 코드생성, 실행, 프로덕션으로 빌드를 할 수 있습니다.
Angular CLI 인스톨하기
일단 커맨드 프롬프트을 실행해 봅시다.
Angular CLI를 이용하기 위해서 Angular CLI를 글로벌로 인스톨해 주어야 편리합니다.
인스톨이 완료되면 아래와 같이 버전을 보여주는 메시지가 됩니다.
Angular CLI를 글로벌로 인스톨 하고 나면 ng 명령을 어느곳에서도 실행할 수 있게 됩니다.
Ng명령어를 이용해서 앵귤러 애플리케이션을 만들어 보겠습니다.
CLI로 Angular 애플리케이션만들기
애플리케이션을 만들고 싶은 폴더로 이동한 후 아래의 명령어를 입력합니다
ng new first-angular
실행하고 나면 cli는 몇가지 질문을 합니다.
라우팅 설정은 yes, 스타일시트는 scss를 선택하고, 엔터를 누르면 앵귤러에서 필요한 모든 설정 및 구성 파일들을 생성 시작합니다.
이 과정에서 package.json파일도 생성해 줍니다.
완료 후입력한 프로젝트 폴더가 생성됨을 확인할수 있습니다.
해당 폴더로 이동한후 code . 을 입력해 vscode로 프로젝트 폴더를 열어 봅시다.
Vs Code가 열리고 프로젝트 파일등을 확인해 볼 수 있습니다.
Vs Code에서 터미널을 열고 Angular CLI가 만들어준 애플리케이션을 구동해 보겠습니다.
터미널에서 npm start 실행시키면,실행시키면 package.json 스크립트에 정의되있는 ng serve가 실행되고, 컴파일후 프로그램 번들을 생성합니다.
npm start
콘솔 메시지내의 링크를 클릭 하거나, 브라우저에서 localhost:4200 을 입력하면 앵귤러 애플리케이션이 열립니다.
아무것도 코딩하지 않았는데 화면이 뜨는걸 볼 수 있습니다.
이것은 angular CLI가 만들어준 화면입니다.
Angular CLI를 사용하여 스타터 파일을 만들었는데, CLI는 index.html파일과 루트 앱 구성 요소를 자동으로 만들어 줍니다.
여기까지 따라오느라 수고하셨습니다.
이것으로 앵귤러 환경구축이 끝났고, 본격적으로 앵귤러 애플리케이션을 작성할 수 있게 되었습니다.
다음 포스트에서는 앵귤러 구성요소를 살펴보고 본격적으로 Angular코드를 작성해 보도록 하겠습니다.
'프로그래밍 > Angular' 카테고리의 다른 글
| 앵귤러 기초(Angular basic) 6.바인딩, Interpolation(보간) (0) | 2022.01.16 |
|---|---|
| 앵귤러 기초(Angular basic) 5.템플릿, 컴포넌트 만들기 (0) | 2022.01.16 |
| 앵귤러 기초(Angular basic) 4.angular bootstrap (2) | 2022.01.14 |
| 앵귤러 기초(Angular basic) 3.angular component (0) | 2022.01.13 |
| 앵귤러 기초(Angular basic) 1.앵귤러 시작하기 (1) | 2022.01.12 |
댓글