[Angular] Angular v9.0.7 설치

1. 설치환경

    본 문서는 다음과 같은 환경을 기준으로 작성되었다.

 

    1) 운영체제 : 우분투18.04 버전

    2) 사용자 계정 권한 : 관리자. 관리자 계정이 아닌경우 각 명령어 앞에 "sudo" 를 포함해서 실행.

 

2. 사전 조건

    Angular 버전 v9.0.7 를 설치하기 위해서는 NodeJS(v10.13.0 이상)와 NPM(v6.11.0 이상)이 설치되어있어야 한다.

    다음은 NodeJS와 NPM 설치를 설명한다.

 

    1) NodeJS 설치

      Angular공식 문서(https://angular.io/guide/setup-local) 에는 node 10.13.0 버전 이상 버전 사용을 요구 하고 있고,     본 문서에서는 12.16.1 LTS(Long Term Support) 버전을 설치하는 것을 기준으로 한다.

 

        가) NodeJS 설치 확인

            nodeJS 가 설치되어 있는지 확인하기 위해 다음 명령어를 콘솔창에 입력한다.

   

            #node -v

 

( 설치 안된 경우 )

 

( 설치 된 경우 )

        설치 되어 있지 않으면 설치하도록 한다 ("나)" 참고)

 

        나) NodeJS 설치

            본 문서에서는 curl을 이용해서 NodeJS는 설치한다.

            따라서, curl이 설치 되어있지 않은 경우 아래와 같이 확인 하고 설치하도록 한다.

 

            a) curl 설치 확인

                CURL 이 설치돼있는지 확인하기 위해 다음 명령어를 콘솔창에 입력한다.

 

                # curl -V

 

( 설치 된 경우 )

 

( 설치 안된 경우 )

 

 

            만약 curl 설치가 안돼 있다면 설치 하도록 한다. ("나)" 참고)

 

            b) curl 설치

                작성일() 기준 curl 버전은 7.58.0 이다.

 

                # apt-get install -y curl

 

 

            c) NodeJS 설치

 

                Angular 버전 9.0.7은 NodeJS 버전 10.13.0 이상을 권고하고 있고, 아래의 방법은

                Node.JS의 12.0.0 이상의 버전을 설치하므로 권고사항에 부합한다.

 

                # curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

                # apt-get install -y nodejs

 

        2) NPM 설치

 

            가) NPM 설치 확인

                node 공식 문서에 따르면 nodeJS 12.16.1 LTS 버전에 npm v6.13.4 도 함께 포함돼 있기 때문에

                별다른 이상이 없다면 npm v6.13.4 버전도 함께 설치 됐을 것이다.

                다음 명령어를 통해 버전을 확인해 보자.

 

                # npm -v

 

                만약 위와 같이 설치가 안됐거나 요구 버전(6.11.0)보다 낮다면

                NodeJS v12.16.1 정상적으로 설치되었는지 다시 확인 해보도록 하자. 3. Angular(9.0.7) 설치

 

                Angular 는 Google에서 만든 Single PageApplication 방식의 프론트엔드 개발을 위한

                자바스크립트 프레임워크이고, 공식 문서에서 사용 언어는 TypeScript 를 권장하고 있다.

                분 문서에서 설치하는 버전은 v9.0.7 이다.

 

3. 설치 과정

    1) Angular CLI 설치

 

        Angular CLI은 프로젝트를 만들고, 어플리케이션과 라이브러리 코드 생성할 때,

       혹은 테스트, 배포 같은 개발 과정 전반에 걸쳐 다양하게 사용된다.

        AngularJS 설치는 Angular CLI설치하는 것과 동일한 의미이다.

 

        Angular CLI 설치는 다음과 같다.

    

        # npm install -g @angular/cli

 

"y"  입력

       

        npm v6.13.4 를 이용해  Angular CLI 를 설치했다면  cli 9.0.7 버전이 설치된 걸 확인할 수 있다 .

 

 

 

    

    2) 워크스페이스 생성 및 앱 기본틀 구성

 

        1. Angular 명령어 ng를 이용해 ‘my-app’ 이라는 이름의 새로운 프로젝트 생성한다.

        

        # ng new my-app

 

Angular routing 클래스를 추가할 것인지 묻는다.  " y" 를 입력한다.

 

스타일 시트 선택

 

 

CSS(Cascading Style Sheets)	HTML 과 같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어이다.
Sass(Syntactically Awesome StyleSheets)	CSS를 만들어주는 언어로,자바스크립트처럼 특정 속성 값(color, margin, width)를 변수로 선언하여, 필요한 곳에 선언된 변수를 적용할 수 있고, 반복되는 코드를 한번의 선언으로 여러 곳에서 재사용할 수 있도록 해주는 등의 편리한 기능을 갖고 있다.
SCSS(Sassy CSS)	Scss는 sass의 3버전에서 등장한 언어이다. 기본 틀은 CSS문법과 동일하며, nested block(네스팅 = 서브루틴 중에 다른 서브루틴을 짜 넣는것.) 을 적용한다.
Less(Leaner Style Sheets)	자바스크립트 문법을 취하고 있으며, Node.js 엔진을 기반으로 구동된다. Sass와는 달리 브라우저 단에서도 동작하는 특징을 갖고있다.
Stylus	설계는 Sass와 Less의 영향을 받아 JADE와 Node.js로 작성되었고, CSS로 컴파일되는 동적 스타일시트 전처리기 언어이다.

 

패키지 설치 완료 .

 

 

 

    3) 애플리케이션 실행

 

        1. 워크스페이스 폴더로 이동한다.(my-app)

        # cd my-app

 

angular.json	Angular에서 제공하는 빌드 및 개발 도구에 대한 작업 영역 전체 및 프로젝트 별 구성 기본값을 제공하는 파일. 구성에 제공된 경로 값은 루트 작업 공간 폴더를 기준으로 한다.
browserslist	빌드 시스템에서 지정된 브라우저를 지원하도록 CSS 및 JS 출력을 조정하는 데 사용되는 파일. front-end 적용 대상 브라우저를 공유하는 라이브러리 설정 파일이다.
e2e	End to End 의 약자, 종단 간 테스트로 사용자의 입장에서 테스트 하는 것. e2e 테스트를 위한 파일을 담고 있는 폴더.
karma.conf.js	karma를 이용해 테스트를 하기 위한 환경 설정 파일
node_modules	npm의 지역 설치 모드로 설치한 모듈들이 담긴 폴더이며, 해당 프로젝트에서 필요로 하는 모듈들(package.json에 등록된 모듈들) 이 npm에 의해 설치되어 저장된다.
package.json	프로젝트 의존 모듈을 관리(사용모듈 네임, 버젼)하고, 프로젝트 정보를 가지고있는 파일이다. node_modules 디렉토리가 없어도 이 파일만 있으면 npm install 명령어로 프로젝트 사용 모듈을 설치 할 수 있다.
package-lock.json	npm을 사용하여 package.json파일 또는 node_modules트리를 수정하면 자동으로 생성되는 파일. 파일이 생성되는 시점의 의존성 트리에 대한 정보를 가지고있다.
README.md	프로젝트가 어떠한 목적으로 개발이 되었는지, 코드의 개요, 구조도 등의 설명을 담고있는 파일이다.
src	source의 약자로 프로젝트의 모든 구성요소, css, image, font와 같은 정적 파일 및 설정 파일 등 애플리케이션에 필수로 필요한 파일을 담고있는 폴더이다. 개발자가 작성하는 대부분의 파일은 이 곳에 포함된다.
tsconfig.json	TypeScript 컴파일 옵션 설정 파일, 프로젝트를 컴파일하는 데 필요한 루트 파일과 컴파일러 옵션을 지정하는 파일이다.디렉토리에 이 파일이 존재한다는 것은 해당 디렉토리가 TypeScript 프로젝트의 루트임을 나타낸다.
tslint.json	TypeScript 코드에서 가독성 및 오류를 검사(구문 체크)하기 위한 설정 파일.
main.ts	프로젝트의 메인 진입점(main entry point)으로, 루트 모듈을 bootstrap 하는 코드가 존재한다.

    

 

    2. Angular명령어 ng를 이용해 서버를 열고(serve) 웹 브라우저에 띄운다.(--open)

        

    # ng serve --open

 

컴파일 후, 서버 실행

 

 

위와 같은 창이 뜬다면 성공적으로 애플리케이션이 실행된 것이다.

 

4. Hello World 출력

    앞의 과정을 모두 성공적으로 이행했다면 Hello World를 출력해보자.

    IDE(통합개발환경)는 VSCode 를 사용하였다.

 

    1. VSCode 를 실행하여 워크스페이스 폴더(my-app)을 연다.

 

 

    2. ~/my-app/src/app/app.component.html 파일 열기

    

    3. Hello World 작성

    기존 코드 모두 지우고 Hello World 작성

이렇게 localhost:4200에 Hello World 페이지가 생성되면 성공이다!