Angular Form

Angular Form은 Template-driven Forms와 Ractive Forms를 제공한다.

Template-driven Forms

• 간단한 form (Form Control 한두개)을 구성할 때 사용

Reactive Forms

• 복잡한 form을 구성할 때 사용

Form은 Client side에서 중요한 역할을 한다. 사용자의 입력을 서버로 전송하고 페이지를 전환할 수 있는 element이다. Server는 많은 Client 요청을 처리하므로 form을 통해서 받은 사용자 입력의 유효성 검사(validation)를 Client side에서 하는 것이 기본이다.

Today Test

[오답]

• 식별자를 검색했을 때 없으면 ReferenceError지만 Property를 검색했을 때 없으면 error가 아니고 undefined를 리턴

• 함수가 아닌 것에 () 붙여 실행하면 TypeError (SyntaxError 아님!!!!!!)

• undefined 값에 method 실행해도 TypeError

• typeof 배열은 object

  1 2 3 4

  function getAge(...args) { console.log(typeof args); } getAge(20);

  • Spread operator …가 argument에서 사용되면 Object나 Array를 풀어서 함수의 argument로 전달

  • Rest parameter … 를 사용하면 풀어진 argument를 하나의 배열로 받음

• ‘use strict’

  1 2 3 4 5

  function getAge() { 'use strict'; age = 20; console.log(age); }

  ‘use strict’ mode가 아닐 때는 키워드 없이 선언한 변수를 암묵적 전역 변수로 등록하지만, ‘use strict’ mode에서는 식별자를 찾고 없으면 ReferenceError 발생

Angular HttpClient

• 어떤 element의 값으로 일을 하고 그 값을 수정해야할 때 ngModel 양방향 바인딩 사용

FDS12 School Hackaton

패스트캠퍼스에 들어오고 두 번째 해커톤을 마쳤다. 총 10개 팀 중 3개 팀을 수상했는데 우리 팀이 인생을 바꾸는 작은 유용함 상을 수상했다. 각 스쿨의 매니저분들이 엑셀 파일로 학생 관리를 하는 불편함을 해소하고자 학생 관리 툴을 웹으로 옮겼다. 페어 해커톤이 아닌, 전체 스쿨 해커톤으로 백엔드와의 협업을 하고 싶었으나 전날 백엔드 팀이 빠지게 되어 프론트엔드 세명으로만 프로젝트를 진행했다. Angular Form을 사용해서 login 기능을 구현하고 싶었는데 아쉬웠다. 기대가 별로 없었는데 입상을 해서 기분이 좋았다. 앞으로 Final 프로젝트가 하나 남았다.

✨IWAM on Devpost

✨IWAM Github

Reactive Programming

Reactive Programming is programming with asynchronous data streams. You can listen to that stream and react accordingly.

Reactive Programming은 비동기적 데이터 스트림을 처리하는 프로그래밍 패러다임이다. Data stream이란 연속적인 데이터의 흐름을 말한다. Reactive Programming은 모든 것을 stream으로 본다. Event, AJAX 요청 등 모든 data stream을 시간 순서에 의해 전달되는 stream으로 처리한다.

최근 참여한 FrontEndgame 컨퍼런스에서 Functional Programming과 Reactive Programming을 융합한 FRP에 대한 발표가 있었는데 이제 Reactive Programming을 공부해본다.

Service

Component는 View를 구성하고 관리하는 역할을 해야한다. 그러나 View를 구성하다보면 필요한 데이터를 가져오기 위해서 서버와 통신을 하는 등의 부가 기능이 필요하게 된다. 이런 기능을 Component에서 하지 않고 Service로 분리한다.

Component의 관심사와 Application 전역의 관심사를 분리하는 것이다. 이렇게 기능을 분리하면 Application의 복잡도가 낮아지고 서비스를 재사용할 수 있다. 또한 의존도가 낮아져 유지보수성이 좋아진다.

Today I Learned

• ToastUI를 JavaScript와 Angular로 구현했다.
• window.pageYOffset은 wiondow.scrollY보다 cross browsing에 적합(IE 9 지원)하므로 pageYOffset을 사용하는 게 좋다.

Directive

Directive는 DOM의 모양이나 동작 등을 관리하기 위한 명령이다. HTML Element 또는 Attribute 형태로 사용한다.

Directive를 사용하는 HTML Element를 Directive 내에서 Host element라고 부르며, Directive 내부에서 host element의 event를 처리하거나 style 등을 변경할 수 있다.

Today I Learned

• Front Endgame 컨퍼런스에 갔다왔다.
• Angular와 React에 대한 정보를 많이 얻었다.
• 현직 프론트엔드 개발자들이 어떤 식으로 일 하는지 들을 수 있어 좋았다.

• 앵귤러 공부 위해서

1. 디렉티브 등 템플릿 문법 숙지해야함
2. RxJS 공부해야함

• RxJS 는 비동기적 데이터 흐름을 한 곳에서 조작할 수 있음

• Dependency Injection으로 다형성

• UX

  1. 예상 가능한 동작
  • 뒤로가기시 스크롤 복원
  • 모바일 Thumbs zone
  2. SEO/SMO

• Observable 공부하기

• 도서

  • 하스켈로 배우는 함수형 프로그래밍
  • 클린 코드
  • 실용주의 프로그래머
  • 프로그래밍 심리학

• 함수형 프로그래밍이 왜 CPU보다 메모리를 많이 쓰는지 알기

AngularJS에는 60여개의 built-in Pipe가 있었으나 Angular는 9개의 built-in pipe를 지원한다. 나머지 기능은 pipe를 직접 구현하여 사용할 수 있다.

Today I Learned

• Angular 계층적 구조를 가진 Component 간의 Data 통신을 Service로 한다는 것을 알았다.
• Angular의 Service는 전체 프로그램에서 하나의 Instance만을 가지는 Singleton이기 때문에 상태 관리가 가능하다.