IT 회사에서 즐겁게 지내기!

울산을 방문한 김에 울산에서 방탈출을 했다.

울산에서의 3번째 방탈출~

비밀의 무덤을 클리어했으므로 기고만장하여.

더 어려운 난이도에 도전.

트랩코리아에서 가장 어렵다는 테마!

트랩코리아의 아마겟돈

업체난이도: ★★★★★

체감난이도: ★★★★★ (5/5)

스토리: ★★ (2/5)

추천도: ★★★☆ (3.5/5)

Player 참고: 방탈출 경력 22회 부부

Comment: (성공?/3 hint)

 Jason: "탈출 성공인가 아닌가... ㅜ"

 Julie: "다른 우주선 테마도 또 해보고 싶다..."

Intro:

지구는 지금 엄청난 속도로 지구를 향해 돌진하는 

거대 소행성으로 인해 위험에 처해있습니다.

다행히 며칠 전 과학자들이 

충돌 예상 궤도를 계산했고 대책을 만들어 냈습니다.

로켓을 소행성으로 발사하여 

소행성과 충돌하게 한 후 궤도를 바꾸어 

지구로부터 멀어지게 하는 것이 그들의 계획입니다.

하지만 불행하게도 지구의 로켓발사대는 

대부분 운석들로 인해 파괴된 상태 입니다.

버려진 지하 군사 벙커에 설치된 복원장치를 

발견할 수 있는 것은 오직 당신의 팀밖에 없습니다.

당신 팀의 임무는 벙커를 발견하고 

시스템이 어떻게 동작하는지 알아내어 

늦기 전에 로켓을 발사하는 것입니다.

남은 시간은 60분! 

인류의 운명은 당신 손에 달려있습니다.

공간은 넓은 편이다.

무서운 요소는.. 조금(?) 있다.

Julie가 몇 가지 소품과 소리에 놀랐...  

활동성은 높지 않아서 복장은 편한대로~

장치 자물쇠는 5:5 정도였다.

다른 방탈출보다 도구를 좀 많이 사용했다.

대부분의 문제는 명확한 편이었다.

1~2문제 정도 서로 잘 연결이 안되는 느낌?

문제를 위한 문제가 좀 포함되어있다.

열쇠가 대체 왜 그렇게 거기에...

차별화 요소가 될 것 같기도 한데...

눈에 보이는 열쇠를 쓰지 못하다니 ㅠ

시간을 가장 많이 사용한 듯 하다.

호불호가 클 듯한 녀석이다.

알면 쉬우나 모르면 1시간 내내해도... ㅠ

어려운 난이도 답게 문제가 좀 많은 편.

5분에 1문제 정도 풀어줘야 겨우 탈출한다.

60분 다지나서 딱 마무리...

트랩코리아의 별4개 테마인 비밀의 무덤 

탈출했었다며 조금 오만했나보다.

그런데 사실 힌트가 좀 늦는 편이었다.

무전기로 힌트를 얻는다.

하지만 대답없는 외침이 여러번.. ㅠ

직원(아마 사장님?)분이 1분 뿐이라 그런듯.

방정리, 손님응대, 힌트 동시에 하기에는...

서비스는 좀 아쉬운 편.

친절하시긴 하다.

시간 꽉차게, 알차게 풀었는데도 

뭔가 몰입이 좀 덜되는 느낌이 들었다.

요즘 감성테마 자주해서 그런가?

아무튼 아래 인증샷과 함께 마무리.

탈출 인증샷

아.. 그리고 트랩코리아가 한국에서 철수하는 듯 하다.

홈페이지도 정리되었고...

각 지점도 언제 없어질지 모르니

관심 있으면 서두르는게 좋겠다.

이미지출처:

구글 이미지 검색 "트랩코리아 아마겟돈"

이번에는 Angular Forms 모듈을 좀 더 활용해보도록 하죠.

유효성 검증에 대해 다뤄볼까 합니다.

보통은 keyup이나 focusout event를 받아서 처리합니다.

Angular에서는 Validator라는 것을 사용합니다.

0. Component에 Import Validators

Validators 모듈을 가져옵니다.

import { FormControl, Validators } from '@angular/forms';
...

@Component({
  ...
})
export class BudgetComponent implements OnInit{ ... }

1. Form Control에 Validators 추가

Form Control을 생성할 때 Validators를 추가합니다.

import { FormsControl, FormGroup, Validators } from '@angular/forms';
...
@Component({
    ...
})
export class BudgetComponent implements OnInit {
    ...
    consumptionForm = new FormGroup({
        amount: new FormControl('', [
            Validators.required,
            Validators.pattern(/^\d+$/)
        ]),
        desc: new FormControl('')
    });
    ...
}

FormControl 생성자에 2번째 변수로 넣어줬죠.

값을 입력했는지 여부를 required로 검증하구요.

Regular Expression 패턴 검증도 합니다.

amount에 숫자만 들어가는지 검증합니다.

2. Template에 Feedback 추가

유효성에 따라 적절한 Feedback을 줍니다.

<form class="consumption-form" (ngSubmit)="onAdd()" 
[formGroup]="consumptionForm">
  <mat-form-field>
    <input matInput
           formControlName="amount"
           placeholder="Amount" 
           type="text">
      <mat-error 
          *ngIf="consumptionForm.controls.amount.hasError('pattern') 
          && !consumptionForm.controls.amount.hasError('required')">
        <strong>Numbers</strong> only
      </mat-error>
      <mat-error
          *ngIf="consumptionForm.controls.amount.hasError('required')">
        Amount is <strong>required</strong>
      </mat-error>
  </mat-form-field>
  ...
  <button [disabled]="!consumptionForm.valid" 
          mat-stroked-button 
          color="accent" type="submit">Add</button>
</form>

mat-error가 아닌 span이어도 괜찮습니다.

material design 적용을 위한 태그입니다.

중요한 부분은 *ngIf directive 입니다.

(http://dschci.tistory.com/89)

FormControl에 오류가 있을 때만 표시되죠.

그리고 FormGroup도 영향을 받습니다.

FormGroup내 FormControl에 오류가 있다면

FormGroup도 유효하지 않은 상태가 되죠.

그에 따라 버튼을 disable 시켰습니다.

Angular에는 다양한 Validators가 준비되어있습니다.

자주쓰는 email 이나 최소, 최대길이 등이죠.

Validator를 직접 만들수도 있습니다.

boolean을 리턴하는 ValidatorFn을 만들면 되죠.

class Validators {
  static min(min: number): ValidatorFn
  static max(max: number): ValidatorFn
  static required(control: AbstractControl): ValidationErrors | null
  static requiredTrue(control: AbstractControl): ValidationErrors | null
  static email(control: AbstractControl): ValidationErrors | null
  static minLength(minLength: number): ValidatorFn
  static maxLength(maxLength: number): ValidatorFn
  static pattern(pattern: string | RegExp): ValidatorFn
  static nullValidator(control: AbstractControl): ValidationErrors | null
  static compose(validators: (ValidatorFn | null | undefined)[] | null): ValidatorFn | null
  static composeAsync(validators: (AsyncValidatorFn | null)[]): AsyncValidatorFn | null
}

Validation이 적용된 화면은 아래와 같습니다.

동작 화면

작업 중인 소스는 아래에서 확인가능합니다.

소스주소: https://github.com/jsrho1023/account-book

정보출처:

https://angular.io/api/forms/Validators

프론트엔드 개발에서 Form은 필수적으로 사용됩니다.

로그인을 한다든지, 질문이나 댓글을 남기는 등 말이지요.

Angular 역시 Form을 쉽게 개발하도록 돕습니다.

데이터 바인딩, 유효성 검증, 에러 처리 관점에서요.

그럼 코드와 함께 보도록 하겠습니다.

0. Import ReactiveForms Module 

익숙한 과정이죠?

Angular의 모듈을 가져옵니다.

이번에는 Form에 관련된 모듈입니다.

app.module.ts 파일을 편집합니다.

import { FormsModule } from '@angular/forms';
...

@NgModule({
  ...
  imports: [
    ReactiveFormsModule,
    ...
  ],
  ...
})
export class AppModule { }

1. Component ts 파일에 form control 추가

이제 컴포넌트 파일에 FormControl을 만들어줍니다.

html(템플릿)에 바인딩하기 위함입니다.

import { FormControl, FormGroup } from '@angular/forms';
...

@Component({
    ...
})
export class BudgetComponent implements OnInit {
    ...
    consumptionForm = new FormGroup({
        amount: new FormControl(''),
        desc: new FormControl('')
    });
    ...
}

보통 form은 여러개가 묶여있죠?

그룹핑 하기 위한 FormGroup도 사용하였습니다.

2. Template html에 form 태그 추가

말씀드렸듯이 html에 form을 추가하고 바인딩합니다.

fromGroup 속성에 컴포넌트의 FormGroup을 바인딩합니다.

익숙한 Property Binding이죠?

(http://dschci.tistory.com/81)

그리고 각각의 input에 FormControl을 할당해줍니다.

formControlName이라는 속성에 이름을 넣습니다.

저는 각각 amount, desc라고 명명했죠.

...
<form class="consumption-form" 
            (ngSubmit)="onSubmit()" 
            [formGroup]="consumptionForm">
  <mat-form-field>
    <input matInput
           formControlName="amount" 
           placeholder="Amount"
           type="text" required>
  </mat-form-field>
  <mat-form-field>
    <input matInput
           formControlName="desc" 
           placeholder="Description" 
           type="text">
  </mat-form-field>
  <button mat-raised-button color="primary" type="submit">Add</button>
</form>
...

material을 위한 태그와 속성은 없어도 동작합니다.

(mat-form-field, matInput)

그럼 이제 마지막으로 submit 동작을 정의해줍니다.

3. Component에 submit 로직 추가

위 html에 보면 submit 타입의 버튼이 있습니다.

그 버튼이 눌렸을 때의 동작입니다.

form의 ngSubmit에 바인딩이 있죠.

ngForm의 ngSubmit Event Binding입니다.

(http://dschci.tistory.com/83)

컴포넌트의 onSubmit 메서드와 연결되어있죠.

아래 코드입니다.

control에 입력된 값에 접근하는 방법입니다.

FormGroup이 컴포넌트에 정의되어있죠?

쉽게 아래와 같이 접근 가능합니다.

...
@Component({
    ...
})
export class BudgetComponent implements OnInit {
    ...
    onSubmit() {
        let amount: number = Number(this.consumptionForm.controls.amount.value)
        let desc: string = this.consumptionForm.controls.desc.value
        ...
    }
}

위는 간단한 바인딩을 통한 Form 사용이었습니다.

동작화면은 FormsModule 기능이 좀 더 사용되었습니다.

Angular Forms 동작 화면

다음에는 데이터 검증 및 에러 피드백에 대해서 써볼게요.

소스주소: https://github.com/jsrho1023/account-book