study

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

회원 가입 폼 - 정보 UX 선택하기 예전 화면 방식을 살펴보면 정보를 전부 입력하고 submit 버튼을 눌렀을 때, 입력된 정보들의 밸리데이션을 체크하고 최종적으로 사용자에게 결과를 반환해준다. 하지만 해당 방식은 잘 사용하지 않는다. 사용자에게 가능한 즉시 결과를 반환해주고 수정할 수 있도록 하는 추세이다. 또한 한번도 입력하지 않았을 시에는 밸리데이션 체크를 하지않으며 한번 이상 입력을 하고 나왔을 시엔 밸리데이션 체크를 하도록 설계한다. export default class TextField { private template = template; private container: string; private data: Props; private updated: boolean = false; pri..

2022. 2. 25. 10:11

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