패스트캠퍼스 챌린지 27일차

회원 가입 폼 - 밸리데이션 구조 설계

 

지난번까지 회원 가입 폼의 전체적인 구조를 알아봤다. 앞으로는 동작의 순서대로 하나하나 파일의 진행 순서와 기능에 대해 순차적으로 동작을 파악한다.

 

index.html에 대표적으로 script 태그에 삽입되는 파일은 index.ts 파일인데 index.ts 파일은 글로벌로 설정되는 것들과 App 오브젝트의 인스턴스를 생성하고 render 라는 메소드를 실행했다.

 

import { AnyObject } from './types';
import App from './app';

declare global {
  interface Window {
    Handlebars: {
      compile: (template: string) => (data: AnyObject) => string;
    },
    daum: any,
  }
}

const app = new App('#root', {
  title: 'Javascript & TypeScript Essential Chapter 5 - Sign up'
});

app.render();

위 코드에서 AnyObject와 App을 import 했다. AnyObject는 시맨틱처럼 웹앱에서 사용되는 어느 오브젝트이건 해당하는 오브젝트를 포함하는 타입을 지정한 것이다. App은 index.ts 파일에서의 작업을 거쳐서 app이라는 인스턴스를 생성하고 render 메소드를 실행한다. 여기서 app 인스턴스는 생성자함수로 root라는 문자열과 title이라는 key와 문자열 value를 가진 오브젝트를 파라미터로 전달한다.

 

여기서 root는 index.html에 root라는 아이디를 가진 태그에 사용될 것, title에 "Javascript & TypeScript Essential Chapter 5 - Sign up" 문자열을 반환 한다는 것을 예상할 수 있다. 또 app 인스턴스의 메소드로 render 함수를 실행하는데, 렌더링 한다는 것을 알수는 있지만 어떤 작업을 하는지 어느 부분을 렌더링하는지 등의 상세한 작업을 알 필요는 없다. 다만 index.ts 파일에서는 app 인스턴스를 생성하고 render 함수를 실행하는 작업을 한다.

 

 

 

 

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential