Front부터 Back 까지..

김정욱·2023년 3월 24일
0

Server 복습

목록 보기
11/13
post-thumbnail

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의 값의 입력이 자동으로 완성되게 하자

<!-- 
    	DBCP (DataBase Connection Pool)
    	- 미리 DB와 연결되어 있는 Connection을 일정 개수를 만들어 두고
    	클라이언트 요청 시 만들어둔 Connection을 빌려주고
    	요청 처리 완료 시 다시 반환 받는 기법
   	
    	장점 :
    	1) 미리 Connection을 만들어두기 때문에 요청 시 속도가 빠름
   	
    	2) Connection 개수에 제한을 두어 DB에 과도하게 요청되는 경우를 방지
     -->
   
	<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"
    />
    
     <!-- 
       name : JNDI 이름 Context의 lookup()을 사용하여 자원을 찾을때 사용한다.
       		  java:comp/env 디렉터리에서 찾을 수 있다.
       auth : 자원 관리 주체 지정(Application 또는 Container)
       type : Resource의 타입 지정
       driverClassName : JDBC 드라이버 클래스 이름.
       maxTotal : DataSource 에서 유지할 수 있는 최대 커넥션 수    
       maxIdle : 사용되지 않고 풀에 저장될 수 있는 최대 커넥션의 개수. 음수일 경우 제한이 없음
       maxWaitMillis : 커넥션 반납을 기다리는 시간(-1은 반환될 때 까지 기다림)
     -->
   
위의 url에서 localhost는 한 컴퓨터에서 실행하고자 할 때 쓰이고, 필요에 따라서 ip의 주소를 변경해야 한다
이제 Connection을 위한 입력이 완료되었으니 JDBCTemplate를 만들어서 jdbc에 필요한 메소드들을 만들어
놓고 사용해 보도록 하자
public class JDBCTemplate {
	
	/*
	 * DB 연결(Connection 생성), 자동 커밋 off,
	 * 트랜잭션 제어, JDBC 객체 자원 반환(close)
	 * 
	 * 이러한 JDBC에서 반복사용되는 코드를 모아둔 클래스
	 * 
	 * * 모든 필드, 메서드 static *
	 * -> 어디서든지 클래스명.필드명 / 클래스명.메서드명
	 *    호출가능 (별도 객체 생성X)
	 */
	
	private static Connection conn = null;
	// -> static 메서드에서 필드를 사용하기 위해서는
	// 필드도 static 필드이어야만 한다
	
	/** DB 연결 정보를 담고있는 Connection 객체 생성 및 반환 메서드
	 * @return conn
	 */
	public static Connection getConnection() {
		
		try {
		
			// JNDI (Java Naming and Directory Interface API)
			// - 디렉토리에 접근하는데 사용하는 JAVA API
			// - 애플리케이션(프로그램, 웹앱)은 JNDI를 이용해서 파일 또는 서버 Resource를 찾을 수 있다
			
			Context initContext = new InitialContext();
		
			// context.xml 파일 찾기
			Context envContext = (Context)initContext.lookup("java:comp/env");
			
			// DBCP 세팅 <Resource> 태그를 찾아 DataSource 형식의 객체로 얻어오기
			// DataSource : Connection Pool을 구현하는 객체( 만들어둔 Connection 얻어오기 가능)
			DataSource ds = (DataSource)envContext.lookup("jdbc/oracle");
			
			conn = ds.getConnection();
			
			conn.setAutoCommit(false);
			
		} catch(Exception e){
			System.out.println("[Connection 생성 중 예외 발생]");
			e.printStackTrace();
		}
		return conn;
	}
	
	
	/** Connection 객체 자원 반환 메소드
	 * @param conn
	 */
	public static void close(Connection conn) {
		try {
			
			if(conn != null && !conn.isClosed()) conn.close();
			
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	/** Statement(부모), PreparedStatement(자식) 객체 자원 반환 메서드
	 * (다형성, 동적바인딩)
	 * @param stmt
	 */
	public static void close(Statement stmt) {
		try {
			if(stmt != null && !stmt.isClosed()) stmt.close();
		} catch(Exception e) {
			e.printStackTrace();
		}
	}
	
	/** ResultSet 객체 자원 반환 메서드
	 * @param rs
	 */
	public static void close(ResultSet rs) {
		try {
			if(rs != null && !rs.isClosed()) rs.close();
		} catch(Exception e) {
			e.printStackTrace();
		}
	}

	
	/** 트랜잭션 Commit 메서드
	 * @param conn
	 */
	public static void commit(Connection conn) {
		try {
			if(conn != null && !conn.isClosed()) conn.commit();
		} catch(Exception e) {
			e.printStackTrace();
		}
	}
	
	/** 트랜잭션 Rollback 메서드
	 * @param conn
	 */
	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로 이동

요구사항 처리 후 역순으로 결과 반환
profile
절박한 마음을 갖고 하루를 보내자!!

0개의 댓글