코드를 작성하고 현재 view 폴더와 loginform.jsp, help.jsp, error.jsp를 만들지 않았으므로 생성해주도록 한다.
먼저 WebContent 아래에 view라는 폴더를 생성시킨다. 이후 아래 그림처럼 loginform.jsp, help.jsp, error.jsp를 생성하고 다음과 같은 코드를 작성한다
view 폴더 구성
loginform.jsp
//loginform.jsp
<%@ page language="java" contentType="text/html; charset=US-ASCII" pageEncoding="US-ASCII"%>
<!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=US-ASCII">
<title>Insert title here</title>
</head>
<body>
This is Login Page.
<form action="/MVCexample/doLogin" method="get">
customer ID(id1, id2, id3, id4, id5)<br/>
<input type="text" name="customerId"/> <br/>
<input type="submit" value="submit"/> <br/>
</form>
</body>
</html>
help.jsp
<%@ page language="java" contentType="text/html; charset=US-ASCII" pageEncoding="US-ASCII"%>
<!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=US-ASCII">
<title>Insert title here</title>
</head>
<body>
This is help Page.
</body>
</html>
error.jsp
<%@ page language="java" contentType="text/html; charset=US-ASCII" pageEncoding="US-ASCII"%>
<!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=US-ASCII">
<title>Insert title here</title>
</head>
<body>
This is error Page.
</body>
</html>
모두 작성을 완료하였다면 index.jsp에서 링크를 클릭 시 다음과 같이 forward 된 것을 확인할 수 있다.
loginform.jsp
#5 Model 작성
loginform에서 사용자가 입력하는 id의 실질적인 객체를 만들기 위해 Model을 생성한다 먼저 MVCexample >> Java Resources >> src >> model 패키지를 생성한다. 이후 아래 사진과 같이 Customer 클래스를 생성한다
model 생성
생성한 Class의 코드는 다음과 같다 id, name, email을 가지고 있으며 Customer이라는 생성자와, 각각의 게터, 세터 메소드가 정의되어있다.
package model;
public class Customer {
private String id;
private String name;
private String email;
public Customer(String id, String name, String email) {
this.id = id;
this.name = name;
this.email = email;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}
#6 Service 생성
실제로 만든 모델에 데이터를 저장하거나, 데이터를 읽어오거나 하는 함수들이 정의된 서비스이다. 사용자의 요청이 들어왔을 때 서블릿에서 이를 처리하는 함수를 구현해도 상관없으나 Service로 분리하여 보다 보기 좋은 코드를 구현한다
model 생성과 같은 방법으로 MVCexample >> Java Resources >> src >> service 패키지를 생성한다. 이후 다음 그림처럼 CustomerService 클래스를 생성한다
service 생성
실제 코드는 다음과 같다. 먼저 CustomerService를 생성하면 customers라는 Map을 생성한다 이때 String은 id, 값으로는 Customer 모델을 받고 customers 객체가 생성될 때 id1~id5의 정보를 미리 저장해 놓는다. 또한 DoLogin 서블릿에서 사용할 findCustomer함수를 정의한다 이는 검색한 아이디가 있을 경우 id의 cusomer을 반환하고 없을 경우 null을 반환한다.
package service;
import java.util.HashMap;
import java.util.Map;
import model.Customer;
public class CustomerService {
private Map<String, Customer> customers;
public CustomerService() {
customers = new HashMap<String, Customer>();
addCustomer( new Customer("id1", "test1", "test1@naver.com"));
addCustomer( new Customer("id2", "test2", "test2@naver.com"));
addCustomer( new Customer("id3", "test3", "test3@naver.com"));
addCustomer( new Customer("id4", "test4", "test4@naver.com"));
addCustomer( new Customer("id5", "test5", "test5@naver.com"));
}
public void addCustomer(Customer customer) {
customers.put(customer.getId(), customer);
}
public Customer findCustomer(String id) {
if(id != null) {
return (customers.get(id.toLowerCase()));
}
else{
return null;
}
}
}
#6 DoLogin 서블릿 작성
loginform.jsp에서 사용자가 정해진 id를 입력하면 이를 실질적으로 처리할 서블릿인 DoLogin 서블릿을 생성한다.
다음 그림과 같이 URL Mapping을 /doLogin으로 생성한다.
DoLogin 서블릿 생성
DoLogin의 코드는 다음과 같다. loginform.jsp에서 사용자가 입력한 customerId의 값을 저장하고
CustomerService의 객체를 선언한다. 다음으로 findCustomer함수를 사용하여 사용자가 입력한 결과를 Customer라는 Model객체에 저장하여 이를 setAttribute라는 함수를 통해 customer라는 이름으로 저장하여 success.jsp로 forward 한다.
/views : 사용자가 바라보는 웹 View가 들어있는 폴더이다 기본으로는 index.Jade가 있으며 ejs, pug, html 등 자유롭게 사용할 수 있다.
app.js : 웹 서버에 필요한 설정이 담겨있는 파일이다. 핵심적인 파일으로서 사용자가 사용할 미들웨어들이 포함되어 있거나 public, route 등의 설정이 담겨있다. 서버는 app.js를 바라보고 설정을 연동한다.
package.json : express에 설치된 모듈의 정보, 프로그램의 이름, 버전 등 express에 관한 정보를 기록한다. 설치된 모듈의 정보가 package.json에 저장되어 있어 사용자가 다시 설치할 때는 npm install을 입력하게 되면 기술된 모듈의 정보로 자동 설치한다.
4. 실행
sudo npm install
sudo npm start
npm start 이후 http://localhost:3000으로 접속한다. 이때 3000이라는 포트번호를 바꾸고 싶을 경우 www파일을 수정하면 된다. 아래와 같은 화면이 실행되면 제대로 설치된 것이다.
JAVASCRIPT를 브라우저가 아닌 다양한 용도로 사용하기 위해 만들어졌다고 한다. 파일 시스템, 서버 등 사용이 가능하며 내 개인적으로는 서버사이드 언어로 생각해도 무방할 것 같다.
2. Node.JS의 특징
1) V8엔진을 기반으로 한다
2) 비동기 프로그래밍 방식
Node.JS는 비동기 방식으로 Single-Thread기반으로 동작하기 때문에 생기는 문제들이 있다 (callback 지옥) 또한 처리 작업이 오래 걸리면 전체 서버에 영향을 줄 수 있다는 단점이 있다 또한 이후 async를 사용해 동기식으로 해결하는 방법도 공부해볼 예정이다.
