A Developing Developer

DAY 18. 2ed 팀 프로젝트 4일차 본문

내일배움캠프 4기/TIL

DAY 18. 2ed 팀 프로젝트 4일차

H-JJOO 2022. 12. 7. 12:15

발표 D-2

 

완성 D-3

 

예상은 했던 비보가 들려왔다.

 

mypage 를 담당했던 K 팀원께서 탈주하셨다.

 

SA 작성 당시 열정적으로 와이어 프레임을 작성하던 모습을 생각하면 실감이 나지 않는다.

 

덕분에 mypage 페이지의 기능을 내가 담담하게 되었다.

 

오늘 로그인 기능과 회원가입 정규식 기능을 완성해서 다행이다.

 

하지만 예상치 못했던 업무 추가에 멘탈이 조금 흔들렸고, 생각처럼 잘 되지도 않아서 큰일이다.

 

새벽 2시까지 작업했지만 삽질만 한 결과였다.

 

(그래도 팀원의 도움으로 약간의 힌트를 얻어서 5일차때 어떻게든 마무리 할수 있을거 같기도 하다.)

 

아! 그리고 이른 오후에 팀원 탈주 소식과 더불어 DB 연결문제로 타임어택 AWS RDS 생성하기 미션이 주어졌다.

 

팀원들과 함께 힘을 합쳐서 겨우 끝을 보아가는데, 무언가 체크를 안했는지 정상 작동이 되지않아서, K 튜터님의 도움으로 RDS 를 생성했고, 그 RDS 에서 팀 프로젝트 DB를 운용하였다.

 

AWS 관련해서도 공부해서 정리해봐야겠다.

 

============================================================================================

- 회원가입 정규 표현식 (javascript)

{
    //정규 표현식 (Regular expression)
    const signupFrmElem = document.querySelector('#signup_frm')

    const idRegex = /^([a-zA-Z0-9]{4,15})$/;//대소문자 + 숫자 조합 4~15글자
    const pwRegex = /^([a-zA-Z0-9!@_]{4,20}$)/;//대소문자 + 숫자 조합 4~15글자
    const nmRegex = /^([가 -힣]{2,10})$/; //`한글 2~10자 조합 (영어, 특수기호X)
    const emailRegex = /^(?=.{8,50}$)([0-9a-z_]{4,})@([0-9a-z][0-9a-z\-]*[0-9a-z]\.)?([0-9a-z][0-9a-z\-]*[0-9a-z])\.([a-z]{2,15})(\.[a-z]{2})?$/; // 이메일

    if (signupFrmElem) {

        signupFrmElem.addEventListener('submit', (e) => {
            const inputId = signupFrmElem.userId.value;
            const inputPw = signupFrmElem.password.value;
            const inputCheckPw = signupFrmElem.checked_password.value;
            const inputNm = signupFrmElem.name.value;
            const inputEmail = signupFrmElem.email.value;


            if (!idRegex.test(inputId)) {
                console.log(idRegex)
                console.log(inputId)
                alert('아이디는 대소문자, 숫자조합으로 4~20자 되어야 합니다.');
                e.preventDefault();
                document.querySelector('#userId').scrollIntoView();
            } else if (!pwRegex.test(inputPw)) {
                alert('비밀번호는 대소문자, 숫자, !, @, _ 조합으로 4~100자 되어야합니다.');
                e.preventDefault();
                document.querySelector('#password').scrollIntoView();
            } else if (inputPw !== inputCheckPw) {
                alert('비밀번호 확인을 확인해주세요.');
                e.preventDefault();
                document.querySelector('#checked_password').scrollIntoView();
            } else if (!nmRegex.test(inputNm)) {
                alert('이름은 한글 조합으로 2~10자 여야합니다.');
                e.preventDefault();
                document.querySelector('#name').scrollIntoView();
            } else if (!emailRegex.test(inputEmail)) {
                alert('이메일 형식을 확인해주세요. Ex) abc123@examle.com');
                e.preventDefault();
                document.querySelector('#email').scrollIntoView();
            } else {

            }

        });
    }


}

javascript test()  메서드를 활용해서 Regex, 사전에 규칙을 정해둔 정규식과 입력한 값의 조건이 다르면 submit 을 막고 어떤 문제가 있는지 경고창을 띄어주는 기능이다.

 

https://regexr.com/

 

RegExr: Learn, Build, & Test RegEx

RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp).

regexr.com

위 사이트는 정규표현식을 테스트 할 수 있는 곳이다.

============================================================================================

오늘 오전에는 위의 정규표현식을 완성하였고, 오후에는 탈주이슈 DB 이슈 등과 탈주 이슈에 이은 업무 증가 이슈로 정신이 없었다.

 

저녁부터 새벽2시까지 붙잡고 삽질했지만 결국 삽질이였다.

 

5일차때는 팀원의 도움(?)을 참고해서 기능을 구현해보자.