study

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

로그인 앱 설계 지난번까지 로그인 앱에 대한 폴더 구조를 알아봤다. 지금까지 했던 작업들과 다르게 로그인 앱 설계 부분에서는 node.js를 통한 서버 환경을 구현했다. server 폴더 하위에 index.js 파일에 서버를 구현하는 로직이 있다. const path = require('path'); const express = require('express'); const morgan = require('morgan'); const { urlencoded, json } = require('body-parser'); const { v4 } = require('uuid'); const axios = require('axios'); const app = express(); app.use(express.sta..

2022. 3. 3. 10:10

study

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

2022. 3. 2. 09:46

study

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

회원 가입 폼 - 정보 UX 선택하기 회원가입 폼에서도 그렇지만 어떤 기능을 하는 웹에는 API를 사용하는 경우가 많다. API를 구현하는 것은 그렇게 어렵지 않지만 사용하려고 하는 API가 만들려고 하는 서비스에 부합하는 기능을 지원하는지, 해당하는 API의 지속 가능성이라던지 문서화가 얼마나 잘 되어있는지 등의 요건들을 맞추고 선택하는 것이 더 중요할 것이다. 회원가입 웹앱에서는 다음의 지도 API를 사용할 것이다. export default class AddressField { private template = template; private container: string; private data: Props; private address1?: string; private zipcode?: str..

2022. 3. 1. 19:08

study

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

회원 가입 폼 - 정보 UX 선택하기 기본적으로 buildData 메소드를 통해 기준에따라 맞는 데이터를 만들고 template에 반영하게 되면 회원가입 화면 필드에 입력된 값에 따라 변경되는 일련의 작업이 이루어진다. 이런 전체적인 구조는 비슷하지만 각 필드마다 약간의 차이가 있다. 패스워드 필드 같은 경우 기본 밸리데이션을 제외한 추가적인 밸리데이션 구조를 갖는다. import { nextTick } from '../utils'; import { ValidateRule } from '../types'; import template from './password-field.template'; import { RequireRule } from '../constant'; enum StrongLevel { ..

2022. 2. 28. 14:14

study

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

회원 가입 폼 - 정보 UX 선택하기 데이터와 기능에따라 화면을 변경하는 것으로 render 메소드와 update 메소드를 구분했다. render 메소드는 화면을 변경할 때 해당하는 컨테이너의 모든 내용을 전부 렌더링 하는 반면에 update 메소드는 해당하는 화면의 컨테이너의 기존 기능과 내용은 그대로 두고 새로운 기능이나 내용을 렌더링 한다. export default class TextField { private template = template; private container: string; private data: Props; private updated: boolean = false; private validateRules: ValidateRule[] = []; constructor(con..

2022. 2. 27. 16:26

study

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

회원 가입 폼 - 정보 UX 선택하기 회원 가입 폼에서 해당하는 필드 값들을 입력했을 때, 이벤트 핸들러에서 변경이 되는 부분을 체크하고 해당하는 부분이 맞다면 onChange 메소드를 실행하여 변경된 값을 체크하고 값을 가져오는 부분까지 진행했다. onChange 메소드에는 update 메소드를 실행하는데 update 메소드 이후에 진행에 대해 알아보겠다. export default class TextField { private template = template; private container: string; private data: Props; private updated: boolean = false; private validateRules: ValidateRule[] = []; construc..

2022. 2. 26. 22:51