My Dev Blog

1. action : form 내부 입력 값들을 받을 서버 측 url을 지정

2. name : form의 이름

3. accept-charset : form 전송에 사용할 문자 인코딩 지정

4. target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정

5. method (기본 값 get) : 서버로 데이터를 전송하는 방식(get or post)

6. enctype : 인코딩 타입 지정, 아래 세 가지 중 하나 지정

    1) enctype="application/x-www-form-urlencoded"

       서버에 보내기 전 모든 문자를 인코딩하는 방식, form에 텍스트 데이터를 포함 시 지정(기본값)

    2) enctype="multipart/form-data"

       파일 업로드처럼 문자가 아닌 파일을 전송할 때 사용

    3) enctype="text/plain"

       일반 텍스트로 인코딩

7. novalidate : HTML5에 새롭게 추가된 속성, 유효성 미확인을 지정

Thymeleaf 문법의 기본적인 특징 : html 태그 안에 th 문법을 추가하는 형태

<태그 th:속성="표현식 및 서버로부터 받는 값"/>

th:text="${}"

th:href="@{}"

th:with="${}"

th:value="${}"

th:action="@{}"

th:object="${}"

th:field="*{}"

th:if="${}", th:unless="${}"

th:each="변수 : ${list}"

th:switch, th:case

<사용 예>

<script th:inline="javascript">
	/*<![CDATA[*/
	function fnThymeleafExample() {
		var thymeleafVar1 = /*[[${exampleVo.exampleVal1}]]*/;
		var thymeleafVar2 = /*[[${exampleVal2}]]*/;
	}
	/*]]>*/
</script>

<td th:text="${exampleVo.exampleVal1}"> </td>
<td th:text="${#numbers.formatInteger(exampleVal2, 0, 'COMMA')}"> </td>

<form id="exampleForm" th:object="${exampleForm}" th:method="POST">
	<input type="hidden" th:field="*{exampleVal3}" />
	<div th:if="${exampleDto.example1.example2 != '1' && exampleDto.example1.example2 != '2'}">
		<label class="text-danger"> * 예제 </label>
		<input type="text" th:field="*{exampleVal4}" th:maxlength="${exampleDto.example2}" class="form-control">
		<p> 최대길이 [[${exampleDto.example2}]]자 </p>
		<p class="text-linebreak" th:utext="${exampleDto.example3}"> 예제 </p>
	</div>
</form>

// Date 변수 date1 -> yyyyMMdd 문자열로 변환
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
String strDate1 = sdf.format(date1);

// LocalDate 변수 date2 -> yyyyMMdd 문자열로 변환
String strDate2 = date2.format(DateTimeFormatter.ofPattern("yyyyMMdd"));

// LocalDateTime 변수 date3 -> yyyyMMdd 문자열로 변환
String strDate3 = date3.format(DateTimeFormatter.ofPattern("yyyyMMdd"));

<MySQL>

-- MySQL의 경우 시간 비교를 위한 시간컬럼명이 필수로 존재해야 조회 가능
SELECT * FROM 테이블명 WHERE 시간컬럼명 >= DATE_ADD(NOW(), INTERVAL -10 SECOND); -- 10초 전 해당 테이블의 모든 데이터를 조회
SELECT * FROM 테이블명 WHERE 시간컬럼명 >= DATE_ADD(NOW(), INTERVAL -10 MINUTE); -- 10분 전 해당 테이블의 모든 데이터를 조회
SELECT * FROM 테이블명 WHERE 시간컬럼명 >= DATE_ADD(NOW(), INTERVAL -10 HOUR); -- 10시간 전 해당 테이블의 모든 데이터를 조회
SELECT * FROM 테이블명 WHERE 시간컬럼명 >= DATE_ADD(NOW(), INTERVAL -10 DAY); -- 10일 전 해당 테이블의 모든 데이터를 조회
-- WHERE 조건 추가 가능

<Oracle>

SELECT * FROM 테이블명 AS OF TIMESTAMP(SYSTIMESTAMP-INTERVAL '10' SECOND) WHERE 1 = 1; -- 10초 전 해당 테이블의 모든 데이터를 조회
SELECT * FROM 테이블명 AS OF TIMESTAMP(SYSTIMESTAMP-INTERVAL '10' MINUTE) WHERE 1 = 1; -- 10분 전 해당 테이블의 모든 데이터를 조회
SELECT * FROM 테이블명 AS OF TIMESTAMP(SYSTIMESTAMP-INTERVAL '10' HOUR) WHERE 1 = 1; -- 10시간 전 해당 테이블의 모든 데이터를 조회
SELECT * FROM 테이블명 AS OF TIMESTAMP(SYSTIMESTAMP-INTERVAL '10' DAY) WHERE 1 = 1; -- 10일 전 해당 테이블의 모든 데이터를 조회
-- WHERE 조건 추가 가능

// Java 특정 문자열 및 빈 값 체크
String str1 = null; // str1 == null로 체크
String str2 = "A"; // "A".equals(str2)로 체크
String str3 = ""; // "".equals(str3)로 체크
// (Java 6 이상)
String str4 = ""; // str4.isEmpty()로 체크
String str5 = ""; // str5.trim().isEmpty()로 체크
String str6 = " "; // str6.trim().isEmpty()로 체크
String str7 = "          "; // str7.trim().isEmpty()로 체크
// (Java 11 이상)
String str8 = ""; // str8.isBlank()로 체크
String str9 = " "; // str9.isBlank()로 체크
String str10 = "          "; // str10.isBlank()로 체크

Ajax 통신 시 로딩바를 구현하는 방법은 여러 많은 블로그에서 확인할 수 있다.

여기서는 submit이나 location.href와 같은 페이지 이동 시 로딩바를 구현하는 방법에 대해 알아보자

1. 로딩바 gif 파일 다운로드

2. 프로젝트 이미지 폴더 안에 로딩바 gif 파일 넣기 (ex : img src='/images/loadingbar.gif')

3. script 태그 안 submit or location.href 전에 로딩바와 로딩 시 보여줄 배경 추가 후 보여주기

<script type="text/javascript">

	function save() {
		var backHeight = $(document).height(); // 로딩 시 보여줄 배경 높이
	   	var backWidth = window.document.body.clientWidth; // 로딩 시 보여줄 배경 너비
	   	var backGroundCover = "<div id='back'></div>";
	   	var loadingBarImage = "";
	   	loadingBarImage += "<div id='loadingBar'>";
		loadingBarImage += "     <img src='/images/loadingbar.gif' width='100' height='100'/>"; // 로딩바 이미지
		loadingBarImage += "</div>";
		$('body').append(backGroundCover).append(loadingBarImage);
		$('#back').css({ 'width':backWidth, 'height':backHeight, 'opacity':'0.3' });
		$('#back').show();
		$('#loadingBar').show();
		
		// 1. submit
		$('#saveForm').attr('method', 'POST');
		$('#saveForm').attr('action', '/save');
		$('#saveForm').submit();
		
		// 2. location.href
		var url = '/save'; 
		location.href = url;
	}
    
</script>

4. style 태그 안 코드 추가

<style type="text/css">

	#back {
		position:absolute;
		z-index:100;
		background-color:#000000;
		display:none;
		left:0;
		top:0;
	}
    
	#loadingBar { 
		position:absolute;
		left:50%;
		top:40%;
		display:none;
		z-index:200;
	}
    
</style>

Ajax 통신 시 complete 시점에서 아래 코드가 필요하지만 submit or location.href의 경우 페이지 이동에 의해

로딩바와 로딩 시 보여준 배경이 자동으로 숨김 및 제거된다.

$('#back, #loadingBar').hide();
$('#back, #loadingBar').remove();

<MySQL>

SHOW CREATE FUNCTION 함수명;

SHOW CREATE PROCEDURE 프로시저명;

SHOW CREATE TRIGGER 트리거명;

SHOW CREATE SEQUENCE 시퀀스명;

SHOW CREATE VIEW 뷰명;

<Oracle>

SELECT DBMS_METADATA.GET_DDL('FUNCTION', '함수명') AS FUNCTION_SRC
FROM DUAL;

SELECT DBMS_METADATA.GET_DDL('PROCEDURE', '프로시저명') AS FUNCTION_SRC
FROM DUAL;

SELECT DBMS_METADATA.GET_DDL('TRIGGER', '트리거명') AS FUNCTION_SRC
FROM DUAL;

SELECT DBMS_METADATA.GET_DDL('SEQUENCE', '시퀀스명') AS FUNCTION_SRC
FROM DUAL;

SELECT DBMS_METADATA.GET_DDL('VIEW', '뷰명') AS FUNCTION_SRC
FROM DUAL;

Web Server

Web Browser로부터 HTTP 요청을 받아 HTML 문서와 같은 정적 콘텐츠를 제공하기 위한 서버

(정적 콘텐츠 : HTML, CSS, IMAGE 등 어느 사용자의 요청이든 항상 동일한 콘텐츠)

Web Server는 Client로부터의 HTTP 요청을 받아 그 요청에 맞게 두 가지 중 하나를 선택하여 제공할 수 있다.

[Web Server의 기능]

정적인 콘텐츠 요청 시 : 정적 콘텐츠(HTML, CSS, IMAGE 등)를 제공할 수 있다.(WAS를 거치지 않고 바로 자원 제공)
동적인 콘텐츠 요청 시 : Client의 요청을 WAS(Web Application Server)로 보내고 WAS가 처리한 결과를 Client에게 전달하여 제공할 수 있다.

[Web Server의 예]

Apache, Nginx 등

WAS(Web Application Server)

DB 조회나 다양한 로직 처리를 요구하는 동적인 콘텐츠를 제공하기 위한 서버

HTTP를 통해 컴퓨터나 장치에 Application을 수행해 주는 미들웨어(소프트웨어 엔진)로

'웹 컨테이너(Web Container)' 또는 '서블릿 컨테이너(Servlet Container)'라고도 불린다.
(WAS = Web Server + Web Container)

[WAS의 기능]

Client로부터 HTTP 요청을 받을 수 있다.
요청에 맞는 정적 콘텐츠를 제공할 수 있다.
DB 조회나 다양한 로직 처리를 통해 동적 콘텐츠를 제공할 수 있다.
Web Server 기능들을 구조적으로 분리해 처리하고자 하는 목적으로 제시되었다.
(분산 트랜잭션, 보안, 메시징, 스레드 처리 등의 기능을 처리하는 분산 환경에서 사용 & 주로 DB 서버와 같이 수행)

[WAS의 예]

Tomcat, Jeus, JBoss, Web Sphere 등

[Web Server가 필요한 이유]

IMAGE 파일과 같은 정적인 파일들은 웹 문서(HTML 문서)가 Client로 보내질 때 함께 가는 것이 아니다.
Client는 HTML 문서를 먼저 받고 그에 맞게 필요한 IMAGE 파일들을 다시 서버로 요청하면 그제야 IMAGE 파일들을 받아오는 것이다.
Web Server를 통해 정적인 파일들은 WAS까지 가지 않고 앞단에서 빠르게 보내줄 수 있다.

[WAS가 필요한 이유]

웹 페이지에는 정적 콘텐츠와 동적 콘텐츠가 모두 존재한다.

이때, 사용자의 요청에 맞는 적절한 동적 콘텐츠를 제공할 수 있어야 하는데 Web Server만을 이용하여 제공하고자 한다면 사용자의 요청에 대한 결과값을 모두 미리 알고, 정적 콘텐츠를 만들어 놓은 상태에서 제공해야 하며 이는 사실상 불가능한 일이다. 따라서 WAS를 통해 요청에 맞는 데이터를 DB로부터 가져오고 비즈니스 로직에 따라 그때그때 결과를 만들어서 제공하는 것으로 자원을 효율적으로 사용할 수 있다.

[결론]

Web Server를 별도로 운영하는 이유는 WAS의 부담을 줄여주기 위함이다. HTML, CSS, IMAGE 등 정적인 파일들을 굳이 동적인 처리까지 담당하는 WAS까지 가지 않고 앞단에서 빠르게 보내어 서버의 부담을 줄이는 것이다.
따라서 Web Server를 통해 정적 콘텐츠만 처리하도록 기능을 분배하여 WAS의 부담을 줄일 수 있다.

[웹 서비스의 다양한 아키텍처 구조]

Client -> Web Server -> DB
Client -> WAS -> DB
Client -> Web Server -> WAS -> DB
Client -> Web Server -> 여러 개의 WAS -> DB

Web Server를 WAS 앞에 두고, 필요한 WAS들을 Web Server에 플러그인 형태로 설정하면 효율적인 분산 처리가 가능하다.