Project (09.05) - 로그인 기능 (addEventListener, DOMContentLoaded, querySelector)

1. 동작

1. 사용자가 로그인 버튼을 클릭하면 로그인 팝업창이 나타나고, 화면 배경이 어두워짐.
2. 사용자가 팝업창을 닫는 버튼을 클릭하면 팝업창과 어두운 배경이 사라진다.

<script>
	document.addEventListener('DOMContentLoaded', function() {
		// 로그인 팝업 열기
		document.querySelector('.nav-login-button').addEventListener(
				'click',
				function() {
					document.querySelector('.login-popup').classList.remove('hidden');
					document.querySelector('.popup-bg').classList.remove('hidden');
				});
		// 로그인 팝업 닫기
		document.querySelector('.login-popup .close-popup').addEventListener(
				'click',
				function() {
					document.querySelector('.login-popup').classList.add('hidden');
					document.querySelector('.popup-bg').classList.add('hidden');
				});
            });
</script>            

처음에는 배운대로 addclass, removeclass로 적용시켜보았는데 레이아웃이 여러개고 충돌해서 클릭이 전혀 안됨.. 그래서 구글링, gpt 이것저것 찾아봐서 짜보았다.

아직 세세하게 함수를 자세히 아는건 아니고 코드를 가져와서 수정한 것 밖에 없어서 공부해서 내 코드로 만들어보자

 

---

 

위에서 document는 웹 페이지 전체
addEventListener('DOMContentLoaded', function() {...}) -> 웹 페이지가 완전히 로드된 후에 어떤 작업을 수행하라는 명령어

addEventListener()는 document 요소에 event를 부여할 때 사용한다.

1. document.addEventListener('이벤트', 함수명);
2. document.addEventListener('이벤트', 익명함수정의);
3. document.addEventListener('이벤트',()=>{});

 

여기서 DOMContentLoaded는 페이지가 다 준비되었을 경우 발생하는 이벤트이다.

즉, HTML 요소가 모드 로드된 후에 이 안에 있는 코드가 실행, 이 코드를 사용하지 않을 경우 페이지가 완전히 로드되기 전 버튼이나 팝업창을 찾으려고할 때 오류가 날 수 있기에 작성

document.querySelector('.nav-login-button') -> nav-login-button은 네비게이션의 로그인 버튼 class이며 이를 elemetn를 반환하고, 만약 일치하는 요소가 없을 경우는 null을 반환

.addEventListener('click', function() {...})

• click-> 사용자가 버튼을 클릭할 때 실행되도록 하는 이벤트 function은 그 뒤 사용자가 클릭했을 때 실행됟 동작을 정의하는 익명 함수! 사용자가 버튼 클릭 시 함수 안의 동작이 실행

document.querySelector('.login-popup').classList.remove('hidden');

• 이 코드는 클래스가 login-popup인 요소를 찾아서 해당 요소의 hidden 클래스를 제거

 

---

 

아직 위와 같은 코드가 어색하지만 계속 쓰다보면 익숙해지겠지.. 새로운거에 어려워하지말고 이것저것 여러 코드 접해보자