'jsp'에 해당되는 글 2건

  1. 2018.05.30 :: Servlet이란?
  2. 2018.02.16 :: Spring(스프링) 회원가입 6

서블릿(Servlet) 이란?


서블릿이란 클라이언트의 요청에 따라 서버가 실행시키는 자바 프로그램입니다. 예전에는 웹서버가 모든 클라이언트의 요청을 받아서 처리를 했었는데, 요즘처럼 인터넷이 활성화된 시대에서는 웹서버 혼자서 모든 요청을 처리 할수 없게 되었습니다. 그래서 나온 것이 서블릿입니다. 웹서버에게 요청이 가면 그 요청을 서블릿 컨테이너에게 넘기고 서블릿 컨테이너가 요청에 알맞은 서블릿 객체를 생성시켜주게 됩니다. 하지만 여기에서 중요한 것은 서블릿 컨테이너가 모든 요청에 대해 서블릿 객체를 생성시키지 않는다는 점입니다. 만약 해당이 요청이 서버 입장에서 첫 요청이라면 서블릿 객체를 생성시키지만 만약 첫 요청이 아니라면 메모리에 이미 생성된 서블릿객체에 대해 스레드를 생성해서 요청을 처리하고 응답을 하게 됩니다.


서블릿 API 문서 -> http://tomcat.apache.org



 


서블릿은 어떻게 구현될까?



우선 서블릿을 구현할 때는 javax.servlet.http.HttpServlet 클래스를 상속하여 개발하게 됩니다. 그러한 서블릿은 서블릿 컨테이너가 생명주기를 관장하게 됩니다. 우선 HttpServlet의 상속 구조를 알아보면,





서블릿 API에 나와있는 위 글을 보면 최상위는 interface인 "Servlet", 그리고 그것은 상속한 abstract class인 "GenericServlet"를 HttpServlet 클래스는 상속을 받게 됩니다.




각각에 대해서 간단히 설명하면 인터페이스인 Servlet은 서블릿 프로그램을 개발할 때 반드시 구현해야 하는 메소드를 선언하고 있는 인터페이스입니다. 




이 5개의 메소드가 서블릿의 생명주기와 관련된 메소드라고 생각하시면 됩니다.



다음은 추상클래스인 GenericServlet 입니다. Servlet 인터페이스를 상속하여 클라이언트-서버 환경에서 서버단의 애플리케이션으로서 필요한 기능을 구현한 추상 클래스입니다. service( ) 를 제외한 모든 메소드를 재정의하여 적절한 기능으로 구현하였습니다.




마지막으로는 GenericServlet을 상속받은 HttpServlet 입니다. GenericServlet을 상속하여 service( )를 재정의함으로써 http 프로토콜에 알맞은 동작을 수행하도록 구현한 클래스입니다. 즉, http 프로토콜 기반으로 브라우저로부터 요청을 전달받아서 처리하도록 하는 클래스입니다. service( )에서는 요청방식(get,post,delete,put....)에 따라서 정해진 사양의 메소드가 호출되도록 구현되어 있습니다.



여기서 볼것은 service( ) 메소드가 2개 오버로딩되어있다는 것입니다. 그것을 설명하면 처음에 요청이 들어오면 매개변수가 ServletRequest req,ServletResponse res 인 service( )가 호출되고 이 메소드는 간단히 다른 service( )를 호출해주는 역할을 하고 두번째로 호출된 service( )에서 각 요청에 알맞은 방식의 메소드를 호출하는 역할을 하게 됩니다.





서블릿 동작흐름




참조:http://sjh836.tistory.com/126?category=679845

             


그리고 이러한 서블릿을 설정하는 파일이 web.xml 파일입니다. 웹서버가 서비스를 시작하기 위해 구동할 때 서버에서 많은 일이 일어나는데, 그 중의 하나가 클라이언트에 서비스하기 위한 웹 애플리케이션을 준비하는 작업입니다. 이때 웹서버는 각 웹 애플리케이션의 web.xml 파일을 읽고, web.xml에 정의된 내용대로 웹 애플리케이션을 실행하기 위한 설정을 수행하게 됩니다. 따라서 web.xml을 잘못 작성하게 되는 순간에는 웹 애플리케이션 안에 있는 모든 파일은 서비스 될수 없게 됩니다.




posted by 여성게
:
Web/Spring 2018. 2. 16. 00:30

Spring(스프링) 회원가입



1. 개발환경



1.eclipse

2.tomcat 8.0

3.spring 4.3.7

4.oracle






2. 프로젝트 파일구조









3. 관련 라이브러리 추가.



위에서 aop weaver 같은 경우는 pointcut에 걸렸을 때, advice 메소드를 호출해 실행하는 것이 weaver 라고 합니다. 그 기능을 하기 위해 weaver 라이브러리를 등록합니다.

parser 같은 경우는 repository가 있는 경로에 한글이 낄 경우 이상한 에러(log어쩌고 저쩌고)가 뜨게 됩니다.(ex:C:\Users\윤여성\.m2\repository....) 




그래서 한글 인코딩을 하기위한 라이브러리라고 생각하면 됩니다.






4.web.xml





처음에 있는 context-param의 경우는 서블릿이 컨트롤러를 호출하게 될때, 그 컨트롤러 코드에 있는 비즈니스단의 클래스의 빈생성(UserService)을 위해 미리 preload(ContextLoaderListner이용)하는 경우입니다. 그리고 그 다음은 presentation-layer.xml 파일을 로딩하여 해석한 servlet을 생성하는 코드입니다. 마지막으로 filter는 post방식으로 넘어오는 데이터의 한글 인코딩을 위한 코드입니다.



5. presentation-layer.xml




처음의 컴포넌트 스캔은 컨트롤러에 있는 어노테이션들을 인식해 빈 생성을 하기위한 코드이고, 그 다음의 리졸버는 컨트롤러에서 리턴하는 경로의 앞과 뒤에 붙여줄 문자를 설정하는 코드입니다.






6. applicationContext.xml




mybatis를 사용하기 위한 sql세션팩토리빈 생성과 세션템플릿 설정입니다. 그 다음은 트랜잭션 매니저를 빈등록하여 txAdvice를 등록해 밑의 pointcut에 걸려있는 메소들중 에러가 날 경우 자동으로 rollback을 하여 디비에 잘못된 칼럼이 등록되는 것을 방지하는 트랜잭션 매니저입니다. 여기서 advisor가 행위를 하기 위해 아까 라이브러리에 weaver라는 라이브러리를 등록한 것 입니다.




7. sql-map-config.xml , user-mapping.xml , database.properties



sql-map-config.xml 의 첫번째 alias는 user-mapper.xml에서 파라미터타입이나 리절트타입에 사용하기 위한 설정입니다. 그러면 user-mapper.xml 에서의 코드가 훨씬 간결해지는 것을 볼 수 있습니다.




8. UserDTO, UserDAO ,UserService , UserServiceImpl 구현



인스턴스 변수를 선언해주고 각각의 getter, setter 메소드를 선언해주면 됩니다. alt+shift+s 를 통해 겟터,셋터메소드 및 toString() 메소드를 쉽게 생성할 수 있습니다.


@Repository 어노테이션을 통해 applicationContext.xml 에 있는 context:component-scan 설정에 걸려 UserDAO 빈 생성을 하게합니다. 그리고 @Autowired 를 통해 applicationContext.xml 에 있는 sqlSessionTemplate 객체의 의존주입을 컨테이너에게 맡기게 됩니다. 그리고 각 메소드에 있는 mybatis.~은 모두 user-mapper.xml에 정의 해놓은 sql 구문들을 사용하는 sqlSessionTemplate의 메소드입니다.



UserService 클래스입니다. 보시면 UserDAO에 있는 메소드들이 추상메소드로 들어간 것이 보이시죠? 즉, UserService 객체의 다형성을 이용하기 위해 인터페이스 타입으로 클래스를 생성한 것입니다.(컨트롤러에서 직접 DAO에 접근하는 것이 아니라 Service 구현 클래스를 통해 DAO에 접근한다.) 하나 팁을 주자면 UserDAO에서 alt+shift+t 를하면 extract interface라는 기능이 있습니다. 그러면 UserDAO에 들어가있는 메소드를 모두 추상메소드 타입으로 갖고 있는 인터페이스를 쉽게 생성할 수 있습니다.(UserDAO에 생기게 되는 implements UserService는 꼭 지워줄것!)



UserService 인터페이스를 상속받아 구현한 클래스입니다.




9. UserController 구현



위에 @Autowired에 UserService 인터페이스 타입으로 의존주입을 받는 이유는 유지보수 이유때문입니다. 객체지향의 다형성을 이용하게 된다면 UserServiceImpl가 변경되어도 의존주입을 하게 되는 UserService와는 상속관계가 지속되기에 별도의 컨트롤러의 코드의 변경이 없어도 되게됩니다. 그리고 login.do 와 insertUser.do 매핑 메소드에 RequestMethod를 GET과 POST 두개를 나눈 이유는 index페이지에서 로그인 혹은 회원가입 버튼을 누르게 된다면 get방식으로 요청(진짜 로그인과 회원가입 같은 경우는 post 방식으로 데이터를 서버측으로 보내게 됩니다.)이 가서 각 페이지로 이동하게 됨으로 페이지 이동을 위한 메소드는 별도의 url매핑을 만들필요 없이 같은 url매핑으로 메소드 방식만 두개로 정해주면 됩니다. 




10. insertUser.jsp




<%@ page language="java" contentType="text/html; charset=EUC-KR"
 
    pageEncoding="EUC-KR"%>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
 
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" rel="stylesheet">
 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/latest/js/bootstrap.min.js"></script>
 
    <style>
    body {
        background: #f8f8f8;
        padding: 60px 0;
    }
    
    #login-form > div {
        margin: 15px 0;
    }
 
 
 
</style>
 
<title>회원가입</title>
 
</head>
 
<body>
 
    <div class="container">
 
        <div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
 
            <div class="panel panel-success">
 
                <div class="panel-heading">
 
                    <div class="panel-title">환영합니다!</div>
 
                </div>
 
                <div class="panel-body">
 
                    <form action="insertUser.do" id="login-form" method="post">
 
                        <div>
 
                            <input type="email" class="form-control id" name="id" placeholder="Email" oninput="checkId()" id="checkaa" autofocus>
 
                        </div>
 
                        <div>
 
                            <input type="password" class="form-control pass" name="pw" placeholder="Password" oninput="checkPwd()">
 
                        </div>
 
                        <div>
 
                            <input type="password" class="form-control pass" name="pwConfirm" placeholder="Confirm Password" id="repwd" oninput="checkPwd()">
 
                        </div>
 
                        <div>
 
                            <input type="text" class="form-control nickname" name="nickName" id="nickname" placeholder="Your Nickname" oninput="checkNick()" autofocus>
 
                        </div>
 
                        <div>
 
                            <button type="submit" class="form-control btn btn-primary signupbtn" disabled="disabled">회원가입</button>
 
                        </div>
 
                    </form>
 
                </div>
 
            </div>
 
        </div>
 
    </div>
 
    <script>
 
 
 
    //아이디와 비밀번호가 맞지 않을 경우 가입버튼 비활성화를 위한 변수설정
 
    var idCheck = 0;
 
    var nickCheck = 0;
 
    var pwdCheck = 0;
 
    //아이디 체크하여 가입버튼 비활성화, 중복확인.
 
    function checkId() {
 
        var inputed = $('.id').val();
 
        console.log(inputed);
 
        $.ajax({
 
            data : {
 
                id : inputed
 
            },
 
            url : "checkId.do",
 
            success : function(data) {
 
                if(inputed=="" && data=='0') {
 
                    $(".signupbtn").prop("disabled"true);
 
                    $(".signupbtn").css("background-color""#aaaaaa");
 
                    $("#checkaa").css("background-color""#FFCECE");
 
                    idCheck = 0;
 
                } else if (data == '0') {
 
                    $("#checkaa").css("background-color""#B0F6AC");
 
                    idCheck = 1;
 
                    if(idCheck==&& pwdCheck == 1) {
 
                        $(".signupbtn").prop("disabled"false);
 
                        $(".signupbtn").css("background-color""#4CAF50");
 
                    } 
 
                } else if (data == '1') {
 
                    $(".signupbtn").prop("disabled"true);
 
                    $(".signupbtn").css("background-color""#aaaaaa");
 
                    $("#checkaa").css("background-color""#FFCECE");
 
                    idCheck = 0;
 
                } 
 
            }
 
        });
 
    }
 
  //재입력 비밀번호 체크하여 가입버튼 비활성화 또는 맞지않음을 알림.
 
    function checkPwd() {
 
        var inputed = $('.pass').val();
 
        var reinputed = $('#repwd').val();
 
        console.log(inputed);
 
        console.log(reinputed);
 
        if(reinputed=="" && (inputed != reinputed || inputed == reinputed)){
 
            $(".signupbtn").prop("disabled"true);
 
            $(".signupbtn").css("background-color""#aaaaaa");
 
            $("#repwd").css("background-color""#FFCECE");
 
        }
 
        else if (inputed == reinputed) {
 
            $("#repwd").css("background-color""#B0F6AC");
 
            pwdCheck = 1;
 
            if(idCheck==&& pwdCheck == 1) {
 
                $(".signupbtn").prop("disabled"false);
 
                $(".signupbtn").css("background-color""#4CAF50");
 
            }
 
        } else if (inputed != reinputed) {
 
            pwdCheck = 0;
 
            $(".signupbtn").prop("disabled"true);
 
            $(".signupbtn").css("background-color""#aaaaaa");
 
            $("#repwd").css("background-color""#FFCECE");
 
            
 
        }
 
    }
 
    //닉네임과 이메일 입력하지 않았을 경우 가입버튼 비활성화
 
    function checkNick() {
 
        var nickname = $("#nickname").val();
 
        console.log(nickname);
 
        $.ajax({
 
            data : {
 
                nickName : nickname
 
            },
 
            url : "checkNickName.do",
 
            success : function(data) {
 
                if(nickname=="" && data=='0') {
 
                    $(".signupbtn").prop("disabled"true);
 
                    $(".signupbtn").css("background-color""#aaaaaa");
 
                    $("#nickname").css("background-color""#FFCECE");
 
                    nickCheck = 0;
 
                } else if (data == '0') {
 
                    $("#nickname").css("background-color""#B0F6AC");
 
                    nickCheck = 1;
 
                    if(idCheck==&& pwdCheck == 1) {
 
                        $(".signupbtn").prop("disabled"false);
 
                        $(".signupbtn").css("background-color""#4CAF50");
 
                    } 
 
                } else if (data == '1') {
 
                    $(".signupbtn").prop("disabled"true);
 
                    $(".signupbtn").css("background-color""#aaaaaa");
 
                    $("#nickname").css("background-color""#FFCECE");
 
                    nickCheck = 0;
 
                } 
 
            }
 
        });
 
    }
 
     
 
   </script>
 
</body>
 
</html>
cs





11. 마치며..


insertUser.jsp 와 UserController에 있는 코드 중 ajax를 이용한 실시간 아이디 중복체크 및 비밀번호 확인, 닉네임 체크 코드가 들어가있습니다. 그것은 별도로 따로 설명을 올리겠습니다.. 두서 없이 한 설명을 들어주셔서 감사합니다. 코드를 원하시는 분은 댓글로 남겨주시면 보내드리겠습니다.






posted by 여성게
: