form - submit

• 서버에 전송.
• 페이지 전환(깜박거림).
• form안의 요소들(그룹)이 하나라도 유효하지 않으면 전송할 수 없다.

form control

• name 어트리뷰트가 데이터의 이름이 된다.
• ngModel을 써줘야 control이 만들어짐
• 각각의 input에 접근하기 위해서는 form 참조 변수를 사용한다.
• ex) userForm.value (참조변수:#userForm)
• #name=”ngModel”: 유효성 검증 상태 추적이 가능해진다.

템플릿 기반 폼 유효성 검증 - AbstractControl클래스

• 유효성 검증의 상태를 나타내는 프로퍼티를 가지고 있음
• errors, invalid, valid, pristine, undouched, dirty 등
• untouched: fousin -> focusout되면 false
• pristine: 값이 한번이라도 입력된 상태 false
• *ngIf를 사용해서 에러메시지를 출력하는게 좋다 -> 조건에 부합하면 DOM에서 사라지기 때문
• 에러메시지는 값을 입력하고 focusout됐을 때 출력되야 함.
• errors => invalid: true, untouched: false

리액티브폼 - 컴포넌트 기반

• 템플릿 기반보다 복잡할 경우 사용. (form이 15개 이상이거나 많은 검증이 필요할때)
• 컴포넌트 기반
• formControlName이 템플릿기반 폼에서 name의 역할을 한다.

Angular CLI 커맨드 정리

Angular CLI 설치

• npm install -g angular-cli

프로젝트 생성

• ng new 프로젝트명

포트변경

ng serve -port 4001

구성요소 추가

컴포넌트 추가

• ng g c 컴포넌트명

디렉티브 추가

• ng g d 디렉티브명

파이프 추가

• ng g p 파이프명

서비스 추가

*ng g s 서비스명

빌드 및 실행

개발 서버 실행

• ng serve

개발 서버 실행(watch)

• ng serve -o

빌드

• ng build

Angular 형식

1
2
3
4
5
6
7
8
9
10

import {...} from '@angular/core';
//데코레이터
@Complate({
    selector:...,
    template:...,
    styles:...
})
export class AppComponent{
    name:String; //template과 연동
}

Angular에서 뷰(템플릿) 변경

앵귤러가없으면 DOM API를 이용해서 데이터를 변경한다.
그러나 앵귤러에서는 DOM API를 쓰지 않고 컴포넌트 클래스 내에 데이터를 갖고 있으면 Data Binding로직에 의해서 template syntax에 표시하여 변경한다.(인터폴레이션)
** 앞으로 배울것 Data binding

Data binding

• DOM API 접근 방식: javascript는 DOM에 강하게 의존하고 있다(조작하고 있는 view태그를 변경하면 자바스크립트를 변경해야 한다.)
• Angular는 템플릿(html)이 컴포넌트 클래스(javascript)의 데이터를 인터폴레이션이 가져가도록 작동한다.
• 따라서 템플릿에서 태그를 변경해도 영향을 미치지 않는다 => 템플릿이 주도권을 가짐
• 인터폴레이션 : { { title } }

Angular 기본 개념 및 구성 정리

Angular소개

• “Web Component”를 기반으로 프레임워크가 만들어짐
• SPA(Single Page Application)개발을 위한 구글의 오픈소스 자바스크립트 프레임워크
• 초기 로딩이 길다(SPA의 단점)
• 초기 로딩 이후의 화면전환이나 인터렉션은 빠르다.
• AngularJS(v1,ES5) 2012년 구글의 미스코 헤브리가 공개. 지속적으로 업데이트를 진행하고 있다.
• Angular(v2~, typescriprt) 2014년 ng컨퍼런스에서 처음으로 소개.
• Angular는 AngularJS의 후속 버전이지만 호환성이 없다.
• Angular에서는 자바스크립트 값이 html과 상호 연동된다.
• 하나 이상의 모듈과 컴포넌트가 존재해야 된다.
• 대부분의 모던 브라우저를 지원한다.(IE는 9이상)

Angular의 장점

1) 개선된 개발 생산성
1) 컴포넌트 기반 개발
2) Typescript의 도입

- Typescript의 정적 타이핑/ ECMAScript6의 클래스,모듈/ ECMAScript7의 데코레이터를 지원한다.
3) 개발 도구의 통합 및 개발 환경 구축 자동화
- 설정해야 할 도구가 많고 설정 방법은 익숙지 않다. => Angular는 CLI을 통해 간편한 개발 환경 구축을 지원한다.(개발환경 구축에 소요되는 시간 최소화)

2) 성능 향상
1) Digest Loop로 인한 성능저하 문제의 해결

- AngularJS는 Model의 변화를 View에 반영시키는 과정(Digest Loog)로 인한 성능저하가 단점 (양방향 바인딩을 위해서는 watcher가 추가됨, watcher가 늘어날수록 성능 저하)
2) AoT 컴파일
- 사전 컴파일 방식을 의미. 런타임에서 실시하지 않고 사전에 컴파일하여 속도를 향상시키는 기법.
3) Lazy Loading
- 지연 로딩. SPA의 단점을 극복하기 위한 대안.
- 애플리케이션 실행 시점에 모든 모듈을 한꺼번에 로딩하지 않고 필요한 시점에 필요한 모듈만을 로딩하는 방식
4) 코드 최적화

typescript

• “type”을 가지고 있다.(javascript와의 차이점, java,c와 비슷함)
• code assistant 활용으로 생산성 향상(vscode에서 지원이 빵빵함)
• AltJS(javascript의 대체언어)중 하나
• 기본적으로 ES6기반으로 씀
• 자체적으로 Babel과 유사한 컴파일러를 가지고 있음

type 지정의 장점

• 에러를 사전 점검할수 있음

문법

• 변수 타입 지정을 반드시 해줘야 함
• 선언과 할당이 함께 되면 타입 지정을 안해줘도 에러가 발생하지않음

정적타이핑

• 변수의 타입 선언, 지정에 맞는 값을 할당하여 사용하는 것
• 동적타이핑과 반대개념, javascript는 동적 타이핑 언어이다.
• 타입에 일치하지 않는 값을 넣었을 때는 에러가 발생(아예 컴파일이 실행 안됨)
• 타입을 써주면 더 확실하다.
• 코드 가독성, 예측성, 안정성의 향상의 장점이 있다.

네트워크의 구성

허브(hub?)

• 같은 신호(외부에서 온 신호)를 여러 기기에 보여줌

라우터(Router)

• 외부신호를 받아서 내부로(?) 전달하는 것 - 공유기x, 좁은범위
• 공유기(매핑하여 특정한 컴퓨터에 전달할 수 있는 것)

LAN

• 가까운 지역의 좁은 범위
• wireless LAN :무선인터넷
• 802.11 != wifi
• 802.11 : IEEE에서 개발된 표준무선통신기술
• wifi : 와이파이 얼라이언스의 상표, 802.11 기술을 사용하는 무선근거리 통신망 제품으로 사용하려면(?) 허가를 받아야함

WAN

• 국가, 대륙의 넓은 범위

LAN < MAN < WAN

• MAN : LAN들끼리 연결(LAN을 묶어준것)
• WAN : MAN들끼리 연결

Another 네트워크

• Lifi : 빛이 도달하는 범위에 연결되있고 정보(?)를 전송한다, 곧 상용화될 듯..
• power line networking x

Network topology(네트워크 연결 형태)

• Line : 한방향
• Bus : Line형태가 발전한 것. 큰 연결선과 작은 연결선이 있음.
• ring : 방향이 두개
• fully connected : ring형태 발전한 것, 모두 1:1연결(케이블 설치하는데…비용문제)
• 해외로 연결하는 망은 해저(?) 케이블로 구성되어 있다. 회사마다 설치할 수 있음(돈많은회사~)

디스트럭처링

배열의 요소나 객체의 속성을 배열 리터럴이나 객체 리터럴과 비슷한 문법을 이용해서 변수에 할당할 수 있다.

객체 복사

• Object.assign을 주로 쓴다
• JSON.stringify(?) 꼼수.

Object.assign

• static 메서드
• 가변인자함수(매개변수가 여러개 올 수 있음)
• ({}, 매개변수1, 매개변수2…)
  {}로 복사본을 만들 수 있음,
  매개변수1에 매개변수2…가 merge됨

배열 디스트럭처링

• 배열의 요소를 추출해서 변수리스트에 할당한다.
• 추출/할당의 기준은 index
• [x, …y] = [1,2,3,4]; spread 연산자는 매개변수의 마지막에 올 수 있고, 그런 경우에sms 할당된 요소의 남은 갯수만큼의 배열이 생성된다. result => y = [2 ,3 ,4];

객체 디스트럭처링

• 프로퍼티 이름(키)이 같은 것을 가져온다.
• todo.filter(({completed})) => {…})
• forEach(({id, content, completed}) => {…})
• 위처럼 객체 디스트럭처링을 하며 ${todo.id} -> ${id}로 사용할 수 있다.
• const { … } 형태
• 참고) _변수명 : 내부에서만 쓰는 변수(private), 외부에서 참조할 수 없음, 문법x

ES6 공부

let

• javascript ES5에서는 function-level scope를 갖기 때문에 함수 내에서 선언된 변수만 외부에서 참조할 수 없고, 블록 내에서 선언된 변수는 제한이 없기 때문에 전역에 선언된 변수와 이름이 중복되면 그 값을 재할당 해버려서 의도치 않은 변수 값 변경이 발생할 문제가 있다.
• let으로 변수를 선언하면 block-level scope를 갖기 때문에 전역 변수와 이름이 같더라도 전역 변수를 참조할 수 없다.
• let은 중복 선언시 SyntaxError가 발생한다.

var, let 의 호이스팅 비교

• 호이스팅이란 var 선언문이나 function 선언문을 해당 스코프의 선두로 옮기는 것을 말한다.(암묵적으로)
• var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 함께 이뤄지기 때문에 할당 단계를 거치지 않고 선두에서 호출을 하더라도 에러가 발생하지 않는다. => undefined로 초기화
• let 키워드로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.
• 스코프에 변수가 등록되고, 일시적 사각지대(Temporal Dead Zone)를 지나서 변수 선언문에 도달했을 때 초기화가 이뤄진다. => 초기화 이전에 선두에서 변수를 호출한다면 ReferenceError가 발생한다.

Excution Context ~ REST API 총정리

• Object - Built-in Object , Host Object
• Built-in Object - 표준 빌트인 객체, Native Object(BOM,DOM)

Standard Built-in Object

• 표준빌트인도 전역객체의 자식객체이다.
• alert(‘hello’); = window.alert(‘hello’);
• 대문자로 시작하며 String,Number,Array 등이 있다.

Standard Built-in Object(표준 빌트인 객체)의 종류

• Object, Function, Boolean, Number, Math, Date, String, RegExp, Array, Error,Symbol

  Object

• Object 생성자 함수는 객체를 생성한다. 생성자 함수의 인수값에 따라 강제 형변환된 객체가 반환된다.
• 반환된 객체의 [[prototype]] 프로퍼티에 바인딩된 객체는 Object.prototype이 아니다.

  1 2 3 4 5

  var strObj = new Object('String'); // var strObj = new String('String'); 와 같다. var numObj = new Object(123); // var numObj = new Number(123); 과 같다.

Function

• 모든 함수는 Function 객체이며, Function 객체는 new 연산자로 생성할 수 있다.
• var sum = new function(‘a’,’b’,’return a + b’);

Boolean

• 기본자료형 boolean을 위한 레퍼(Wrapper) 객체이다.

  1 2 3 4 5 6 7 8 9 10

  //Boolean 객체 var foo = new Boolean(true); //여기서 Boolean은 기본자료형이 아닌 객체이다. //true,false를 포함하고 있는 객체이다. //따라서 x는 객체로서 존재함으로 참으로 간주된다. var x = new Boolean(false); if (x) { // . . . 이 코드는 실행된다. }

REST API

• REST(Representational State Transfer)는 HTTP/1.0과 1.1의 스펙 작성에 참여하였고, 아파치 HTTP 서버 프로젝트의 공동설립자인 로이 필딩(Roy Fielding)의 2000년 논문에서 처음 소개되었다.

• 발표 당시의 웹이 HTTP의 설계 상 우수성을 제대로 사용하지 못하고 있는 상황을 보고 웹의 장점을 최대한 활용할 수 있는 아키텍쳐로 REST를 소개했다고 한다.

• HTTP 프로토콜을 의도에 맞게 디자인하도록 유도하고 있다.

• REST의 기본 원칙을 성실히 지킨 서비스 디자인을 “RESTful”이라고 표현한다.