📒 [ TIL ] 2022.05.06_14일차 # 인스타 UI클론(5)

[ 2022-05-06 (금) 오늘의 TIL ]

[ Today Project ]

• 인스타그램 UI클론 백엔드개발 + 프론트 추가개발
  : 이번 프로젝트는 팀프로젝트로 시작합니다.

[ Today Learn ]

• 미흡하게 정리된 html 및 CSS 추가 개발
• 회원가입페이지 추가 개발

✏️ 내가 배운것, 얻은것

addClass와 removeClass를 이용하여 html이동없이 화면전환만 하기

🧩 적용 예시

로그인페이지에서만 보여야할 html요소들을 제외한 나머지html은 'is-hidden'이라는 클래스를 붙여 display:hidden을 적용하여 회원가입페이지에서 보여야할 html요소들을 숨겼다.

<style>
        .is-hidden {
            display: none;
        }
</style>

가입하기에
로그인에 함수를 붙여서 가입하기를 누르면 가입할수있는 화면으로,
로그인을 누르면 로그인할수있는 화면으로 전환할 수 있게 함수를 적용했다.
가입하기를 누르면 로그인html이 사라지고, 로그인하기를 누르면 회원가입html이 사라진다.

function toggle_sign_up() {
            $('#no-sign').addClass('is-hidden')
            $('#sign-box').removeClass('is-hidden')
            $('#id_value').addClass('is-hidden')
            $('#password_value').addClass('is-hidden')
            $('#regi-id').removeClass('is-hidden')
            $('#regi-pw').removeClass('is-hidden')
            $('#btn_register').removeClass('is-hidden')
            $('#btn_login').addClass('is-hidden')
            $('#forget_pw').addClass('is-hidden')
            $('#register_text').removeClass('is-hidden')

        }

function toggle_sign() {
            $('#sign-box').addClass('is-hidden')
            $('#no-sign').removeClass('is-hidden')
            $('#id_value').removeClass('is-hidden')
            $('#password_value').removeClass('is-hidden')
            $('#regi-id').addClass('is-hidden')
            $('#regi-pw').addClass('is-hidden')
            $('#btn_register').addClass('is-hidden')
            $('#btn_login').removeClass('is-hidden')
            $('#forget_pw').removeClass('is-hidden')
            $('#register_text').addClass('is-hidden')
        }

회원가입기능 중 비밀번호에대한 정규표현식 적용하기
(영문과 숫자 필수 포함, 특수문자(!@#$%^&*) 사용가능 8-20자)

🧩 적용 예시

function is_password(asValue) {
            var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z!@#$%^&*]{8,20}$/; //정규표현식
            return regExp.test(asValue);
        }

[👍 오늘의 결과물 ]

• 로그인화면
  

• 회원가입화면
  

🌱 느낀 점

addClass 와 removeClass를 이용해서 함수를 만든 적은 처음이었는데, 막상 적용해보니 쉬웠다. 근데 함수가 좀 정리가 안되고 너무 장황한느낌이 있어서 더 짧게 코드를 짜는 방법은 없는지 리팩토링을 해봐야할것같다고 생각했다. 분명 장황한 코드를 짧게 정리하는 방법이 있을것이다.
정규표현식을 쓰는 것도 다음에는 아이디부분에도 적용시켜볼것이다.
이제 프론트쪽은 거의 다 끝나서 백엔드쪽으로만 오로지 집중할수있을것같다.

🎁 자세한 코드는 Moonmoo 에 게시했습니다