[js] if문으로 로그인 구현

이전의 게시글에 언급한 대로 로그인 구현에 대해서 다뤄보려고 합니다. localStorage로 정보 저장하고 불러와서 비교하는 식으로 진행하였었는데, localStorage에 정보가 저장되면 로그인/회원가입 버튼이 사라지게 했던지라 회원가입만 해도 사라지더군요. 그래서 localStorage에 대한 건 따로 개인적으로 해보고 회원가입은 Cookie로 적용하고나서 다룰 예정입니다.

 

생활코딩 web 강의를 듣지 않았다면 꼭 들어보시는 걸 추천드립니다. 처음에 접할 때(-전혀 1도 모를 때 -) 수업량에 겁에 질려서 다른 강의를 알아보고 수강했었습니다... 결국에는(?) 자바스크립트에대한 구체적이고 세세한 지식이 필요해서 생활코딩 강의를 들었는데.. 신세계입니다. 음. 그러니까 음. 좋다는 뜻입니다.

 

이제 시작하겠습니다.

 

---

# HTML 

 

 

저는 <script src="">로 js를 연결해서 진행했기에

 

우선 js 파일을 만들고 .html 파일에 <script src=""> 연결했습니다. 아래는 입력을 받는 form태그입니다.

 

코드블럭 사용했었는데 한 줄로 안나와서 가독성을 위해 캡쳐하여 사진으로 첨부합니다.

 

 

참고로 저는 회원가입 안내&연결 부분은 따로 <a> 태그로 감싸서 했습니다.

 

---

# JS

 

input으로 입력받는 email과 password 태그를 불러왔습니다.

 

const inputForm = document.querySelector(".logIn-form");
const inputEmail = document.getElementById("userEmail");
const inputPassword = document.getElementById("userPassword");

 

그리고, 받은 값과 비교해서 출력하는 함수를 만들었습니다. 

 

	function loginShow()  {
        	evn.preventDefault(); // form의 기본동작 새로고침 막기.

        	const email = inputEmail.value;
        	const password = inputPassword.value;    

        	if(email === 'userEmail' && password === '123456789') {
            
            		alert(`안녕하세요. ${email}님.`)
            
        	}else{
            
            		alert(`이메일 또는 비밀번호를 잘못입력하셨습니다.`);     
        	}
    }

 

해당 함수 안에 input으로 받은 값을 불러오기위해 value를 붙었습니다. 

 

이어서 조건문을 이용하여 비교했습니다. 'userEmail'과 '123456789'는 저장된 DB라고 생각하고 진행했습니다. DB로 진행하지 않았습니다.

 

${email}은 변수이고, user의 email을 출력합니다. ' 이 아닌 " 도 아닌 백틱으로 감싸서 진행했습니다. (${변수}를 쓰려면 백틱으로 감싸야하기 때문에..)

 

inputForm.addEventListener("submit", loginShow);

 

inputForm에 addEventListener을 연결하고 끝입니다. submit 하면 해당 함수가 실행됩니다.

 

 

+ html 부분은 업데이트 또는 새로운 게시글로 올릴 예정입니다.(적합하다고 판단되면...)