[Day 16] 로그인창 구현 코드 리뷰

활기찬 월요일이 돌아왔다! (멋사로 월요병 극복,,?!)

오늘은 큩재현님과 오전에 CSS 설계기법을 배운 후

오후에는 위니브 로그인창 구현 과제에 대해서 코드리뷰하는 시간을 가졌다.

 

구현 과제

 

로그인창, 드롭박스, 밴딩머신 과제를 한꺼번에 하느라 정신없었던 지난주..

주말에 가까스로 로그인창 구현을 어찌저찌 해냈는데

오늘 바로 코드리뷰 하는 시간을 가졌다.

다른 아기사자 분들이 한 코드를 봤는데, 자바스크립트 기능도 넣으신 분들이 많아서

정말 대단하다고 느꼈다..(멋지다 증맬,,,,저도 곧 따라갈게유.,,)

 

우리 아기사자(쌔)비지님들의 리뷰가 끝나고

재현님이 짠 (*정석*)코드를 봤는데

로그인 버튼이나 x 버튼 등 재활용이 가능한 부분에 대해서 모듈화를 따로 해놓으셨다!

재현님의 짠 코드를 보며 모듈화의 중요성을 체감했고

코드가 이렇게 깔꼼할 수도 있구나라는 것을 느꼈다.

 

이번 코드리뷰와 재현님의 코드를 보며 과제에서 내가 잘했던 점과 개선할 점을 정리해보려고 한다.

 

1. 잘한 점🥕

 

1) 모달창의 input 태그 적을 때 label 태그도 같이 적어준 점

(단, 모듈화 시 input만 있는 개별 파일에는 label 뿐만 아니라 fieldset 태그도 추가하면 더 시멘틱해진다!)

 

(적다보니 한 가지밖에 없네...?ㅎ)

 

 

2. 개선점➰⭐

 

1) 로그인 페이지와 모달창 html을 한꺼번에 적지 않은 점(js 필요)

 

로그인 페이지 상태에서 모달창이 뜨는 것이므로 한 페이지 안에 있어야 되는데,

단순히 구현만 생각하고 한 html 파일에 적는 것은 생각지 못했다.

 

[개선]

로그인 페이지를 크게 main태그로 묶고 그 다음 모달창을 크게 article태그로 적는다.

여기서 article의 class를 modal-login과 on 두 개를 주는데, 

CSS에선 .modal-login을 display:none;으로 설정하는 반면,

.modal-login.on 은 display:block; 으로 설정해준다.

 

클래스 on의 유무로 보일지 말지를 결정하는 건데,

이를 자바스크립트를 통해 제어한다.

 

아래의 자바스크립트 코드와 같이 toggle을 통해 제어할 수 있다.

const targetModal = document.querySelector(".modal-login");
        document.querySelector('#appLogin .btn-login').addEventListener('click', (e) => {
            toggleModal()//로그인 창을 누르면 'on'을 켬(add)
        });
        document.querySelector('.modal-login .btn-close').addEventListener('click', (e) => {
            toggleModal() //닫기창을 누르면 'on'을 끔(remove)
        });
        function toggleModal() {
            targetModal.classList.toggle('on');
        }

 

모달창이 뜰 때 바탕이 어두워지는 효과는

modal-login에 가상요소 before을 주어서

다음과 같이 효과를 줄 수 있다.

.modal-login::before {
    display: block;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    opacity: .7;
}

 

2) 체크박스(로그인상태유지)는 input type="checkbox"를 이용하자

 

그런 다음 재현님은 체크박스 input 클래스에 가상요소 before을 통해

체크박스이미지를 background-image를 통해 주셨다. 

그리고 :checked 라는 가상클래스를 활용해 체크된 체크박스 이미지를 넣어주셨다.

.form-login .labl-hold::before {
    display: inline-block;
    content: "";
    width: 22px;
    height: 22px;
    margin-right: 8px;
    vertical-align: -5px;
    background-image: url("images_login/icon_check_empty.png");
}

.form-login .inp-hold:checked+.labl-hold::before {
    background-image: url("images_login/icon_check.png");
}

 

3) -또는- 구분선

3-1) flex-grow를 이용한 종찬님 방법🎃

flex-grow를 통해 안의 내용이 늘어나나 줄어드는지에 상관없이 유연하게 구분선을 조절할 수 있게 된다!

(갓종찬님,,,)

 

flex-gap을 이용하는 방법과

-gap을 이용하지 않고 네거티브 마진을 통해 구현하는 코드 둘 다

보여주셨다!!

See the Pen 라인이 포함되어있는 구분선 by VEAMCAMP (@veamcamp) on CodePen.

 

 

(항상 어려운 점이 있을 때마다 디코에 나타나 도움을 주시는 *종찬님* 정말 감사드립니다!!)

 

3-2) 큩재현님 방법

소셜로그인 전체 섹션의 가상요소 before과 after를 통해 구분선을 만드셨다.

구분선의 width를 calc() 함수를 사용해서 값을 적어주셨다!

 

.cont-sns-login::before {
    content: "또는";
    display: block;
    width: 52px;
    height: 18px;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #fff;
    text-align: center;
    z-index: 10;
}

.cont-sns-login::after {
    content: "";
    display: block;
    width: calc(100% - 48px);
    position: absolute;
    top: 9px;
    height: 1px;
    margin-top: -1px;
    background-color: #C4C4C4;
}

4) 소셜 로그인 버튼들 ul>li 로 좀 더 시멘틱하게

(나는 button들로 나열만 해놨당...헷)

 

 

---

3. ➰⭐그밖의 꿀팁➰⭐

 

➰ 앵커 태그의 href를 적을 때 #none 보단 자바스크립트의 void 객체를 이용해서

href="javascript:void(0);"></a> 를 적는게 더 효율적(none이라는 id가 있을 경우 부적합하기 때문)

 

➰아무리 화면 상에 앞단에 있는 요소라도 스크린리더가 효율적으로 읽는 순서에 따라 배치시킬 필요가 있다.

(예. 모달 창의 x버튼 => 모든 요소를 읽고 그 다음에 x를 누르는게 더 효율적이기 때문에 html에서 뒷단에 배치)