연애대작전_SemiProject_기능정리_로그인엔터처리

서블릿과 웹 어플리케이션 서버에 대해서 처음 공부를 시작함과 동시에 국비지원 학원 사람들과 프로젝트 스터디를 2주동안 진행하였다. 이전에는 콘솔을 사용하여 자바와 DB만을 이용한 JDBC를 실습했었는데, 이후에는 조금 더 확장하여 웹 페이지에서 동적인 컨텐츠를 줄 수 있는 웹 애플리케이션 서버를 만들어보는 프로젝트를 진행했다. 

이번 프로젝트의 제목은 연애대작전으로 로그인 회원가입이 주요 기능이며, 시간이 남아서 추가적으로 데이트 코스를 만들거나 조회할 수 있는 기능을 구현했다.

이번에 필자는 로그인 기능을 구현했는데, 세션 트래킹을 최대한 구현해보고자 노력했다. 로그인 기능을 구현하는 과정에서  생각해보니 로그인 버튼을 눌러야만 폼 데이터가 서버로 전송이 되었다. 일반적으로 기본적인 사이트는 버튼이 있기는 하지만 굳이 버튼을 누르지 않고 Enter를 누르면 로그인 버튼이 눌린 효과가 나타나지 않는가? 사용자의 편의성을 증가시키기 위해서 로그인 버튼을 눌러줄 수 있도록 Enter처리를 구현한 방법을 정리해보고자 한다. 

로그인에 대한 입력값 유효성 체크, 아이디&비밀번호 검증 과정은 이미 구현되어 있고, 로그인 버튼을 누르면 onclick이벤트로 폼에 있는 데이터를 전송하는 javascript 함수 또한 이미 구현되어 있다. 

오늘은 직접 버튼을 누르지 않고 Enter버튼을 누름으로써 로그인 버튼을 누르는 것과 동일한 기능을 하도록 Enter처리 기능만 추가하겠다. 

전체 소스 코드는 필자의 깃허브 주소에 있고, 여기를 누르면 해당 주소로 이동해서 필자가 지금부터 정리하고자 하는 수정 부분을 바로 확인할 수 있다.

 

1. 이벤트 발생 객체 생각해보기

첫 번째로 생각해야 하는 부분이 있다. 엔터가 눌렸다는 것을 인지하기 위해서는 keypress라는 이벤트를 생성해내야 하는데, 과연 이벤트가 발생하는 객체를 어디로 둘 것이냐는 것이다. 즉, 어느 태그에 포커스가 있을 때 엔터를 눌러야 키가 눌림을 감지하는 keypress 이벤트를 정의할 것이냐는 것이다. 

고려사항 

• 로그인 버튼을 누르기 전에 아이디와 비밀번호를 입력하는 곳이 어디인가? -> <input>
• 아이디와 비밀번호는 서로 독립적으로 분리된 태그이므로 이 두개의 태그를 감싸는 부모태그는 누구인가? div & form
• 로그인 버튼을 눌렀을 때, 폼에 있는데이터를 어떻게 전송하는가?
  • 버튼에 onclick이벤트함수로 send()를 만들고 함수의 인자로 현재 폼을 전달하도록 this.form을 전달한다. 

위의 내용을 종합해보면 결론적으로 Enter를 인식해야 하는 이벤트 발생객체는 form태그라는 결론이 나온다. 

 

2. form에 id와 name 속성 부여하기  

따라서 필자는 form태그에 id값과 name값을 설정해주었다. id값은 제이쿼리로 선택자를 지정하기 위함이고, name값은 태그의 데이터가 서버로 전송될 때, 파라미터명으로 사용하는 것이 바로 name속성이기 때문이다. 이 둘을 헷갈리는 사람들이 많은데 이 개념은 확실하게 정리해야 후에 파라미터를 수신할 수 없는 오류가 나타나지 않는다. 필자는 id는 "login_form", name은 "login"으로 속성을 설정해주었다.

 

3. 자바스크립트에서 키보드 엔터 인식하기

기본적으로 document상에 모든 요소가 배치되어야 엔터를 인식하던, 이벤트를 발생하던, 함수를 처리하던 하기 때문에 $(document).ready(function(){}); 내부에서 이벤트함수를 정의해야 한다. 

$(document).ready(function(){
    $("#login_form").keypress(function(e){
 
    });
});

따라서 다음과 같이 코드를 작성한다. 

$(document).ready(function(){
    $("#login_form").keypress(function(e){
        if(e.keyCode == 13){
    });
});

로그인 폼에서 키보드를 눌렀을 때마다 함수를 실행하는데 그 값이 13 즉, Enter라면 실행하겠다는 뜻이다. 이때 기존에 만들어 두었던, send()함수를 호출하여 사용하고자 했었는데, 자바스크립트에서는 특정 form을 어떻게 지정해야 하는지를 알지 못해서 한참 헤맸었다. 

이를 위해서 form의 name속성을 지정한 것이다. this.form처럼 특정 폼의 데이터를 인자로 전송할 때, 이러한 경우에서는 document.폼이름 -> document.login을 넣어주면, 현재 보고있는 브라우저에서 name속성이 login인 폼의 정보를 함수의 인자로 전송할 수 있다. 

$(document).ready(function(){
    $("#login_form").keypress(function(e){
        if(e.keyCode == 13){
            //$(this).submit();
            send(document.login);
        }
    });
});