'WEB-INF'에 해당되는 글 916건

AngularJs2 ng 명령어 활용

1. 포트 변경

- 기존 개발 포트는 4200을 사용하지만 다른 프로그램이 사용할 경우 충돌 발생

- $ ng serve --port 4202

- 설정 가능한 포트는 두 개이다.

1) http 서버포트

- $ --port 4202

2) 라이브 리로드 서버에서 사용하는 포트

- $ --live-reload-port 49000

3) $ ng serve --port 4201 --live-reload-port 49000

2. Angular 구성요소 추가

- 핵심구성 요소 : 컴포넌트, 지시자, 파이프, 서비스

- 아래 명령어를 루트 디렉토리에서 실행하면 자동으로 /src/app 디렉토리 기준으로 생성된다

1) 컴포넌트 추가

- 컴포넌트는 Angular에서 라우터와 같은 URL 경로 단위가 되기 때문에 폴더로 구분되어 생성된다

- $ ng g component 컴포넌트 명

2)  지시자 추가

- $ ng g directive 지시자명

3) 파이프

- $ ng g pipe 파이프명

4)  서비스 추가

- 컴포넌트에 사용될 때는 provide라는 속성에 추가 해야한다

- $ ng g service 서비스명

3. Angular 빌드

- 프로젝트를 배포하기 이전에 타입스크립트 기반으로 만들어진 코드를 빌드를 통해 브라우저에서 동작 가능하도록 변경해야한다

1) 개발환경 빌드

- $ ng bulid

- /src/enviroments/enviroment.ts  파일의 개발환경 설정 정보를 이용해서 개발 환경 빌드 수행

- dist 폴더가 생성되었다

2) 프로덕션 용

- $ ng build - prod

Angular CLI 설치 및 프로젝트 만들기

1. 정의

- 개발자가 Angular 개발만 집중할 수 있도록 개발에 필요한 Angular 프로젝트의 설정이나 프로젝트의 전반적인 관리를 명령어 기반으로 수행

1) 제공하는 기능

- Angular 프로젝트 생성

- Angular 중요 구성요소 추가(컴포넌트, 지시자, 파이프, 서비스)

- 코드 변경 시 빌드를 수행하고 애플리케이션 시작

- 브라우저 동기화

- 단위 테스트

- 프로젝트 배포 패키징

2. Angular CLI 설치

-$ npm install -g angular-cli

- 설치가 완료되면 ng 명령어를 사용할 수 있다

-$ ng -help

3. Angular CLI  프로젝트 만들기

1) 프로젝트 추가

-$ ng new hello-ng2

2) Angular 개발서버 실행

-$ cd hello-ng2

-$ ng serve

- localhost:4200

ES6 에서의  getter/setter함수

1. 일반적인 프로퍼티 추가

var myObj = new Object(); myObj.message = "hello"; console.log(myObj.message);

- message프로퍼티는 값을 저장하거나 읽을 수 있지만 값의 설정과 출력과정에 아무런 처리를 할 수 없다

2. set/get  키워드

- 프로퍼티 설정과 출력 시 특정 처리를 한다

{ set 속성이름(매개변수){..}}

{ get 속성이름(){..}}

let obj = { msg : '', get hello(){ return this.msg + 'world'; }, set hello(value){ this.msg = value; } }; obj.hello = 'Hello'; console.log(obj.hello);  

타입스크립트 화살표 함수 =>

1. 정의

- ES6표준에 포함된 익명의 함수를 간략하게 표현 할 수 있는 방법

2. 기본 사용

-  function(){ } ;

- () => { } ;

3. 화살표함수의 이용

//case1 var pw = function(x){ return x * x; } console.log(pw(2)); //case2 var pw2 = (x)=>{ return x*x; } console.log(pw2(3)); //case3 var pw3= x => x*x; console.log(pw3(3));

- 기본 함수를 간단하게 표현이 가능하다

1) 즉시 실행함수 형태

((x) => { console.log(x*x); })(3);

2) 화살표 함수와 필터함수

var numbers = [1,2,3,4]; //normal var number_list = numbers.filter(check); function check(value){ return value > 1; } console.log(number_list); //arrow var arrow_filter = numbers.filter(value => value > 1); console.log(arrow_filter);