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

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

 

지금까지 작업한 결과물에 해커뉴스에 관련된 하나의 웹앱을 만들었다. 지금까지 만든 웹앱의 구조는 API형태로 데이터를 받아오고 그 데이터를 SPA 형식으로 화면에 나타내는 형태였다.

 

이번 장에서는 데이터를 받아와서 출력하는 형태 뿐아니라 데이터를 입력하고 전송하는것과 밸리데이션 체크를 하는것까지의 구조이다. 기존에 만들었던 화면보다 세세한 부분에서 렌더링이 일어나기 때문에 폴더의 구조는 좀 더 복잡해진다.

src
  |- types
    - address.ts
    - common.ts
    - index.ts
    - user.ts
  |- utils
    - index.ts
  |- views
    - address-field.template.ts
    - address-field.ts
    - index.ts
    - password-field.template.ts
    - password-field.template.ts
    - address-field.template.ts
    - address-field.template.ts
  - app.template.ts
  - app.ts
  - constant.ts
  - index.ts

 

src 하위의 폴더 구조는 이렇다. index.html에서 최상위의 index.ts 파일을 기준으로 둔다. index.ts 파일에선 전역적으로 사용하는 부분과 app.ts에 있는 사항들을 렌더링한다. app.ts는 회원가입 웹앱에 초기화하거나 사용되는 밸리데이션 등을 정의하고 입력한 사항들이 전송됐을 시에 발생하는 이벤트 등이 정의되어 있다.

views 폴더에 있는 각 파일등은 입력한 사항들의 화면과 구조 등이 있으며, types 폴더에는 각 기능들의 타입이 정의 되어있다. utils 폴더에는 유틸리티성 파일, 여러 방면에 사용될 수 있는 파일을 정의한다.

 

 

 

 

https://bit.ly/37BpXiC

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

 

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

 

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