1) 세팅 및 front 작성
이클립스에서 Dynamic Web Project 생성 후 클래스들을 생성
라이브러리 준비
이클립스에서 src를 기준으로 밑에 부분이 front 파트이다
css, js, img를 저장할 폴더 생성(vs code에서 시행하면 편하다)
webapp 하위에 index.jsp가 있다.
index.html로 생성하고 header와 footer를 같이 작업해왔으나
이제는 분리하여 합쳐 사용해 보려고 한다
(index.jsp만을 수정하여 같은 레이아웃의 페이지 생성 가능)
jsp 파일을 3개로 만들어 jsp를 합치는 형태로 진행하자
index.jsp 파일 내용 수정하기
📝 <link rel="stylesheet" href="${pageContext.request.contextPath}
/resources/css/main-style.css"> 📝
위의 코드는 index와 css를 연결한 link인데 경로에서
${pageContext.request.contextPath} 부분은 현재 있는 위치를 나타내는
EL 코드이다. 하지만 이 코드는 현재 위치라는 불안정성이 있다.
따라서
${contextPath}로 변경해 주는게 좋다
이 코드를 사용하기 위해 몇가지를 세팅하자
클래스들 중에 EncodingFilter가 있는데 이 클래스의 역할은
front와 back 사이에서 언어형식을 UTF-8로 인코딩해주는 역할이다
어노테이션을 이용하여 호출되게 한다
application은 scope중 가장 넓은 영향범위를 가지고 있다.
application : 하나의 웹 애플리케이션 당 1개만 생성되는 객체
-> 서버 시작 시 생성되며 종료 시 까지 유지
-> 누구든지 사용 가능
그래서 서버가 종료되기 전까지 전 영역에서 사용 가능하다
여기서 "contextPath"라는 key에 최상위 주소가 셋팅 되었다.
그렇기에 ${contextPath}로 최상위 주소(경로)로 사용 가능
index.jsp 파일에 다른 jsp(header, footer)를 합치기 위해 jsp:include 사용
index.jsp에 내용을 채워 넣는다
js에 가서 이벤트 작성하자
url은 서비스 요청 주소 (기존에는 form양식의 action 또는 href를 이용했었다)
data의 경우는 Map의 형태로 html의 값을 key로 감싸 back으로 넘긴다
AJAX를 쓰기위해서는
3가지 방법이 있지만 Gson을 이용하여 하도록 하자
Gson을 사용하기 위해 위의 라이브러리에 gson-2.9.0.jar를 넣어두었다
위의 사진은 인코딩을 거쳐 호출된 servlet이고, js에서 key로 묶었던
memberEmail을 불러왔다
그 후 jdbc의 일련의 과정을 거쳐 결과값을 Gson을 이용하여 다시 front로
보내주고 있다.
2) JDBC를 위한 세팅
기존에는 JDBC를 위해 xml파일에 Map의 형태로 저장해 놓고 key 입려하여 값을 불러와서 driver와
url user pw 입력했던 방식이었다. 하지만 서버실행시 설정이 완료되게끔하여 Connection에 필요한
driver url user pw이 자동 세팅되고 connection을 실행 할 수 있도록 세팅하자
새로운 서버를 만들고, 더블 클릭하여
첫번째 Serve modules.. 체크하고 저장 (ctr+s)
WEB-INF 폴더 밑 jspwork가 있는데 이곳은 Servlet에서 jsp로 파일이 변환이 되는데 가끔 jsp에서
Servlet으로 변환이 필요한 경우가 있다. 그 때 파일들을 모아두기 위한 곳이다
어쨋든 이 jspwork 폴더를 생성하고 우클릭 prperties를 클릭하여
주소 값 복사
context.xml 실행하여
<Context workDir="C:\workspace\5_Server\community\src\main\webapp\WEB-INF\jspwork">
여기에 주소 값 넣어준다
이제 위에서 말한 서버 실행시 driver url user pw의 값의 입력이 자동으로 완성되게 하자
<Resource
name="jdbc/oracle"
auth="Container"
type="javax.sql.DataSource"
driverClassName="oracle.jdbc.OracleDriver"
url="jdbc:oracle:thin:@localhost:1521:xe"
username="community"
password="1234"
maxTotal="50"
maxIdle="10"
maxWaitMillis="-1"
/>
위의 url에서 localhost는 한 컴퓨터에서 실행하고자 할 때 쓰이고, 필요에 따라서 ip의 주소를 변경해야 한다
이제 Connection을 위한 입력이 완료되었으니 JDBCTemplate를 만들어서 jdbc에 필요한 메소드들을 만들어
놓고 사용해 보도록 하자
public class JDBCTemplate {
private static Connection conn = null;
public static Connection getConnection() {
try {
Context initContext = new InitialContext();
Context envContext = (Context)initContext.lookup("java:comp/env");
DataSource ds = (DataSource)envContext.lookup("jdbc/oracle");
conn = ds.getConnection();
conn.setAutoCommit(false);
} catch(Exception e){
System.out.println("[Connection 생성 중 예외 발생]");
e.printStackTrace();
}
return conn;
}
public static void close(Connection conn) {
try {
if(conn != null && !conn.isClosed()) conn.close();
} catch (Exception e) {
e.printStackTrace();
}
}
public static void close(Statement stmt) {
try {
if(stmt != null && !stmt.isClosed()) stmt.close();
} catch(Exception e) {
e.printStackTrace();
}
}
public static void close(ResultSet rs) {
try {
if(rs != null && !rs.isClosed()) rs.close();
} catch(Exception e) {
e.printStackTrace();
}
}
public static void commit(Connection conn) {
try {
if(conn != null && !conn.isClosed()) conn.commit();
} catch(Exception e) {
e.printStackTrace();
}
}
public static void rollback(Connection conn) {
try {
if(conn != null && !conn.isClosed()) conn.rollback();
} catch(Exception e) {
e.printStackTrace();
}
}
3) Back에서 일어나는 과정
back에서 일어나는 일련의 과정은
front에서 호출한 주소값에 해당되는 servlet이 시행되고 거기서 클라이언트의 요청 처리를 위한 service를
호출하기 위해 Service 클래스로 이동
Service 클래스에서 필요에 따라 Connection 연결, 요청 처리를 위한 DAO호출, 요청 처리 후
connection 자원 반환
DAO 클래스에서 DB와 연결하여 요청 처리 후 Service 클래스로 결과 반환.
이때 사용된 Statement, PreaparedStatement, ResultSet 설정 및 자원 반환
그리고 DAO가 실행되면 요청에 필요한 정보를 DB에서 처리하기 위한 구문들을 저장하는 xml 파일을 자동으로
읽어와 사용하기 위해 기본생성자를 통해 xml 파일과 연결시키기
그리고 연결된 xml 파일을 사용하기 위해 Properties 객체 생성 후 사용하기
여기서 필요한 xml 파일은 세팅 과정에서 생성해 놓았고, 요청에 필요한 구문은 xml 파일에 입력하여
저장해 놓아야 한다. 그 후 그 입력한 구문의 key값으로 호출하는 형태이다.
public class MemberDAO {
private Statement stmt;
private PreparedStatement pstmt;
private ResultSet rs;
private Properties prop;
public MemberDAO() {
try {
prop = new Properties();
String filePath = MemberDAO.class.getResource("/edu/kh/community/sql/member-sql.xml").getPath();
prop.loadFromXML(new FileInputStream(filePath));
}catch(Exception e) {
e.printStackTrace();
}
}
위의 일련의 과정들의 예시]
Servlet에서 Service로 이동
Service에서 DAO로 이동
요구사항 처리 후 역순으로 결과 반환