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

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

 

회원 가입 폼 웹앱은 index.ts 파일에 app.render() 메소드를 통해 app.ts에 정의 되어있는 기능들의 렌더링이 일어난다는것을 알게 되었다. app.ts 에 웹앱을 이루는 모든 파일들이 정의되어 있기 때문에 폴더 구조를 토대로 사용되는 파일들을 알아볼 것이다.

 

- types 폴더 - address.ts - common.ts - index.ts - user.ts

 

회원 가입 웹앱에 사용되는 타입들을 모아 놓은 폴더이다.

 

(address.ts)

export type Address = {
  zip: string;
  address1: string;
  address2: string | '';
};

export type DaumAddress = {
  address: string;
  autoJibunAddress: string;
  roadAddress: string;
  sigunguCode: string;  
}

회원 가입 폼에 있는 주소 입력창에 대한 타입 정의이다. 회원 가입 폼에 입력 하는 주소 형태의 타입과 웹앱에서 사용되는 주소에 다음 지도 API에서 가져오는 데이터 타입의 구조를 정의 해놓은 파일이다.

 

(common.ts)

export type AnyObject = {
  [key: string]: any;
}

export type ValidateRule = {
  rule: RegExp;
  match: boolean;
  message: string;
}

AnyObject는 웹앱에서 사용되는 object로 사용되는 데이터 타입을 정의했다. 어떤 데이터 타입이 올지 모르게때문에 오브젝트 형태로 받아올 수 있도록 정의했고 ValidateRule은 벨리데이션 구조를 정의하는 타입으로 지정했다.

 

(index.ts)

export * from './common';
export * from './address';
export { default as User }  from './user';

type을 정의한 types 폴더에 각 파일들을 사용하는 파일에서 한번에 import하여 사용하기 편하도록 export를 모아놓은 파일이다.

 

(user.ts)

import { Address } from './address';

type User = {
  name: string;
  id: string;
  email: string;
  password: string;
  address?: Address;
};

export default User;

회원 가입의 User에서 사용되는 타입을 정의 해놓은 파일이다. 이름, 아이디, 이메일, 비밀번호 등을 받고 주소의 경우는 address.ts에서 import 해오며 옵션 형태로 입력을 받거나 안받을 수 있는 형태이다.

 

 

 

 

https://bit.ly/37BpXiC

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

 

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

 

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