Programmer's Progress

에브리타임 웹서비스 구현 - 1 본문

Servlet + JSP/Project

에브리타임 웹서비스 구현 - 1

Blanc et Noir 2021. 6. 27. 23:41

  이번 방학에는 서블릿과 웹컨테이너, JSP, Spring등등

기존의 프론트엔드 지식을 기반으로 백엔드 지식을 공부하는 것으로 방향을 정했다.

 

  기존에는 프론트엔드의 기본을 배웠고, Ajax를 활용한 데이터 요청도 조금이나마 시도했었다.

그러나 사실 백엔드는 커녕 프론트엔드 사이드의 동작을 잘 이해하지 못했었다.

 

  브라우저에서 데이터를 요청하면 어떻게 서버까지 전달이 되고, 어떤 처리를 거쳐서

어떤 데이터를 클라이언트에게 전달하는지... 가령 라우터의 동작이라든지, TCP 프로토콜

P2P방식의 데이터 송수신, 포트포워딩 등등... 데이터 통신과목이 비록 어렵긴 했어도

전반적으로 네트워크가 어떤식으로 구성되고, 동작하는지를 이해할 수 있었다.

 

  또한 쓰레드가 무엇인지, OS는 어떤 역할을 수행하고, 메모리에 로드된 프로세스는 어떤 생애를 거쳐서

어떻게 수행되고 종료되는지, 어떻게 디스크에서 데이터를 읽어서 메모리에 로드하고, 또 그 데이터가

어디에 위치하는지를 어떻게 알고 있는지, 임계영역 데이터의 공유시 고려해야할 점 등등...

운영체제 과목을 통해서도 크게 배운 것들이 많다.

 

  기존에 배웠던 마이크로프로세서, 논리회로, C프로그래밍, 자료구조 등등이 크게 도움이 되었는데

이는 평소 꼼꼼하게 질문하고, 정리하는 습관 덕에 머리속에 잘 남아있어서 그랬던 것 같다.

여튼, 이번 방학동안에는 본격적으로 백엔드를 공부할 것이고, 이 지식또한 머리속에 잘 남아있었으면 한다.

 

  기본적으로 그냥 목적없이 서블릿 활용법, JSP문법 등등을 배우기 보다는, 어떤 프로젝트를 병행하면서 차근차근

완료해보는 것도 좋을 것 같다는 생각이 들었는데, 마침 대학생들이 많이 사용하는 에브리타임 서비스를

직접 비슷하게 나마 구현해보면 재밌을 것 같다는 생각이 들었다.

한 번에 막 진도를 나가는 것 보다, 조금씩 차근차근 나만의 에브리타임 웹 서비스 뼈대를 구성해보려 한다.

 

왼쪽이 직접 구현해본 사이트, 오른쪽이 실제 에브리타임 웹사이트

 

로그인 페이지, html로 구현했는데, 실제로는 메인 페이지에서 로그인 버튼을 클릭하면 html이 아닌 로그인 서블릿이 나타나도록 해야한다.

 

로그인 시도 결과, 아이디는 dkdlel123이며 비밀번호는 qlalfqjsgh456이다.
아이디 또는 비밀번호를 비워둔채 로그인을 시도하면 JS코드를 통해서 alert를 호출한다. 바로 form의 서블릿에게 처리를 요청하지 않는다.

 

package login;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class LoginServlet extends HttpServlet{
	@Override
	public void init() throws ServletException{
		System.out.println("LoginServlet init( )");
	}
	@Override
	public void destroy() {
		System.out.println("LoginServlet destroy( )");
	}
	@Override
	public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
		System.out.println("LoginServlet doGet( )");
		doHandle(req,resp);
	}
	@Override
	public void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
		System.out.println("LoginServlet doPost( )");
		doHandle(req,resp);
	}
	public void doHandle(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
		System.out.println("LoginServlet doHandle( )");
		resp.setContentType("text/html;charset=UTF-8");
		req.setCharacterEncoding("UTF-8");
		PrintWriter out = resp.getWriter();
		
		String user_id = req.getParameter("user_id");
		String user_pw = req.getParameter("user_pw");
		
		out.print("<html>");
		out.print("<h2>로그인 정보</h2>");
		out.print("<p>아이디 : "+user_id+"</p>");
		out.print("<p>비밀번호 : "+user_pw+"</p>");
		out.print("<a href='http://192.168.219.100:8090/everytime/resources/html/main/main.html'>로그인 화면</a>");
		out.print("</html>");
		out.close();
	}
}

 

코드를 확인해보면 doGet( )과 doPost( )모두 doHandle( )이라는 새로운 메소드를 호출하는 것을 확인할 수 있다.

이는 서블릿으로의 요청이 GET이든 POST방식이든 상관없이 모두 한 번에 처리할 수 있도록 하기 위함이다.

 

$(document).ready(function () {

    function login() {
        var user_id = $("#login_form input[name='user_id']").val();
        var user_pw = $("#login_form input[name='user_pw']").val();
        if(user_id!=null&&user_id.length!=0&&user_pw!=null&&user_pw.length!=0){
            $("#login_form").submit();
        }else{
            alert("아이디 또는 비밀번호 형태가 잘못되었습니다.");
        }
    }
    
$("#login_form").on("click","input[class='login_submit']",login);

});

  JS코드는 다음과 같이 구성했는데, 제이쿼리 라이브러리를 활용했으며, submit( )메소드를 활용하여

폼에 입력된 값들을 action에 입력된 서블릿으로 전달하는 것을 확인할 수 있다.

이때, 로그인 버튼은 input type="submit"이 아니라 input type="button"으로 처리함으로써

로그인 버튼을 누르면 아이디 유효성검사과정 전에 서블릿을 요청하는 것을 방지할 수 있다.

 

  비록 아직은 제대로 된 로그인기능을 구현한 것은 아니지만, GET, POST방식의 HTTP요청을 처리하는 기초적인

방법을 배웠다는 점에서 의의가 있다. 기존에 프론트엔드 기반지식을 익혀두었기에 웹페이지의 외형을 꾸미고

만드는 것 정도는 쉽게 할 수 있어서 다행인 것 같다.

저작자표시 비영리 변경금지

'Servlet + JSP > Project' 카테고리의 다른 글

에브리타임 웹서비스 구현 - 3  (0) 2021.07.12
에브리타임 웹서비스 구현 - 2  (2) 2021.07.01
'Servlet + JSP/Project' Related Articles more
Comments