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

로그인 앱 설계

 

로그인 앱 설계 파트에서는 여러가지 API들을 호출하는 관점에서 어떻게 코드를 작성할 것인가에 대해, 두번째는 이전의 회원가입 웹앱에서 사용하고 구분했었던 필드부분(Text, Password, Address 등)의 클래스에서 공통적으로 사용했던 (vaildate나 render, template와 같은) 반복적인 처리를 어떻게 할 것인가에 대해 다룬다.

 

또한 이번 장에서는 API 여러처리를 위해 서버를 갖는다. node.js로 구성되어 있으며 서버를 거쳐야하는 여러가지의 처리를 제어할 것이다.

 

- 폴더 구조

server
  |- index.js
src
  |- page
    - login.js
    - login.template.js
    - page-not-found.js
    - page-not-found.template.js
    - profile.js
    - profile.template.js
  |- utils
    - api.js
    - index.js
  |- views
    - core.js
    - text-field.js
    - text-field.template.js
  - constant.js
  - index.js
  - store.js

이전까지의 폴더구조와 다르게 루트 경로에 server폴더와 안에 index.js라는 서버처리를 할 파일이 있다. 또 같은 경로엔 마찬가지로 src폴더가 있으며 클라이언트 사이드에서 사용하는 화면 처리 부분은 src 하위에서 작업한다. 먼저 index.js는 라우팅 처리를 하는 담당하는 파일이다. store.js는 스토어 패턴이라해서 getter와 setter로 이루어져 값을 변경하거나 반환할때 전역적으로 사용할 것이다. constant.js는 vaildateRules을 정의하는 파일이고 page폴더 안에 있는 파일들은 로직처리를 하는 파일과 템플릿을 지정한 파일 쌍으로 로그인, 404에러 페이지, 프로필 등으로 나누어져 있다. 또한 utils 폴더안의 api.js 파일은 api를 사용할 때 공통적으로 사용하는 get과 post방식의 구조를 정의한 파일이며 index.js 파일은 공통적으로 사용할 setTimeout을 통해 비동기처리를 정의한 파일이다.

 

로그인 파트에서 아이디를 입력할 때와 패스워드를 입력하는 필드를 사용하는데 views 폴더 하위에 core.js 파일을 정의했다. 회원가입 웹앱 부분에서는 텍스트나 패스워드, 어드레스 등을 따로 구분했지만 해당 파트에서는 core.js 파일에서 해당하는 파일의 필드의 공통적으로 사용되는 부분을 정의하고 다른 파일에서 상속을 통해 사용하여 코드를 줄이고 구조화 할 수 있다.

 

 

 

 

https://bit.ly/37BpXiC

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

 

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

 

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