study

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

회원 가입 폼 - 밸리데이션 구조 설계 회원 가입 폼 웹앱에 사용되는 밸리데이션 구조를 체크하는 로직을 constant.ts 파일에 만들었다. 이제 이러한 각각의 밸리데이션 룰을 어떻게 적용할 것인지에 대해 정해야 한다. 하나의 필드에 하나의 밸리데이션만 들어갈 수도 있지만 여러가지의 밸리데이션을 통해 유효성을 체크해야 하는 경우가 있을것이다. export default class App { ... fields: AnyObject[]; constructor(container: string, data: AnyObject = {}) { ... this.fields = []; this.initialize(); ... } private initialize = () => { const nameField = new..

2022. 2. 24. 09:44

study

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

회원 가입 폼 - 밸리데이션 구조 설계 밸리데이션 체크 회원 가입 폼을 만들면서 각 필드의 유효성을 체크하는 항목이 필요하다. 최소 몇 글자여야하는지, 대문자인지 소문자인지, 숫자로 시작하는지 등의 유효성 체크를 하는데 있어 if~else 문을 통해 여러가지의 항목들을 체크할 수도 있지만 이러한 코드는 어떻게 기능을 구현을 해놓는다 한들 유지보수를 하거나 또 다른 기능이 추가될 시에 비용이 배로들거나 기능 구현에 어려움이 생길것이다. 그렇기 때문에 정규식(RegExp)을 사용한다. (types/common.ts) export type ValidateRule = { rule: RegExp; match: boolean; message: string; } types 폴더에 common.ts 파일에 있는 정규식..

2022. 2. 23. 10:12

study

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

회원 가입 폼 - 밸리데이션 구조 설계 views 폴더의 text-field.ts 구조 text-field는 아마 회원 가입 폼에서 가장 많이 사용하게되는 항목일 것이다. text-field.ts 파일의 구조를 알아보겠다. import { nextTick } from '../utils'; import { ValidateRule } from '../types'; import template from './text-field.template'; import { RequireRule } from '../constant'; type Props = { id: string; label: string; type: 'text' | 'email' | 'number'; placeholder?: string; text?: ..

2022. 2. 22. 10:46

study

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

회원 가입 폼 - 밸리데이션 구조 설계 app.ts의 전체적인 구조 import template from './app.template'; import { CantContainWhitespace, CantStartNumber, MinimumLengthLimit } from './constant'; import { AnyObject } from './types'; import { TextField, PasswordField, AddressField } from './views'; export default class App { template = template; data: AnyObject; container: HTMLElement; fields: AnyObject[]; active: boolean = f..

2022. 2. 21. 10:18

study

패스트캠퍼스 챌린지 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: s..

2022. 2. 20. 17:56

study

패스트캠퍼스 챌린지 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; ..

2022. 2. 19. 22:40