yoonminsang / baemin-2

우아한 테크캠프 4기 1주차 팀 2 - 안준범, 윤민상

baemin-2

우아한 테크캠프 4기 1주차 팀 2 - 안준범, 윤민상

baemin2 팀 프로젝트 보러가기

팀원 소개

안준범

누구나 쉽게 쓸 수 있는 사용성에 대해 고민하는 안준범입니다. 반갑습니다! 취미 : 테니스 경기 관람, 축구

윤민상

FE 개발자가 되고 싶은 27살 개발자 준비생 윤민상입니다. 반갑습니다! 취미 : 헬스

프로젝트 소개

우리 팀 장점

• 자바스크립트 함수를 가능하면 잘게 쪼개고 작은 기능을 하도록 만들었다
• Custom DB를 만들어서 처음에 적용했던 embedded DB인 lowdb 라이브러리 대신 사용
• 바닐라 자바스크립트 모듈화 React, Redux 스타일로 작성(약관 동의 페이지)

페이지별 기능

• 메인 페이지

로그인 페이지 이동
로그인 시 닉네임 나오게 ui 변경
로그아웃 기능

• 로그인 페이지

이메일 비밀번호 유효성 검사
서버로 로그인 요청(이메일 또는 비밀번호 틀릴시에 alert창 띄우기

• 회원가입 페이지(약관 동의)

자바스크립트 모듈화(리액트, 리덕스 패턴)
input 체크아웃, 라디오 구현(전체동의, 체크박스 선택 구현)
필수항목 체크 시 다음 항목 활성화

• 회원가입 페이지(인증번호)

폰번호 입력 시 자동으로 대시(-) 삽입
폰번호 정규식 구현(숫자, 대시(-) 제외)
입력 완료 시 체크 활성화
인증번호 랜덤 생성(settimeout)
인증번호 다시 받기 구현
모두 입력시 다음 버튼 활성화

• 회원가입 페이지(정보 입력)

입력시 체크버튼 활성화
인풋 삭제 기능
이메일 정규식(기본적인 건 구현했지만 구글링 후 좀 더 향상시킨 정규식 적용)
이메일 서버로 중복확인
비밀번호 루카스 조건에 따른 유효성 검사
생년월일 입력 시 자동으로 점(.) 삽입
생년월일 정규식(숫자, 점(.) 제외)
생년월일 유효성 검사
모든 정보 입력시 완료 버튼 활성화
완료 버튼 클릭 시 서버로 회원가입 요청
서버에서 이메일, 닉네임 중복확인.

서버 기능

• 로그인

passport session 사용해서 로그인 구현
bcrypt 사용해서 비밀번호 암호화
db를 직접 구현(json파일)
db 폴더 및 파일 존재하지 않으면 fs 모듈로 생성

• 에러시 처리

서버에서 에러 처리 후 에러를 pug에 적용시켜 에러페이지 렌더링
404 페이지 따로 구현